What’s coming in Vue.js 3.0?

It hasn’t been that long at all since we last checked in on the state of Vue.js 3.0! Our roadmap is more of a basic guideline; no one wants to be pinned down with concrete dates when all this open road lies ahead. We’re going where the wind and the Vue community takes us, man. However, that doesn’t mean we can’t take a rest stop at this scenic overlook and update our itinerary with the latest details coming out of Vue Toronto!

Last week, Evan You gave a keynote speech at Vue Toronto and previewed some of the features that are a part of the upcoming Vue 3.0. Today, we’re taking a look at what those might be!

Vue.js 3.0 features

According to Gregg Pollack and Adam Jahr, who were in the audience, “Vue 3 will be an improved evolution of the Vue.js we already know and love”. It’ll take advantage of new abilities in modern browsers for better performance and use.

In general, the goal is a smooth transition over to Vue 3. No one wants a bumpy upgrade, least of all Evan You and the Vue team.

SEE ALSO: Vue CLI 3.0 is here: Less configuring, more coding

Faster

Vue is already fast, but the team plans to make it even faster with a few new tricks. First off, the Virtual DOM rewrite is intended to shave off time from mounting and patching, with up to 100% improvements. More compile-time hints will reduce runtime overtime.

Additionally, the rewrite should include more efficient code to create virtual nodes.

The Virtual DOM rewrite. Slide available here.

The Optimized Slots Generation is designed to ensure  dependencies are tracked by the correct instance. Right now, when a parent component re-renders, its child has to as well. In Vue 3, the parent and child can be re-rendered separately.

Optimized Slots Generation. Slide available here.

Thanks to the new static tree hoisting, Vue 3’s compiler can skip patching entire trees. It should work with multiple occurrences. It should also reduce the cost of rendering, since the compiler will be able to detect what is static and then hoist it out. For the static props hoisting, it will now be able to skip patching the node itself and patch the children.

Static props hosting. Slide available here.

More importantly, the new proxy-based observation is estimated to double the speed and use half the memory for Vue’s reactivity system. Designed to use the ES2015 proxies, the new system removes any previously existing caveats, which accounts for the improved performance. However, Vue 3 will still support IE11 with the old observation method.

Look how much faster this proxy-based observation is! Slide available here.

SEE ALSO: New users pick Vue over React, report shows

Smaller

Vue is already pretty dang small, weighing in at around 20kb gzipped. However, this new release should come in at half that, with a constant baseline size of <10kb gzipped. How? Mostly by eliminating the libraries you’re not using, like Tree Shaking. If you don’t use the element, it’s not included.

Easier to use and maintain

Vue 3 will support TypeScript. Additionally, packages will be decoupled, making everything more modular and easier to maintain.

Vue 3 is also platform agnostic, so developers can utilize it with their favorite Web, iOS, or Android technologies.

Experimental features

While this is far from a complete list, right now we have two ne experimental features:

• Hooks API – This API is designed to avoid some of the gotchas with Mixins that get developers when they try to share behavior between components in Vue. It should fit better with idiomatic Vue code.
• Time Slicing Support – By breaking up JS execution into segments, the browser should be able to handle re-rendering components easier.

SEE ALSO: Create your first app with Vue.js

Vue 3.0 roadmap

We talked about this last time: nothing is written in stone. So, here’s more of a general idea of how this release schedule should look like:

1. Internal feedback for the runtime prototype. We’re here now! Right now, everyone is making sure that the runtime prototype actually, you know, runs. This step is all about looking at the internal changes and making sure all the libraries are good to go for 3.0.
2. Public feedback on breaking changes. Don’t like something? Say something! This is when your voices are most influential.
3. Compatible features for 2.x and 2.x-next. Gotta make sure everything is backwards compatible! The last minor release in 2.x will become the LTS release; it’ll get bug and security fixes for 18 months after 3.0 arrives.
4. Alpha phase. Alpha releases show up here. This is mostly for stability testing in small greenfield apps.
5. Beta phase. Time to update all the supporting libraries and tools to make sure everything actually works together. Community help is wanted here to make sure all the libraries are ready for 3.0.
6. RC phase. No more new APIs at this point. This phase also includes a “compat build” of 3.0 with backwards compatibility for 2.x APIs.
7. IE11 build. This is the last step before general availability! Got to get the IE11 compatibility build in.
8. Final release! No date is set, but this should happen sometime in 2019. Of course, a solid and stable release is more important than making sure it happens next year.

Want to keep updated on the state of Vue 3.0? There’s a Vue.js News feed that updates regularly with blog posts and podcasts about what’s going on in the Vue ecosystem. Evan You’s twitter feed is a must-follow. And, of course, we’ll keep you posted!

The post What’s coming in Vue.js 3.0? appeared first on JAXenter.