Front-End That Scales - TDC

Transcript

1. Matheus Azzi Front-End That Scales

2. Matheus Azzi www.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 +5 anos - 63 Devs

    - 1.566 Arquivos JS (no vendor) - 5.241 JS specs - 4.428 End-to-End specs - 14.176 Back-end specs - 74.700 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. Promoting Quality (automatizado) - Code Linters e Smells - Testes

    unitários - Testes End-to-End - code coverage

27. Promoting Quality (automatizado)

28. None

29. http://bit.ly/1C46ZKo Promoting Quality

30. └─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/

    └─ templates/ - Estrutura de diretórios Promoting Quality

31. └─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/

    └─ templates/ └─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/ - Estrutura de diretórios Promoting Quality

32. ├─ 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/ └─ ' Promoting Quality

33. 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; } Component == HTML + JS + CSS

34. Be in touch Have a direction

35. None

36. Qual Ferramenta Usar?

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

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

38. - Achismos Qual Ferramenta Usar?

39. - Achismos - Gostos Pessoais Qual Ferramenta Usar?

40. Você não pode ligar os pontos olhando pro futuro, você

    só consegue conectá-los olhando para o passado. Então você precisa acreditar quem em algum momento os pontos vão se conectar no futuro. Steve Jobs

41. - 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?

42. Qual Ferramenta Usar?

43. Qual Ferramenta Usar? Nem sempre a "melhor ferramenta" é a

    melhor ferramenta para seu projeto.

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

    - Features mudam, vem e vão - A/B Testing

45. Feature Flagging - Staff - Early Adopters - 10% dos

    usuários - 50% dos usuários - Global Release

46. 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>

47. Feature Flagging - Empregados podem mudar (on/off) essa flag a

    qualquer momento

48. Feature Flagging - Empregados podem mudar (on/off) essa flag a

    qualquer momento - Depois do release global a flag é removida se não for necessária

49. Feature Progression

50. Feature Progression

51. Tratamento de Erros Novas Features sempre trazem Novos Erros

52. Tratamento de Erros

53. { "user": { "pets": { "dogs": [ { "name": "Billy"

    }, ' ] } } } Tratamento de Erros

54. var dogName = (user + user.pets + Array.isArray(user.pets.dogs) + user.pets.dogs.length

    > 0 + user.pets.dogs[0].name ) , 'Marley'; console.log(dogName); { "user": { "pets": { "dogs": [ { "name": "Billy" }, ' ] } } } Tratamento de Erros

55. { "user": { "pets": { "dogs": [ { "name": "Billy"

    }, ' ] } } } Tratamento de Erros try { dogName = user.pets.dogs[0].name; } catch (e) { dogName = 'Marley'; } console.log(dogName);

56. var dogName = _.get(user, 'pets.dogs[0].name', 'Marley'); ( _.get(object, path, default);

    console.log(dogName); Tratamento de Erros

57. Tratamento de Erros - Tenha um error logger

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

    - { $.post('/api/errors', { error, script, lineNumber }) } Tratamento de Erros

59. Tratamento de Erros - Tenha um error logger

60. - Frequencia do erro (quantidade) - Device - Último evento

    - Qual usuário? - Stack trace Tratamento de Erros

61. - 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, ...