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:

• ~200 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

Criticism, PRs, and feedback are welcome!

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.

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.

Since I'm rendering everything on every update of the model from scratch, this can cause performance issues on long lists.

Here's a branch sending specific events with context from the model so we can make DOM updates more selectively as we need them (see code diff).

Branch: https://github.com/1Marc/todomvc-vanillajs-2022/tree/performant-rendering

We can achieve the same performant DOM updates with far less code by adopting lit-html using the repeat directive (see code diff).

Branch: https://github.com/1Marc/todomvc-vanillajs-2022/tree/animation-lithtml

Vanilla JavaScript View Switcher Based on Hash Change

Vanilla JavaScript Countdown Clock

This work by TasteJS is licensed under a Creative Commons Attribution 4.0 International License.