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
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
44
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
テストを軸にした生き残り術
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
190
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.7k
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
3.4k
Django's GeneratedField by example - DjangoCon US 2025
Avatar for Paolo Melchiorre pauloxnet
0
120
AI開発ツールCreateがAnythingになったよ
Avatar for s sato tendasato
0
120
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
210
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
230
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
160
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
170
Language Update: Java
Avatar for Yuichi.Sakuraba skrb
2
290
なぜスクラムはこうなったのか？歴史が教えてくれたこと/Shall we explore the roots of Scrum
Avatar for Genki Sano sanogemaru
5
1.6k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
Avatar for kyonmm kyonmm
PRO
1
260

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.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