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 - RSJS
Matheus Azzi
April 09, 2017
Programming
2
130
Front-End That Scales - RSJS
Matheus Azzi
April 09, 2017
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 - TDC
matheusazzi
1
120
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
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
260
バンドル最適化マニアクス at tfconf
mizchi
3
1.7k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.3k
The future of trust stores in Python
sethmlarson
0
180
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
Develop your CI tools
xgouchet
2
180
近況PHP / PHP in now a days
uzulla
4
1.3k
2022 Android Training
mixi_engineers
1
620
mrubyを1300円のボードで動かそう
yuuu
0
170
Get Ready for Jakarta EE 10
ivargrimstad
0
1.8k
Nix for Scala folks
kubukoz
0
120
LOWYAの信頼性向上とNew Relic
kazumax55
4
300
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Bootstrapping a Software Product
garrettdimon
294
110k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
A Philosophy of Restraint
colly
192
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Faster Mobile Websites
deanohume
294
28k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Transcript
Matheus Azzi Front-End That Scales
Matheus Azzi 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 +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 <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; } 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 <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 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