Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Short, concise, Vanilla JS TodoMVC one pager #2119

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

tantaman
Copy link

@tantaman tantaman commented Jul 2, 2020

The idea here is to explore what a vanilla JS solution would look like if we followed a React style component model.

But...

  • Rather than write JSX, we use JS templates.
  • Rather than use a virtual DOM, we use the browser's own ability to reconcile DOM trees

The code comes in at around ~215 lines of JS and is surprisingly performant while also including HTML sanitization.

This was originally written back in 2016 (https://github.com/tantaman/fk-your-frameworks-todomvc) but for some reason I never got around to submitting it.


Video of the app in action
https://youtu.be/zAZ82DFEY0A


Screenshot of tests (23 pass, 2 fail):

Screen Shot 2020-07-02 at 2 37 11 PM

There seem to be a few issues where Cypress tests for the presence of a thing before the render cycle was kicked off. Not sure if that is the use of my request animation frame or not, but manually testing of these test cases works.
Any advice from cypress experts would be welcomed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant