ReactiveJS
Reactive components in any DOM element. A small reactive framework where state, calculations and reverse bindings drive a plain DOM driver of tags, attributes and text.
About
The runtime primitives live under Reactive, and library modules such as Content,
Layout and Maths are their own globals. Link one script tag per module, describe
your state and calculations, and mount the result into any element on any page.
ReactiveJS combines two-way data binding, reversible calculations and automatic asynchronous handling, so that each piece of a program can be reasoned about locally, however large the program grows.
Features
Two-way binding
A value bound to an input updates from it and updates it, with no glue code.
Reversible calculations
A calculated value can be written back to, and the change flows to the values it came from.
Asynchronous by default
Values that arrive later are handled like any other, with no promises to manage.
Precise collections
A reactive collection renders each of its items, and tracks additions and removals precisely.
A plain DOM driver
Components are made of tags, attributes and text, so the output is ordinary HTML in any element.
One script tag per module
No build step: link the modules you use and write the component in a script on the page.
Screenshots
reactivejs.org explains the ideas behind the framework, with examples and a reference for every module.
Reactive components in any element
A component described as state and calculations, mounted into any element on any page. Visit reactivejs.org ↗
Examples
A counter, a task list, a two-way temperature converter and a loading state, each a few script tags away. See the examples ↗
A task list
A two-way input for adding items, and a reactive collection that renders each one and tracks additions and removals precisely. See the task list ↗
Usage
What Reactive is, where it comes from, and the ideas behind it: state, calculations, bindings, contexts, effects and drivers. Read the guide ↗
Module library
The reactive core, the DOM driver, and focused modules for logic, collections, context and more, all searchable. Browse the modules ↗
Interface modules
The DOM driver, colour, animation and graphics. See the Interface modules ↗
Contents
The sections of reactivejs.org, and the pages in each.
Technologies
- JavaScript - The framework, its modules and the DOM driver
Credits
- Piotr Nierobisz - Contributor; research & development
More research
- Program - A reactive programming language where values recompute themselves
- CRDT - Conflict-free replicated data, and a shared real-time database built from it
- Reversibility Institute - Reversible processes across computing, manufacturing and physics