A new version of front-end framework, Vue.js, has been announced. It is leaner and faster than the previous version. 

Vue.js is a small, flexible JavaScript library that you can use to build interactive web applications. The developers say it offers simplicity, performance, and flexibility. It is made up of a core view layer, developer tools and libraries. 

The new version is faster and lighter than the current release, with a rewritten rendering layer that is now based on a lightweight virtual-DOM implementation that the developers say improves initial rendering speed and memory consumption by between two and four times in most scenarios. It also offers the ability to separate the  runtime and the template-to-virtual-DOM compiler. This means you can pre-compile templates and ship your app with only the runtime, which is less than 12kb min+gzip.

The virtual-DOM implementation has been written to provide optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render. It also applies a number of other optimizations during the template-to-virtual-DOM compilation phase, including detecting static class names and attributes so they don't waste time after the initial render; and detecting sub trees with no dynamic bindings so they too aren't unnecessarily re-rendered.

To get around the choice of templates of JSX, Vue.js supports both. Writing about the new version on the Vue.js website, developer Evan You said:

"you can keep using the familiar template syntax, or drop down to the virtual-DOM layer whenever you feel constrained by the template DSL. Instead of the template option, just replace it with a render function. You can even embed render functions in your templates using the special <render> tag! The best of both worlds, in the same framework."

Streaming server-side rendering with client-side hydration is also supported in this version. The blog post says that:

"One pain point of current mainstream server rendering implementations, such as React’s, is that the rendering is synchronous so it can block the server’s event loop if the app is complex. Synchronous server-side rendering may even adversely affect time-to-content on the client. Vue 2.0 provides built-in streaming server-side rendering, so that you can render your component, get a readable stream back and directly pipe it to the HTTP response. This ensures your server is responsive, and gets the rendered content to your users faster."

Other improvements to the new version include rendering to native interfaces on mobile. Work is ongoing to create a port of Vue 2.0 that uses weex, a new cross-platform UI, as a native rendering back end, and to adapt Vue 2.0’s virtual-DOM to run inside ReactNative.

Vue 2.0 is still in pre-alpha, and the developers are aiming for beta by the end of May or early June. Vue.js 1.1 will be released alongside the 2.0 beta.

More Information

Vue Blog

Vue.js 2.0 Alpha Code

Related Articles

React 15 Released

JavaScript For Native Apps 

NativeScript 1.0.0 Released 

To be informed about new articles on I Programmer, sign up for our weekly newsletter,subscribe to the RSS feed and follow us on, Twitter, Facebook, Google+ or Linkedin. 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info