Course Outline

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. Reducing Redundant Repetition
   Simplify and condense repeated sections by using a dynamic approach
3. Cleaning up Control Flow
   Techniques for cleaning up v-if and v-for directives
4. Different 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.

Check out a preview of this module.

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 Feature in Vue
   What declarative code is, why it's better, and how computed props help us be more declarative
2. Composing Computed Props
   Composing computed props together is a powerful way to simplify and reduce clutter in your component
3. Derive Your State
   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 Framework

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.

Lessons:

1. Finding seams in your template
   What they are and how to find them
2. Finding seams everywhere else
   How to find them in your interface, state, computed props, and logic
3. Stacking Seams
   Why stacking seams allows us to find where we should split our components
4. Splitting Along the Seams
   Finally, we get to rip apart some code!