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
54
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
76
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
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
550
「Linux」という言葉が指すもの
sat
PRO
4
130
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
400
roppongirb_20250911
igaiga
1
220
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
S3アクセス制御の設計ポイント
tommy0124
3
200
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How GitHub (no longer) Works
holman
315
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
BBQ
matthewcrist
89
9.8k
Code Review Best Practice
trishagee
70
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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!