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

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