Reactivity and Time-based Effects

Here's a list of interesting building block ideas useful for creating time-based interactive.

Libraries

• RxJS - RxJS is a reactive programminga programming paradigm where you write code that responds to an event; see wikipedia library for Javascript.

• Signals - Another reactivity library. See The Evolution of Signals in JavaScript for a decent historical overview of the history of data binding.

• XStateJS - This is a codebase for managing state and state transitions. I wrote notes on XState that describes the central concepts.

Apps

• Rive - This is a visual sequencer system that lets you can define states and visual transitions independently that can be rendered in other platforms. For example, you could design a UI in its app and export the files that will render on the Web, in Unreal Engine, etc. It's similar conceptually to Lottie in AfterEffects, or so I'm told.

Programming Jargon

• Event Driven Programming - This is an older name for "reactivity" when graphical user interface programming started to become standardized.
• Asynchronous Programming - A broader term for a type of programming, contrasted with procederal programming (sometimes also called synchronous programming in some contexts). The gist is that for async, you "execute your command" and have to wait for a response, but for synchronous programming you can expect a result right away. These require very different mindsets to keep straight. Example: you are boiling water in a tea kettle. In Async, you can do other things until the whistle goes off alerting you to the process being complete. In Synchronous, you continually check the tea kettle. The challenge is how to write clear structures in code that are easy to understand and follow in a text format.
• Single Source of Truth - The idea of organizing your data such that there's only one place where you are absolutely guaranteed that this is the actual data, rather than copying it to multiple places and having to synchronize them or worry if it's really the most recent. A point of confusion in GUI design because what's shown in the UI is a copy of the truth, not the truth itself. This is where ideas like data binding try to make it easier to maintain a connection between the source of data truth and derivatives use in other parts of your program.
• Data Binding - this is yet another name for "reactivity", referring more to systems where you could have a single source of truth and multiple subscribers to it; when the source of truth changes, the subscribers are automatically informed and updated.
• Message-Based Processing - The idea is that different entities can communicate messages to each other that contain a) a name and b) a data payload. Event-driven programming uses messages like this (generally called an "event") under the hood.
• Publisher/Subscriber - Related to Message-based processing, a pub/sub system consists of a "publisher" that is the source of data and multiple "subscribers" that receive data.
• Lifecycle Management - The idea that software systems have distinct "stages" or "states" that have to be managed in sequence. The logical definition and labeling of these stages make it possible to reason about the overall operation of the system you're defining. Often associated with terms like hooks and effects in ReactJS Javascript development. Sometimes also called taps.
• State Systems - The representation of a bunch of data that has a specific related meaning that change over time. This is often the model of the system in operation which are sometimes called state machines. They are the core of simple AI systems in video games that don't need to reason too much.
• Event Loops - These are recurring event-driven lifecycles that are are the core of realtime general purpose graphics systems like video games or simulation. Each loop consists of several lifecycle phases that occur one-after-the-other. Sometimes called a message pump architecture in Windows, where your loop is (1) wait for an event (2) process the events you want from the mouse, window system, etc; (3) back to (1).
• Event Listener - Another element of reactivity, a "listener" is a piece of code that is connected to an "event" provided by some other system. The events themselves are made-up by the system designers. Sometimes called event handlers
• Interrupt-Driven Programming - This is the hardware-driven interrupt that we all know and love. Operationally it's similar to an "event driven programming" approach, but on the hardware level it's managed much differently. The key complication is that you can't rely on access to certain data because there is no continuity between what the computer was doing before the interrupt and during the interrupt. Used largely for things like heartbeat timers, clocks, etc that are provided as global system state.
• Multi-Process Programming - A program is simply a series of statements that execute one after the other. A procedural program operates in this way and ends (or loops), whereas an event-driven program waits until it gets an event before doing something. Both types of programs are a process which has data and i/o associated with it; the coordination of MULTIPLE programs doing separate things in a coordinated and efficient way.
• Stream Processing - Often described in contrast to batch processing or file-based processing when managing data. A "stream" is a kind of event emitter (an object the emits events and associated data) and can also receive data. Streams are inherently asynchronous, whereas batches and files are inherently synchronous. The advantage of streams is that they can handle data in little bits at a time (e.g. letters typed on a keyboard, or a file being loaded from disk that is being filtered on-the-fly) which saves memory requirements.

HTML5 DOM and WEB APIS

The web environment provide other Application Specific Interfaces (APIs) that provide code functionality beyond HTML5. Typically they work with Javascript. See WebAPI Home Page for a dizzying list of them. Understanding how each of these entries could be useful for something you can experience/use is a good way to understand current thinking about computer software for the general public AND what standards are in place for implementing esoteric stuff like video, drawing, 3d graphics, etc on the web. You can then map this knowledge to other platforms to find their equivalents.

The key API that you deal with as an HTML5 page designer is one the HTML DOM.