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

Front-End That Scales - RSJS

Front-End That Scales - RSJS

Matheus Azzi

April 09, 2017
Tweet

More Decks by Matheus Azzi

Other Decks in Programming

Transcript

  1. Matheus Azzi
    Front-End That
    Scales

    View Slide

  2. Matheus Azzi
    matheusazzi.com
    matheusazzi
    fb.com/matheusazzi
    Codeminer 42
    speakerdeck.com/matheusazzi
    [email protected]

    View Slide

  3. - Nossas aplicações estão mais complexas e
    é mais difícil mantê-las
    - Não são aplicações triviais

    View Slide

  4. Front-End is Hard
    - Um único event loop

    View Slide

  5. - Um único event loop
    - Tamanho da base de código importa
    Front-End is Hard

    View Slide

  6. - Um único event loop
    - transpilamos nosso código para outra versão
    - Tamanho da base de código importa
    Front-End is Hard

    View Slide

  7. - Um único event loop
    - transpilamos nosso código para outra versão
    - Tamanho da base de código importa
    - Diferentes devices
    Front-End is Hard

    View Slide

  8. Muito Javascript

    View Slide

  9. Muito Javascript
    Rodando no Browser

    View Slide

  10. Muito Javascript
    Rodando no Browser
    Escrito por muitas pessoas

    View Slide

  11. the app
    - Code base +6 anos
    - 63 Devs
    - 1.566 Arquivos JS (no vendor)
    - 5.241 JS specs
    - 4.428 End-to-End specs
    - 75.300 commits

    View Slide

  12. Todo código em qualquer aplicação
    deve parecer como se tivesse sido
    escrito por uma única pessoa,
    independentemente de quantas
    pessoas tenham contribuído.
    Rick Waldron
    Promoting Quality

    View Slide

  13. Promoting Quality
    - Pessoas vem e vão
    - Diferentes Skill sets
    - Compartilhe o conhecimento
    - Code Review

    View Slide

  14. USER INTERFACE APPLICATION
    BACK-END
    FRONT-END
    DESIGN
    Promoting Quality

    View Slide

  15. USER INTERFACE APPLICATION
    BACK-END
    FRONT-END
    DESIGN
    O front-end jamais vai escalar se o design não escala
    Promoting Quality

    View Slide

  16. Mais Funcionalidades == Mais código

    View Slide

  17. Styleguide
    - Component-driven Development
    - Componentes isolados para
    desenvolvimento
    - Arquitetura de CSS
    http://styleguides.io/

    View Slide

  18. Cada alteração feita deve
    deixar a code base melhor
    que estava antes.
    Sempre aumentar a
    qualidade, nunca diminuir
    "Albert Einstein"

    View Slide

  19. _shame.scss

    View Slide

  20. Perceived Performance

    View Slide

  21. Não precisa ser rápido,
    precisa parecer rápido
    Perceived Performance

    View Slide

  22. Application Shells

    View Slide

  23. Fake it until Make it

    View Slide

  24. Fake it until Make it

    View Slide

  25. Perceived Performance

    View Slide

  26. Tooling
    - Code Linters e Smells
    - Testes unitários
    - Testes End-to-End
    - code coverage

    View Slide

  27. └─ assets/
    ├─ images/
    ├─ scripts/
    ├─ specs/
    ├─ styles/
    └─ templates/
    └─ assets/
    ├─ feature-one/
    ├─ feature-two/
    ├─ feature-three/
    └─ common/
    Estrutura de Diretórios

    View Slide

  28. ├─ feature-one/
    │ ├─ header/
    │ │ ├─ header-component.js
    │ │ ├─ header-component-spec.js
    │ │ ├─ header-ctrl-spec.js
    │ │ ├─ header-ctrl.js
    │ │ ├─ header.html
    │ │ └─ _header.scss
    │ ├─ dashboard/
    │ │ └─ ...
    ├─ feature-two/
    │ └─ ...
    └─ feature-tree/
    └─ ...
    Estrutura de Diretórios

    View Slide

  29. Single File Components
    └─ components/
    ├─ shared/
    │ ├─ Sidebar.vue
    │ ├─ Header.vue
    │ ├─ Card.vue
    │ └─ ...
    ├─ shopping-cart/
    │ ├─ CartBasket.vue
    │ ├─ CartItem.vue
    │ ├─ CartSummary.vue
    │ ├─ Checkout.vue
    │ └─ ...
    └─ feature-two/
    └─ ...
    // Header.vue

    Hello {{username}}



    import Navigation from './shared/Navigation'
    import UserProfile from './shared/UserProfile'
    export default {
    username: 'Matheus',
    navItems: [
    { title: 'Dashboard', url: '/dashboard' },
    ...
    ]
    }
    .header {
    background: #262626;
    }
    .header-greeting {
    font-size: 16px;
    }
    UI Component == HTML + JS + CSS

    View Slide

  30. Qual Ferramenta Usar?

    View Slide

  31. As decisões mais
    importantes do projeto são
    tomadas no início, quando não
    sabemos muito sobre ele.
    Qual Ferramenta Usar?

    View Slide

  32. - Achismos
    Qual Ferramenta Usar?

    View Slide

  33. - Achismos
    - Gostos Pessoais
    Qual Ferramenta Usar?

    View Slide

  34. - Escolha as libs com cuidado, elas precisam continuar sendo mantidas
    - Pense no seu time, pense na curva de aprendizado
    - Não seja tão passional
    - Don't live on the edge
    Qual Ferramenta Usar?

    View Slide

  35. Qual Ferramenta Usar?

    View Slide

  36. http://goo.gl/KSFhHf

    View Slide

  37. Feature Flagging
    - Controlar quais usuários vão ver quais features
    - Features mudam, vem e vão
    - A/B Testing

    View Slide

  38. Feature Flagging
    - Staff
    - Early Adopters
    - 10% dos usuários
    - 50% dos usuários
    - Global Release

    View Slide

  39. Feature Flagging

    Dashboard
    Profile
    ng-if="currentUser.canAccess('shiny-thing')">
    New **Shiny ** Feature

    Another Feature

    View Slide

  40. Feature Flagging
    - Empregados podem mudar (on/off) essa
    flag a qualquer momento

    View Slide

  41. Feature Flagging
    - Empregados podem mudar (on/off) essa
    flag a qualquer momento
    - Depois do release global a flag é removida
    se não for mais necessária

    View Slide

  42. Feature Progression

    View Slide

  43. Tratamento de Erros
    Novas Features sempre trazem
    Novos Erros

    View Slide

  44. Tratamento de Erros
    - Tenha um error logger

    View Slide

  45. - Tenha um error logger
    window.onerror = (error, script, lineNumber) => {
    $.post('/api/errors', {
    error,
    script,
    lineNumber
    })
    }
    Tratamento de Erros

    View Slide

  46. Tratamento de Erros
    - Tenha um error logger

    View Slide

  47. - Frequência do erro (quantidade)
    - Device
    - Último evento
    - Qual usuário?
    - Stack trace
    Tratamento de Erros

    View Slide

  48. - Promova qualidade
    - Compartilhe o conhecimento
    - Automatize a qualidade
    - Mantenha um Styleguide
    - Component-Driven Development
    - Tenha processos (Code review, 1-1s, ...)
    - Pense em performance
    - Estruture por Feature
    - Feature Flagging
    - Pense como um time
    - Minimize os riscos
    - Logging, Monitore, ...

    View Slide

  49. Obrigado
    speakerdeck.com/matheusazzi

    View Slide