Starting Out with Vue.js
In this post and more, I will be starting with Vue.js. For the Emerging Trends class in the ITSD program in SAIT. This post would be a brief introduction of Vue.js based on some online resources.
What is Vue.js?
Vue.js is an open source progressive JavaScript Framework for building user interface and single page applications, which is created by Evan You. Evan You wanted to “just extract the part that I really liked about Angular and build something really lightweight.” [1]
Why Vue.js?
Easy to start with.
It started with Taylor Otwell, the founder of Laravel, twittering about the experience and progress for learning a framework and then replied tweets to the curiosities on why he skipped frameworks like Angular and React (which officially is a library [2]) by simply saying “Because Vue is better (tweeted on Aug 15, 2018)”. Later he explained that unlike other JavaScript frameworks which have complicated compilation steps, a lot of tooling needed to get started, but Vue.js could just help on building up a simple application in Microsoft Notepad without any other compilation tools. Then Vue.js was adopted for Laravel Spark. This brought users from the Laravel Community.
Here are some features that make Vue.js popular to many developers, according to Wikipedia [3]:
Vue components extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements to which the Vue’s compiler attaches behavior. In Vue, a component is essentially a Vue instance with pre-defined options [4].
Vue uses an HTML-based template syntax that allows binding the rendered Document Object Model (or “DOM”) to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML parsers. Vue compiles the templates into virtual DOM render function. A virtual DOM allows Vue to render components in its memory before updating the browser. Combined with the reactivity system, Vue is able to calculate the minimal number of components to re-render and apply the minimal amount of DOM manipulation to be built form software components [5].
Vue features a reactivity system that uses plain JavaScript objects and optimized re-rendering. Each component keeps track of its reactive dependencies during its render. So the system knows precisely when to re-render, and which components to re-render [6].
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.
A traditional disadvantage of single-page applications (SPAs) is the inability to share links to the exact subpage with a specific web page. Because SPAs serve their users only one URL-based response from the server, but with HTML5 most modern browsers support routing without hashbangs.
Vue provides an interface to change what is displayed on the page based on the current URL path — regardless of how it was changed (whether by emailed link, refresh, or in-page links).
Vue.js Ecosystem
The core library comes with tools and libraries both developed by the core team and contributors, according to Wikipedia [3]:
Official Tooling
Devtools — Browser devtools extension for debugging Vue.js applications
Vue CLI — Standard Tooling for rapid Vue.js development
Vue Loader — a webpack loader that allows the writing of Vue components in a format called Single-File Components (SFCs)
Official Libraries
Vue Router — The official router for Vue.js
Vuex — Flux-inspired Centralized State Management for Vue.js
Vue Server Renderer — Server-Side Rendering for Vue.js
There are so much more to learn if I want to dig more into the Vue.js, and I would like to expect the ecosystem to be enriched and it would be more dynamic.
More to come
In the following days, I will explore more features on Vue, and compare Vue.js with the main frameworks/libraries such as Angular.js and React.js.
References
[1]
E. You. [Online]. Available: https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/.
[2]
“REACT,” [Online]. Available: https://reactjs.org/.
[3]
“Vue.js Wikipedia,” [Online]. Available: https://en.wikipedia.org/wiki/Vue.js#cite_note-15.
[4]
“Vue Components,” [Online]. Available: https://vuejs.org/v2/guide/components.html.
[5]
E. You, “Vue 2.0 is Here!,” [Online]. Available: https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9.
[6]
“Vue Reactivity in Depth,” [Online]. Available: https://vuejs.org/v2/guide/reactivity.html.
