Vue.js has had a surge in popularity and has quickly carved out its place as one of the top front-end JavaScript frameworks. I was given the opportunity to take part in the 2019 VueConf US. The theme for this year’s conference was ‘Art. Code. Vue.’ which provided a backdrop of simplicity and elegance—perfect for the Vue framework.
Let’s start with a look at where Vue currently is and where it will be going.
State of VueNation
A sub-theme began to develop for the conference around the new improvements for current and upcoming versions of Vue beginning with the keynote presented by the Vue creator, Evan You. Moving forward, coding with Vue is going to be even simpler, while continuing to maintain its current performance and strengths.
What’s new now?
In addition to reporting on the continued growth of the framework, Evan gave us an overview of new features in Vue 2.6 (current):
- New and more performant slot syntax
- Improved async error handling
- Improved compiler error messaging
- Built-in data prefetch support during server-side rendering
We got a snapshot and demo of the latest features for the development tools for Vue developers:
- Vue Devtools (Chrome Extension)
- Routing, Performance and Settings tabs
- Editable Vuex state
- Initial NativeScript support
- Vetur (Visual Studio Code Extension)
- Template intelligent autocomplete support for expressions inside interpolation and directives
- Intellisense support for child component tags and props inside a parent component
What’s on the bleeding edge?
We also got look at (and a demo of) some newly proposed features for the upcoming 3.0 release. Evan demoed core concepts contained within a few requests for comments (RFCs) from the developer community:
- Slot unification: all slots are implicitly scoped rfcs#20
- Class API proposal that supports ES2015 and TypeScript and continues to support the current Object API rfcs#17
- Advanced Reactivity API which allows reactivity to be created and observed outside of components, as well as connected to components rfcs#22
- Dynamic Lifecycle Injection which allows you to hook into a component’s lifecycle events after the component has been created rfcs#23
Evan illustrated that these last two points, when used in combination, provide a useful new composition pattern that is intuitive and performant. It also reduces call order constraints between components.
Lastly, we were given a sneak peek at a few features soon to be released for comment:
- Global API re-design
- Render function API change
- Changes to Functional and Async components
- Optional props declaration
- Attribute fallthrough behavior change
What else can we look forward to in Vue 3.0?
Picking up on the theme of a simpler, more expressive version of Vue, Chris Fritz—curator of the Vue documentation—further pulled back the curtain on upcoming features in Vue 3.0. He summarized these into two categories: simpler and explicit.
The key takeaway:
- No more reactivity caveats. Which means simpler adding and removal of items from reactive objects and arrays: e.g. no more `Vue.set()` and `Vue.delete()`
- Multiple template root node in Single File Components:
<template> <div></div> <div></div> </template>
- Simpler transparent wrappers to more closely mimic native HTML (this is particularly useful for creating input components)
- V-on and v-model directives will compile to attributes. Therefore no more $listners, overriding native input event, or model option
- Just v-bind=”$attrs”
- Improvements to v-model
- Simpler render functions that are easier to compose/read
Migrating from Vue 2.x to Vue 3.0 will be made easy with a tool to scan and automatically fix the code to be 3.0 compliant. Many of these features will also be backported to Vue 2.x.
Art. Code. Vue.
In addition to the topics of new features and best practices for development, some VueConf US 2019 sessions directly picked up on the artistically-centered theme of the conference.
With an aesthetic exploration of quality achievement (and motorcycles!), Jen Looper suggested breaking down the contrast that exists between the logical ‘classic’ mode and the imaginative and sentiment producing ‘romantic’ mode of development. Finding a fulcrum point that allows a developer to balance each mode bridges the divide between developer and designer.
In a great illustration of this bridged divide, Sarah Drasner provided design pattern examples that produce a better end-user experience by reducing cognitive load. A simple example was adding page animations when a user routes between pages in an application. A more complex example was creating a 3D layout for a page since 2D is an abstraction.
With its simple, expressive syntax, Vue is both performant and versatile – a perfect choice for developers wanting to deliver higher-level experiences.
