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
Webpack ❤ Vue.js
Search
Alan Michel Willms Quinot
April 03, 2016
Technology
0
28
Webpack ❤ Vue.js
Alan Michel Willms Quinot
April 03, 2016
Tweet
Share
More Decks by Alan Michel Willms Quinot
See All by Alan Michel Willms Quinot
Do RPC ao GraphQL
alanwillms
0
43
JWT
alanwillms
0
59
PHP – principais novidades do 5.3 ao 5.6
alanwillms
0
56
Other Decks in Technology
See All in Technology
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
240
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
150
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
ビギナーであり続ける/beginning
ikuodanaka
3
760
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
95
6.1k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Statistics for Hackers
jakevdp
799
220k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Site-Speed That Sticks
csswizardry
10
690
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
Webpack ❤ Vue.js
vamos falar sobre front-end
front-end é a camada de apresentação
front-end é o código que executa no navegador
front-end antigamente
front-end hoje em dia
navegadores antigamente
navegadores hoje em dia
Webpack é um empacotador de web assets
O Webpack transforma os arquivos
None
O Webpack resolve todas as dependências
1. Logger 2. Axios 3. Vue 4. jQuery 5. Application
6. Validator 7. Products Service 8. Product 9. Product Form 10. Products List 11. Login Service 12. Login Form Unused; Product Form; Vue; Axios; Products Service; Logger; Application; Unused; jQuery; Products List; Validator; Login Form; Product; Unused; Login Service
é hora do hands-on!
dúvidas?
vamos falar sobre SPAs
SPAs são Aplicações de Página Única
SPAs são o oposto de MPAs
multi page applications
multi page applications
multi page applications
GET http://tradetools/produtos multi page applications
<!-- DOCTYPE HTML --> <html> <head> <title>Produtos… </head> <body> …
</body> </html> GET http://tradetools/produtos multi page applications
<!-- DOCTYPE HTML --> <html> <head> <title>Produtos… </head> <body> …
</body> </html> GET http://tradetools/produtos multi page applications
single page applications
single page applications
single page applications
event.preventDefault history.pushState single page applications
AJAX GET /produtos event.preventDefault history.pushState single page applications
AJAX GET /produtos event.preventDefault history.pushState [{id: 1, name: "Coca", price:
4.99},{id: 2, name: "Doritos", price: 6.99},{id: 3, name: "Chocolícia", price: 3.99}, …] single page applications
AJAX GET /produtos event.preventDefault history.pushState [{id: 1, name: "Coca", price:
4.99},{id: 2, name: "Doritos", price: 6.99},{id: 3, name: "Chocolícia", price: 3.99}, …] <div class="foo-bar"> … </div> single page applications
None
None
Vue.js é um framework para construir interfaces
Vue.js não é um framework full-stack
vue: componentes axios: ajax vuex: estado vue-router: rotas etc…
é hora do hands-on!
dúvidas?
DŌ JŌ
referências https://vuejs.org https://webpack.js.org https://laracasts.com/series/webpack-for-everyone https://laracasts.com/series/learn-vue-2-step-by-step