6 min read

The internet was ablaze when Evan You, creator of Vue, published an RFC to introduce a function-based component API earlier this month. This followed a huge discussion in the Vue community on whether such an API is really needed.

This proposal came after Evan You previewed an experimental Hooks API back in November at Vue Conf Toronto 2018.

Why Vue needs a function-based component API

Components help you to abstract your code into smaller pieces. This gives your web applications a better structure, makes the code more readable and understandable and most importantly enables you to reuse logic across multiple components.

According to the RFC, the components API in Vue 2.x has some drawbacks in terms of reusability. The three common patterns that are generally used to achieve reusability in Vue are mixins, high-order components, and renderless components. Each of these come with their share of drawbacks:

  • Mixins bring implicit dependencies in code, causes name clashes, and make your code harder to understand.
  • HOCs can often be verbose, involve lots of passing props and hoisting statics, and can cause name conflicts.
  • Renderless components require extra stateful component instances that come at the cost of performance.

This function-based component API aims to address all these drawbacks. Inspired by React Hooks, its objective is to provide developers a “clean and flexible way” to compose logic and share it between components. The team plans to achieve this by moving the logic code to a “composition function” and returning reactive state.

Another motivation behind this proposed change is to provide better built-in TypeScript type inference support as function-based APIs are naturally type-friendly. Also, code written with function-based APIs compresses better than an object or class-based code.

What Vue developers think about this RFC?

The Vue community was a little taken aback with this proposal that will essentially change the way they used to write Vue. They were concerned that this will take away the most desirable property of Vue, which is its simplicity. Vue’s class-based API made it easy to understand and get started with. However, bringing function-based API to Vue will complex things in exchange for very fewer advantages.

Some argued that this change will make it another React. “Like a lot of others here, I chose Vue vs React for the simplicity and readability of code. The class-based API was easy to understand and pick up. If I wanted React, I would have just chosen React from the beginning. I get that there are some technical advantages to doing this, but Vue 3 is starting to really turn me off of staying with Vue going forward,” a developer shared on a Reddit thread.

Developers were concerned that the time they have invested in learning Vue will go to waste as everything is about to change. A Vue developer commented on Reddit, “You learn to do something one way and then they change it up on you. Might as well just switch to react at this point.” Many compared this scenario to that of Angular 1->2 or Python 2->3 and suggested switching to Svelte to avoid the mess.

Some, however, liked the syntax and are looking forward to playing around with the API.  A developer shared, “But I read through, checked out the new (simpler) example, read Evan’s arguments about logical task grouping, and on a second read with a more open mind, I actually kind of like the new syntax and am now looking forward to trying it out. I’m glad they agreed to keep the object syntax around though.”

How the Vue team responded

When the RFC was first published it implied that the current API will be deprecated in a future major release. Also, there was a lot of confusion around the “compatibility” and “stable” build.  Many developers felt that this RFC is already “set in stone” from the way it was communicated. They felt that the core team has already decided to bring this API to Vue without community consultation. So, one of the reasons behind this confusion was how the change was communicated. The team acknowledged this and asked for suggestions from the community to improve their communication.

The core team clarified that the update will be additive and the team has no plans to remove the Object API in a future major release. Evan You, the creator of Vue, said in a thread, “feel free to stay with the current API for as long as you wish. As long as the community feels there’s a need for the old API to stay, it will stay. The only one that can make the decision to switch to the new API is yourself.”

He also addressed the concerns on a Hacker News thread:

There is a lot of FUD in this thread so we need to clarify a bit:

– This API is purely additive to 2.x and doesn’t break anything.

– 3.0 will have a standard build which adds this API on top of 2.x API, and an opt-in “lean build” which drops a number of 2.x APIs for a smaller and faster runtime.

– This is an open RFC, which means it’s not set in stone. The whole point of having an RFC is so that users can voice their opinions. It’s not like we are shipping this tomorrow.

After listening to various perspectives shared by developers, the core team revised the RFC accordingly putting everybody finally at ease. Guillaume Chau, a member of the Vue core team, put out a clear and concise plan of action on Twitter to which people are responding positively. This plan reassured that the Object API will not be deprecated until the community stops using it and the proposed API will be first offered as a standalone plugin for Vue 2.x.

Some developers have also started to try out the new API:

Closing thoughts

Open source programmers put their time and efforts in building software that helps the community and an RFC (request for comments) is a way for the community to get involved in building high quality software at scale. Through RFC you can share your constructive feedback on why a change is necessary or is not necessary. And, all this can be done in a respectful way.

This showed us a very good example of how an RFC should really work. Publishing an RFC, discussing with the community, listening to the community, and deciding collectively what to do next. Despite some hiccups in communication, the Vue core team did a good job in engaging with the community to develop the roadmap for the function-based component API in Vue.

Read the RFC for function-based component API for more details.

Read Next

Vue 2.6 is now out with a new unified syntax for slots, and more

Learning Vue in 2019 with Anthony Gore’s developer knowledge map

Evan You shares Vue 3.0 updates at VueConf Toronto 2018

Bhagyashree R