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/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.
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
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
Here's the code base with TypeScript: https://github.com/1Marc/modern-todomvc-vanillaj/tree/typescript
Here's the code base with TypeScript and linting with ESLint: https://github.com/1Marc/modern-todomvc-vanillajs/tree/typescript-eslint
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.
