Front-End That Scales - RSJS

Transcript

1. Matheus Azzi
   Front-End That
   Scales
   

   View Slide

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

   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