O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TDC2016POA | Trilha Web - Front-end that scales

183 visualizações

Publicada em

Front-end that scales

Publicada em: Educação
  • Seja o primeiro a comentar

TDC2016POA | Trilha Web - Front-end that scales

  1. 1. Matheus Azzi Front-EndThat Scales
  2. 2. MatheusAzzi www.matheusazzi.com matheusazzi fb.com/matheusazzi Codeminer 42 speakerdeck.com/matheusazzi matheus.azzi@codeminer42.com
  3. 3. - Nossas aplicações estão mais complexas e é mais difícil mantê-las - Não são aplicações triviais
  4. 4. Front-End is Hard - Um único event loop
  5. 5. - Um único event loop - Tamanho da base de código Front-End is Hard
  6. 6. - Um único event loop - transpilamos nosso código para outra versão - Tamanho da base de código Front-End is Hard
  7. 7. - Um único event loop - transpilamos nosso código para outra versão - Tamanho da base de código - Diferentes devices Front-End is Hard
  8. 8. Muito Javascript
  9. 9. Muito Javascript Rodando no Browser
  10. 10. Muito Javascript Rodando no Browser Escrito por muitas pessoas
  11. 11. the app -Code base +5 anos -63 Devs -1.566 Arquivos JS (novendor) -5.241 JS specs -4.428 End-to-End specs -14.176 Back-end specs -74.700 commits
  12. 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. 13. Promoting Quality -Pessoas vem e vão -Diferentes Skill sets -Compartilhe o conhecimento -Code Review
  14. 14. USER INTERFACE APPLICATION BACK-ENDFRONT-ENDDESIGN Promoting Quality
  15. 15. USER INTERFACE APPLICATION BACK-ENDFRONT-ENDDESIGN O front-end jamais vai escalar se o design não escala Promoting Quality
  16. 16. Mais Funcionalidades==Mais código
  17. 17. Styleguide -Component-driven Development -Componentes isolados para desenvolvimento -Arquitetura de CSS http://styleguides.io/
  18. 18. Cada alteração feita deve deixar a code base melhor que estava antes. Sempre aumentar a qualidade, nunca diminuir "Albert Einstein"
  19. 19. _shame.scss
  20. 20. Perceived Performance
  21. 21. Não precisa ser rápido, precisa parecer rápido Perceived Performance
  22. 22. Application Shells
  23. 23. Fake it until Make it
  24. 24. Fake it until Make it
  25. 25. Perceived Performance
  26. 26. Promoting Quality(automatizado) -CodeLinters e Smells -Testes unitários -Testes End-to-End -code coverage
  27. 27. Promoting Quality(automatizado)
  28. 28. http://bit.ly/1C46ZKo Promoting Quality
  29. 29. └─ assets/    ├─ images/    ├─ scripts/    ├─ specs/    ├─ styles/   └─ templates/ -Estruturadediretórios Promoting Quality
  30. 30. └─ assets/    ├─ images/    ├─ scripts/    ├─ specs/    ├─ styles/   └─ templates/ └─ assets/    ├─ feature-one/    ├─ feature-two/    ├─ feature-three/    └─ common/ -Estruturadediretórios Promoting Quality
  31. 31. ├─ 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
  32. 32. 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
  33. 33. Be in touch Have a direction
  34. 34. Qual Ferramenta Usar?
  35. 35. As decisões mais importantes do projeto são tomadas no início, quando não sabemos muito sobre ele. Qual Ferramenta Usar?
  36. 36. - Achismos Qual Ferramenta Usar?
  37. 37. - Achismos - Gostos Pessoais Qual Ferramenta Usar?
  38. 38. 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
  39. 39. -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?
  40. 40. Qual Ferramenta Usar?
  41. 41. Qual Ferramenta Usar? Nem sempre a "melhor ferramenta" é a melhor ferramenta para seu projeto.
  42. 42. Feature Flagging -Controlar quais usuários vão ver quais features -Features mudam, vem e vão -A/B Testing
  43. 43. Feature Flagging - Staff - Early Adopters - 10% dos usuários - 50% dos usuários -Global Release
  44. 44. 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>
  45. 45. Feature Flagging - Empregados podem mudar (on/off) essa flag a qualquer momento
  46. 46. 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
  47. 47. Feature Progression
  48. 48. Feature Progression
  49. 49. Tratamento de Erros Novas Features sempre trazem Novos Erros
  50. 50. Tratamento de Erros
  51. 51. { "user": { "pets": { "dogs": [ { "name": "Billy" }, ... ] } } } Tratamento de Erros
  52. 52. 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
  53. 53. var dogName = _.get(user, 'pets.dogs[0].name', 'Marley'); // _.get(object, path, default); console.log(dogName); Tratamento de Erros
  54. 54. Tratamento de Erros - Tenha um error logger
  55. 55. - Tenha um error logger window.onerror = (error, script, lineNumber) => { $.post('/api/errors', { error, script, lineNumber }) } Tratamento de Erros
  56. 56. Tratamento de Erros - Tenha um error logger
  57. 57. -Frequencia do erro (quantidade) -Device -Último evento -Qual usuário? -Stack trace Tratamento de Erros
  58. 58. -Promova qualidade -Compartilhe o conhecimento -Automatize a qualidade -Mantenha um Styleguide -Component-Driven Development -Tenha processos(Codereview,1-1s,...) -Pense em performance -Estruture por Feature -Feature Flagging -Pense como um time -Minimize os riscos -Logging, Monitore,...

×