What is vue.js according to its founders?
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
We can affirm that VueJS is an advanced JavaScript framework with an open source code for the development of a user interface. It is one of the most popular frameworks for simplifying web development. VueJS works mostly with the presentation layer. It can easily be integrated into large projects for frontend development.
History of VueJS
Vue was created by Evan You after working for Google using AngularJS in a number of projects. He later summed up his thought process: “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.” The first source code commit to the project was dated July 2013, and Vue was first released the following February, in 2014.
VueJS ecosystem
Ecosystem
The core library comes with tools and libraries both developed by the core team and contributors.
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
Why use Vue.js?
Library modularization using a framework is common in frontend development. Both React and Angular have modularization. But what differentiates Vue.js from other alternatives is its “high decoupling”, how easy it is to extend functionalities, and how well all parts work once more modules are included.
For example, if we want to organize and render small visual components, all we need is Vue.js’s ‘core’ library; it is unnecessary to include additional libraries. As the application grows, we have libraries to manage routes such as ‘vue-router’, libraries to manage the global state such as ‘vuex’ or libraries to build responsive web applications such as ‘bootstrap-vue’. Additionally, if our application needs to be optimized or needs good SEO, we can include the ‘vue-server-rendering’ library. In the following figure, we can see how the libraries we just mentioned are progressively included, from a small SPA to multi-page applications (MPA).
Vue.js’s component system is reactive, which means that Vue.js knows how to communicate through asynchronous events; for example, a child component can communicate with its parent component through events. With Vue.js there is no friction with other libraries or resources, in other words, we can use the tool with which we are most comfortable with. For example, we can write only HTML and JavaScript or if we want we can add CSS, JSX or TypeScript.
Vue.js has a special command line (CLI) created on Node JS. This tool allows us to start a project using a boilerplate (or base template). Additionally, the Vue.js development team maintains a Chrome extension that allows us to see how our component tree is rendered, how events are being launched and recorded, how the internal state of each component is saved, and how the global state of the component is behaving.
VueJS Components
Vue components are used to extend basic HTML elements so as to encapsulate JavaScript 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.
Who is Using Vue.js?
More than 700 companies are using Vue.js. Some of the most important are: Xiaomi, Alibaba, and Gitlab. The complete list is available at https://stackshare.io/vue-js/in-stacks.