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.

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