Matheus Azzi Front-End That Scales 

Matheus Azzi matheusazzi.com matheusazzi fb.com/matheusazzi Codeminer 42 speakerdeck.com/matheusazzi [email protected] 

- 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 importa Front-End is Hard 

- Um único event loop - transpilamos nosso código para outra versão - Tamanho da base de código importa Front-End is Hard 

- 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 

Muito Javascript 

Muito Javascript Rodando no Browser 

Muito Javascript Rodando no Browser Escrito por muitas pessoas 

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 

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-END FRONT-END DESIGN Promoting Quality 

USER INTERFACE APPLICATION BACK-END FRONT-END DESIGN 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 

Tooling - Code Linters e Smells - Testes unitários - Testes End-to-End - code coverage 

└─ assets/ ├─ images/ ├─ scripts/ ├─ specs/ ├─ styles/ └─ templates/ └─ assets/ ├─ feature-one/ ├─ feature-two/ ├─ feature-three/ └─ common/ Estrutura de Diretórios 

├─ 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 

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 

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? 

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

http://goo.gl/KSFhHf 

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 Dashboard Profile New **Shiny ** Feature Another Feature 

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 mais necessária 

Feature Progression 

Tratamento de Erros Novas Features sempre trazem Novos 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 

- Frequência 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, ... 

Obrigado speakerdeck.com/matheusazzi