TDC2016POA | Trilha Web - Front-end that scales
1 gostou•313 visualizações
O documento fornece dicas para desenvolvimento front-end escalável, incluindo promover qualidade automatizando testes, manter um guia de estilos, usar componentes isolados, estruturar código por funcionalidade e usar feature flags.
![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](https://image.slidesharecdn.com/front-end-that-scales-161011200905/85/TDC2016POA-Trilha-Web-Front-end-that-scales-34-320.jpg)
![{
"user": {
"pets": {
"dogs": [
{ "name": "Billy" },
...
]
}
}
}
Tratamento de Erros](https://image.slidesharecdn.com/front-end-that-scales-161011200905/85/TDC2016POA-Trilha-Web-Front-end-that-scales-54-320.jpg)
![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](https://image.slidesharecdn.com/front-end-that-scales-161011200905/85/TDC2016POA-Trilha-Web-Front-end-that-scales-55-320.jpg)
![var dogName = _.get(user, 'pets.dogs[0].name', 'Marley');
// _.get(object, path, default);
console.log(dogName);
Tratamento de Erros](https://image.slidesharecdn.com/front-end-that-scales-161011200905/85/TDC2016POA-Trilha-Web-Front-end-that-scales-56-320.jpg)
TDC2016POA | Trilha Web - Front-end that scales
- 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 Front-End is Hard
- 6. - Um único event loop - transpilamos nosso código para outra versão - Tamanho da base de código Front-End is Hard
- 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
- 9. Muito Javascript Rodando no Browser
- 10. Muito Javascript Rodando no Browser Escrito por muitas pessoas
- 12. 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
- 13. 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
- 14. Promoting Quality -Pessoas vem e vão -Diferentes Skill sets -Compartilhe o conhecimento -Code Review
- 16. USER INTERFACE APPLICATION BACK-ENDFRONT-ENDDESIGN O front-end jamais vai escalar se o design não escala Promoting Quality
- 18. Styleguide -Component-driven Development -Componentes isolados para desenvolvimento -Arquitetura de CSS http://styleguides.io/
- 19. Cada alteração feita deve deixar a code base melhor que estava antes. Sempre aumentar a qualidade, nunca diminuir "Albert Einstein"
- 20. _shame.scss
- 22. Não precisa ser rápido, precisa parecer rápido Perceived Performance
- 24. Fake it until Make it
- 25. Fake it until Make it
- 27. Promoting Quality(automatizado) -CodeLinters e Smells -Testes unitários -Testes End-to-End -code coverage
- 31. └─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/ └─ templates/ -Estruturadediretórios Promoting Quality
- 32. └─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/ └─ templates/ └─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/ -Estruturadediretórios Promoting Quality
- 33. ├─ 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
- 34. 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
- 35. Be in touch Have a direction
- 38. As decisões mais importantes do projeto são tomadas no início, quando não sabemos muito sobre ele. Qual Ferramenta Usar?
- 39. - Achismos Qual Ferramenta Usar?
- 40. - Achismos - Gostos Pessoais Qual Ferramenta Usar?
- 41. 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
- 42. -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?
- 44. Qual Ferramenta Usar? Nem sempre a "melhor ferramenta" é a melhor ferramenta para seu projeto.
- 45. Feature Flagging -Controlar quais usuários vão ver quais features -Features mudam, vem e vão -A/B Testing
- 46. Feature Flagging - Staff - Early Adopters - 10% dos usuários - 50% dos usuários -Global Release
- 47. 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>
- 48. Feature Flagging - Empregados podem mudar (on/off) essa flag a qualquer momento
- 49. 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
- 52. Tratamento de Erros Novas Features sempre trazem Novos Erros
- 54. { "user": { "pets": { "dogs": [ { "name": "Billy" }, ... ] } } } Tratamento de Erros
- 55. 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
- 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(Codereview,1-1s,...) -Pense em performance -Estruture por Feature -Feature Flagging -Pense como um time -Minimize os riscos -Logging, Monitore,...