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
FOSS4G 2025 KANSAI　QGISで点群データをいろいろしてみた
Avatar for kou_kita kou_kita
0
400
LangChain Interrupt & LangChain Ambassadors meetingレポート
Avatar for os1ma os1ma
2
310
MobileActOsaka_250704.pdf
Avatar for AKAI Tadaaki akaitadaaki
0
120
関数型プログラミングで 「脳がバグる」を乗り越える
Avatar for manabeai manabeai
1
190
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for markhor64456 airhelpsupport
0
380
事業成長の裏側：エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
21k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
27k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
7.7k
LLM時代の検索
Avatar for shibuiwilliam shibuiwilliam
1
150
Sansanのデータプロダクトマネジメントのアプローチ
Avatar for SansanTech sansantech
PRO
0
160
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
13k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
Avatar for FUJIWARA Shunichiro fujiwara3
3
440

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k

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