• Like
Edição de conteúdo web usando Javascript de ponta a ponta
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Edição de conteúdo web usando Javascript de ponta a ponta

  • 2,126 views
Published

Porque utilizar um CMS sempre é tão complicado? Porque desenvolver para eles é sempre uma tarefa tão difícil para os desenvolvedores? …

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,126
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
36
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Pesquisainterna com a área de conteúdo.

Transcript

  • 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
  • 5.
  • 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.
  • 9.
  • 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.
  • 12.
  • 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