4 ms·

Show HN: Noact – React-like Virtual DOM library in 70 lines of TypeScript

50 points by owouwuowo 6y ago

jiofih 6y ago
The wheels on the bus go round and round To the author: check out Mercury (2014), Hyperapp (2017), Choo (2018)
- chank 6y ago
  Inferno... Preact... the list goes on and on.
  - nathancahill 6y ago
    htm and vhtml from @developit. https://github.com/developit/htm https://github.com/developit/htm https://github.com/developit/vhtml https://github.com/developit/vhtml
- yboris 6y ago
  Mercury - https://github.com/Raynos/mercury https://github.com/Raynos/mercury Hyperapp - https://github.com/jorgebucaran/hyperapp https://github.com/jorgebucaran/hyperapp Choo - https://github.com/choojs/choo https://github.com/choojs/choo
dsukhin 6y ago
The idea of React is good - declarative, stateful, reusable components, etc. While the bloat of React and it's toolchain (and npm plugins) has become a mess. When you have 2^100 different plugin combos to do something, you have 2^100 imperfect solutions and no experts in any of them, rather than one elegant and simple standard that can be optimized. This repo is great proof that React is over engineered. Vanilla JS has WebComponents[1] and Templates, and a vDOM is easy to support (it existed long before React) and the DOM was the original place to store state in custom properties that you could manipulate internally with 'this'. What's missing is the ecosystem of Reusable WebComponents (primatives) based around this simple approach. That's why this is so great to see. As more of a purist, I would try to make this a Vanilla JS lib instead of TS and remove one more build step. But the idea of 60 lines of code that use primatives (thus making this hyper extendable) is perfect. [1] https://developer.mozilla.org/en-US/docs/Web/Web_Components https://developer.mozilla.org/en-US/docs/Web/Web_Components
- agquick 6y ago
  This was exactly my thinking when I wrote ElemX[1]. It has more a VueJS feel with template bindings, but it is based entirely on WebComponents and there are essentially no "tricks" (although it does use MobX for observables/computeds). It's a super small library but easily extendable with custom bindings. [1] https://github.com/agquick/elemx.js https://github.com/agquick/elemx.js
- scrollaway 6y ago
  These are react's dependencies: https://www.npmjs.com/package/react https://www.npmjs.com/package/react This repo is proof of nothing and I'm tired of reading those knee-jerk takes. You can't say "react's toolchain is a mess" and "prove" it with a repo that has zero toolchain, no JSX, etc. It's a bit saying "vlc is so bloated!" to someone showcasing "a video player in 30 lines of QML" with no play/pause button. Not to detract from the rest of your post, the core concept and primitives are great. Would you like them served up in a NPM micro-dependency, maybe? You'll just … add JSX, babel etc separately, will be missing half of react's features like hooks etc and will still have as many dev dependencies as before.
  - jharger 6y ago
    It could be that this sort of thinking contributes to the massive number of JS frameworks out there. You think React is bloated, so you make a "React in 70 lines" ... realize there's some things you missed... fast forward to two years later and you've got another framework.
  - dvtkrlbs 6y ago
    This is not the whole story though react is kinda useless without its tools. A fair argument would be if create-react-app had so little dependencies. But i agree with you react itself is not bloated but in general the whole webtooling is.
    - scrollaway 6y ago
      If react is useless without its tools then what is this submission for in the first place?
treve 6y ago
If you're already using typescript, why not also .tsx? It's easy to map to your own components.
bdcravens 6y ago
Totally a tangent, but I found the explosions typing gif super distracting.
blackoil 6y ago
What in the JS ecosystem promotes such posts and up-votes them to first page? These 50line / 100x faster micro frameworks 'never' reach 1% in core functionality and aren't usable beyond building 10 lines of demo app. I don't see similar posts for Java/.Net/Go ecosystem. Spring in 500 lines or 100x faster ASP.net!!
- hellofunk 6y ago
  It’s because there’s a very big difference between the state of the JavaScript ecosystem and the ecosystem for nearly any other language you can mention. And for a very large percentage of the development community worldwide, the JavaScript ecosystem is not something that anyone enjoys. That’s why it gets upvoted.
osrec 6y ago
But does this actually have "reactivity"? If I was to update variable, would that state propagate to all its dependants in the DOM automatically?
slifin 6y ago
It's weird how in the JS community rewrites of react are common in the CLJS community using React as a runtime is more common: - https://reagent-project.github.io/ - https://github.com/day8/re-frame - https://github.com/tonsky/rum And my favourite - https://github.com/fulcrologic/fulcro https://github.com/fulcrologic/fulcro Hosting your work on top of another ecosystem, such that you can still use the underlying ecosystem, gives you a lot of leverage out the gate

50 points by owouwuowo 6y ago

jiofih 6y ago

The wheels on the bus go round and round To the author: check out Mercury (2014), Hyperapp (2017), Choo (2018)

chank 6y ago
Inferno... Preact... the list goes on and on.
- nathancahill 6y ago
  htm and vhtml from @developit. https://github.com/developit/htm https://github.com/developit/htm https://github.com/developit/vhtml https://github.com/developit/vhtml
yboris 6y ago
Mercury - https://github.com/Raynos/mercury https://github.com/Raynos/mercury Hyperapp - https://github.com/jorgebucaran/hyperapp https://github.com/jorgebucaran/hyperapp Choo - https://github.com/choojs/choo https://github.com/choojs/choo

dsukhin 6y ago

The idea of React is good - declarative, stateful, reusable components, etc. While the bloat of React and it's toolchain (and npm plugins) has become a mess. When you have 2^100 different plugin combos to do something, you have 2^100 imperfect solutions and no experts in any of them, rather than one elegant and simple standard that can be optimized. This repo is great proof that React is over engineered. Vanilla JS has WebComponents[1] and Templates, and a vDOM is easy to support (it existed long before React) and the DOM was the original place to store state in custom properties that you could manipulate internally with 'this'. What's missing is the ecosystem of Reusable WebComponents (primatives) based around this simple approach. That's why this is so great to see. As more of a purist, I would try to make this a Vanilla JS lib instead of TS and remove one more build step. But the idea of 60 lines of code that use primatives (thus making this hyper extendable) is perfect. [1] https://developer.mozilla.org/en-US/docs/Web/Web_Components https://developer.mozilla.org/en-US/docs/Web/Web_Components

agquick 6y ago
This was exactly my thinking when I wrote ElemX[1]. It has more a VueJS feel with template bindings, but it is based entirely on WebComponents and there are essentially no "tricks" (although it does use MobX for observables/computeds). It's a super small library but easily extendable with custom bindings. [1] https://github.com/agquick/elemx.js https://github.com/agquick/elemx.js
scrollaway 6y ago
These are react's dependencies: https://www.npmjs.com/package/react https://www.npmjs.com/package/react This repo is proof of nothing and I'm tired of reading those knee-jerk takes. You can't say "react's toolchain is a mess" and "prove" it with a repo that has zero toolchain, no JSX, etc. It's a bit saying "vlc is so bloated!" to someone showcasing "a video player in 30 lines of QML" with no play/pause button. Not to detract from the rest of your post, the core concept and primitives are great. Would you like them served up in a NPM micro-dependency, maybe? You'll just … add JSX, babel etc separately, will be missing half of react's features like hooks etc and will still have as many dev dependencies as before.
- jharger 6y ago
  It could be that this sort of thinking contributes to the massive number of JS frameworks out there. You think React is bloated, so you make a "React in 70 lines" ... realize there's some things you missed... fast forward to two years later and you've got another framework.
- dvtkrlbs 6y ago
  This is not the whole story though react is kinda useless without its tools. A fair argument would be if create-react-app had so little dependencies. But i agree with you react itself is not bloated but in general the whole webtooling is.
  - scrollaway 6y ago
    If react is useless without its tools then what is this submission for in the first place?

treve 6y ago

If you're already using typescript, why not also .tsx? It's easy to map to your own components.

bdcravens 6y ago

Totally a tangent, but I found the explosions typing gif super distracting.

blackoil 6y ago

What in the JS ecosystem promotes such posts and up-votes them to first page? These 50line / 100x faster micro frameworks 'never' reach 1% in core functionality and aren't usable beyond building 10 lines of demo app. I don't see similar posts for Java/.Net/Go ecosystem. Spring in 500 lines or 100x faster ASP.net!!

hellofunk 6y ago
It’s because there’s a very big difference between the state of the JavaScript ecosystem and the ecosystem for nearly any other language you can mention. And for a very large percentage of the development community worldwide, the JavaScript ecosystem is not something that anyone enjoys. That’s why it gets upvoted.

osrec 6y ago

But does this actually have "reactivity"? If I was to update variable, would that state propagate to all its dependants in the DOM automatically?

slifin 6y ago

It's weird how in the JS community rewrites of react are common in the CLJS community using React as a runtime is more common: - https://reagent-project.github.io/ - https://github.com/day8/re-frame - https://github.com/tonsky/rum And my favourite - https://github.com/fulcrologic/fulcro https://github.com/fulcrologic/fulcro Hosting your work on top of another ecosystem, such that you can still use the underlying ecosystem, gives you a lot of leverage out the gate