Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Webpack ❤ Vue.js

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

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
45
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
60

Other Decks in Technology

See All in Technology
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
200
第4回 「メタデータ通り」　リアル開催
Avatar for データ横丁 datayokocho
0
120
RAG/Agent開発のアップデートまとめ
Avatar for sakai taka0709
0
140
21st ACRi Webinar - Univ of Tokyo Presentation Slide (Shinya Takamaeda)
Avatar for Nao Sumikawa nao_sumikawa
0
120
新 Security HubがついにGA！仕組みや料金を深堀り #AWSreInvent #regrowth / AWS Security Hub Advanced GA
Avatar for MasahiroKawahara masahirokawahara
1
1.4k
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
580
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
870
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
1
220
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
400
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか？そして、今学生であるあなたは何を学ぶべきか？
Avatar for kuri8ive kuri8ive
2
2.1k
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
Avatar for teyamagu teyamagu
PRO
1
240
Security Diaries of an Open Source IAM
Avatar for Alexander Schwartz ahus1
0
130

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k

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