Matheus Azzi

Front-End That Scales

Matheus Azziwww.matheusazzi.com

matheusazzi

fb.com/matheusazzi

Codeminer 42

speakerdeck.com/matheusazzi

matheus.azzi@codeminer42.com

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