GitHub - 1Marc/modern-todomvc-vanillajs at app-architecture (original) (raw)

TodoMVC App Written in Vanilla JS in 2022

Seems it is pretty simple to build fairly complex things these days in modern JavaScript. We can take advantage of most features without crazy hacks.

Here's my Vanilla JavaScript implementation with Class Component Modules (App Architecture Branch)

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

Related poll: "Would you build a large web app in 2022 with Vanilla JS?" https://twitter.com/1Marc/status/1520146662924206082

Criticism, PRs and feedback welcome!

Additional Examples

App Architecture

People were concerned about scalabillty of apps like this since there's no components and it's all one App. So I extracted the TodoList and App component 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 a bit ridiculous to say the word "scalable" in the context of a todo app, but this should more be looked at as a blueprint for building something bigger. I plan to make more ambitious examples in the future to show what's possible.

Initial Code

The initial version coming together in only 60 minutes, then ~30 min of refactoring: see commit here

How quick it was to get working was what initially got me pumped about all of the progress that has happened in the core JavaScript language.

License

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