Webpack ❤ Vue.js

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