Matheus Azzi
Front-End That Scales
Matheus Azziwww.matheusazzi.com
matheusazzi
fb.com/matheusazzi
Codeminer 42
speakerdeck.com/matheusazzi
- Nossas aplicações estão mais complexas e é mais difícil mantê-las
- Não são aplicações triviais
Front-End is Hard- Um único event loop
- Um único event loop- Tamanho da base de código
Front-End is Hard
- Um único event loop
- transpilamos nosso código para outra versão- Tamanho da base de código
Front-End is Hard
- Um único event loop
- transpilamos nosso código para outra versão- Tamanho da base de código
- Diferentes devices
Front-End is Hard
Muito Javascript
Muito Javascript Rodando no Browser
Muito Javascript Rodando no Browser
Escrito por muitas pessoas
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
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
Promoting Quality- Pessoas vem e vão - Diferentes Skill sets - Compartilhe o conhecimento - Code Review
USER INTERFACE APPLICATION
BACK-ENDFRONT-ENDDESIGN
Promoting Quality
USER INTERFACE APPLICATION
BACK-ENDFRONT-ENDDESIGN
O front-end jamais vai escalar se o design não escala
Promoting Quality
Mais Funcionalidades == Mais código
Styleguide- Component-driven Development - Componentes isolados para desenvolvimento
- Arquitetura de CSS
http://styleguides.io/
Cada alteração feita deve deixar a code base melhor que estava antes.
Sempre aumentar a qualidade, nunca diminuir
"Albert Einstein"
_shame.scss
Perceived Performance
Não precisa ser rápido,precisa parecer rápido
Perceived Performance
Application Shells
Fake it until Make it
Fake it until Make it
Perceived Performance
Promoting Quality (automatizado)- Code Linters e Smells - Testes unitários - Testes End-to-End - code coverage
Promoting Quality (automatizado)
http://bit.ly/1C46ZKo
Promoting Quality
└─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/ └─ templates/
- Estrutura de diretórios
Promoting Quality
└─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/ └─ templates/
└─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/
- Estrutura de diretórios
Promoting Quality
├─ 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
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
Be in touch Have a direction
Qual Ferramenta Usar?
As decisões mais importantes do projeto são
tomadas no início, quando não sabemos muito sobre ele.
Qual Ferramenta Usar?
- Achismos
Qual Ferramenta Usar?
- Achismos - Gostos Pessoais
Qual Ferramenta Usar?
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
- 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?
Qual Ferramenta Usar?
Qual Ferramenta Usar?Nem sempre a
"melhor ferramenta" é a melhor ferramenta
para seu projeto.
Feature Flagging- Controlar quais usuários vão ver quais features - Features mudam, vem e vão - A/B Testing
Feature Flagging- Staff - Early Adopters - 10% dos usuários - 50% dos usuários - Global Release
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>
Feature Flagging- Empregados podem mudar (on/off) essa flag a qualquer momento
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
Feature Progression
Feature Progression
Tratamento de Erros
Novas Features sempre trazem Novos Erros
Tratamento de Erros
{ "user": { "pets": { "dogs": [ { "name": "Billy" }, ... ] } } }
Tratamento de Erros
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
var dogName = _.get(user, 'pets.dogs[0].name', 'Marley'); // _.get(object, path, default);
console.log(dogName);
Tratamento de Erros
Tratamento de Erros- Tenha um error logger
- Tenha um error logger
window.onerror = (error, script, lineNumber) => { $.post('/api/errors', { error, script, lineNumber }) }
Tratamento de Erros
Tratamento de Erros- Tenha um error logger
- Frequencia do erro (quantidade) - Device - Último evento - Qual usuário? - Stack trace
Tratamento de Erros
- 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, ...
Recommended