Front-End That Scales - RSJS

Front-End That Scales - RSJS

8920246f63abbfdeb84bb1bfb2d2e4fd?s=128

Matheus Azzi

April 09, 2017
Tweet

Transcript

  1. Matheus Azzi Front-End That Scales

  2. Matheus Azzi matheusazzi.com matheusazzi fb.com/matheusazzi Codeminer 42 speakerdeck.com/matheusazzi matheus.azzi@codeminer42.com

  3. - Nossas aplicações estão mais complexas e é mais difícil

    mantê-las - Não são aplicações triviais
  4. Front-End is Hard - Um único event loop

  5. - Um único event loop - Tamanho da base de

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

    outra versão - Tamanho da base de código importa Front-End is Hard
  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
  8. Muito Javascript

  9. Muito Javascript Rodando no Browser

  10. Muito Javascript Rodando no Browser Escrito por muitas pessoas

  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
  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
  13. Promoting Quality - Pessoas vem e vão - Diferentes Skill

    sets - Compartilhe o conhecimento - Code Review
  14. USER INTERFACE APPLICATION BACK-END FRONT-END DESIGN Promoting Quality

  15. USER INTERFACE APPLICATION BACK-END FRONT-END DESIGN O front-end jamais vai

    escalar se o design não escala Promoting Quality
  16. Mais Funcionalidades == Mais código

  17. Styleguide - Component-driven Development - Componentes isolados para desenvolvimento -

    Arquitetura de CSS http://styleguides.io/
  18. Cada alteração feita deve deixar a code base melhor que

    estava antes. Sempre aumentar a qualidade, nunca diminuir "Albert Einstein"
  19. _shame.scss

  20. Perceived Performance

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

  22. Application Shells

  23. Fake it until Make it

  24. Fake it until Make it

  25. Perceived Performance

  26. Tooling - Code Linters e Smells - Testes unitários -

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

    └─ templates/ └─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/ Estrutura de Diretórios
  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
  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 <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
  30. Qual Ferramenta Usar?

  31. As decisões mais importantes do projeto são tomadas no início,

    quando não sabemos muito sobre ele. Qual Ferramenta Usar?
  32. - Achismos Qual Ferramenta Usar?

  33. - Achismos - Gostos Pessoais Qual Ferramenta Usar?

  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?
  35. Qual Ferramenta Usar?

  36. http://goo.gl/KSFhHf

  37. Feature Flagging - Controlar quais usuários vão ver quais features

    - Features mudam, vem e vão - A/B Testing
  38. Feature Flagging - Staff - Early Adopters - 10% dos

    usuários - 50% dos usuários - Global Release
  39. Feature Flagging <tabs> <tab-item>Dashboard </tab-item> <tab-item>Profile </tab-item> <tab-item ng-if="currentUser.canAccess('shiny-thing')"> New

    **Shiny ** Feature </tab-item> <tab-item>Another Feature </tab-item> </tabs>
  40. Feature Flagging - Empregados podem mudar (on/off) essa flag a

    qualquer momento
  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
  42. Feature Progression

  43. Tratamento de Erros Novas Features sempre trazem Novos Erros

  44. Tratamento de Erros - Tenha um error logger

  45. - Tenha um error logger window.onerror = (error, script, lineNumber)

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

  47. - Frequência do erro (quantidade) - Device - Último evento

    - Qual usuário? - Stack trace Tratamento de Erros
  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, ...
  49. Obrigado speakerdeck.com/matheusazzi