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

Webpack ❤ Vue.js

Avatar for Alan Michel Willms Quinot

Alan Michel Willms Quinot

April 03, 2016

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
48
JWT
Avatar for Alan Michel Willms Quinot alanwillms
0
60
PHP – principais novidades do 5.3 ao 5.6
Avatar for Alan Michel Willms Quinot alanwillms
0
61

Other Decks in Technology

See All in Technology
探して_入れて_作って_使う_Agent_Skills___LT.pdf
Avatar for 松尾淳平 peintangos
2
150
自称宇宙最速で不合格となったAIP-C01にリベンジを果たすべくAIで問題集アプリを作ってみた。
Avatar for Yuuki Yamashita yama3133
0
260
Strands Agents超入門
Avatar for KintoTech_Dev kintotechdev
1
160
AI活用を推進するために ファインディが下した、一つの小さな決断
Avatar for starfish719 starfish719
0
190
Mastering Ruby Box
Avatar for Satoshi Tagomori tagomoris
3
140
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
4k
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
680
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.8k
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
990
Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話
Avatar for すずとも kamekyame
0
130
『家族アルバム みてね』における インシデント対応との向き合い方 / Approach incident response in Family Album
Avatar for kohbis kohbis
2
290
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
370

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
380
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Done Done
Avatar for chrislema chrislema
186
16k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
590
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
160
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
55k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
51k

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