Hosted by This.JavaScript, an online event where developers learn about the latest news in JavaScript, State of Frameworks and Libraries covered all the breaking news in the world of frameworks.
On Feb. 19, State of Frameworks speakers, including many of the best and brightest from the development world, gave us updates on all things frameworks.
Here’s some of what Evan You, creator of Vue.JS, had to say about what’s coming up at Vue.
Evan You- Creator of Vue.JS- @youyuxi
Vue is set for major changes in the coming months. Most importantly, Vue developers have been hard at work on a major release.
RFC Process
Modeled after Ember, Rust, and React, Vue recently developed a new RFC process that will be used to land substantial changes to the framework in the coming months and years. All changes in Vue 3.0 will be implemented using this process, and users should keep an eye on Vue’s C-repo if they want to learn more about upcoming changes to the application.
Vue 2.6
In anticipation of 3.0, Vue recently released a minor release for 2.X, Vue 2.6.
Vue developers shipped a new slot syntax that addresses several of the problems with the existing syntax. The new syntax is fully compatible, which is why developers were able to ship it in a minor release.
The old syntax still works, but users can choose when to migrate to the new syntax when they see fit. This new syntax will be used for Vue 3.0.
Along with the new syntax, Vue 2.6 comes with other performance improvements underneath. For example, one new feature ensures that when you have parent components that are passing slots to the child components, change detection is more accurate. This means that, in certain cases, Vue is able to update only the parent component without forcing the child components to update as well.
Vue 2.6 also features improved async error handling. So, if a user utilizes an async function for their lifecycle hooks in their components, any errors captured during that async process will be captured by Vue’s error handling mechanism so Vue can decide to report them to a service or to display alternative content to tell the user about it.
Vue 2.6 also improved the compiler error messages, so when developers make a syntax error, the error message now just gives provides a code frame pointing to the exact mistake.
Vue 2.6 also provides built-in data prefetch support during server-side rendering. This is essentially a hook that allows any component down the tree (not just at the route level) to prefetch data on the server during server-side rendering. In turn, the rendering process will wait until the data is fetched before calling the callback or resolving the the render promise.
This feature decouples all the data from prefetch rendering from the router so it’s no longer router- dependent, simplifying the process. The Apollo integration and the next JS framework are both using this as the lower-level mechanism to greatly simplify their API.
Vue 3.0
Vue 3.0 is currently under development. Its primary goals are, of course, to make Vue faster and smaller — fundamentally, through major design, not just incrementally as in a minor release like Vue 2.6. Vue 3.0 also aims to make the codebase itself more maintainable.
Rewriting DOM implementation
For 3.0, developers are rewriting the virtual DOM implementation and improving the compiler architecture for more compile time optimizations.
There are a lot of hints that can to be given to a virtual DOM algorithm to make it faster. Many of these hints can be statically analyzed when compiling a template. Developers are taking advantage of that capability to do more time optimizations, gathering hints about the runtime behavior and leaving them so that runtime can take advantage of that and skip a lot of unnecessary work.
Improving runtime and memory
Vue 3.0 will also switch its change detection mechanism from ES5 getters and setters to ES6 proxies. This practice will give Vue 3.0 better startup performance and less memory usage, based on current benchmarking. It will also give complete language coverage.
Vue is already seeing great improvements: more than double the speed in less than half the memory usage. This is just one benchmark, but Vue developers hope for similar across-the-board improvements in the future.
Currently, the Vue runtime is just one big global object: It contains every API that developers ship in the runtime. This will change in 3.0. With a smart enough bundler that has tree shaking capabilities, the API is easy to import.
The new baseline runtime size will be around 10 KB gzipped, which is a great improvement over the current runtime: a bit over 20k right now. Vue 3.0 aims to shave the runtime to approximately half its current size for the baseline, making it even more maintainable.
Flow to TypeScript and coding documentation
Vue 3.0 is also switching from Flow to TypeScript. The decision to switch to TypeScript was based on the vast improvements in the the tooling and ecosystems.
In terms of coding management, Vue 3.0 will make improvements in that area as well. Each package will have its own set of internal APIs and test suites,so it’s easy to delegate to team members so that they can maintain and essentially own a piece of code. This will involving writing better documentation for the internal architecture so as to lower the barrier for contribution.
Among other changes that will improve performance, including improving compiler architecture, documentation will receive a major overhaul in Vue 3.0. Overall, this will lower the barrier for participation, allowing more people to contribute to the code in the future without having to understand its entire history. Vue is also exploring the possibility of using time-slicing tools to allow for progressive hydration.
Most compatible changes will land in 2.x first, so you can start using some of these changes as soon as they’re first implemented! That will make the transition to 3.0 all the smoother, along with some migration tools and dedicated compatibility adapters.
Need JavaScript consulting, mentoring, or training help? Check out our list of services at This Dot Labs.
Top comments (0)