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
85
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
330
Desmistificando a área de TI
juunegreiros
0
67
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
50
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
56
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
200
Other Decks in Technology
See All in Technology
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
180
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
The Future of SEO: The Impact of AI on Search
badams
0
160
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.2k
現場で役立つAPIデザイン
nagix
32
11k
表現を育てる
kiyou77
1
200
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.7k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
6.8k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
990
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
920
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
How to Ace a Technical Interview
jacobian
276
23k
Documentation Writing (for coders)
carmenintech
67
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Facilitating Awesome Meetings
lara
51
6.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fireside Chat
paigeccino
34
3.2k
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!