Neo.mjs – Webworker-driven UI framework(github.com)
github.com
Neo.mjs – Webworker-driven UI framework
https://github.com/neomjs/neo
55 comments
Building something great is only half the battle. The popular tools you are competing with have been marketed to a large extent. Redux is a good example of something that was shown to a large crowd at a conference who wanted something just like what they were seeing. It didn’t stop there though. They took the time to write really clear documentation. Dan did free videos for egghead to teach people how to use it.
Some open source authors are already very well connected. Sometimes the projects are backed by a large company. There are several ways to get the word out.
Some open source authors are already very well connected. Sometimes the projects are backed by a large company. There are several ways to get the word out.
I think the problem I've had is that I'm around people who don't like change, which is most people. So I believe that things I invent are not useful to anyone but me.
I need to have better ways to get the word out.
I need to have better ways to get the word out.
I was also in a situation at work where I found that redux did not work great for real-time code. Have you made your solution public?
Also related to this article, webworkers are great for offloading work from the main thread until you've got high data rates. It doesn't take a lot of data to get to the point where serialization across the worker boundary nullifies the performance gains of moving the work off of the main thread.
Also related to this article, webworkers are great for offloading work from the main thread until you've got high data rates. It doesn't take a lot of data to get to the point where serialization across the worker boundary nullifies the performance gains of moving the work off of the main thread.
Nothing is public.
Regarding your comment about serialization: that's why I used websockets in the workers. It went pretty well except there was a bug in Chrome where the websocket in the webworker was still subject to the main loop. Something like that.
Anyway, the point of offloading everything to webworkers was to make sure that the main thread is free for rendering. So there was very little to serialize, aside from dom differences which are generally not significant.
Regarding your comment about serialization: that's why I used websockets in the workers. It went pretty well except there was a bug in Chrome where the websocket in the webworker was still subject to the main loop. Something like that.
Anyway, the point of offloading everything to webworkers was to make sure that the main thread is free for rendering. So there was very little to serialize, aside from dom differences which are generally not significant.
How would websockets reduce serialization overhead (assuming no chrome bug)?
Slightly off-topic, but you might look into MobX. It can be more performant than Redux for particularly large component trees because it allows child components to update without going through their parent (and checking all their siblings, for that matter).
Sibling already asked if your tech was public (no, it's not), but do you want to make it public? Do you want to take money for the thing itself? Release under (A)GPL 3 and take cash from those that don't want to publish their app/to work on feature requests?
This sounds like something I might want to use for a project in my pipeline, with "thing that works well and terrifies the old guard" being in the spirit of "post-blub"[0] languages (think APL rarely using function definitions because the concise syntax[1] makes inlining more readable).
[0]: http://paulgraham.com/avg.html [1]: This is a single-file compiler. The logic is just the upper weird-symbol-laden part: https://github.com/Co-dfns/Co-dfns/blob/master/codfns.dyalog
This sounds like something I might want to use for a project in my pipeline, with "thing that works well and terrifies the old guard" being in the spirit of "post-blub"[0] languages (think APL rarely using function definitions because the concise syntax[1] makes inlining more readable).
[0]: http://paulgraham.com/avg.html [1]: This is a single-file compiler. The logic is just the upper weird-symbol-laden part: https://github.com/Co-dfns/Co-dfns/blob/master/codfns.dyalog
Honestly, if you invent something good and it’s better people will flock to it. If they don’t, then usually it is not.
Look at angular, the full backing of google yet people moved to react... and now to vue which was basically made by one guy
Look at angular, the full backing of google yet people moved to react... and now to vue which was basically made by one guy
It's hard for me to imagine people who know React moving to Vue. I'd have to assume different people, who've never known the beauty of React, are driving Vue's growth due to marketing.
I really like react, but I see the appeal of the .vue files in the vue framework. I think there are perhaps more people than you think who don't like how CSS integrates with react (CSS-in-JS) and prefer having the single file component, with super easy style scoping and with easy traditional css syntax highlighting support in a .vue file
Have you looked into Emotion (https://emotion.sh)? It supports several modes of usage that cover a lot of use cases pretty elegantly.
Well, CSS-in-JS is just one option for styling React components.
Dude, where are the code samples? You lost me by not having them. I want something nice like Svelte.
They are not too hard to find. I would use this one as a starting point:
https://github.com/neomjs/neo/tree/dev/docs/app/view
(since the docs app UI is written using neo.mjs).
On the repo you have an apps folder (RW2 is a better example) as well as an examples folder.
If you open the online examples => docs app, you can view into the code for all classes. If you use the docs app version with the Chrome flag, all available examples are included.
On the repo you have an apps folder (RW2 is a better example) as well as an examples folder.
If you open the online examples => docs app, you can view into the code for all classes. If you use the docs app version with the Chrome flag, all available examples are included.
This sounds like a philosophical question :)
In general humans are afraid of radical new ideas (at least most). There is also the "riding the wave" phenomenon, which is slowing down innovations to some degree.
Meetups or conference sessions are a good start, since the audience ist mostly curious.
In general humans are afraid of radical new ideas (at least most). There is also the "riding the wave" phenomenon, which is slowing down innovations to some degree.
Meetups or conference sessions are a good start, since the audience ist mostly curious.
It sounds like a very good idea! However, on Linux in Firefox as well as in Chrome the UI (helix) doesn't seem to be very responsive, i.e. the slider is jittering making it feel very sluggish. Is that a bug? However, I see multiple cores being utilized. Same on mobile...
I don't really buy the template argument. Think declarative layouts such as QML, React, etc. are there for a reason...
Why focus that much on mjs? Wouldn't you use Typescript anyway? i.e. you still have source map (beside I never had problems with source maps)
I don't really buy the template argument. Think declarative layouts such as QML, React, etc. are there for a reason...
Why focus that much on mjs? Wouldn't you use Typescript anyway? i.e. you still have source map (beside I never had problems with source maps)
Hi czei002,
did you try using the mouse-wheel? (scrollY does zoom, srollX rotates). please let me know in case the performance doing so is not nice.
so far neo.mjs is just using input type="range" for sliders, which are ok-ish on MacOS. real sliders are on my todo list, but to implement them i need to create drag and drop first. this one is an epic, since drag happens inside the main thread while the handlers live within the app worker. i will update the vision file today to shed some light into what is coming next.
the template discussion is a big one :) you could argument that most APIs were XML 5+ years ago and now close to all are JSON based. imo writing string based markups is a legacy thing which should get replaced. think about it this way: to compare virtual dom and get the deltas, vdom structures have to be json based (js objects & arrays). in case you write markup strings, they need to get converted into JSON, which is expensive. you could argument now, that those replacements can be done as a build process, which is true if you want to limit your components to just a few states. imagine you would create the helix using states and how many templates you would need => there would be a massive overhead to load all those parsed templates.
neo.mjs goes one step further: you can not just define your markup as JSON, but this structure(s) are persistent throughout the component lifecycle. meaning you can change them the same way before & after a component gets mounted.
the whole scoping madness including functions or variables into strings just does not exist, which can save a lot of time. also, the part where you put a component based tag into a string based template which automatically creates a matching JS instance does not exist, which makes it very convenient to re-use the same components (think about a list with component based items).
i would use TS in a heartbeat if browsers would support it out of the box. one major design goal of neo.mjs is to not have any JS related build processes for the dev mode. the benefit to debug the real code should be obvious (transpiling code can create bugs).
did you try using the mouse-wheel? (scrollY does zoom, srollX rotates). please let me know in case the performance doing so is not nice.
so far neo.mjs is just using input type="range" for sliders, which are ok-ish on MacOS. real sliders are on my todo list, but to implement them i need to create drag and drop first. this one is an epic, since drag happens inside the main thread while the handlers live within the app worker. i will update the vision file today to shed some light into what is coming next.
the template discussion is a big one :) you could argument that most APIs were XML 5+ years ago and now close to all are JSON based. imo writing string based markups is a legacy thing which should get replaced. think about it this way: to compare virtual dom and get the deltas, vdom structures have to be json based (js objects & arrays). in case you write markup strings, they need to get converted into JSON, which is expensive. you could argument now, that those replacements can be done as a build process, which is true if you want to limit your components to just a few states. imagine you would create the helix using states and how many templates you would need => there would be a massive overhead to load all those parsed templates.
neo.mjs goes one step further: you can not just define your markup as JSON, but this structure(s) are persistent throughout the component lifecycle. meaning you can change them the same way before & after a component gets mounted.
the whole scoping madness including functions or variables into strings just does not exist, which can save a lot of time. also, the part where you put a component based tag into a string based template which automatically creates a matching JS instance does not exist, which makes it very convenient to re-use the same components (think about a list with component based items).
i would use TS in a heartbeat if browsers would support it out of the box. one major design goal of neo.mjs is to not have any JS related build processes for the dev mode. the benefit to debug the real code should be obvious (transpiling code can create bugs).
I think I hit the dom tree update limit on my machine. Reducing the number of items to 100 makes it work all right (using the mouse wheel, slider still not working good) but its also not really impressive.
Maybe have a look at old multithreaded BeOS demos and consider to implement something like that. For example, do some heavy work in some workers while the UI thread renders the ongoing results in a smooth animation and let users dynamically change the number workers (BeOS had a demo which allowed user to switch cpus on/off during rendering with fully responsive UI).
Maybe have a look at old multithreaded BeOS demos and consider to implement something like that. For example, do some heavy work in some workers while the UI thread renders the ongoing results in a smooth animation and let users dynamically change the number workers (BeOS had a demo which allowed user to switch cpus on/off during rendering with fully responsive UI).
i would like to add: that neo.mjs is not using TS does not mean that you can not use TS for your app code. in case you really want to, it should be possible.
i recommend to take a look into the ES class system extensions as well, especially the config system (see src/Neo.mjs).
i recommend to take a look into the ES class system extensions as well, especially the config system (see src/Neo.mjs).
I had the chance to get in touch and try neo.mjs quite early so here are some points I like so far:
* the config system + setter getter and update functions
* framework code readability, clean code with comments with nicely formatted and readable
* cutting edge feature support - it’s refreshing to work and play with ES8, multiple web workers, etc. (you know that most buisness projects are not cutting edge ;))
* support - @tobiu was/is super responsive and helpful with my questions when get started
* the config system + setter getter and update functions
* framework code readability, clean code with comments with nicely formatted and readable
* cutting edge feature support - it’s refreshing to work and play with ES8, multiple web workers, etc. (you know that most buisness projects are not cutting edge ;))
* support - @tobiu was/is super responsive and helpful with my questions when get started
A quick heads up:
Working on the "neo-app" package and planning to get it done by January 2nd. Then you can create new neo.mjs apps with a 1-liner npx script.
Working on the "neo-app" package and planning to get it done by January 2nd. Then you can create new neo.mjs apps with a 1-liner npx script.
How does this compare to worker-dom [1]? Per worker-dom, one can reuse popular frameworks (React, Vue, Preact, ...) and simply move the [framework+app] code to a worker thread.
[1]: https://github.com/ampproject/worker-dom
[1]: https://github.com/ampproject/worker-dom
To be honest, I have not looked at this project yet.
In neo.mjs, there is an app worker which contains most parts of the framework and your apps (can be more than 1). The vdom comparison happens inside the vdom worker (which mostly makes sense in case there is a lot going on inside the app thread). The mostly idle main thread applies the deltas.
The vdom itself is very different to other frameworks, since it is JSON based. neo.mjs is not using any templates at all, which boosts the performance a lot.
The vdom itself is very different to other frameworks, since it is JSON based. neo.mjs is not using any templates at all, which boosts the performance a lot.
I still owe you the project vision. There we go:
https://github.com/neomjs/neo/blob/dev/.github/VISION.md
It's a really cool idea. Where is this currently being used, and what motivated you to develop it?
It is not used in production yet (the repo just went online on Nov. 23rd). This will change soon though. I am not officially allowed to talk about it yet, but if you look at my linked in profile, you might get an idea.
The motivation part would be a long story :)
The motivation part would be a long story :)
> This will change soon though
This brings us to the roadmap of Neo and to when we can be sure that our customers can use our sites written in Neo.
What I see now is "For the best user experience, you need to use Google Chrome with the following browser flag: chrome://flags/#enable-experimental-web-platform-features". Maybe this means that we should only wait for Chrome 80+ to be on most desktops.
Firefox: all I got there is a number of "SyntaxError: import declarations may only appear at top level of a module". Which version of Firefox do we have to wait for?
Safari: I don't own any device from Apple but a number of my customers do. I wonder if Neo works there.
Other browsers: I assume that all the chromium based browsers are going to be covered by the compatibility with Chrome 80.
Mobile: "The online demos are not optimised for mobile yet, please use a desktop browser!" Is it only a matter of CSS or is there something about webworkers on those platforms?
This brings us to the roadmap of Neo and to when we can be sure that our customers can use our sites written in Neo.
What I see now is "For the best user experience, you need to use Google Chrome with the following browser flag: chrome://flags/#enable-experimental-web-platform-features". Maybe this means that we should only wait for Chrome 80+ to be on most desktops.
Firefox: all I got there is a number of "SyntaxError: import declarations may only appear at top level of a module". Which version of Firefox do we have to wait for?
Safari: I don't own any device from Apple but a number of my customers do. I wonder if Neo works there.
Other browsers: I assume that all the chromium based browsers are going to be covered by the compatibility with Chrome 80.
Mobile: "The online demos are not optimised for mobile yet, please use a desktop browser!" Is it only a matter of CSS or is there something about webworkers on those platforms?
Let me shed some light into this:
Chrome 80 will most likely get released in January, since Chrome Canary already no longer needs the flag.
You can run the dist/development and dist/production versions of neo inside FF & Safari right now, the performance should be close.
Having 1 browser which fully supports it is enough for a great debugging experience. Obviously it would be nice if other browsers do catch up.
Mobile: I need to add support for touch events inside the main thread, which should be easy. On my todo list after the real world 2 app is done (want to focus on this one first, since it is meant to be a good starting point for new devs to get up to speed). The multithreading performance will be amazing on mobile.
You can run the dist/development and dist/production versions of neo inside FF & Safari right now, the performance should be close.
Having 1 browser which fully supports it is enough for a great debugging experience. Obviously it would be nice if other browsers do catch up.
Mobile: I need to add support for touch events inside the main thread, which should be easy. On my todo list after the real world 2 app is done (want to focus on this one first, since it is meant to be a good starting point for new devs to get up to speed). The multithreading performance will be amazing on mobile.
> the main thread would be mostly idle, only applying the real dom manipulations, so there are no background tasks slowing it down?
The thing is, applying DOM updates is the biggest bottleneck in almost every frontend app. And this doesn't sound like it solves that.
The thing is, applying DOM updates is the biggest bottleneck in almost every frontend app. And this doesn't sound like it solves that.
it definitely is the bottleneck, which is the reason we should move all other possible tasks out of main.
in this (neo.mjs) case main applies the deltas, forwards dom events to the app worker & serves as a message bus as long as workers can not directly communicate. nothing more.
in this (neo.mjs) case main applies the deltas, forwards dom events to the app worker & serves as a message bus as long as workers can not directly communicate. nothing more.
Recent JS Party podcast episode about ES modules, https://changelog.com/jsparty/106
Great idea! But if you have to use 'chrome://flags/#enable-experimental-web-platform-features' it is not a "Real World App" yet.
The flag is required until Chrome v80 (https://bugs.chromium.org/p/chromium/issues/detail?id=680046)
So soon you do not need the flag anymore.
There are browsers that aren't Chrome.
scroll down on the example page please: the dist/development & dist/production versions do work in other browsers and do not need a flag.
Tried this out on an underpowered mobile device. Layout doesn't adapt properly to mobile (as warned) but is insanely fast to render and responsive.
Great work!
Great work!
This is just awesome.
Love the simplicity with the config system and the performance is crazy fast.
What drew you to mjs?
You mean the file name extension .mjs?
If so: https://medium.com/passpill-project/files-with-mjs-extension...
It got popular in nodejs first to name files containing JS modules .mjs, but it starting to get a standard inside browsers as well.
You can find a lot more references in case you google for it, e.g.: https://dev.to/saigowthamr/js-modules-are-now-supporting-in-...
Best regards Tobias
If so: https://medium.com/passpill-project/files-with-mjs-extension...
It got popular in nodejs first to name files containing JS modules .mjs, but it starting to get a standard inside browsers as well.
You can find a lot more references in case you google for it, e.g.: https://dev.to/saigowthamr/js-modules-are-now-supporting-in-...
Best regards Tobias
| but it starting to get a standard inside browsers as well
Browsers don't care about the file extension, just the mime-type. Node supports modules with any extension now as well. I wouldn't use .mjs, it causes lots of problems.
Browsers don't care about the file extension, just the mime-type. Node supports modules with any extension now as well. I wouldn't use .mjs, it causes lots of problems.
in case it does cause problems, it would be very easy to change the file names. the dist versions do use .js files, since webpack compiled modules are not real ones.
feel free to open a ticket inside the issues tracker with more input about the problems and i will look into it.
feel free to open a ticket inside the issues tracker with more input about the problems and i will look into it.
I thought (hoped!) that `mjs` was just a hack that node used to get around the fact they couldn't do native javascript modules with .js extensions nicely - but (with --experimental-modules for now, but default eventually) the `mjs` file extension hack should be gone forever soon (I thought!).
No example in READE - sad!
Actually there is a link to the online examples at the top of the readme: https://neomjs.github.io/pages/
This is a new paradigm: you can now include JS modules directly into workers inside the browser. This will be fully supported in Chrome 80 (already works in canary). The concept makes debugging extremely convenient, since you get the real code without source-maps and the multi-threading gives a relly nice performance.
I just donated 1.5 years of my full and unpaid working time to the open source community with this :)
This is a new paradigm: you can now include JS modules directly into workers inside the browser. This will be fully supported in Chrome 80 (already works in canary). The concept makes debugging extremely convenient, since you get the real code without source-maps and the multi-threading gives a relly nice performance.
I just donated 1.5 years of my full and unpaid working time to the open source community with this :)
Is there a particular feature that this requires to work? Using Firefox so wondering what version I might expect to be able to use this.
at this point, FF & Safari are falling behind, which is sad.
The dist versions work there, but for the dev mode, they need to catch up. The biggest problem is, that FF & Safari do not support modules inside the worker scope at all (although it is inside the W3C specs for a very long time). On top of this, FF does not support dynamic imports (they recently changed the dynamic import detection from a parse time to a run time error => before this point even unreachable code broke it).
The dist versions work there, but for the dev mode, they need to catch up. The biggest problem is, that FF & Safari do not support modules inside the worker scope at all (although it is inside the W3C specs for a very long time). On top of this, FF does not support dynamic imports (they recently changed the dynamic import detection from a parse time to a run time error => before this point even unreachable code broke it).
There's no sample code, even on that page. It's difficult to see what this looks like.
there are some examples & example apps inside the repo. i think the best example app to understand the mechanics at this point is the docs app:
https://github.com/neomjs/neo/tree/dev/docs/app/view
(e.g. look into the MainContainer & the matching controller)
https://github.com/neomjs/neo/tree/dev/docs/app/view
(e.g. look into the MainContainer & the matching controller)
Important: at this point the examples are intended for desktop browsers. Mobile support is on my todo list, but will take some time.
Things like things I have invented in the past (before they were public):
- React - Redux - This thing - Various other things
In fact, I wrote a UI framework that runs in Web Workers which does React+Redux better than React+Redux. Redux is terrible for real-time work, whereas my framework combined beautifully for real-time work. As real-time as you can get in the browser anyway. And I could throttle FPS perfectly as a result.
I know I'm not the only one who creates these things, and I know I'm onto something usually because the "old guard" generally are terrified of this new thing that I built.
I am old. And I think I am probably wrong when inventing things which terrify other people but I'd like to figure out how to find a more... amenable audience, not just in my work, which is mostly independent now.
How do I find people who see possibilities? Should I be talking about these things at meetups? How do things go from my own personal products/projects to being posted on HN?