
Show HN: Neo.mjs – Webworker-driven UI framework - tobiu
https://github.com/neomjs/neo/blob/dev/README.md
======
chrismorgan
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
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
"block user input until we think they should interact with it" is not really a
fix per-se is it

~~~
tobiu
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)

------
derision
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
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
When I tried to hit the back button, it was going to countries I didn't even
select

------
mst
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
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/MainC...](https://github.com/neomjs/neo/blob/dev/examples/charts/MainContainer.mjs)

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
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).

~~~
tobiu
if you have an idea in mind, PRs are welcome :)

------
caspervonb
> EXTREME performance

[Violation] 'requestAnimationFrame' handler took 1210ms

Tried a few of the demo's and they're very sluggish.

~~~
tobiu
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.

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

~~~
tobiu
Desktop env & Chrome it should be like this:
[https://www.youtube.com/watch?v=BhSZS6_UlO4](https://www.youtube.com/watch?v=BhSZS6_UlO4)

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

~~~
tobiu
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.

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

------
ampdepolymerase
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
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
Do you consider laptops mobile and not desktop? Laptops with touchscreens are
pretty common these days

~~~
tobiu
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)

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

------
tobiu
just updated the main readme once more to highlight some of the new things.

feedback appreciated!

------
tobiu
v1.1.0 just got released on npm.

------
tobiu
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/)

