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
70
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
23
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
77
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
61
Carreiras em TI
juunegreiros
0
54
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
240
Other Decks in Technology
See All in Technology
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
Trust as Infrastructure
bcantrill
1
380
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
480
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
430
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
400
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
130
実装で解き明かす並行処理の歴史
zozotech
PRO
1
700
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.1k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Mobile First: as difficult as doing things right
swwweet
224
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building Applications with DynamoDB
mza
96
6.7k
Code Reviewing Like a Champion
maltzj
526
40k
Code Review Best Practice
trishagee
72
19k
Into the Great Unknown - MozCon
thekraken
40
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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!