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.
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…
While it is nice to only render active cards and optionally remove inactive cards from the DOM while keeping their JS instances alive, it is even better to lazy load the JS modules for cards at the point when you need them.
You have most likely seen the Covid Dashboard demo app by now:
The app is running inside the app worker. All components live there.
This new approach is extremely powerful, yet easy to use.
The implementation relies on using SharedWorkers.
I kept the demo app as simple as possible.
Here is a short video to see what we are going to talk about:
The autogenerated index file:
We are using the
useSharedWorkers framework config to switch from using normal web workers to shared ones (required for the…
This is a big step for getting UI development back where it belongs:
into the browser.
I was super excited when opening the ticket, to see that it got changed to “resolved”.
The installation is extremely easy:
Concepts for new products need to be disruptive, otherwise there is little need for them. However, the way to use them should be as consistent as possible.
For a framework this means that the API on how to use it should be rock solid, especially when it comes to new versions. Migrating from neo.mjs v1 to v2 is a piece of cake.
This article assumes that you are not familiar with the project yet, so we will cover some of the basics as well.