DEV Community

Enjoy the Vue

Episode 80: Opting into the Composition API with Oscar Spencer

With the release of Vue 3, developers now have access to the Composition API, a new way to write Vue components. This API allows features to be grouped together logically, rather than having to organize single-file components by function. Using the Composition API can lead to more readable code, and gives developers more flexibility and scalability when developing their applications, which signals a bright future for Vue. At least, this is what today’s guest believes! Today, we speak with Oscar Spencer, developer at Tidelift and co-author of the Grain programming language, about Vue’s Composition API and why he believes it represents great things for Vue. We touch on Options API, our opinions of a template-first approach, and why Composition API is infinitely better than Mixins, as well as how JavaScript can prepare developers for Options API and what to watch out for when you first start working with Composition API in Vue. All this plus this week’s picks and so much more when you tune in today!

Key Points From This Episode:

  • An introduction to today’s guest, Oscar Spencer.
  • The panel shares what sound their Slack makes when they receive a new message.
  • Oscar shares his personal passion for the Vue Composition API.
  • Why he believes that Vue’s bright future includes the options API too.
  • Why Composition API represents great things for the future of Vue.
  • The panel discusses commit messages, interactive rebasing, and squashing.
  • What Oscar means when he says that the Composition API makes Vue more scalable.
  • Oscar and the panel weigh in on taking a template-first approach 
  • Discover Oscar’s situational approach to composables when reusing business logic.
  • Composition API versus Mixins and why Oscar believes Composition API is superior.
  • Whether Options API or Composition API is easier to teach to a beginner developer.
  • How JavaScript prepares developers for Options API, which Oscar describes as ‘cozy’.
  • Oscar on how to know when to use Composition API versus Options API.
  • Why you would choose Composition API over simply using JavaScript: reactivity.
  • The panel shares some of the longest Vue components they have worked on.
  • Render functions in Vue and Oscar’s perspective on React versus Vue.
  • What to look out for if you’re new to Composition API; not understanding Vue’s reactivity.
  • Why the coolest thing Oscar has done in Vue is write a backend using the reactivity API.
  • This week’s picks: Only Murders in the Building, The Artful Escape, Dyson Sphere Program, The Great Ace Attorney Chronicles, and more!

Tweetables:

“When I look at the Composition API, I see a very bright future for Vue.” — @oscar_spen [0:02:22]

“The Composition API just gets rid of a whole host of issues that you have with Mixins. In fact, Mixins were my only complaint in Vue 2.” — @oscar_spen [0:24:05]

“Don’t be too scared of the [Composition API]. It was definitely designed with composition in mind. It was designed for you to have your composables consuming composables and not blowing up the world – [while] being fairly easy to follow as well.” — @oscar_spen [0:27:34]

“Regular JavaScript modules only get you so far because, fundamentally, what these regular JavaScript modules are missing is the reactivity. What the Composition API is letting us do is compose things that are reactive.” — @oscar_spen [0:41:44]

“By far the biggest gotcha with the Composition API is not understanding Vue's reactivity. That’s going to be the biggest gotcha that you can possibly run into. I highly recommend, instead of trying to wing it, just go look at a tutorial.” — @oscar_spen [0:57:02]

Links Mentioned in Today’s Episode:

Special Guest: Oscar Spencer.

Episode source