BT

InfoQ Homepage News New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto

New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto

Bookmarks

With the major iteration of the Vue.js framework scheduled for Q1 2020, Evan You, creator and project lead of Vue.js, discussed in detail at VueConf Toronto the design principles behind Vue 3, together with the latest additions to the new release.

You started with observing that Vue, contrary to some other popular frameworks, is not linked to a corporation, and as such the development of Vue is driven by the understanding of the Vue developer community and how to better serve their needs. As the Vue community grew, it also diversified. You distinguished beginners with basic knowledge of HTML/CSS, professionals moving on from jQuery, veterans migrating from another framework, back-end engineers looking for a front-end solution, and software architects dealing with software at scale.

The diversity of profiles in the developer community corresponds an equal diversity of use cases. Some developers may want to sprinkle interactivity onto legacy applications, other may just have to deal with a one-off project with a fast turnaround but limited maintenance concerns. At the other end of the spectrum, architects may have to deal with large-scale projects lasting for years, with a team of developers who will necessarily be fluctuating over the lifetime of the project.

Vue thus needs to face the challenge of designing its framework for a diverse audience and use cases, and this necessarily results in tradeoffs. A key driving factor behind Vue 3 is that, while Vue 2 API is appreciated by developers for the speed by which they may learn it, the same API also showed maintainability issues at scale. On the other hand, continuously adding features to the framework to satisfy a diverse set of needs presents the danger of leading to a heavier bundle. You grouped the tradeoffs and balancing acts shaping the Vue 3 release along four dimensions.

The first tradeoff is approchability vs. scalability. The perceived low entry barrier of Vue is an important factor behind its adoption. While Vue does want to remain approachable to developers, it also had to solve the issues observed with the current object-based API (called Options API) when building large or complex components. The new API (called Component API), previously reviewed by InfoQ, is expected to deliver better separation of concerns and reusability for complex components. To keep Vue’s approachability, the Component API is entirely additive and opt-in.

In the same vein, the design decision was made to write Vue 3 with TypeScript. In addition to enhancing the maintainability of the Vue codebase, and making it easier for developers to contribute, the decision has two positive consequences. First, as TypeScript increases in popularity and is a frequent choice for large projects, having Vue 3 internals in TypeScript allows those developers to benefit fully from Vue’s TypeScript definitions, together with the usual code support available in modern IDEs like Visual Studio Code or WebStorm. Second, plain JavaScript users also benefit for code intelligence features with modern IDEs, even if they do not use TypeScript. Additionally, You contends that TypeScript’s Vue code is 90% JavaScript, as Vue type definitions allow developers to annotate only few parts of their code.

The second dimension concerns the view declaration. Vue 2 supports both templates and JSX-based render functions. The template support is valued by the segments of the Vue community that are familiar with HTML and CSS, while the the render function may be preferred by developers who have not been exposed to it (You hinted iOS developers may fit in that category). Vue 3 seeks to exploit the best of both options.

On the one hand, templates offer performance optimizations which are exploited by Vue 3 when compiling templates into optimized render functions leveraging a data structure itself optimized for diffing purposes. As a template unequivocally segregates static nodes (<p> Lorm ipsum </p>) from dynamic nodes (<span>{{message}}</span>), Vue 3 diff algorithm may keep track of the dynamic parts and their dependencies in a specific data structure.

On the other hand, JSX render functions allows developers to express complex ad-hoc logic with the full expressivity of the JavaScript language. While practical and outright necessary in some cases, JSX render functions are however notoriously hard to optimize in a generic way. You explained that extremely smart flow analysis would be required to do so, and that the Prepack Facebook project pursued that goal and stalled because of the difficulty. Vue 3 thus maintains its dual view declaration mechanisms while seeking to optimize view templates diffing and rendering.

Another tradeoffs is power vs. size. With every new feature, the bundle size potentially increases for every user. Vue 3 addresses this issue in two ways. You explained first that most global APIs and internal Vue helpers will be provided as ES module exports and thus tree-shakeable. Furthermore, the Vue 3 compiler will also generate tree-shakeable code for templates. You gave the following example of usage of v-model:

<input v-model="text" type="checkbox">
<keep-alive></keep-alive>

Which is compiled into:

import {vModelCheckbox, KeepAlive, ...} from "vue"
...

As a result, You mentioned that the Vue 3 core weight is reduced to 10KB from 20KB. From this core onwards, developers will only accrue the weight of the Vue modules they use.

The last tradeoff dimension envisaged by You is coherence vs. low-level flexibility. Vue 3 will seek to provide a coherent experience by updating Vue Router, Vuex and test-utils in line with the new vision. Vue3 will also offer developers the ability to define their own renderer. This ability is already available in React and has been used profusely to create renderers for a large variety of host environments, like mobile or terminal devices.

Vue 3 will also provide low-level APIs for customizing the output of the template compiling process. You mentioned that tools could leverage that API to provide better DX, or UX (for instance enforcing accessibility characteristics in UI markup). In particular, developers can define custom transforms which apply to parsed templates. While it remains to be seen what the Vue community will come up with, if the Babel community is any indication, it is possible to speculate that an enhanced templating language (for instance with macros) may see the day. A first application of these low-level facility is a Vue 3 template explorer, which You claiming that the new API allowed him to build in a single afternoon.

Vue 3 is scheduled for release in Q1 2020. The current Vue 2 release brought performance improvements in the form of a smaller library, and a faster, lighter-weight Virtual DOM implementation, forked from Snabbdom, in addition to server-side rendering.

The full talk is available and contains extended information and includes demos. Vue is a progressive framework for building user interfaces, including single-page applications. Vue.js is available under the MIT open-source license. Contributions are welcome via the Vue.js GitHub package and should follow the Vue.js contribution guidelines.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.