VUE - a short overview
Vue has definitely been making rounds in the dev community as of late. According to recent surveys, like the 2020 Stack Overflow Survey, it's now the 7th most popular frontend Javascript framework. If you’re familiar with building web applications chances are you’ve already heard about it quite a bit. If you haven’t or you’re just curious to hear more, look no further. I'll try to provide a brief and hopefully at least a bit helpful summary here.
Vue 1
Development of Vue.js started all the way back in 2013 with the first versions coming out in 2014 and the production ready 1.0 version coming out in October of 2015. The first big break came when the Laravel community picked it over React and its popularity has been steadily growing ever since. The big advantages highlighted since the 1.0 release were:
- Simplicity - especially in comparison to React, most devs agreed Vue is a lot easier to get into
- Reactivity - models are JavaScript objects, when you modify them the view updates automatically
- Stability - from version 0.1 to 1.0 Vue had maintained 100% test coverage and GitHub issues were resolved on average in 13 hours
And finally, the components. Especially handy for structuring more complex interfaces, they’re custom elements that get assigned specified behavior by the Vue.js compiler. Additionally they’re reusable, modular and can fit inside other components to form a tree representing your UI. Components have been one of the most powerful features of Vue since 1.0 so I’ll go into more detail on them next week.
Vue 2
In the following year Vue cracked the top 30 all-time ranking on GitHub and 1 million downloads on NPM. The next step was the release of Vue 2.0 in September 2016. Aside from the usual bug fixes, updates to documentation and API design, the new version focused on further improving Vue.js’s strengths.
-
Performance - the rendering layer overhaul improved initial rendering speed and memory consumption by up to 2-4 times making Vue 2 one of the fastest frameworks available and significantly faster than React or Angular.
-
Render functions - aside from optimization 2.0 also gave the users a bit more flexibility, by default templates are compiled into Virtual DOM render functions, but users who prefer it can directly author render functions in JavaScript and there's even an optional plugin for JSX.
-
Server Side Rendering - SSR support with component level caching and client-side hydration provides another boost to performance and allows for extremely fast rendering.
-
Component updates - several key components like vueify, vuex and vue-router also received improvements.
Vue 3
As I mentioned previously Vue has been steadily growing more popular every year, now it has over 1.3 million users worldwide. This year could take it even further since the much anticipated Vue 3.0 was finally released on September 18th. Once again the focus is to build on its strengths as creator Evan You outlined Vue 3 is faster, smaller, more maintainable and easier to target native. Let’s take a look at the highlights:
-
Another boost to performance - a rewritten virtual DOM and compiler-informed fast paths make Vue 3 even faster than the previous version. Looking at the numbers it's up to 55% faster, 41% lighter and uses up to 54% less memory than Vue 2.
-
A completely new API - the biggest change this time is the new Composition API which provides an alternative syntax for writing large scale applications and enables logic composition and reuse similar to React Hooks. It's also compatible with Vue 2.x via a special plugin and has utility libraries that work for both Vue 2 and 3.
-
Teleporting components - Teleport is Vue’s version of React’s Portal, as the name suggests it teleports an object from one place to another. To be precise it allows you to define a component in one place and render it in a different position in the DOM tree or even outside the scope of the app.
-
Multi-root components support - this feature allows declaring any number of root elements on single-file components. Now there's no need for special plugins, the new Fragments API handles multiple root elements by itself.
Alongside the release there's already some planned next steps for the final months of 2020 such as IE11 support and migration. For now it looks like Vue’s future is looking up and it might overtake the likes of Angular and React in the next few years. Even if it won't, that's still damn impressive for something, which as its creator stated, started out as just a side project to help him with his own work.
The whole story
It's almost unimaginable that Vue, which began as a side project of a Google developer, now shares the podium with top JS frameworks like React & Angular! Make sure to check out this inspiring Vue.js documentary by Honeypot:
