https://github.com/1marc/modern-todomvc-vanillajs

TodoMVC with Modern (ES6+), Vanilla JavaScript
https://github.com/1marc/modern-todomvc-vanillajs

javascript js todomvc vanilla-javascript vanilla-js vanillajs

Last synced: 1 day ago
JSON representation

TodoMVC with Modern (ES6+), Vanilla JavaScript

• Host: GitHub
• URL: https://github.com/1marc/modern-todomvc-vanillajs
• Owner: 1Marc
• Created: 2022-04-30T21:20:24.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-12T21:21:57.000Z (10 months ago)
• Last Synced: 2025-01-19T20:04:25.703Z (1 day ago)
• Topics: javascript, js, todomvc, vanilla-javascript, vanilla-js, vanillajs
• Language: CSS
• Homepage: https://frontendmasters.com/blog/vanilla-javascript-todomvc/
• Size: 149 KB
• Stars: 1,128
• Watchers: 13
• Forks: 113
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 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:

[](https://frontendmasters.com/blog/vanilla-javascript-todomvc/)

# Additional Examples

## Initial Code

The initial version came together in only 60 minutes, then ~30 min of refactoring: [see the commit here](https://github.com/1Marc/modern-todomvc-vanillajs/tree/fb3c61ed104c440f0c29e3a074b6777c791aa2f6)

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](https://github.com/1Marc/modern-todomvc-vanillajs/commit/fc89da1a6bd15489d5256575a4e193e11efd8d43)).

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](https://github.com/1Marc/modern-todomvc-vanillajs/commit/ef86a73166029991dc88c649f7ec4931a2a96c86)).

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](https://codepen.io/1Marc/pen/poLmXZR)



[Vanilla JavaScript Countdown Clock](https://codepen.io/1Marc/pen/bGvPRdy)



## License


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