image

State of Vue JS by Milos Dimitrijevic

Heavily influenced by other frameworks such as AngularJS and fueled by enthusiasm and the Open Source, Vue was founded and actively developed by Evan You and the rest of the Vue core team.

Today, it ranks as one of the three most popular frameworks alongside Angular and React. Those who admire it would say that Vue has found a sweet spot between freedom and organization. Titled “The Progressive JavaScript Framework” encapsulated exactly what it is. You can start developing with simple DOM manipulation up to building enterprise-level web applications with a full-fledged ecosystem, heavily backed and supported by many individuals and companies.

The easy way to start with Vue is to import into an HTML file and follow the beginners' guide. For a more serious approach, you would have to reach for a better-organized workflow using build tools such as Webpack (with Vue CLI) or the newcomer Vite.

As of February 7th ‘22, the official version is Vue 3, which had a soft launch in Sept of 2020 but was patiently waiting for the rest of the ecosystem to catch up. Many production apps are still working with Vue 2 and this version is maintained as well, however, the recommended version for a new project is v3.

As stated, Vue offers a sweet spot of freedom of choice on one hand and Vue’s ecosystem tools, such as Vue Router as the Vuex for state management. This enables developers to set up their workflow quickly and start working.

The abovementioned Vite is a frontend tool to speed up Developer Experience. Taking advantage of built-in JavaScript features such as ES Modules, Vite gives developers quick feedback on their progress but also builds a final version extremely fast. Even though Vite was developed by Evan You (same as Vue), it can be used for other frameworks such as React and Svelte, but also Vanilla JavaScript.

Vue 3 offers major improvement compared to Vue 2. It was written from the ground up (in TypeScript) and the biggest improvement would be the speed of execution and stability. As Vue is using a Virtual DOM, the latest version provides many clever optimizations in code execution, resulting in better speed and overall performance. Compared to Vue 2, there are not many breaking changes. For those migrating to Vue 3, there is an official migration build that can guide developers through the upgrade process.

Developers who are just being introduced to Vue, whether coming from Vanilla JS or another framework, once they set up a basic project using either Vue CLI or Vite, will be able to quickly understand how a component is structured and can start getting some results on the screen very fast. Each component (called Single File Component or SFC) has three main parts: HTML, CSS, and JavaScript. The HTML part is bound by <template> tags, which for the most part works exactly as plain HTML. The 2 main difference is that you can “interpolate” anything into the template by using the double curly brace syntax {{ }}. This is a signal for Vue to “inject” some value. Another feature is that any HTML can have additional attributes provided by Vue, such as dynamic styles and classes, but also event handles (click, double-click, submit, etc) as well as control flow (if/else statements).

The script part handles the logic and is tightly bound to the <template> resulting in reactivity that we all strive for, meaning “when I click something, I want it to show right away” (declarative approach), without the need to do everything “manually” as we do in Vanilla JS (imperative approach).

The script part comes in two flavors: Options API (both Vue 2 and Vue 3) and Composition API (only Vue 3). In terms of the reactivity system and how fast it performs, both APIs work the same and can even be used alongside each other. Composition API brings an improved workflow closer to functional programming as all the logic is handled inside a single setup() function. This enables to Vue developer to make us of composable functions, similar to Hooks in React. This means you can create usable functions which have their own state and then easily use it within any app component.

The third block is CSS which can be either “global” or can be “scoped” to each component separately, which is then handled by Vue and the styling does not overflow into the rest of the app.

Many of the popular plugins are possible to integrate into the Vue workflow: CSS frameworks, testing libraries, and many third-party packages: internationalization (i18n), form validation, http, persistence, and many others.

Today, the quickest workflow to set up a new Vue project would be to either set it up with the “create-vue” tool by running “npm init create-vue” or to clone a template Vitesse (full or light version) from a GH repo user (@anftu), developed by one of Vue core members. The template comes with all that is needed to bootstrap a large-scaled project.

Vue is being heavily maintained by its Core members and already integrated into many large companies in their web apps across the globe.

Feel free to give it a try!

by Milos Dimitrijevic, Senior Developer