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

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

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.

929ed9958756c5c829a9eed068910646?s=128

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. Mergulhando...

  4. De onde vêm os frameworks?

  5. 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
  6. + 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
  7. Por que não usar um pronto? - experiencias anteriores não

    tão positivas - custo / know how - em casa
  8. Desafio #1: Politics

  9. None
  10. Pequenos módulos Jaydson e Alberto começam a criar por conta

    própria, alguns novos módulos independentes
  11. Timing!!

  12. Nova Capa

  13. how about... a new framework, then?

  14. how about... a new framework, then? ZaZ

  15. how about... a new framework, then? ZaZ

  16. Homenagem às origens

  17. ZaZ !== NaN

  18. Apesar de alguma resitência...

  19. O time é montado … C4

  20. None
  21. Felipe Beto

  22. Ao time, foi dado: - liberdade - poder de decisão

    - responsabilidades - acesso
  23. Um framework para o Terra, não para o Portal -

    mobile - desktop - tablet - webmail - buscador - SVAs - etc
  24. None
  25. None
  26. Não vou mentir... houveram baixas!

  27. Com o tempo, vieram reforços! Átila

  28. Desafio #2: Decisions, decisions, decisions!

  29. No Scrum! DOG! (Desenvolvimento Orientado a Github)

  30. Ciclo de vida das decisões...

  31. Levantamento de alternativas

  32. Ler, ler, e ler mais!

  33. Sinuca!

  34. Hora de testar e validar!

  35. Sinuca! Sinuca!

  36. Hora de escolher a oficial

  37. None
  38. Definições e Premissas

  39. Definições e Premissas Browsers: - As 3 últimas versões dos

    Major Browsers - Browser/Versão com mais de 1% de audiência
  40. 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!
  41. Definições e Premissas ES5: - Full support para features de

    ES5 - Uso de shims
  42. Definições e Premissas ES5: - Full support para features de

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

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

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

  46. Definições e Premissas SASS: - Uso de SASS nos projetos

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

  48. Definições e Premissas Nunjucks: - Adotamos Nunjucks para templates *

    Nunjucks == Great * Nunjucks + Require.js == ¬¬
  49. Desafio #3: Vícios

  50. "USE STRICT";

  51. USE THE FUCK STRICT!

  52. HINT IT! (js, json, css, sass) * HTML Linters são

    MUITO lentos!
  53. Unit Test EVERYTHING!

  54. Desafio #4: Environment

  55. - Sass - Ícones - Uglify - YUIDocs - Linters

  56. Jenkins

  57. zaz-center

  58. Morph

  59. Heimdal

  60. Heimdal zaz.use(function(pkg){ // !include src/partials/foo.js });

  61. J.a.r.v.i.S.

  62. J.a.r.v.i.S.

  63. BoTrr

  64. BoTrr

  65. Includer (BE e FE)

  66. Watson

  67. Desafio #5: Análise e Desenvolvimento

  68. - O novo portal precisava ser feito. - O novo

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

    Publicação em PRD - Treinamento - Adaptação
  71. zaz.use(function(pkg){ // do stuff with pkg }); Uso básico

  72. None
  73. Contextos

  74. browser page user platform Contextos

  75. zaz.use(function(pkg){ console.log( pkg.context.page.list() ); }); pkg.context

  76. zaz.use(function(pkg){ pkg.context.user.on('sign', function(newSign){ alert('mudou o signo para ' + newSign);

    }); }); Observáveis
  77. zaz.use(function(pkg){ pkg.context.user.set('sign', 'cancer'); }); Observáveis

  78. Factories

  79. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories
  80. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories
  81. 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){...});
  82. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories
  83. 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" } } }); });
  84. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories
  85. Factories: Components O mesmo que módulos, porém, DEVE retornar um

    objeto com: { API: { ... }, DOM: DOMElementNode }
  86. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories
  87. 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(){} }); }); });
  88. 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; } ...
  89. 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);
  90. <div> <span>%goal</span> </div> Factories: Apps(templates/plurais) <span>%goal(1)</span> <span>%goal(${numGoals})</span> this.templates.render('tplId', { numGoals:

    3 });
  91. <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)
  92. - Modules - Dictionaries - Components - Apps - Contents

    - UI Factories TODO
  93. Desafio #6: Terceiros

  94. - Versões Stand Alone - Conflitos de CSS - IFrames?

    WebComponents? - Globais (JQuery, Require, Define…) - Reset + Normalize Desafio #6: Terceiros
  95. Valeu! _\,,/ @felipeNmoura fb.com/felipeNmoura felipeNmoura.org