Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack ❤ Vue.js

Avatar for Alan Michel Willms Quinot Alan Michel Willms Quinot
April 03, 2016
Technology
0
28

Webpack ❤ Vue.js

Avatar for Alan Michel Willms Quinot

Alan Michel Willms Quinot

April 03, 2016
Tweet

More Decks by Alan Michel Willms Quinot

See All by Alan Michel Willms Quinot
Do RPC ao GraphQL
Avatar for Alan Michel Willms Quinot alanwillms
0
43
JWT
Avatar for Alan Michel Willms Quinot alanwillms
0
59
PHP – principais novidades do 5.3 ao 5.6
Avatar for Alan Michel Willms Quinot alanwillms
0
56

Other Decks in Technology

See All in Technology
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
7.8k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
Avatar for sergicalsix sergicalsix
1
240
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
150
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
Avatar for MNTSQ mntsq
1
130
ビギナーであり続ける/beginning
Avatar for 小田中育生 ikuodanaka
3
760
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
190
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
Avatar for Takashi Kawasaki espresso3389
0
130
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
2
16k
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
370
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
280
オーティファイ会社紹介資料 / Autify Company Deck
Avatar for Autify autifyhq
10
130k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for heron31238 unitedflyhelp
0
310

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
95
6.1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k

Transcript

  1. Webpack ❤ Vue.js

  2. vamos falar sobre front-end

  3. front-end é a camada de apresentação

  4. front-end é o código que executa no navegador

  5. front-end antigamente

  6. front-end hoje em dia

  7. navegadores antigamente

  8. navegadores hoje em dia

  9. Webpack é um empacotador de web assets

  10. O Webpack transforma os arquivos

  11. None

  12. O Webpack resolve todas as dependências

  13. 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

  14. é hora do hands-on!

  15. dúvidas?

  16. vamos falar sobre SPAs

  17. SPAs são Aplicações de Página Única

  18. SPAs são o oposto de MPAs

  19. multi page applications

  20. multi page applications

  21. multi page applications

  22. GET http://tradetools/produtos multi page applications

  23. <!-- DOCTYPE HTML --> <html> <head> <title>Produtos… </head> <body> …

    </body> </html> GET http://tradetools/produtos multi page applications

  24. <!-- DOCTYPE HTML --> <html> <head> <title>Produtos… </head> <body> …

    </body> </html> GET http://tradetools/produtos multi page applications

  25. single page applications

  26. single page applications

  27. single page applications

  28. event.preventDefault history.pushState single page applications

  29. AJAX GET /produtos event.preventDefault history.pushState single page applications

  30. 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

  31. 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
  32. None
  33. None

  34. Vue.js é um framework para construir interfaces

  35. Vue.js não é um framework full-stack

  36. vue: componentes axios: ajax vuex: estado vue-router: rotas etc…

  37. é hora do hands-on!

  38. dúvidas?

  39. DŌ JŌ

  40. 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