BLOG
CATEGORIES
Sneak peek: Vue Chapter 3BLOG

Sneak peek: Vue Chapter 3

#mobile development

It has become a sort of a guilty pleasure for us to spill some juicy spoilers regarding major technology updates. Why change a good thing then? Short of the Vue 3.0 worldwide debut, we’re unveiling the most highly-anticipated upgrades to one of the fastest-growing frameworks.

Vue.js rise to superstardom

Back in 2018, Evan You, Vue.js creator and project lead, announced that his brainchild was getting another sequel.

Since then, Vue has experienced a huge surge in popularity. In just a year, it has doubled in downloads per week, going from 754k to almost 1.4M as of January 2020. With such big-shot advocates as Facebook, Xiaomi and Netflix, as well as an ever-increasing talent base, Vue is now something much more than just a secondary project tool.


vue_js_3

While the current 2.0 release introduced a much better developer experience, including a lightweight virtual-DOM implementation based on Snabbdom, a smaller library, and the support of server-side rendering, the upcoming changes in Vue 3 go far beyond with multiple productivity and syntax changes.

When will Vue 3.0 be released?


Vue.js 3.0 source code has recently been made public and is now open-sourced in the alpha stage, so you can play with the new version and possibly help with its further improvements.

Though there's no approved Vue 3 release date, the official release is scheduled for Q1 2020, according to the road

Zoom in: Vue.js 3 features and modifications

As Evan has summarized, Vue 3 has the ambition to grow smaller, faster, more maintainable and easier to target native. Let's take a closer look at how the author is going to put his plan into action.

Small yet powerful

While Vue is already small, the core will be reduced from 20kb to 10kb zipped. Such significant size improvements will be achieved through the winning mix of greater code modularity, smaller runtime, and the compiler generating tree-shaking-friendly code. The last means that Vue.js 3 features such as built-in components (keep-alive, transition, etc.) and directive runtime helpers (v-model, v-for, etc.) are now imported on-demand.

What does it bring for your project?

While modularity increases the number of import engineers required, it ensures any unused components won’t be included in your production bundle, thereby bringing huge performance enhancements.

Thus, tree-shaking appears to be incredibly beneficial for small startup projects or those at the initial stages when there’s a need for a small Vue.js development company to roll out an MVP as fast as possible. Also, it will be appreciated by teams that work on small, lightweight websites and use a subset of Vue functionalities to replace libraries such as jQuery (for the record: replacing around 400 lines of jQuery with 80 lines of very clean Vue code is a sure thing).

Now even faster

You is planning to rewrite the virtual DOM to nearly double the speed of mounting and patching of virtual DOM nodes into the real DOM tree. More compile-time hints will also reduce runtime overhead.

vuejs_1

Vue 3 also features optimized slots generation, which ensures parent and child nodes are re-rendered separately. So, if the content changes, only the child will re-render, whilе the parent will be responsible for any other changes.

vuejs_2

Static tree hoisting makes it possible for the Vue 3’s compiler to skip patching the whole component trees. The compiler detects static parts in the code and then hoists them out, which reduces the cost of rendering. Regarding the static props hoisting, it will now be able to skip properties and attributes of elements and continue patching the children.

vuejs_3vuejs_4

Runtime performance will be increased by switching to a proxy-based mechanism. Using the ES2015 proxies natively implemented in browsers, it removes all the existing caveats. This can potentially double the speed while cutting usage of Vue’s reactivity system by half. However, Vue will still support IE11 with the current observation mechanism.

vue_2.5_3

What does it bring for your project?

No matter if your development team is checking out Vue as a quick way to build prototypes, or you’re a CTO of a large enterprise seeking to add reactivity to legacy projects, the above-mentioned shifts will tip the scales in favor of this framework.

Super easy to use and maintain

Vue is pretty serious about boosting developer experience with the codebase migrating from Flow to Typescript. The switch will lead to better type checking and error messages displayed right inside the IDE.

Moreover, packages will be decoupled, resulting in a more modular and easy-to-maintain architecture.

The platform-agnostic future of Vue (native projects such as Weex and NativeScript Vue are easier to render) are among the other advancements we’re looking forward to.

What does it bring for your project?

There was some concern that pushing Javascript devotees to learn Typescript would increase Vue’s entry barrier. Good news: either way works.

Since Typescript allows engineers to add type information to the Javascript code, it will be able to support projects in the long-term. Also, component code looks almost the same in Typescript and Javascript.

So, if you’d like to kick off with a long-term, maintainable project without hiring more developers — go with Vue.

Composition API

One of the most anticipated Vue 3 changes coming is the Composition API — a new optional syntax allowing engineers to group code for a specific feature together in one place instead of spreading all over a component.

Currently, Vue 2 is using the Options API, which is pretty simple but has some scalability issues when handling a large number of components. On the contrary, the new Component API is designed to be more extendible, readable and much more convenient to extract and reuse functionality.

What does it bring for your project?

Since the restrictions connected with Vue's current API have been lifted, any Vue.js development company will capture more benefits from building projects iterated on and maintained over a long timeframe by large complex engineering teams.

It’s a wrap

After tasting the heights of Vue, authors won’t stop conquering the software development world. We are sure, in just a few months, we’ll get a more comprehensive, far better “Vue” of engineering.

Let's get rolling
Drive your business, and get solutions,
not just technologies.
Have a project in mind?
We'll help you develop this idea into a great solution.
Give us a shout!