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!

@jwalendowskyjwalendowsky@ig.com