Most programming languages or techniques nowadays are sequential. When
executing a statement
c = a + b,
c is the result of the addition of the
current values of
b. If either one of those variables change their
c is not changed.
In electronics however, this isn't usually the case. The “drain” of a FET transistor always (under normal circumstances) reacts on the so called “source”. If we put some transistors together we can make a NAND gate:
Image taken from Wikipedia
But here is the thing: if you now change either
Q is immediately
changed too (if we neglect the propagation delay). You could say the output
reacts on the input.
When some NAND gates are wired together, complete ALUs (Arithmetic Logic Units), or even processors, can be built. At some point, those logic networks become too difficult to create manually by just creating and solving some Karnaugh maps. That is why certain tools are created, to simulate, synthesize and program logical networks. One of those is VHDL, which is a Hardware Description Language. How it works is pretty similar to physically wiring components together.
In VHDL a component like a NAND consists out of two parts. The first part is
ENTITY, where the input and output ports are defined. The
second part is the
ARCHITECTURE, or usually called the behavior. This defines
the logic of the component. For example see this implementation of an
Example code taken from Wikipedia
Eventually all those components can be wired together in VHDL. Now when all
those lines exist between components, what should happen when a line changes?
To solve this, a
SIGNAL statement can be defined, which connects lines to the
component so they can be used in the
PROCESS. If a line changes, the behavior
part is executed again. This causes that all changes are propagated through the
The concept that a variable changes if one of the inputs are changed, is nothing new under the sun. It is called reactive programming.
The result of that endeavor is this GitHub repository which contains a little more than 50 lines of JS: reactive.
It works as follows:
Theory is nice, but what's the point?
Responsive design is hot today! “Responding to something” is more or less the same as “reacting to something”. Other topics today are modules, creating less spaghetti code or loosely coupled code.
When we use MooTools, we can combine DOM Events with reactive in a few lines of code:
With this put in place, we could add an event with
addEventRx, just like
.addEvent (if you're used to MooTools) or
.on (some other libs). The
returned value is a
This code returns an array (because of
$$) of rx objects. Those objects can
be wired into somewhere else, for example into a component that indicates if
the first two checkboxes are checked:
The text is automatically updated if the constraint that the first two boxes should be checked is met, or not.
Another use case could be some complex UI, like an e-mail or messages page. It
probably has some count of unread messages. However it could create a
object for that so the UI with the unread messages is automatically updated if a
message is opened.
Should you use it?
I'm not sure if you should use the code in my own reactive repository. However there are more sophisticated libraries:
I have not yet been able to test any of those, but I'm pretty sure those are much more complete and battle hardened.
Furthermore I believe this concept could solve some problems in bigger
and complex (front-end) UI applications. Some module could export a
that keeps the state of some component (say a list of messages). Another part
of the page (maybe somewhere in a toolbar), displays the number of messages.
This toolbar could grab the loose wire from the messages component, by requiring
rx object, and wire it into the toolbar. If the state of the
messages is changed, this state is automatically propagated to the messages
count in the toolbar.