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. - Nossas aplicações estão mais complexas e é mais difícil

    mantê-las - Não são aplicações triviais
  2. - Um único event loop - Tamanho da base de

    código importa Front-End is Hard
  3. - Um único event loop - transpilamos nosso código para

    outra versão - Tamanho da base de código importa Front-End is Hard
  4. - 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
  5. 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
  6. 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
  7. Promoting Quality - Pessoas vem e vão - Diferentes Skill

    sets - Compartilhe o conhecimento - Code Review
  8. USER INTERFACE APPLICATION BACK-END FRONT-END DESIGN O front-end jamais vai

    escalar se o design não escala Promoting Quality
  9. Cada alteração feita deve deixar a code base melhor que

    estava antes. Sempre aumentar a qualidade, nunca diminuir "Albert Einstein"
  10. Tooling - Code Linters e Smells - Testes unitários -

    Testes End-to-End - code coverage
  11. └─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/

    └─ templates/ └─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/ Estrutura de Diretórios
  12. ├─ 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
  13. 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 <header class="header"> <p class="header-greeting">Hello {{username}} </p> <navigation :items="navItems"> </navigation> <user-profile> </user-profile> </header> 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
  14. As decisões mais importantes do projeto são tomadas no início,

    quando não sabemos muito sobre ele. Qual Ferramenta Usar?
  15. - 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?
  16. Feature Flagging - Staff - Early Adopters - 10% dos

    usuários - 50% dos usuários - Global Release
  17. 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
  18. - Tenha um error logger window.onerror = (error, script, lineNumber)

    => { $.post('/api/errors', { error, script, lineNumber }) } Tratamento de Erros
  19. - Frequência do erro (quantidade) - Device - Último evento

    - Qual usuário? - Stack trace Tratamento de Erros
  20. - 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, ...