TodoMVC App Written in Vanilla JS in 2022
It seems straightforward to build reasonably complex things using only modern JavaScript these days! We can take advantage of most newer features without hacks or polyfills.
Here's my Vanilla JavaScript implementation:
- 184 lines of code total (compared to the official vanilla JS TodoMVC from 6 years ago was 900+ LOC)
- No build tools
- JavaScript modules
View the working example on GitHub pages
Additional Examples
Initial Code
The initial version came together in only 60 minutes, then ~30 min of refactoring: see the commit here
How quick it was to get working was what initially got me pumped about all of the progress in the core JavaScript language.
App Architecture
People were concerned about the scalability of apps like this since there are no components, and it's all one App. So I extracted the TodoList and App components and wired the components together on the app-architecture branch.
Branch: https://github.com/1Marc/todomvc-vanillajs-2022/tree/app-architecture
Note: I realize it is silly to say the word "scalable" in the context of a todo app, but this should be looked at as a blueprint for building something more extensive. I plan to make more ambitious examples in the future to show what's possible.
Criticism, PRs, and feedback are welcome!
Project Blog Post:
Example Components Using this Architecture
Vanilla JavaScript View Switcher Based on Hash Change
Vanilla JavaScript Countdown Clock
License
This work by TasteJS is licensed under a Creative Commons Attribution 4.0 International License.
