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.

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

    View full-size slide

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

    View full-size slide

  3. Mergulhando...

    View full-size slide

  4. De onde vêm os frameworks?

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  8. Desafio #1: Politics

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Homenagem às origens

    View full-size slide

  14. Apesar de alguma resitência...

    View full-size slide

  15. O time é montado … C4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Levantamento de alternativas

    View full-size slide

  24. Ler, ler, e ler mais!

    View full-size slide

  25. Hora de testar e validar!

    View full-size slide

  26. Sinuca!
    Sinuca!

    View full-size slide

  27. Hora de escolher a oficial

    View full-size slide

  28. Definições e Premissas

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Desafio #3: Vícios

    View full-size slide

  40. "USE STRICT";

    View full-size slide

  41. USE THE FUCK STRICT!

    View full-size slide

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

    View full-size slide

  43. Unit Test EVERYTHING!

    View full-size slide

  44. Desafio #4: Environment

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. J.a.r.v.i.S.

    View full-size slide

  48. J.a.r.v.i.S.

    View full-size slide

  49. Includer (BE e FE)

    View full-size slide

  50. Desafio #5: Análise e Desenvolvimento

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. browser page user platform
    Contextos

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. 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 full-size slide

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

    View full-size slide

  62. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. Factories: Apps(templates)
    Template:

    ${variable | capitalize }
    %car

    Dentro do método init:
    var el= this.templates.render('tplId', { variable: "felipe" });
    someContainer.appendChild(el);

    View full-size slide


  69. %goal

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

    View full-size slide




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

    View full-size slide

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

    View full-size slide

  72. Desafio #6: Terceiros

    View full-size slide

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

    View full-size slide

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

    View full-size slide