Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Como modularizar seu front-end sem depender de ...
Search
Juliana Negreiros
September 28, 2019
Technology
0
87
Como modularizar seu front-end sem depender de um framework
Rancho Dev 2019 (28/09/2019)
Juliana Negreiros
September 28, 2019
Tweet
Share
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Um guia para começar no mundo Front End
juunegreiros
0
340
Desmistificando a área de TI
juunegreiros
0
69
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
53
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
75
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
60
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
230
Other Decks in Technology
See All in Technology
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
680
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
290
フィンテック養成勉強会#54
finengine
0
200
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
580
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
230
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
180
OPENLOGI Company Profile for engineer
hr01
1
33k
AI導入の理想と現実~コストと浸透〜
oprstchn
0
140
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Model Mondays S2E03: SLMs & Reasoning
nitya
0
230
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
310
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Scaling GitHub
holman
459
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Become a Pro
speakerdeck
PRO
28
5.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Into the Great Unknown - MozCon
thekraken
39
1.9k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Transcript
Como modularizar seu front-end sem depender de um framework
Juliana Negreiros @juunegreiros Alura Rails Girls Sorocaba SorocabaJS
Elaine Mattos Quinto Github @elainemattos lastfm/tt @elainemattoss
Motivações
VanillaJS <3
Fundamento
Pensar em componentes
Pensar em módulos
O que vamos fazer?
Cores e música com o Simon
None
None
13 Componentização
Pensando em componentes
None
None
None
None
Componentização Independente Fácil integração Reutilização
Mãos na massa
Setup inicial Webpack Babel
Modularização
Frameworks
React Facebook Grandes empresas usando Lib
Angular Google Grandes empresas usando Legado
Vue Evan You Popularizando++
Comparações
Componente
Sound em Vanilla export default soundNumber => { const Sound
= document.createElement('audio') Sound.setAttribute('data-sound', soundNumber) Sound.innerHTML = `<source src='https://s3.amazonaws.com/freecodecamp/simonSound${soundNum ber}.mp3'></source>` return Sound }
Sound em React export default ({ soundNumber }) => {
const url = `https://s3.amazonaws.com/freecodecamp/simonSound${soundNumber}.mp3` return ( <audio> <source src={url} ></source> </audio> ) }
Sound em Angular @Component({ selector: 'sound', template: ` <audio [src]="'https://s3.amazonaws.com/freecodecamp/simonSound'
+ soundNumber + '.mp3'`"></audio> ` }) class SoundComponent { @Input() soundNumber }
Sound em Vue <template> <audio :src={path}></audio> </template> <script> export default
{ name: 'sound', props: { soundNumber: { type: Number } }, data() { return { path: `https://s3.amazonaws.com/freecodecamp/simonSound${props.soundNumber}.mp3` } } } </script>
Gerenciamento de estado
Handler de eventos
“ Conclusão 35
Thanks!