The Living Thing / Notebooks : Javascript user interfaces

C&C javascript visualisations, controllerism, HTML.

Leveraging javascript’s ubiquity and high level of brainshare and enabling tools for people who hate building user interfaces (Building interfaces is like holding political positions in that if you have the skill and motivation to pursue it so much, then you are not the right person to be doing it, having lost all empathy in the process with the people who will beholden to your will.)

And of course visualisation is important here; javascript is the weapon of choice for interactive visualisation.

Note that there is a primitive JS ui built into jupyter, by the way, if you simply want to control a scientific browser visualisation. See scientific computation workflow.

Performance concerns


And widgets! You can get more widgets using Webcomponents - see HTML.


Geomicons are compact SVG icons.

More complete and widely support but much bloatier are font icons such as fontawesome.

Going deep on React

If you’re going to use javascript you may as well go deep and use a UI system radically redesigned from the ground up to use its strengths. React is the prime contender here. (See also riot, which looks similar but lighter)

Other Profound-Sounding Things


With FOAM, you create a model, and FOAM can support many features based on it:

A (Javascript, Java or Swift) class, with diff(), clone(), and more. Serialization to and from JSON, XML and protocol buffers. Storage in many places, from IndexedDB to MongoDB. Query parsers and a query optimizer. Offline-friendly syncing, and many flavours of caching. Customizable detail and summary views for HTML, Android and iOS. FOAM combines these features with reactive programming, an MVC library, and a suite of view components for each platform. The result is a full-stack framework for building modern, cross-platform apps.

FOAM is in beta. It’s production-ready but still under heavy development. Expect many new features – and bugs – as FOAM continues to evolve.

But how do you give access this UI?

See javascript apps?


Is tedious to debug because desktop machines don’t yet support it.

Multitouch browser patch is one workaround, but I’ve been using touch-emulator, which is very simple so long as you are using a build tool to prevent you from accidentally deploying it in production.