6 ms·

Show HN: Neo.mjs – Webworker-driven UI framework

54 points by tobiu 7y ago

tobiu 7y ago
Dear fellow devs, if I may ask you to take a look into a 2nd () post in my entire life-time, this is the one. neo.mjs - just hit 5000 commits () and 400 GitHub stars. It has been a blast since the public release and there are more new features & enhancements than I can even mention here. In short: The concept of neo.mjs is, that the framework & the apps which you build run within a separate thread (webworker) which leads to an idle main thread with an incredible performance. The framework is based on top of ES8 and can run without any JS related builds. At the moment I am mostly pushing the covid19 demo app, to create a perfect showcase for you on how to craft apps using the framework. A new wrapper for amCharts is in place: you can now simply add the chart config json into the component tree. In case you have not looked at the neo.mjs yet, now is the time! () The first one was the public release announcement on Nov 23, 2019 () 3720 commits prior to the public release online demos here: https://neomjs.github.io/pages/ https://neomjs.github.io/pages/
tobiu 7y ago
just updated the main readme once more to highlight some of the new things. feedback appreciated!
kreetx 7y ago
Please allow others to step in and comment, otherwise this just seems PR.
- tobiu 7y ago
  absolutely hoping to get feedback here. the framework and all demo apps are using the MIT license, so they are meant for others to step in.
derision 7y ago
Please please please please please do not hijack browser controls.... I went to the helix page, tried to hit back, and it has been hijacked to "move backwards" in the helix. That is the WORST thing you could possibly do
- tobiu 7y ago
  in case you are referring to the covid dashboard: selecting countries does change the hash value inside the ULR (routing), otherwise there is no browser controls hijacking i am aware of.
  - derision 7y ago
    When I tried to hit the back button, it was going to countries I didn't even select
k__ 7y ago
Cool, looks like the WebWorker examples I saw with React and Yew.
ampdepolymerase 7y ago
On touchscreens, there is an off by one bug in the date selector. Switching between data and table mode takes a second or two on the COVID page.
- tobiu 7y ago
  mobile support is not ready yet, so please just test the demos in an desktop based env. it is on the todo list (adding touch events to the main thread and then polishing some examples to match mobile screen resolutions).
  - derision 7y ago
    Do you consider laptops mobile and not desktop? Laptops with touchscreens are pretty common these days
    - tobiu 7y ago
      fair point. can you open an issue please, ideally with a screenshot. thx! https://github.com/neomjs/neo/issues https://github.com/neomjs/neo/issues
chrismorgan 7y ago
This seems to be handling asynchronous loading very poorly. In the COVID-19 demo, trying to interact with things while it was still loading rapidly broke the VDOM and messed the entire app’s state up so that it was pretty much completely broken until I reloaded the page. In the RealWorld demo, interacting with things faster than it’s getting stuff from the network didn’t crash anything, but it made it do the wrong thing in the UI fairly regularly. Also it was disconcerting when clicking on links and such seemed to do nothing for a while—no indication that it’s actually trying to do anything. The end result was that everything felt extremely sluggish, and also history entries weren’t being added and the Back button was fairly consistently doing the wrong thing. All up, I’m afraid I found it decidedly unpleasant to interact with.
- tobiu 7y ago
  loading masks are on the todo list. using the mouse wheel while the helix is mounting definitely breaks things. should be fixed when this issue is resolved.
  - weego 7y ago
    "block user input until we think they should interact with it" is not really a fix per-se is it
    - tobiu 7y ago
      will create a ticket to additionally check onWheel if items are rendering. https://github.com/neomjs/neo/issues/398 https://github.com/neomjs/neo/issues/398
    - tobiu 7y ago
      the helix should be fixed now, details inside the ticket. it would be nice if you could double-check it.
mst 7y ago
I'm a little confused as to why the readme rants (entirely accurately) about text templating ... and then shows an example in react, which isn't using text templating at all. In fact, the code jsx compiles into (which, yeah, you said no compilation in dev so that argument applies, sure) is not honestly that different to the JSON structure for the DOM, it's just made out of function calls rather than nested objects but the "returns what's basically a data structure" is still there. (I'm mentioning this not to complain, but because it's so obviously Not Even Wrong that it looks like a brain fart and is probably worth correcting)
- tobiu 7y ago
  i am not super good at explaining this point. if components get complex (think about a buffered grid, the helix, the DatePicker with complex animations) you can end up with a huge amount of templates. you do not want to create massive amounts of child components (possible memory leaks), so you might end up with templates of several 100 lines and tons of if else. there is a trade off point where it is less and cleaner code to manually deal with the json structures. sure, you can also manually change the generated jsx output, but i would argue that you need to do it in a different way (not consistent), while you can do this the same way in neo throughout the cmp lifecylcle. now think about charts, like amCharts (just created the wrapper code): https://github.com/neomjs/neo/blob/dev/examples/charts/MainContainer.mjs https://github.com/neomjs/neo/blob/dev/examples/charts/MainC... putting the json config of a chart into the json component tree has its beauty. the same goes for mixing the json based cmp and vdom tree. (the chart lib runs inside the main thread while you define you chart inside the app worker). if many devs really want to use jsx with neo and accept a build process as the price, i would not mind if someone starts to work on making it happen. as long as it is optional.
  - mst 7y ago
    Yep, I absolutely see what you mean ... but the point here is you're talking about text templating, then you use a jsx example, which isn't text templating. I believe I understand what you're trying to say ... but the way you've said it ends up including a giant factual error that will potentially put people off. I figured it was "not super good at explaining" so thought I'd mention it so you could try and fix it (I'd be happy to help review an updated version, btw).
pictur 7y ago
I don't know what the project is claiming but the demo is running quite slowly. that's all i can say.
- tobiu 7y ago
  Desktop env & Chrome it should be like this: https://www.youtube.com/watch?v=BhSZS6_UlO4 https://www.youtube.com/watch?v=BhSZS6_UlO4
ndlsp666 7y ago
Wished you would stop spamming your projects to multiple subreddits every few days. It's really annoying and it feels like all you want is money. As other already stated the complex examples don't even run smooth at all.
- tobiu 7y ago
  how does delivering 1.5 years of my full and unpaid working time on a silver platter to everyone to create a new and different option on how to create new UIs relate to "all you want is money". check out the video, use chrome and it will run smooth. re-think your attitude on open source: projects like this rely on creating an awareness.
vsskanth 7y ago
First load was unresponsive, just empty tables and graphs. Blazing fast on refresh. Firefox on Windows 10 Workstation
caspervonb 7y ago
> EXTREME performance [Violation] 'requestAnimationFrame' handler took 1210ms Tried a few of the demo's and they're very sluggish.
- tobiu 7y ago
  it would be helpful if you can provide more details. e.g. os, browser. on my end it looks like this: https://www.youtube.com/watch?v=BhSZS6_UlO4 https://www.youtube.com/watch?v=BhSZS6_UlO4 (actually better, video-recording is slowing it down) the helix is an extreme performance demo, since it is neither using canvas, svg nor webGL. just 300 div nodes which get adjusted in parallel. managed to get > 30k dom manipulations per second (console logs for details) it might make sense to adjust the configs of this component for your setup, but can not really help without details.
tobiu 7y ago
v1.1.0 just got released on npm.

54 points by tobiu 7y ago

Dear fellow devs, if I may ask you to take a look into a 2nd () post in my entire life-time, this is the one. neo.mjs - just hit 5000 commits () and 400 GitHub stars. It has been a blast since the public release and there are more new features & enhancements than I can even mention here. In short: The concept of neo.mjs is, that the framework & the apps which you build run within a separate thread (webworker) which leads to an idle main thread with an incredible performance. The framework is based on top of ES8 and can run without any JS related builds. At the moment I am mostly pushing the covid19 demo app, to create a perfect showcase for you on how to craft apps using the framework. A new wrapper for amCharts is in place: you can now simply add the chart config json into the component tree. In case you have not looked at the neo.mjs yet, now is the time! () The first one was the public release announcement on Nov 23, 2019 () 3720 commits prior to the public release online demos here: https://neomjs.github.io/pages/ https://neomjs.github.io/pages/

tobiu 7y ago

just updated the main readme once more to highlight some of the new things. feedback appreciated!

kreetx 7y ago

Please allow others to step in and comment, otherwise this just seems PR.

tobiu 7y ago
absolutely hoping to get feedback here. the framework and all demo apps are using the MIT license, so they are meant for others to step in.

derision 7y ago

Please please please please please do not hijack browser controls.... I went to the helix page, tried to hit back, and it has been hijacked to "move backwards" in the helix. That is the WORST thing you could possibly do

tobiu 7y ago
in case you are referring to the covid dashboard: selecting countries does change the hash value inside the ULR (routing), otherwise there is no browser controls hijacking i am aware of.
- derision 7y ago
  When I tried to hit the back button, it was going to countries I didn't even select

k__ 7y ago

Cool, looks like the WebWorker examples I saw with React and Yew.

ampdepolymerase 7y ago

On touchscreens, there is an off by one bug in the date selector. Switching between data and table mode takes a second or two on the COVID page.

tobiu 7y ago
mobile support is not ready yet, so please just test the demos in an desktop based env. it is on the todo list (adding touch events to the main thread and then polishing some examples to match mobile screen resolutions).
- derision 7y ago
  Do you consider laptops mobile and not desktop? Laptops with touchscreens are pretty common these days
  - tobiu 7y ago
    fair point. can you open an issue please, ideally with a screenshot. thx! https://github.com/neomjs/neo/issues https://github.com/neomjs/neo/issues

chrismorgan 7y ago

This seems to be handling asynchronous loading very poorly. In the COVID-19 demo, trying to interact with things while it was still loading rapidly broke the VDOM and messed the entire app’s state up so that it was pretty much completely broken until I reloaded the page. In the RealWorld demo, interacting with things faster than it’s getting stuff from the network didn’t crash anything, but it made it do the wrong thing in the UI fairly regularly. Also it was disconcerting when clicking on links and such seemed to do nothing for a while—no indication that it’s actually trying to do anything. The end result was that everything felt extremely sluggish, and also history entries weren’t being added and the Back button was fairly consistently doing the wrong thing. All up, I’m afraid I found it decidedly unpleasant to interact with.

tobiu 7y ago
loading masks are on the todo list. using the mouse wheel while the helix is mounting definitely breaks things. should be fixed when this issue is resolved.
- weego 7y ago
  "block user input until we think they should interact with it" is not really a fix per-se is it
  - tobiu 7y ago
    will create a ticket to additionally check onWheel if items are rendering. https://github.com/neomjs/neo/issues/398 https://github.com/neomjs/neo/issues/398
  - tobiu 7y ago
    the helix should be fixed now, details inside the ticket. it would be nice if you could double-check it.

mst 7y ago

I'm a little confused as to why the readme rants (entirely accurately) about text templating ... and then shows an example in react, which isn't using text templating at all. In fact, the code jsx compiles into (which, yeah, you said no compilation in dev so that argument applies, sure) is not honestly that different to the JSON structure for the DOM, it's just made out of function calls rather than nested objects but the "returns what's basically a data structure" is still there. (I'm mentioning this not to complain, but because it's so obviously Not Even Wrong that it looks like a brain fart and is probably worth correcting)

tobiu 7y ago
i am not super good at explaining this point. if components get complex (think about a buffered grid, the helix, the DatePicker with complex animations) you can end up with a huge amount of templates. you do not want to create massive amounts of child components (possible memory leaks), so you might end up with templates of several 100 lines and tons of if else. there is a trade off point where it is less and cleaner code to manually deal with the json structures. sure, you can also manually change the generated jsx output, but i would argue that you need to do it in a different way (not consistent), while you can do this the same way in neo throughout the cmp lifecylcle. now think about charts, like amCharts (just created the wrapper code): https://github.com/neomjs/neo/blob/dev/examples/charts/MainContainer.mjs https://github.com/neomjs/neo/blob/dev/examples/charts/MainC... putting the json config of a chart into the json component tree has its beauty. the same goes for mixing the json based cmp and vdom tree. (the chart lib runs inside the main thread while you define you chart inside the app worker). if many devs really want to use jsx with neo and accept a build process as the price, i would not mind if someone starts to work on making it happen. as long as it is optional.
- mst 7y ago
  Yep, I absolutely see what you mean ... but the point here is you're talking about text templating, then you use a jsx example, which isn't text templating. I believe I understand what you're trying to say ... but the way you've said it ends up including a giant factual error that will potentially put people off. I figured it was "not super good at explaining" so thought I'd mention it so you could try and fix it (I'd be happy to help review an updated version, btw).

pictur 7y ago

I don't know what the project is claiming but the demo is running quite slowly. that's all i can say.

tobiu 7y ago
Desktop env & Chrome it should be like this: https://www.youtube.com/watch?v=BhSZS6_UlO4 https://www.youtube.com/watch?v=BhSZS6_UlO4

ndlsp666 7y ago

Wished you would stop spamming your projects to multiple subreddits every few days. It's really annoying and it feels like all you want is money. As other already stated the complex examples don't even run smooth at all.

tobiu 7y ago
how does delivering 1.5 years of my full and unpaid working time on a silver platter to everyone to create a new and different option on how to create new UIs relate to "all you want is money". check out the video, use chrome and it will run smooth. re-think your attitude on open source: projects like this rely on creating an awareness.

vsskanth 7y ago

First load was unresponsive, just empty tables and graphs. Blazing fast on refresh. Firefox on Windows 10 Workstation

caspervonb 7y ago

> EXTREME performance [Violation] 'requestAnimationFrame' handler took 1210ms Tried a few of the demo's and they're very sluggish.

tobiu 7y ago
it would be helpful if you can provide more details. e.g. os, browser. on my end it looks like this: https://www.youtube.com/watch?v=BhSZS6_UlO4 https://www.youtube.com/watch?v=BhSZS6_UlO4 (actually better, video-recording is slowing it down) the helix is an extreme performance demo, since it is neither using canvas, svg nor webGL. just 300 div nodes which get adjusted in parallel. managed to get > 30k dom manipulations per second (console logs for details) it might make sense to adjust the configs of this component for your setup, but can not really help without details.

tobiu 7y ago

v1.1.0 just got released on npm.