“This is your last chance. After this, there is no turning back. You take the blue pill — the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill — you stay in Wonderland and I show you how deep the rabbit-hole goes.” Morpheus (The Matrix)
I am excited about this topic, since the technology we are going to talk about opens the way for a new generation of web-based apps, which can directly communicate across multiple browser windows without involving a backend.
[side note] The article got pretty long. In case you got only a short amount of time, take a look at the video in 2., read the highlight in 10. and then decide if you want to read all of it.
I got asked to create more content which can help new developers getting up to speed. In general there are two main topics which make the most sense:
Following the “application worker is the main actor” concept, Fieldset instances will live inside the App web worker scope.
I am still moved by the neo.mjs nomination:
This article covers the enhancements of the version v2.2.0 Release.
Let us take a look at the format of an index.html file prior to the v2.2 release:
You were able to define all available configs of DefaultConfig.mjs directly inside the index file. …
More precisely: workspace based styling
It was possible for a long time to add new components into the neo.mjs framework and using the SCSS based theming engine to style your components differently for each theme.
With the new theming engine in place, we now get a granular CSS output, we can automatically lazy load CSS files as needed and we even get…
To get a better idea of how powerful an application worker as the main actor can be, I enhanced the helix demo to give you a visual feedback.
In neo.mjs, you applications and components live within the application worker:
One of the most impressive performance demos is the helix component. …
including cross browser window lazy loaded CSS delta updates
This article covers a disruptive new approach on how we can further improve the rendering performance of web based frontends, since we will lazy load CSS exactly as needed.
It has been a while since I have written part 1. In case you missed it, it is definitely still worth reading:
The neo.mjs project has evolved a lot. Let us take…
For some reason, especially this quick write-up is getting a lot of traction.
You should take a look into the "real" articles:
Got a lot of feedback on other channels and it feels like the basic concepts are not clear.
In short: you don't drop components into the json based vdom. nor listeners. nor logic.
The JS side is in charge. You could call it OOP done right VS template driven approaches.
In e.g. React, a render() call destroys child items and creates new instances. Expensive and not needed and imo a reason why functional programming got popular.
While this sounds like a common problem, I was not able to find a good solution for it on the web. So I thought writing an article about it to save others some time is a good idea.
While there are many use cases where you can rely on e.g. webpack to create fitting CSS split chunks out of the box for you, there are scenarios where you need to go from scratch instead to create a 1 input → 1 output based solution.
Examples like jQuery or Wordpress have shown us how bad code can get in case you push mixing it to a limit.
The combination of React and JSX has shown us that it can be done in a way which is ok, so the concept no longer applies today.
However, the meaning of the concept was a different one:
“Do not mix logic with your markup”
In my opinion, this is something most frontend developers have forgotten…