O documento discute o desenvolvimento de um sistema de edição de conteúdo em tempo real usando Javascript. Ele aborda problemas com sistemas anteriores, premissas para a nova solução, como renderização, edição, integrações e edição simultânea funcionariam usando tecnologias como Node.js, MongoDB e Web Sockets.

1. Edição de Homes com Javascript End to EndiG – Internet Group

2. AgendaCenárioProblemasPremissaspara a SoluçãoSacadasUm pouquinho de tecnologiaFuturo

3. Cenário

4. Cenário

6. ProblemasUsabilidadePop-ups everywhere.PoucoIntuitivoBurocracia (muitasetapas).Ediçãoinvasiva.Trocas de layout (Mudarposição de blocos)

7. ProblemasPerformanceLentidãoConsumo (CPU, memória, etc.)Tarefasdesnecessárias (Geração de Cortes).Demoraparacriarnovosagendamentos.

8. ProblemasDados duplicados.Dificuldadeparatransmitiroconhecimentosobre a ferramenta.Inexistência de ediçãosimultânea.

10. PremissasManutenção das coisas boas do CMS anterior (ex.: facilidadeparatrocarchamadas, edição de cortes).Intuitividade.Menosburocracia (pop-ups, confirmações...).Agilidade.Ediçãonãoinvasiva.Preview “quase” desnecessário.

11. PremissasFacilidadeparatrocar layout.Criaçãorápida de novosagendamentos.Facilidadeparadesenvolvernovoscomponentes.Ediçãosimultânea.Melhorar performance.Liberarservidores.

13. SacadasInterface IntuitivaIdéias de interfaces de games.Tudoqueénecessárioparaeditarumapáginanaprópriapágina.Facilidadeparaacessaroconteúdo, paleta de componentes, navegarporseções...Arrastaresoltarpara a maioria das tarefas.Undo/Redo.

14. SacadasUsarmais as máquinas dos editoresParque de máquinaspadronizado2Gb RamFF e ChromeMaisatividadesnasmáquinas dos editores.Renderização, em tempo de edição, nasmáquinas dos editoresCargado que for estritamentenecessário.

15. SacadasServidoresLevesArquivosestáticos X conteúdodinâmico.REST.NoSQL (MongoDB).Linguagemconhecidapelosprogramadores de frontend (webdevs)Javascript.CSS Selectors (JQuery like).

16. SacadasModelo de dados simples eflexível (JSON).Facilidadepara:Adicionarcampos, trocartipos de componentes.Realizar undo/redo.Versionar.Enviar deltas de alteraçõesparaoutrasmáquinas (ediçãosimultânea).Criação de Agendamento = Cópia de JSONNatividade no JS.Integração com NoSQLs.

17. Frontend

18. Renderização / TemplatesPremissa de usar a máquina do editor.O queusar?Applets?Flash?Javascript!Como assim?

19. Renderização / TemplatesPurehttp://beebole.com/pure/Unobtrusive Templating (HTML longedalógica).ExtensívelaojQuery.

20. Renderização / Templates{ "dados": { "chamada": { "titulo": "Soumelhor do quebonita", "olho": "Trêsmulheresextraordináriasmostramquehámais do quebeleza entre as suasqualidades", "link": "http://delas.ig.com.br/comportamento/sou+melhor+do+que+bonita/n1597180210444.html", "imagem": "", "data": "Mon, 29 Aug 2011, 05:57:07 -0300", "imagens": { "imagem_316_237": "http://i0.ig.com/bancodeimagens/0y/gq/nk/0ygqnkhmdanz7pv5c3ef4pqq8.jpg", "corte_316_237": "103991" }, "chapeu": null, "externo": false } }, "tipo": "CHE00206", "especie": "componente", "id": "8ABE3E6B-9EB2-47D3-A39F-90222F102257" }

21. Renderização / TemplatesLÓGICA{ "a@target" : function(obj) { return (obj.context.chamada && obj.context.chamada.externo) ? "_blank" : ""; }, "div > a img@src" : "chamada.imagens.imagem_316_237", "div a@href" : "chamada.link", "div a@title" : "chamada.titulo", "div div h2 a" : "chamada.titulo", "div div cite a" : "chamada.olho" }HTML<div class="CHE00206 gd6 fl"> <div class="wrapper"> <a href="" target="_self"><imgsrc="" width="316" height="237" alt="" /></a> <div> <h2><a href=""></a></h2> <cite><a href=""></a></cite> </div> </div></div>

22. Vamos ver como ficou?

23. EdiçãoWYSIWYG – What you see is what you get!Edição só é perceptível quando passamos o mouse por cima dos componentes.Undo/Redo.Editores só são carregados se for solicitada a edição.Lógica de edição fora do HTML do componente.

24. Edição{ "componente" : { "fonte" : "chamada", "outline" : { "formulario" : FORMULARIO_PADRAO_CHAMADA }, "parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }

25. IntegraçõesIndependência do CMS anteriorNãoconsumirserviços dele.Conteúdospersonalizadospor site (blogs de colunistas, galerias, etc.)SOLRREST paraconsumirconteúdo editorial (notícias, artigos, colunas, receitas, etc.).Rapidezparapesquisar/atualizarconteúdo.

26. IntegraçõesBanco de ImagensPorenquanto, pop-up.Blogs eParceirosRSS de colunistas.Catálogo de Componentes.Futuro: Trending Topics do Twitter relacionadosao site?Mapa de calordapágina?Teste A/B

27. Drag and DropConteúdosintegráveis, arrastáveisesoltáveis! :D{ "componente" : { "fonte" : "chamada”, … "drag" : DRAG_PADRAO_CHAMADA, "drop" : DROP_PADRAO_CHAMADA, … "parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }

28. Backend

29. NodeJS.orgServer-side JavascriptBaseado no V8 (engine Javascript do Chrome).MuitoleveOrientado a eventosProcessos > threads > ciclosUm thread tratadiversasrequisições.Tudoassíncronoparaque a mágicafuncione.

30. NodeJS.orgMuitosmódulosdisponíveis.Contribuições no GithubNPMsudonpm install modulovar mod = require(“modulo”);

31. Tratamento de RequisiçõesExpresshttp://expressjs.com/RoteamentoTratamento das requisições (marshalling/unmarshalling de JSON).var app = express.createServer();app.get('/', function(req, res){res.send('Hello World');});app.listen(3000);

32. Publicação e PreviewComo publicarestaticamente de maneiraprevisível no servidor?O queusar?PorquenãoJavascript?No servidor?Janela de browser no servidor?

33. Publicação e PreviewJSDOMMódulodo NodeJS.https://github.com/tmpvar/jsdomContainer DOM parainterpretarodocumento.Worker processesRenderizarconsomemuita CPU.

34. EdiçãoSimultâneaGoogle Docs Like? Almost. Comandosremotos.Undo/Redo remotos.Controle de versões das alterações.Reserva de componentese containers.Conteúdo “desreservado” considerado pronto parapublicação.

35. Edição SimultâneaHTML5.Web Sockets.NodeJS workers.Incrivelmentefácil.

36. O que vem por aí…Edição do conteúdo (notícias, colunas, artigos…)Edição Inline? Com HTML5?Touch Screen?Dispositivosmóveis?Open source?

37. That’s all folks!@jwalendowskyjwalendowsky@ig.com