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
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
640
最低限これだけ押さえれ大丈夫_Claude Enterprise/Team企業展開ガバナンス入門
Avatar for t-kikuchi tkikuchi
1
670
Agentic ERPをどう設計するか ー 受発注エージェントを動かす、現場の知見と設計思想ー
Avatar for 株式会社リチェルカ recerqainc
1
660
Claude code Orchestra
Avatar for Taisei Ozaki ozakiomumkj
3
900
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
680
プラットフォームエンジニア ワークショップ/ platform-workshop
Avatar for Databricks Japan databricksjapan
0
170
ルールやカスタム機能、どう使う？理想の出力を引き出すために今知りたいIBM Bob 5つの機能
Avatar for mu (Mizuho Uehara) muehara
1
290
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.8k
Generative UI × A2UI で AI エージェントを作った話　AI-DLC も使ってみた！
Avatar for たけのこ kmiya84377
1
310
AI駆動開発でなんでもハンズオン環境をつくってみた
Avatar for yoshimi0227 yoshimi0227
0
200
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
300
コードレビューを制するチームがソフトウェアデリバリーのフローを制す / Beyond Code Review: Distributing Its Responsibilities Across the SDLC
Avatar for mtx2s mtx2s
3
730

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
310
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
560
Visualization
Avatar for Eitan Lees eitanlees
152
17k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.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