bobtail.js

A flexible, concise reactive programming framework

View project on GitHub

Ecosystem

In an effort to begin building out useful functionality without bloating the two core projects, we’ve been working hard on building out additional extensions and integrations.

bobtail-json-cell

The bobtail-json-cell takes an alternative approach to declaring reactive objects. Rather than using special classes like SrcMap and DepArray, the Obs, Dep and SrcJsonCells provided by this package use ES2015’s Proxy feature to fire change events and subscribe dependencies. This proxy is applied recursively to all levels of the provided object, allowing it to be referenced like a regular variable as well as subscription to deeply nested sub-fields, without subscribing to changes on the entire object. Furthermore, it uses Benjamín Eidelman’s jsondiffpatch package package for its change event notation to fire only minimal refreshes.

bobtail-form

The bobtail-form package combines bobtail-json-cell with Mario Izquierdo’s serialize-json package and Rafael Weinstein’s mutation-summary package (built on the MutationObserver API) to give Bobtail two way data binding. We do this by creating an ObsJsonCell whose value is essentially bound to the form’s serialized value. Whenever the form’s serialization changes, either by value or other state changes on its inputs, the serialization cell’s value updates. The form itself is specified with a function that takes the serialization cell as an input, thus allowing the form’s HTML representation to depend upon its currently serialized value.

firetail

Firetail is an extension of bobtail-json-cell that integrates with Google’s Firebase database layer. It supports declaring reactive JSON objects by Firebase database reference, and includes support for cells (which fully refresh on the value event), lists (which partially refresh on the child_added, child_changed, and child_removed events), and synchronized arrays.

In addition, the list and cell objects come in both read-only and writable versions (the synchronized array currently only supports read-only). Both versions update locally whenever the reference change, while the writable version also pushes any local changes back to the Firebase database.

Projects using Bobtail

soykaf

Soykaf is a character building application for Shadowrun 5e that leverages bobtail-json-cell, bobtail-form, and Firetail to allow users to build characters and track their progression.

Ideas for further work

RxJS integration

While Bobtail focuses on cell-based reactive programming, RxJS is focused on working with streams. An integration would allow Bobtail cells and templates to react to RxJS Observables representing data streams.

d3 integration

d3’s chaining syntax does not gel well with Bobtail’s declarative style templating. Some kind of integration library between d3 and Bobtail seems like it could be helpful.

server side rendering

Developers are increasingly using server side rendering to speed page loads and improve performance. Having examples, documentation, and possibly a helper package for using Bobtail with server side rendering would be very convenient.