Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack ❤ Vue.js

Alan Michel Willms Quinot
April 03, 2016
Technology
0
24

Webpack ❤ Vue.js

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
alanwillms
0
39
JWT
alanwillms
0
49
PHP – principais novidades do 5.3 ao 5.6
alanwillms
0
48

Other Decks in Technology

See All in Technology
生産性向上チームの紹介
cybozuinsideout
PRO
1
930
生成AIの変革の時代に、 直近1年で直面した課題とその解決策
ktc_wada
0
700
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
310
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
280
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
410
Handling focus in 2024
tahia910
0
230
「スニダン」開発組織の構造に込めた意図 ～組織作りはパッションや政治ではない！～
rinchsan
4
620
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
160
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
810
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.7k

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
Statistics for Hackers
jakevdp
790
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Web development in the modern age
philhawksworth
203
10k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Clear Off the Table
cherdarchuk
85
310k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Facilitating Awesome Meetings
lara
43
5.6k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k

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