modern-todomvc-vanillajs

TodoMVC App Written in Modern Vanilla JS

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!

Project Blog Post:

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/modern-todomvc-vanillajs/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.

More Granular & Performant DOM Updates for Large Lists

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/modern-todomvc-vanillajs/tree/performant-rendering

More Performant DOM Updates for Large Lists with lit-html (Plus animations!)

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/modern-todomvc-vanillajs/tree/animation-lithtml

TypeScript

Here’s the code base with TypeScript: https://github.com/1Marc/modern-todomvc-vanillaj/tree/typescript

TypeScript + ESLint

Here’s the code base with TypeScript and linting with ESLint: https://github.com/1Marc/modern-todomvc-vanillajs/tree/typescript-eslint

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