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 End iG – Internet Group

2. Agenda Cenário Problemas Premissaspara a Solução Sacadas Um pouquinho de tecnologia Futuro

3. Cenário

4. Cenário

6. Problemas Usabilidade Pop-ups everywhere. PoucoIntuitivo Burocracia (muitasetapas). Ediçãoinvasiva. Trocas de layout (Mudarposição de blocos)

7. Problemas Performance Lentidão Consumo (CPU, memória, etc.) Tarefasdesnecessárias (Geração de Cortes). Demoraparacriarnovosagendamentos.

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

10. Premissas Manutençã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. Premissas Facilidadeparatrocar layout. Criaçãorápida de novosagendamentos. Facilidadeparadesenvolvernovoscomponentes. Ediçãosimultânea. Melhorar performance. Liberarservidores.

13. Sacadas Interface Intuitiva Idé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. Sacadas Usarmais as máquinas dos editores Parque de máquinaspadronizado 2Gb Ram FF e Chrome Maisatividadesnasmáquinas dos editores. Renderização, em tempo de edição, nasmáquinas dos editores Cargado que for estritamentenecessário.

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

16. Sacadas Modelo 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 JSON Natividade no JS. Integração com NoSQLs.

17. Frontend

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

19. Renderização / Templates Pure http://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 / Templates LÓ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ção WYSIWYG – 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ções Independência do CMS anterior Nãoconsumirserviços dele. Conteúdospersonalizadospor site (blogs de colunistas, galerias, etc.) SOLR REST paraconsumirconteúdo editorial (notícias, artigos, colunas, receitas, etc.). Rapidezparapesquisar/atualizarconteúdo.

26. Integrações Banco de Imagens Porenquanto, pop-up. Blogs eParceiros RSS de colunistas. Catálogo de Componentes. Futuro: Trending Topics do Twitter relacionadosao site? Mapa de calordapágina? Teste A/B

27. Drag and Drop Conteú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.org Server-side Javascript Baseado no V8 (engine Javascript do Chrome). Muitoleve Orientado a eventos Processos > threads > ciclos Um thread tratadiversasrequisições. Tudoassíncronoparaque a mágicafuncione.

30. NodeJS.org Muitosmódulosdisponíveis. Contribuições no Github NPM sudonpm install modulo var mod = require(“modulo”);

31. Tratamento de Requisições Express http://expressjs.com/ Roteamento Tratamento 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 Preview Como publicarestaticamente de maneiraprevisível no servidor? O queusar? PorquenãoJavascript? No servidor? Janela de browser no servidor?

33. Publicação e Preview JSDOM Módulodo NodeJS. https://github.com/tmpvar/jsdom Container DOM parainterpretarodocumento. Worker processes Renderizarconsomemuita CPU.

34. EdiçãoSimultânea Google 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ânea HTML5. 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! @jwalendowsky jwalendowsky@ig.com