Download as PDF, PPTX
Uploaded byGalih Pratama
Scalable Front-end Development with Vue.JS
The document discusses scalable front-end development using Vue.js, highlighting its benefits such as improved development speed, reduced technical debt, and an easy learning curve. It emphasizes the advantages of single-page applications (SPAs) and includes tools like Vue Router and Vuex for state management. The conclusion asserts that Vue.js simplifies building scalable JavaScript applications while ensuring SEO compatibility.
More Related Content
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JS
- 1. Scalable Front-end Development withVue.JS Galih Pratama Head Front-end Developer at
- 2.
- 3. Galih Pratama Front-end Developerwith 30+ web/apps developed. Tech-based Edu Content Creator with 100+ videos created, since 2011. Current Work / Projects
- 4. Me in anutshell
- 5. Current State ofJavascript
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 16.
- 17. You can useit simply like this...
- 19.
- 21. Learning curve iseasy Hot reload Two-way data binding Less boilerplate code Vuex Vue Devtools vue-cli Small file size Can used on existing app Detailed documentation Write HTML like an usual Reactive Fun Flexible Simplicity Single page apps
- 22. Single Page Apps(SPA)
- 23.
- 24. App rendered inbrowser
- 25. Less server overhead (noneed to render anything in server, only serve html/css/js)
- 26. Separation of Concerns (frontenddo frontend, backend do backend)
- 27.
- 28.
- 30. Vue Devtools Makes developingon Vue.js even easier than it already is.
- 34. vue-cli A simple CLIfor scaffolding Vue.js projects.
- 35. vue init <templatename><projectname>
- 37. You can useit in any way! ● webpack A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ● webpack-simple A simple Webpack + vue-loader setup for quick prototyping. ● browserify A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ● browserify-simple A simple Browserify + vueify setup for quick prototyping. ● pwa PWA template for vue-cli based on the webpack template ● simple The simplest possible Vue setup in a single HTML file
- 38.
- 39. How Vue.js “one-waydata flow” lifecycle works
- 40.
- 41. > One statefor multiple component > Reusable action from different component How to handle this?
- 42.
- 46. Vuex Store A placeto “store” globally in your app
- 48. Vuex State VueData
- 49. Vuex Action VueMethods
- 50.
- 51. Google(bot) can indexSingle Page Apps
- 54. SPA & Googlebot ●Googlebot run the Javascript on the page and the Ajax calls are properly executed ● Googlebot waits between 5 to 20 seconds before taking a snapshot of each page More : https://medium.com/@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11
- 56.
- 57.
- 58.
- 59. 1. Building javascriptapps is somewhat confusing 2. Need to scale up without make it more complicated. 3. Vue.JS make it easier without sacrificing scalability. 4. Official project generator using vue-cli 5. Ready to use devtools with zero configuration 6. Use Vuex in large-scale apps 7. SEO is safe (like Google said) Conclusion
- 60.
- 61. … one morething
- 62. Want to knowhow to build it ?
- 63. Thank you! Questions? galpratama pratama.galihhi@galihpratama.net