In Defense of Teaching With Todo MVC
I’ve had two rather lengthy courses published on egghead.io, both based on building a todo application. As I write this, I am in the process of creating a tutorial for Cypress that consists of a series of videos and written material. This new material is also based on building a todo application.
I’ve seen blog posts and an occasional tweet bemoaning the use of “yet another todo app” in a tutorial.
I assure you, building todo apps is not some bizarre obsession of mine. I am not training for some todoMVC time trials competition and I am quite capable of building other things.
So why do I keep creating todoMVC based training materials?
Because it works!
As boring as it may be to build, it gets the job done! A todo app is a known entity. It is familiar as an application to most developers and if not, it is still familiar as a concept.
Even if you’ve only ever done it on paper, most people have created a list of items and checked them off. There is no mystery. No chance of being confused about the purpose of a feature. As a learning tool, the todo app simply doesn’t get in the way.
With a well understood goal the lesson can focus on the tools and techniques that are being presented rather than being distracted by complex requirements for some unknown or unnecessarily complex app.
You know going in, that you’ll need to do a few things:
- Show the todos
- Allow the creation of new todos
- Allow todos to be marked complete/incomplete, and indicate the difference somehow
- Delete todos
- Filter todos
- Store the todos somewhere
- Load the todos from storage
- Update the stored todos
Replace each instance of todo here with whatever thing your app cares about and these are all pretty common tasks for an application. If you come out of a todo tutorial knowing how to do these things, you can start building an app where you replace todo with your thing.
Sure, you might need some bells and whistles not mentioned here, but you can figure that out with the same, boring todo app.
Want to figure out how to add OAuth to an application? Throw a login in front of the todos. Want to learn web sockets? Update your app to show real-time updates to your todos. Want to learn TDD? Force yourself to create tests for all of the functionality as you build the app. Some new browser API? Find a way to use it in the humble todo app, get the hang of it there, then go apply it to your real-world use case.
The point isn’t that you need a secure, real-time, test-driven todo app that uses the latest and greatest browser API. The point is that it is the right amount of simple with just enough moving parts to make it a great playground for learning the basics of more complex topics.
The bottom line is that todoMVC is a great teaching tool because it isn’t exciting.