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
君も受託系GISエンジニアにならないか
sudataka
2
370
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Building Products in the LLM Era
ymatsuwitter
10
4.4k
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Agile that works and the tools we love
rasmusluckow
328
21k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
4 Signs Your Business is Dying
shpigford
182
22k
Bash Introduction
62gerente
610
210k
It's Worth the Effort
3n
184
28k
BBQ
matthewcrist
86
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing for humans not robots
tammielis
250
25k
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!