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 um framework
Search
Juliana Negreiros
September 28, 2019
Technology
0
66
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
320
Desmistificando a área de TI
juunegreiros
0
46
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
420
Introdução ao Git
juunegreiros
0
34
Webpacker e a Jornada do Heroi
juunegreiros
0
18
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
68
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
48
Carreiras em TI
juunegreiros
0
47
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
130
Other Decks in Technology
See All in Technology
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
470
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
330
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.2k
Cloud Deploy と仲良くなりたい
phaya72
1
100
Introduction to Jetpack Compose
pohjus
1
110
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
290
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
Featured
See All Featured
Faster Mobile Websites
deanohume
296
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Clear Off the Table
cherdarchuk
82
310k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
KATA
mclloyd
14
11k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
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!