61
Matheus Azzi Front-End That Scales

TDC2016POA | Trilha Web - Front-end that scales

Embed Size (px)

Citation preview

Page 1: TDC2016POA | Trilha Web - Front-end that scales

Matheus Azzi

Front-End That Scales

Page 2: TDC2016POA | Trilha Web - Front-end that scales

Matheus Azziwww.matheusazzi.com

matheusazzi

fb.com/matheusazzi

Codeminer 42

speakerdeck.com/matheusazzi

[email protected]

Page 3: TDC2016POA | Trilha Web - Front-end that scales

- Nossas aplicações estão mais complexas e é mais difícil mantê-las

- Não são aplicações triviais

Page 4: TDC2016POA | Trilha Web - Front-end that scales

Front-End is Hard- Um único event loop

Page 5: TDC2016POA | Trilha Web - Front-end that scales

- Um único event loop- Tamanho da base de código

Front-End is Hard

Page 6: TDC2016POA | Trilha Web - Front-end that scales

- Um único event loop

- transpilamos nosso código para outra versão- Tamanho da base de código

Front-End is Hard

Page 7: TDC2016POA | Trilha Web - Front-end that scales

- Um único event loop

- transpilamos nosso código para outra versão- Tamanho da base de código

- Diferentes devices

Front-End is Hard

Page 8: TDC2016POA | Trilha Web - Front-end that scales

Muito Javascript

Page 9: TDC2016POA | Trilha Web - Front-end that scales

Muito Javascript Rodando no Browser

Page 10: TDC2016POA | Trilha Web - Front-end that scales

Muito Javascript Rodando no Browser

Escrito por muitas pessoas

Page 11: TDC2016POA | Trilha Web - Front-end that scales
Page 12: TDC2016POA | Trilha Web - Front-end that scales

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

Page 13: TDC2016POA | Trilha Web - Front-end that scales

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

Page 14: TDC2016POA | Trilha Web - Front-end that scales

Promoting Quality- Pessoas vem e vão - Diferentes Skill sets - Compartilhe o conhecimento - Code Review

Page 15: TDC2016POA | Trilha Web - Front-end that scales

USER INTERFACE APPLICATION

BACK-ENDFRONT-ENDDESIGN

Promoting Quality

Page 16: TDC2016POA | Trilha Web - Front-end that scales

USER INTERFACE APPLICATION

BACK-ENDFRONT-ENDDESIGN

O front-end jamais vai escalar se o design não escala

Promoting Quality

Page 17: TDC2016POA | Trilha Web - Front-end that scales

Mais Funcionalidades == Mais código

Page 18: TDC2016POA | Trilha Web - Front-end that scales

Styleguide- Component-driven Development - Componentes isolados para desenvolvimento

- Arquitetura de CSS

http://styleguides.io/

Page 19: TDC2016POA | Trilha Web - Front-end that scales

Cada alteração feita deve deixar a code base melhor que estava antes.

Sempre aumentar a qualidade, nunca diminuir

"Albert Einstein"

Page 20: TDC2016POA | Trilha Web - Front-end that scales

_shame.scss

Page 21: TDC2016POA | Trilha Web - Front-end that scales

Perceived Performance

Page 22: TDC2016POA | Trilha Web - Front-end that scales

Não precisa ser rápido,precisa parecer rápido

Perceived Performance

Page 23: TDC2016POA | Trilha Web - Front-end that scales

Application Shells

Page 24: TDC2016POA | Trilha Web - Front-end that scales

Fake it until Make it

Page 25: TDC2016POA | Trilha Web - Front-end that scales

Fake it until Make it

Page 26: TDC2016POA | Trilha Web - Front-end that scales

Perceived Performance

Page 27: TDC2016POA | Trilha Web - Front-end that scales

Promoting Quality (automatizado)- Code Linters e Smells - Testes unitários - Testes End-to-End - code coverage

Page 28: TDC2016POA | Trilha Web - Front-end that scales

Promoting Quality (automatizado)

Page 29: TDC2016POA | Trilha Web - Front-end that scales
Page 30: TDC2016POA | Trilha Web - Front-end that scales

http://bit.ly/1C46ZKo

Promoting Quality

Page 31: TDC2016POA | Trilha Web - Front-end that scales

└─ assets/    ├─ images/    ├─ scripts/    ├─ specs/    ├─ styles/   └─ templates/

- Estrutura de diretórios

Promoting Quality

Page 32: TDC2016POA | Trilha Web - Front-end that scales

└─ assets/    ├─ images/    ├─ scripts/    ├─ specs/    ├─ styles/   └─ templates/

└─ assets/    ├─ feature-one/    ├─ feature-two/    ├─ feature-three/    └─ common/

- Estrutura de diretórios

Promoting Quality

Page 33: TDC2016POA | Trilha Web - Front-end that scales

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

Page 34: TDC2016POA | Trilha Web - Front-end that scales

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

Page 35: TDC2016POA | Trilha Web - Front-end that scales

Be in touch Have a direction

Page 36: TDC2016POA | Trilha Web - Front-end that scales
Page 37: TDC2016POA | Trilha Web - Front-end that scales

Qual Ferramenta Usar?

Page 38: TDC2016POA | Trilha Web - Front-end that scales

As decisões mais importantes do projeto são

tomadas no início, quando não sabemos muito sobre ele.

Qual Ferramenta Usar?

Page 39: TDC2016POA | Trilha Web - Front-end that scales

- Achismos

Qual Ferramenta Usar?

Page 40: TDC2016POA | Trilha Web - Front-end that scales

- Achismos - Gostos Pessoais

Qual Ferramenta Usar?

Page 41: TDC2016POA | Trilha Web - Front-end that scales

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

Page 42: TDC2016POA | Trilha Web - Front-end that scales

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

Page 43: TDC2016POA | Trilha Web - Front-end that scales

Qual Ferramenta Usar?

Page 44: TDC2016POA | Trilha Web - Front-end that scales

Qual Ferramenta Usar?Nem sempre a

"melhor ferramenta" é a melhor ferramenta

para seu projeto.

Page 45: TDC2016POA | Trilha Web - Front-end that scales

Feature Flagging- Controlar quais usuários vão ver quais features - Features mudam, vem e vão - A/B Testing

Page 46: TDC2016POA | Trilha Web - Front-end that scales

Feature Flagging- Staff - Early Adopters - 10% dos usuários - 50% dos usuários - Global Release

Page 47: TDC2016POA | Trilha Web - Front-end that scales

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>

Page 48: TDC2016POA | Trilha Web - Front-end that scales

Feature Flagging- Empregados podem mudar (on/off) essa flag a qualquer momento

Page 49: TDC2016POA | Trilha Web - Front-end that scales

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

Page 50: TDC2016POA | Trilha Web - Front-end that scales

Feature Progression

Page 51: TDC2016POA | Trilha Web - Front-end that scales

Feature Progression

Page 52: TDC2016POA | Trilha Web - Front-end that scales

Tratamento de Erros

Novas Features sempre trazem Novos Erros

Page 53: TDC2016POA | Trilha Web - Front-end that scales

Tratamento de Erros

Page 54: TDC2016POA | Trilha Web - Front-end that scales

{ "user": { "pets": { "dogs": [ { "name": "Billy" }, ... ] } } }

Tratamento de Erros

Page 55: TDC2016POA | Trilha Web - Front-end that scales

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

Page 56: TDC2016POA | Trilha Web - Front-end that scales

var dogName = _.get(user, 'pets.dogs[0].name', 'Marley'); // _.get(object, path, default);

console.log(dogName);

Tratamento de Erros

Page 57: TDC2016POA | Trilha Web - Front-end that scales

Tratamento de Erros- Tenha um error logger

Page 58: TDC2016POA | Trilha Web - Front-end that scales

- Tenha um error logger

window.onerror = (error, script, lineNumber) => { $.post('/api/errors', { error, script, lineNumber }) }

Tratamento de Erros

Page 59: TDC2016POA | Trilha Web - Front-end that scales

Tratamento de Erros- Tenha um error logger

Page 60: TDC2016POA | Trilha Web - Front-end that scales

- Frequencia do erro (quantidade) - Device - Último evento - Qual usuário? - Stack trace

Tratamento de Erros

Page 61: TDC2016POA | Trilha Web - Front-end that scales

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