Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Front-End That Scales - TDC
Matheus Azzi
October 06, 2016
Programming
1
120
Front-End That Scales - TDC
Matheus Azzi
October 06, 2016
Tweet
Share
More Decks by Matheus Azzi
See All by Matheus Azzi
Give it a REST: Introdução a GraphQL
matheusazzi
0
35
Front-End That Scales - RSJS
matheusazzi
2
130
Teste seu Javascript - Front in SM
matheusazzi
4
130
Teste seu Javascript
matheusazzi
3
220
Iniciando com Ruby
matheusazzi
4
240
Other Decks in Programming
See All in Programming
From Java 11 to 17 and beyond
josepaumard
0
280
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
0
260
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
600
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
440
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
770
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
oniak3ibm
PRO
0
320
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
380
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
160
WindowsコンテナDojo:準備編
oniak3ibm
PRO
0
450
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
170
iOSアプリの技術選択2022
tattn
6
1.9k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Teambox: Starting and Learning
jrom
121
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
A Modern Web Designer's Workflow
chriscoyier
689
180k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
314
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Transcript
Matheus Azzi Front-End That Scales
Matheus Azzi www.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 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 +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-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
Promoting Quality (automatizado) - Code Linters e Smells - Testes
unitários - Testes End-to-End - code coverage
Promoting Quality (automatizado)
None
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
None
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
{ "user": { "pets": { "dogs": [ { "name": "Billy"
}, ' ] } } } Tratamento de Erros try { dogName = user.pets.dogs[0].name; } catch (e) { dogName = 'Marley'; } console.log(dogName);
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, ...