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
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
AWS認定を取る中で感じたこと
siromi
1
190
What’s new in Android development tools
yanzm
0
310
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Writing Fast Ruby
sferik
628
62k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Music & Morning Musume
bryan
46
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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