https://tvardy.github.io/js-playground
Lightweight state management
I tried to figure out how to write a simple Redux-like central app management either dependency-free (Svelte stores) or with some small (in size, not features) libraries. In terms of libraries, I eventually picked up on:
- Stent - "is combining the ideas of Redux with the concept of state machines."
- Preach - "a lightweight pubsub utility for node and the browser."
The views show the same simple TO-DO List application written with Svelte and µce-template. The apps are split into 3 simple components: header (with a new task input), tasks list, footer. Each of the components is independently connected to the store and gets updated whenever the app's state changes.
As both applications are connected to the same store, the changes made on one side are immediately reflected on the other.
Another possible step here would be using the components as micro-frontends (e.g. take the header from Svelte version, tasks list written with uce-template, and the footer written with another technology)
AppRun + `Pocket.io`
AppRun "is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components."
Pocket.io is "a minimalistic version of socket.io that weighs about 1K instead of 60K."
The demo page consists of three elements:
- a simple Message Broker server
- a Data Emmiter page which just picks a random number (within a random delay) and sends it over an open web-socket connection to the Message Broker
- a Client page connected to the same Message Broker and just reading the data and showing it with additional information if the new number is higher or lower than the previous one.
It's a good example of showing stock or bookmaker price changes in real-time with lightweight JS tools.
LZ Chat
Few different things being played with at the same time
Another approach to the Lightweight State Management. This time AppRun + µhtml vs. HyperSimple
A simple chat application using the same Message Broker and pocket.io for Web Socket communication.
The messages in the chat are not being sent in plain text. Instead, we're using lzwCompress and a small additional data "mangling" operation (more on that in the next chapter)
I picked this view to make some small comparison of functional testing tools: Testcafe vs. Cypress. I need to admit that even though I found Testcafe's documentation and syntax much clearer and lean, the Cypress beats it with functionality, ability to nest the tests and the mocha/chai familiar syntax.
In-memory LZ compression efficiency test
After checking the lzwCompress package in the LZ Chat above, I found out that the messages I used were so short that their LZIP-ed version was quite often bigger than the original.
So I decided to check at what level of data length can I actually benefit from the data compression (e.g. to store more data offline in LocalStorage).
I'm using faker to create some realistic JSON data bundle and then trying to pack it and compare the results. I found out that using a little trick of converting an array of decimal numbers (produced by lzwCompress) into their 32-bit equivalents we can get even higher compression.
This test (and quite heavy fake-data creation) pushed me also into creating the SideWorker package. You're encouraged to read more in its README ;)
After some time I also discovered the WebCompressor package.
So I brought it over to compare with lzwCompress... the results are amazing...
Web Components within script tag
Here, again, two reasons of opening a new topic to play with.
First seems to be quite obvious - just wanted to play around with Custom Elements libraries to check wich one suits me best :D
The second part... was a short discussion I recently had with my colleagues. We were seeking for an option to define a Custom Element and immediately use it with some props and children. We will be serving such components for other departments in our work and we really wanted them to have such a convenient way as:
<script src="/path/to/my-components-script.js">
<my-component variant="big" theme="secondary">
<a href="#">Click here</a>
</my-component>
</script>And... it actually turned out to be pretty easy to achieve using document.currentScript element plus... a little wrapper ;)
Preach State Management + Mikado
Even though Mikado API and documentation aren't that nice as of some newer tools, the library keeps very good positions in JS Framework Benchmark Test. I've written a simple application displaying up to 10 randomly generated numbers (in random delay). I will try to compare its results with µhtml
[to be continued]
don't know yet...