Write elegant, easy to maintain Vue components

You've gotten the basics of Vue down.

Now it's time to master it.

Learn how to be a more productive Vue developer by writing simple, easy to understand and easy to maintain components.

Once you've gone through the Clean Components course, you'll be able to:

  • Know when and how to split up components
  • Organize the logic across your components in a way that makes sense
  • Have strategies and tactics to easily extract code into new components

Writing clean components makes you far more productive, and being a more productive developer:

  • Opens up more and better career opportunities
  • Allows you to make a bigger impact in the projects you care about
🗓Next release date to be determined.

Clean Components

I'm Michael Thiessen and I write the most popular blog on Vue which has been read over 715,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've created 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:

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. 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. 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.

Lessons:
  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 take this course and learn the material.

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

There are also huge benefits to re-learning things that you've already learned. Jenn Creighton has an amazing Twitter thread on this.

What's included in Clean Components

📖The Course

The course is my many years of experience working on the front end and with Vue, distilled into four easy-to-digest modules.

They are in text format, so you can work on the course wherever and whenever.

Here are some previews of the course content:

You can check out the full outline here.

📹Video Screencasts

It's great to learn new concepts, but it's even better to see them applied to real life situations!

You'll get several videos of me refactoring components taken from real applications, not just the toy examples used to explain the concepts in the course.

Through these videos you'll:

  • See how the different strategies and principles work together in real examples
  • Get a better sense of when to use each strategy when refactoring
  • Understand the concepts that are taught in the course more deeply

💬Exclusive Slack Community

When you join the course you'll also become part of a larger community of other Vue developers who are eager to improve their skills.

In this community you'll be able to discuss the course content, get help with applying it to your own code base, and participate in general discussion about all things Vue and front end development!

Oh, and of course, I'll be on there to help answer questions as well 😄

🔍Reference Guides

You'll be able to download cheatsheets of the things you've learned throughout the course, so you have something to easily reference while you're working.

These summaries and infographics will make it super easy to implement all of the things you've learned at your job, without having to dig through the course material to find things again.

?Q&A Sessions

As you're going through the course and applying the concepts to your own code, you're certain to have questions about the material.

Starting in January I'll be answering these questions in four, weekly Q&A sessions.

You can submit your questions ahead of time, and I'll answer as many as I can in the video, going through code examples where necessary.

This is your chance to have your specific questions answered and to have me help you move forward!

📞1 on 1 Mentorship Calls

For those of you who want to dive in even deeper, I'm providing a limited number of mentorship calls.

The purpose of these calls is to help you clean up your own code base, whether it's a personal project or for the company you work at.

We'll come up with a strategy at the beginning, and from there I'll check in with you throughout the process to help you with applying the course material to your code.

Only available if you buy the Mentorship package. Limited spots available.

🚀 Future Updates (including for Vue 3)

You'll get all future updates and fixes for the course, and you'll never lose access to the course material.

The course will also have an update for Vue 3 once it becomes more stable and closer to being released. I don't expect very much in the course to change — perhaps just an extra module and a few tweaks here and there.

What others are saying

You're awesome friend. Your articles and tweets helped me a lot so far.

@WellBrained 🇩🇪

Your writing has saved me and colleagues many times.

Tessa 🇺🇸

Thanks for sharing your knowledge with the rest of the world, I really appreciate your work and help.

Sascha 🇺🇸

Since I meet you on the web, my knowledge on Vue has grow a lot and I can't wait to see what coming next with your help.

Ariel 🇨🇺

Thanks for taking your time to do that great job writing about Vue.

Andrew

I'm happy to subscribe to your blog and thank you for all the good articles about Vue.

Majd 🇩🇪

Thanks a lot for all the work you do for the community!

Jacob

First off just want to say think you for your articles. I've read a couple so far but plan on reading the rest as they've been very helpful.

Daniel

Which package will you choose?

Essentials
$197
USD
Just the basics to get you started
  • All 4 modules in text format
  • Update for Vue 3 in early 2020
  • Access to all future updates
Closed — for now.
★★ Mastery ★★
$397
USD
Take your Vue development skills to the next level
  • All 4 modules in text format
  • Update for Vue 3 in early 2020
  • Access to all future updates
  • Video screencasts of me refactoring real application code
  • Join the members-only Slack community to ask questions and learn from others
  • Reference guides and cheatsheets to easily remember what you learned
  • Four Q&A videos that will be available January 2020
Closed — for now.
★★★ Mentorship ★★★
$997
USD
Dive deep with one on one coaching
  • Everything from the Mastery package
  • You get priority for Q&A and answering questions on Slack
  • Five 60-minute one on one mentorship calls
Limited spots available!
Closed — for now.
Looking for a team license? Message me on Twitter or email me for details.

Still not sure?

💰 There's a 30-day money-back guarantee 💰

If you aren't happy with the course, I'll give you a full refund.

No questions asked.

Just email me at michael@michaelnthiessen.com and I'll sort you out.