modern-todomvc-vanillajs
domdiff
Our great sponsors
modern-todomvc-vanillajs | domdiff | |
---|---|---|
19 | 2 | |
1,063 | 210 | |
- | - | |
4.9 | 0.0 | |
about 2 months ago | over 1 year ago | |
CSS | JavaScript | |
- | ISC License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
modern-todomvc-vanillajs
- Writing a TodoMVC App with Vanilla JavaScript in 2022
- Ask HN: Good resource on writing web app with plain JavaScript/HTML/CSS
- Writing a TodoMVC App with Vanilla JavaScript
-
React I Love You, but You're Bringing Me Down
> React takes us forward in the sense that most of us don't want to go back to direct DOM manipulation
There was recently a demo of what a Todo MVC app might look like if written in vanilla JS with today's apis. It looks fairly decent; I could see myself going back to something like that:
https://frontendmasters.com/blog/vanilla-javascript-todomvc/
- Writing a TodoMVC App With Vanilla JS in 2022
-
Ask HN: What happened to vanilla HTML/CSS/JS development?
>> Does not trigger when modified from the same page
I'm thinking that's the purpose of https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js... - without dispatching that custom save event, there wouldn't be a way to react at any other locations on the same page to the store updating.
- GitHub - 1Marc/todomvc-vanillajs-2022: Vanilla JS TodoMVC App in 2022
- TodoMVC App Written in Vanilla JavaScript
domdiff
-
Ask HN: What happened to vanilla HTML/CSS/JS development?
> There are lighter-weight shadow dom frameworks out there (than Vue/React/Angular) so why would you want to write one yourself?
You can even avoid a shadow DOM entirely:
https://github.com/WebReflection/domdiff
https://github.com/WebReflection/uhtml
-
Proposal to add efficient DOM diffing to browser
If by faster you mean faster than React I think there is evidence it can be. The author of the issue writes lots of dom utility and rendering libraries and I believe domdiff is more or less what he describes in the post:
https://github.com/WebReflection/domdiff
You can find it placed way above React in the usual JS rendering benchmarks:
https://rawgit.com/krausest/js-framework-benchmark/master/we...
Now it's not entirely clear whether these benchmarks convey something meaningful except for maybe the point that most frameworks are quite fast. That being said I think it's developer experience that really stands to improve. Thinking of view as a pure function of state was a great innovation, but existing implementations can end up fracturing the view into virtual doms and non-virtual. Then you end up with problems like D3 and React not coexisting.
I feel like I heard something from the lit-html folks that a long term aspiration was to integrate some learnings from the project into chrome, but I haven't been able to find where again.
There has been a trend in JS with libraries becoming idiomatic to the language to later have the issues they targeted be addressed natively (a la JQuery).
In general, I definitely appreciate your point about adding complexity to the platform, but I think when it comes to web technologies that ship has long sailed. I really see it as an opportunity to bring a lot of simplicity, chiefly filling that void that's birthed a billion JS frameworks.
Thanks for the thoughtful comment.
What are some alternatives?
Tailwind CSS - A utility-first CSS framework for rapid UI development.
dom - DOM Standard
htmx - </> htmx - high power tools for HTML
notemplate - NoTemplate is not a template library.
el - Minimal JavaScript application framework / WebComponents base class
prehistoric-simulation - Simulator in browser
mebm - zero-dependency browser-based video editor
AlgoVis - A web page that visualizes a simple sorting algorithm.
uhtml - A micro HTML/SVG render
web-starter - Starter for Fastify + Web Components/Lit Web App. Includes Reload and web server restart on dev mode.
easyqr-codes
go-neon