Couldn't be more visual, couldn't be more real.
The essence of Flux, the heart of UI libraries like React, is this: take some inputs, mix and merge them together in a "store", then go figure out what changed before updating the UI.
As both this image and your intuition suggest, mixing everything up this way might not be the most clever thing to do.
One better approach is... well, to keep stuff separate, just
as different streams of different substances may be easier, cheaper and more efficient to handle individually.
Industrial waste vs state and data streams
Ok, so, it's not so much about industrial waste, but data flows in streams the same way. Everything is a stream, from clicks on a button to mouse movements, bits and bytes that flow through an internet connection.
The various internet protocols have made great efforts to keep each data stream separate. Can you imagine your real-time phone call data mixed up with the netflix image pixels and other SSH commands disorderly mixed up? Nothing would possibly work.
Despite this simple and intuitive principle, many libraries like React and its derivatives never reviewed and moved away from core Flux, building a large number of "solutions" to overcome the issues caused by this pattern.
The good-old Observables in a new light
There is one design pattern that can help you keep your data streams neatly separate and that's Observables. They can be stateless through certain operators (map, filter) or stateful (scan, takeUntil). The key point is that state is always encapsulated in these reactive streams.
Every Observable stream has an input and an output. You can combine many of them together in a pipeline through which data can flow in a perfectly controlled way without leaks.
By simply connecting their inputs and outputs to the DOM, we have a fully functioning reactive UI.
Most importantly, this works without the need for a whole treatment plant such as the virtual DOM since we have no waste mixed up and data always flows in separate streams.
Everything is much simpler, faster and more efficient.
Using Observables with frameworks and UI libraries
Unfortunately, most JavaScript frameworks don't give much support to Observables, if any at all.
Many (E.G.: React) impose the use of Signals, which means if you do want to use Observables, you have to do conversions back and forth.
Others (E.G.: Svelte) have their own dark magic that makes ordinary JavaScript variables behave like reactive primitives by altering the language syntax, so you may still need to create adapters, depending on what you're doing.
Some (E.G.: Angular) have partial support for Observables through the use of async pipes, but that's insufficient and given their recent turn to Signals, now it's messier than ever, as we have to deal with both constructs.
Only one library, Rimmel.js comes with extensive support for Observables that helps keeping your state in clean, separate channels without the added complexity of a virtual DOM or the need for dedicated state management libraries other than RxJS.
Try now some examples on Stackblitz to see all this action.
Top comments (0)