edição de conteúdo web usando javascript de ponta a ponta
DESCRIPTION
Porque utilizar um CMS sempre é tão complicado? Porque desenvolver para eles é sempre uma tarefa tão difícil para os desenvolvedores?Esta palestra mostrará como este problema vem sendo resolvido no iG usando o NodeJS para criar um sistema de edição de páginas web totalmente em Javascript e reaproveitar o código usado nos browsers dos editores. Mostraremos como a nova edição das homes do iG se beneficia da renderização dos templates usando Javascript e como as inovações dessa linguagem nos ajudaram a criar uma interface altamente intuitiva. Falaremos também sobre como o NodeJS em uma aplicação da “vida real” nos possibilitou criar um backend altamente escalável e facilitou o desenvolvimento de módulos robustos para edição simultânea, renderização, publicação de páginas, entre outros.TRANSCRIPT
![Page 1: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/1.jpg)
Edição de Homes com Javascript End to End
iG – Internet Group
![Page 2: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/2.jpg)
Agenda
• Cenário• Problemas• Premissas para a Solução• Sacadas• Um pouquinho de tecnologia• Futuro
![Page 3: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/3.jpg)
Cenário
![Page 4: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/4.jpg)
Cenário
![Page 5: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/5.jpg)
![Page 6: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/6.jpg)
Problemas
• Usabilidade – Pop-ups everywhere.– Pouco Intuitivo– Burocracia (muitas etapas).– Edição invasiva.– Trocas de layout (Mudar posição de blocos)
![Page 7: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/7.jpg)
Problemas
• Performance– Lentidão– Consumo (CPU, memória, etc.)– Tarefas desnecessárias (Geração de Cortes).– Demora para criar novos agendamentos.
![Page 8: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/8.jpg)
Problemas
• Dados duplicados.• Dificuldade para transmitir o conhecimento
sobre a ferramenta.• Inexistência de edição simultânea.
![Page 9: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/9.jpg)
![Page 10: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/10.jpg)
Premissas
• Manutenção das coisas boas do CMS anterior (ex.: facilidade para trocar chamadas, edição de cortes).
• Intuitividade.• Menos burocracia (pop-ups, confirmações...).• Agilidade.• Edição não invasiva.• Preview “quase” desnecessário.
![Page 11: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/11.jpg)
Premissas
• Facilidade para trocar layout.• Criação rápida de novos agendamentos.• Facilidade para desenvolver novos
componentes.• Edição simultânea.• Melhorar performance.• Liberar servidores.
![Page 12: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/12.jpg)
![Page 13: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/13.jpg)
Sacadas
• Interface Intuitiva– Idéias de interfaces de games.– Tudo que é necessário para editar uma página na
própria página.– Facilidade para acessar o conteúdo, paleta de
componentes, navegar por seções...– Arrastar e soltar para a maioria das tarefas.– Undo/Redo.
![Page 14: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/14.jpg)
Sacadas
• Usar mais as máquinas dos editores– Parque de máquinas padronizado
• 2Gb Ram• FF e Chrome
– Mais atividades nas máquinas dos editores.– Renderização, em tempo de edição, nas máquinas
dos editores– Carga do que for estritamente necessário.
![Page 15: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/15.jpg)
Sacadas
• Servidores Leves– Arquivos estáticos X conteúdo dinâmico.– REST.– NoSQL (MongoDB).
• Linguagem conhecida pelos programadores de frontend (webdevs)– Javascript.– CSS Selectors (JQuery like).
![Page 16: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/16.jpg)
Sacadas
• Modelo de dados simples e flexível (JSON).– Facilidade para:
• Adicionar campos, trocar tipos de componentes.• Realizar undo/redo.• Versionar.• Enviar deltas de alterações para outras máquinas
(edição simultânea).• Criação de Agendamento = Cópia de JSON• Natividade no JS.• Integração com NoSQLs.
![Page 17: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/17.jpg)
Frontend
![Page 18: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/18.jpg)
Renderização / Templates
• Premissa de usar a máquina do editor.• O que usar?
– Applets?– Flash?– Javascript!
• Como assim?
![Page 19: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/19.jpg)
Renderização / Templates
• Pure– http://beebole.com/pure/– Unobtrusive Templating (HTML longe da lógica).– Extensível ao jQuery.
![Page 20: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/20.jpg)
Renderização / Templates{ "dados": { "chamada": { "titulo": "Sou melhor do que bonita", "olho": "Três mulheres extraordinárias mostram que há mais do que beleza entre as suas qualidades", "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" }
![Page 21: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/21.jpg)
Renderização / Templates
HTML
<div class="CHE00206 gd6 fl"> <div class="wrapper"> <a href="" target="_self"><img src="" width="316" height="237" alt="" /></a> <div> <h2><a href=""></a></h2> <cite><a href=""></a></cite> </div> </div></div>
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" }
![Page 22: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/22.jpg)
Vamos ver como ficou?
![Page 23: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/23.jpg)
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.
![Page 24: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/24.jpg)
Edição
{ "componente" : { "fonte" : "chamada", "outline" : { "formulario" : FORMULARIO_PADRAO_CHAMADA },
"parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }
![Page 25: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/25.jpg)
Integrações
• Independência do CMS anterior– Não consumir serviços dele.
• Conteúdos personalizados por site (blogs de colunistas, galerias, etc.)
• SOLR– REST para consumir conteúdo editorial (notícias,
artigos, colunas, receitas, etc.).– Rapidez para pesquisar/atualizar conteúdo.
![Page 26: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/26.jpg)
Integrações
• Banco de Imagens– Por enquanto, pop-up.
• Blogs e Parceiros– RSS de colunistas.
• Catálogo de Componentes.• Futuro:
– Trending Topics do Twitter relacionados ao site?– Mapa de calor da página?– Teste A/B
![Page 27: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/27.jpg)
Drag and Drop
• Conteúdos integráveis, arrastáveis e soltáveis! :D
{ "componente" : { "fonte" : "chamada”, …
"drag" : DRAG_PADRAO_CHAMADA, "drop" : DROP_PADRAO_CHAMADA, … "parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }
![Page 28: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/28.jpg)
Backend
![Page 29: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/29.jpg)
NodeJS.org
• Server-side Javascript– Baseado no V8 (engine Javascript do Chrome).– Muito leve
• Orientado a eventos– Processos > threads > ciclos– Um thread trata diversas requisições.– Tudo assíncrono para que a mágica funcione.
![Page 30: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/30.jpg)
NodeJS.org
• Muitos módulos disponíveis.– Contribuições no Github– NPM
• sudo npm install modulo• var mod = require(“modulo”);
![Page 31: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/31.jpg)
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);
![Page 32: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/32.jpg)
Publicação e Preview
• Como publicar estaticamente de maneira previsível no servidor?
• O que usar?– Por que não Javascript?– No servidor?– Janela de browser no servidor?
![Page 33: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/33.jpg)
Publicação e Preview
• JSDOM– Módulo do NodeJS.– https://github.com/tmpvar/jsdom– Container DOM para interpretar o documento.
• Worker processes– Renderizar consome muita CPU.
![Page 34: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/34.jpg)
Edição Simultânea
• Google Docs Like? Almost. • Comandos remotos.• Undo/Redo remotos.• Controle de versões das alterações.• Reserva de componentes e containers.• Conteúdo “desreservado” considerado pronto
para publicação.
![Page 35: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/35.jpg)
Edição Simultânea
• HTML5.• Web Sockets.• NodeJS workers.• Incrivelmente fácil.
![Page 36: Edição de conteúdo web usando Javascript de ponta a ponta](https://reader033.vdocuments.mx/reader033/viewer/2022052522/54b550e44a7959b92c8b45cb/html5/thumbnails/36.jpg)
O que vem por aí…
• Edição do conteúdo (notícias, colunas, artigos…)
• Edição Inline? Com HTML5?• Touch Screen?• Dispositivos móveis?• Open source?