🔭 #11: talking about testing on the Views on Vue podcast, more about side effect free components, and information on the progress of my book
The last couple of weeks, I was a guest at the Views on Vue podcast, talking about testing Vue applications, thinking closer about side effect free components, and continued writing on my book.
Hey,
The last couple of weeks, I was a guest at the Views on Vue podcast, talking about testing Vue applications, thinking closer about side effect free components, and continued writing on my book.
In one of my recent Twitch streams, I demonstrated a concept for writing side-effect-free Vue components. I was thinking closer about it, and I plan to write an in-depth article about the topic.
Talking about Twitch streaming: I decided to allow myself some time to relax. But I have a couple of live coding session ideas in my head that I like to share with you on Twitch at some point in the near future.
This is the 11th issue of my Recent Discoveries newsletter. If you don't want to miss the next issue, hit subscribe.
Side effect free components
Side effect free components are easier to test and easier to understand. In one of my recent Twitch streams, I demonstrated making components free of side effects. Furthermore, the concept features a way of handling loading and error states with separate components.
import { defineComponent, h } from 'vue';
// Rendered after data is fetched successfully.
export default defineComponent({
name: 'ShoppingList',
props: ['data'],
setup() {
// We can also use `<template>`
// for the default component!
return () => h('div', [/* render data */]);
},
});
// Rendered if fetching data fails.
export const error = defineComponent({
name: 'ShoppingListError',
setup() {
return () => h('div', ['Error!']);
},
});
// Rendered while fetching data.
export const loading = defineComponent({
name: 'ShoppingListLoading',
setup() {
return () => h('div', ['Loading ...']);
},
});
Next we can see how to use all three components:
// We not only import the default component,
// but also the loading and error state components.
import * as shoppingListComponents from './ShoppingList.vue';
// Uniform model interface
const shoppingListModel = {
get: () => { /* data fetching logic */ },
create: data => { /* create logic */ },
update: data => { /* update logic */ },
// ...
};
// `withData()` takes care of data fetching and
// renders the correct component (loading/error/default).
const ShoppingListWithData = withData(shoppingListModel, shoppingListComponents);
I'm working on an in-depth article about the topic. But for now, you can re-watch the stream on YouTube to take a closer look.
Views on Vue podcast appearance
I was honored to be a guest on the Views on Vue podcast. The wonderful hosts, Lindsay Wardell, Steve Edwards, and I, talked about writing good tests for Vue components.
Writing good tests book update
Progress on my book is currently slowing down. There are a couple of reasons for that. First of all, the holiday season is over, and I'm working 1.25 full-time jobs again. Also, the 80/20 rule is hitting. I finished the first draft of the first chapter and wrote rough outlines for almost all the remaining chapters. Conceptionally, 80% of the work is done, but now come the last 20%, which famously take up 80% of the time. Last but not least, perfectionism is coming after me; shortly after finishing chapter one, I started rewriting and fine-tuning large parts of it.
But I enjoy digging deeper and deeper into the matter while writing the book. I learn a lot, and I'm confident that the final product will be something I'm proud of. I plan to release the intro of chapter two on https://goodvuetests.substack.com next week.
Sponsors
Storyblok is a headless CMS with a Visual Editor. They’re currently working on their V2 release! You can start using the V2 beta today!
Nuxt.js is a web framework for building modern apps & websites with Vue.