Edição de conteúdo web usando Javascript de ponta a ponta
-
Upload
jwalendowsky -
Category
Technology
-
view
2.123 -
download
0
description
Transcript of Edição de conteúdo web usando Javascript de ponta a ponta
Edição de Homes com Javascript End to End
iG – Internet Group
Agenda
• Cenário• Problemas• Premissas para a Solução• Sacadas• Um pouquinho de tecnologia• Futuro
Cenário
Cenário
Problemas
• Usabilidade – Pop-ups everywhere.– Pouco Intuitivo– Burocracia (muitas etapas).– Edição invasiva.– Trocas de layout (Mudar posição de blocos)
Problemas
• Performance– Lentidão– Consumo (CPU, memória, etc.)– Tarefas desnecessárias (Geração de Cortes).– Demora para criar novos agendamentos.
Problemas
• Dados duplicados.• Dificuldade para transmitir o conhecimento
sobre a ferramenta.• Inexistência de edição simultânea.
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.
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.
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.
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.
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).
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.
Frontend
Renderização / Templates
• Premissa de usar a máquina do editor.• O que usar?
– Applets?– Flash?– Javascript!
• Como assim?
Renderização / Templates
• Pure– http://beebole.com/pure/– Unobtrusive Templating (HTML longe da lógica).– Extensível ao jQuery.
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" }
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" }
Vamos ver como ficou?
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.
Edição
{ "componente" : { "fonte" : "chamada", "outline" : { "formulario" : FORMULARIO_PADRAO_CHAMADA },
"parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }
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.
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
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 } ] } } }
Backend
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.
NodeJS.org
• Muitos módulos disponíveis.– Contribuições no Github– NPM
• sudo npm install modulo• var mod = require(“modulo”);
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);
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?
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.
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.
Edição Simultânea
• HTML5.• Web Sockets.• NodeJS workers.• Incrivelmente fácil.
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?
That’s all folks!