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
   

   View Slide

2. About me
   Profissional: Terra / BrazilJS
   Pessoal: Criatividade e ciência
   Contatos: http://felipenmoura.org/
   @felipeNmoura
   

   View Slide

3. Mergulhando...
   

   View Slide

4. De onde vêm os frameworks?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Por que não usar um pronto?
   - experiencias anteriores
   não tão positivas
   - custo / know how
   - em casa
   

   View Slide

8. Desafio #1: Politics
   

   View Slide

9. View Slide

10. Pequenos módulos
    Jaydson e Alberto
    começam a criar por
    conta própria, alguns
    novos módulos
    independentes
    

    View Slide

11. Timing!!
    

    View Slide

12. Nova Capa
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. Homenagem às origens
    

    View Slide

17. ZaZ !== NaN
    

    View Slide

18. Apesar de alguma resitência...
    

    View Slide

19. O time é montado … C4
    

    View Slide

20. View Slide

21. Felipe Beto
    

    View Slide

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

    View Slide

23. Um framework para o Terra, não para o Portal
    - mobile
    - desktop
    - tablet
    - webmail
    - buscador
    - SVAs
    - etc
    

    View Slide

24. View Slide

25. View Slide

26. Não vou mentir...
    houveram baixas!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. Levantamento de alternativas
    

    View Slide

32. Ler, ler, e ler mais!
    

    View Slide

33. Sinuca!
    

    View Slide

34. Hora de testar e validar!
    

    View Slide

35. Sinuca!
    Sinuca!
    

    View Slide

36. Hora de escolher a oficial
    

    View Slide

37. View Slide

38. Definições e Premissas
    

    View Slide

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

    View Slide

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!
    

    View Slide

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

    View Slide

42. Definições e Premissas
    ES5:
    - Full support para features de ES5
    - Uso de shims
    * Há MUITOS shims problemáticos out there!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Definições e Premissas
    SASS:
    - Uso de SASS nos projetos
    * É importante usar também sassLint
    

    View Slide

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

    View Slide

48. Definições e Premissas
    Nunjucks:
    - Adotamos Nunjucks para templates
    * Nunjucks == Great
    * Nunjucks + Require.js == ¬¬
    

    View Slide

49. Desafio #3: Vícios
    

    View Slide

50. "USE STRICT";
    

    View Slide

51. USE THE FUCK STRICT!
    

    View Slide

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

    View Slide

53. Unit Test EVERYTHING!
    

    View Slide

54. Desafio #4: Environment
    

    View Slide

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

    View Slide

56. Jenkins
    

    View Slide

57. zaz-center
    

    View Slide

58. Morph
    

    View Slide

59. Heimdal
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. BoTrr
    

    View Slide

64. BoTrr
    

    View Slide

65. Includer (BE e FE)
    

    View Slide

66. Watson
    

    View Slide

67. Desafio #5: Análise e Desenvolvimento
    

    View Slide

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

    View Slide

69. View Slide

70. Ciclo de entrega
    - Desenvolvimento
    - Publicação em HLG
    - Publicação em PRD
    - Treinamento
    - Adaptação
    

    View Slide

71. zaz.use(function(pkg){
    // do stuff with pkg
    });
    Uso básico
    

    View Slide

72. View Slide

73. Contextos
    

    View Slide

74. browser page user platform
    Contextos
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. Factories
    

    View Slide

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

    View Slide

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

    View Slide

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){...});
    

    View Slide

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

    View Slide

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" }
    }
    });
    });
    

    View Slide

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

    View Slide

85. Factories: Components
    O mesmo que módulos, porém, DEVE retornar um objeto com:
    {
    API: { ... },
    DOM: DOMElementNode
    }
    

    View Slide

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

    View Slide

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(){}
    });
    });
    });
    

    View Slide

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;
    }
    ...
    

    View Slide

89. Factories: Apps(templates)
    Template:
    
    ${variable | capitalize }
    %car
    
    Dentro do método init:
    var el= this.templates.render('tplId', { variable: "felipe" });
    someContainer.appendChild(el);
    

    View Slide

90. 
    %goal
    
    Factories: Apps(templates/plurais)
    %goal(1)
    %goal(${numGoals})
    this.templates.render('tplId', { numGoals: 3 });
    

    View Slide

91. 
    
    
    var rendered= this.templates.render('tplId');
    var comp= rendered.getComponents('componentName')[0];
    comp.on('someEvent', function(data){...});
    someContainer.appendChild(rendered);
    Factories: Apps(components)
    

    View Slide

92. - Modules
    - Dictionaries
    - Components
    - Apps
    - Contents
    - UI
    Factories
    TODO
    

    View Slide

93. Desafio #6: Terceiros
    

    View Slide

94. - Versões Stand Alone
    - Conflitos de CSS
    - IFrames? WebComponents?
    - Globais (JQuery, Require, Define…)
    - Reset + Normalize
    Desafio #6: Terceiros
    

    View Slide

95. Valeu! _\,,/
    @felipeNmoura
    fb.com/felipeNmoura
    felipeNmoura.org
    

    View Slide