Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Como modularizar seu front-end sem depender de um framework
Juliana Negreiros
September 28, 2019
Technology
0
34
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
240
Desmistificando a área de TI
juunegreiros
0
12
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
380
Introdução ao Git
juunegreiros
0
22
Webpacker e a Jornada do Heroi
juunegreiros
0
9
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
57
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
38
Carreiras em TI
juunegreiros
0
35
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
94
Other Decks in Technology
See All in Technology
ドメイン知識の蓄積が開発に起こす100のこと
codmoninc
0
150
【Pythonデータ分析勉強会#33】「DearPyGuiに入門しました」の続き~Image-Processing-Node-Editor~
kazuhitotakahashi
0
200
OCI Service Mesh 概要 / OCI Service Mesh ovewview
oracle4engineer
PRO
0
110
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
Introduction To Technical Writing
olawanle_joel
0
100
令和4年資金決済法等改正を踏まえたステーブルコインに関する規制の動向
finengine
0
570
History of the ML system in KARTE
kargo113
1
680
Inside out - abusing archive file formats
ange
3
680
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
スタートアップと技術選定と AWS
track3jyo
PRO
2
360
Apple M1 CPUの脆弱性「PACMAN」について解説する
kuzushiki
0
110
Featured
See All Featured
Building Applications with DynamoDB
mza
83
4.7k
Making Projects Easy
brettharned
98
4.3k
A Philosophy of Restraint
colly
192
15k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Ruby is Unlike a Banana
tanoku
91
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Six Lessons from altMBA
skipperchong
14
1.4k
Faster Mobile Websites
deanohume
294
28k
The Mythical Team-Month
searls
209
39k
Designing for Performance
lara
597
63k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.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!