Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como desenvolver um framework Front End para ma...

Como desenvolver um framework Front End para mais de 70 milhões de usuários?

Vamos discutir organizacional e tecnicamente como se torna viável um projeto de tal magnitude, lições aprendidas, desafios superados e descobertas ao longo deste projeto, que visa atender diversos dispositivos e tipos de audiência diferente, focado em performance, mas também em qualidade e manutenabilidade.
Trata-se do trabalho feito para o desenvolvimento do novo Framework do Terra.

Felipe Nascimento de Moura

August 02, 2014
Tweet

More Decks by Felipe Nascimento de Moura

Other Decks in Technology

Transcript

  1. Como nasce um Framework para mais de 70 milhões de

    usuários? Felipe N. Moura @felipenmoura
  2. About me Profissional: Terra / BrazilJS Pessoal: Criatividade e ciência

    Contatos: http://felipenmoura.org/ @felipeNmoura
  3. De onde vêm os frameworks? + inspiração + política +

    análise + testes + documentação + desenvolvimento + treinamentos + experiência + agilidade + estabilidade + segurança == - manutenção
  4. + agilidade + estabilidade + segurança == - manutenção De

    onde vêm os frameworks? + inspiração + política + análise + testes + documentação + desenvolvimento + treinamentos + experiência
  5. Por que não usar um pronto? - experiencias anteriores não

    tão positivas - custo / know how - em casa
  6. Pequenos módulos Jaydson e Alberto começam a criar por conta

    própria, alguns novos módulos independentes
  7. Um framework para o Terra, não para o Portal -

    mobile - desktop - tablet - webmail - buscador - SVAs - etc
  8. Definições e Premissas Browsers: - As 3 últimas versões dos

    Major Browsers - Browser/Versão com mais de 1% de audiência
  9. Definições e Premissas Browsers: - As 3 últimas versões dos

    Major Browsers - Browser/Versão com mais de 1% de audiência * 1% pode ser um número bem grande!
  10. Definições e Premissas ES5: - Full support para features de

    ES5 - Uso de shims * Há MUITOS shims problemáticos out there!
  11. Definições e Premissas AMD: - Uso de AMD em projetos

    - Primariamente, utilizando Require.js
  12. Definições e Premissas AMD: - Uso de AMD em projetos

    - Primariamente, utilizando Require.js * Require.JS! aff
  13. Definições e Premissas SASS: - Uso de SASS nos projetos

    * É importante usar também sassLint
  14. Definições e Premissas Nunjucks: - Adotamos Nunjucks para templates *

    Nunjucks == Great * Nunjucks + Require.js == ¬¬
  15. - O novo portal precisava ser feito. - O novo

    framework precisava ser feito
  16. Ciclo de entrega - Desenvolvimento - Publicação em HLG -

    Publicação em PRD - Treinamento - Adaptação
  17. Factories: Modules zaz.use(function(pkg){ pkg.require(['modFactory'], function(ModFactory){ ModFactory.create({ name: "myMod", version: "1.0.0",

    setup: function(){}, teardown: function(){} }); }); }); … pkg.require(['mod.myMod'], function(myMod){...});
  18. Factories: Dictionaries pkg.require(['dictFactory'], function(DictFactory){ DictFactory.create({ name: "myDict", langs: { "global":

    { goal: ["gols", "gol"] }, "pt": { car: "Carro" }, "es": { car: "Coche" }, "en": { car: "Car" }, "pt-PT": { car: "Auto" } } }); });
  19. Factories: Components O mesmo que módulos, porém, DEVE retornar um

    objeto com: { API: { ... }, DOM: DOMElementNode }
  20. Factories: Apps zaz.use(function(pkg){ pkg.require(['appFactory'], function(AppFactory){ AppFactory.create({ name: "myApp", version: "1.0.0",

    dictionaries: [ ... ] templates: { ... } setup: function(__proto){}, init: function(){}, teardown: function(){} }); }); });
  21. Factories: Apps(scopes) zaz.use(function(pkg){ pkg.require(['appFactory'], function(AppFactory){ var PRIVATE= {}, STATIC= null;

    AppFactory.create({ name: "myApp", setup: function(__proto){ STATIC= this; }, init: function(){ var PUBLIC= this; ... return PUBLIC; } ...
  22. Factories: Apps(templates) Template: <div> <span>${variable | capitalize }</span> <span>%car</span> </div>

    Dentro do método init: var el= this.templates.render('tplId', { variable: "felipe" }); someContainer.appendChild(el);
  23. <div> <x-componentName attr1="valor"></x-componentName> </div> var rendered= this.templates.render('tplId'); var comp= rendered.getComponents('componentName')[0];

    comp.on('someEvent', function(data){...}); someContainer.appendChild(rendered); Factories: Apps(components)
  24. - Versões Stand Alone - Conflitos de CSS - IFrames?

    WebComponents? - Globais (JQuery, Require, Define…) - Reset + Normalize Desafio #6: Terceiros