Clean Components

Write elegant, easy to maintain Vue components

I'm Michael Thiessen and I write the most popular blog on Vue which has been read 650,000 times.

You've gotten the basics of Vue down, but now what?

You know deep down that you aren't the amazing Vue developer that you know you can become.

Sure, you can make things happen, but you keep running into roadblocks:

I've been there myself, and it sucks.

That's why I'm creating Clean Components.

By the time you're finished with this course, you'll understand the most important things you need to know about how to write clean and elegant code.

Once you're through you'll:

Preview course content!

Join 3900+ other devs and get updates and previews of the course content as I work on it.

Course Outline

Tentative outline may change over the coming weeks.

Module 1 — Tidying your template

We'll look at different strategies for breaking up and simplifying your template.

Lessons:
  1. Different jobs
    Code that has different roles should be in different components
  2. Repeated sections
    Simplify and condense repeated sections by using a dynamic approach
  3. Control flow
    Techniques for cleaning up v-if and v-for directives
  4. Levels of abstraction
    Reducing the amount of brainpower needed to understand your component

Module 2 — Side effect surgery

Side effects create a lot of unnecessary complexity and make working with your components really difficult. This is especially true when they get into our computed props.

In this module we look at why side effects are bad, the most common ways they sneak in to our computed props, and how to get rid of them.

Lessons:
  1. Updating component state
    The most common way for computed props to include a side effect
  2. Mutating an array
    The sneakiest way that side effects are introduced
  3. Calling methods
    You also have to be careful with code outside of the computed prop

Module 3 — Perfecting computed props

To improve our skills quickly we need to focus on the most important things and ignore the rest. That's why we're spending an entire module on computed properties.

Lessons:
  1. The most important thing in Vue
    What declarative code is, why it's better, and how computed props help us be more declarative
  2. Computed composition
    Composing computed props together is a powerful way to simplify and reduce clutter in your component
  3. Derive everything!
    How to convert parts of your component to computed props, and why you should do this as much as you can

Module 4 — Component seams

Code forms natural seams where smaller pieces of functionality are stitched together.

Splitting up components intelligently is all about finding these seams in your existing code and breaking them along these seams.

  1. All about seams
    What they are and how to find them
  2. Seam splitting
    How to break one component into two by splitting along a seam
  3. Child mitosis
    Strategies for splitting off a component into parent and child components
  4. Sibling mitosis
    Strategies for splitting off a component into sibling components

Is it for me?

As long as you've created something in Vue, you know enough to get a lot out of this course.

Even if you've been using Vue for several years, I'm sure there are many things in this course that will help you up your game.

In fact, the more Vue code you've written, the more opportunity you have to go back and improve!

Release Date

The course will be released December 2, 2019 and be open until December 6, 2019. After December 6 you will not be able to purchase the course until it opens up again.

Preview course content!

Join 3900+ other devs and get updates and previews of the course content as I work on it.