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
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
MobileActOsaka_250704.pdf
akaitadaaki
0
120
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.7k
LLM時代の検索
shibuiwilliam
1
150
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
4 Signs Your Business is Dying
shpigford
184
22k
Speed Design
sergeychernyshev
32
1k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
140
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Site-Speed That Sticks
csswizardry
10
690
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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