Javascript user interfaces

C&C javascript visualisations, controller mapping, HTML. controller mapping, 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 wanted to control a scientific browser visualisation. See scientific computation workflow.

Dev tips

Storybook.js is an IDE for web components.

FRP style interfaces

  • Facebook’s UI library’s looks sophisticated and is highly acclaimed: React.

  • preact is a light version of react, which is a good idea. Because if nothing else the build time of react is boringly slow. Preact comes with an instant project builder.

  • marko is another rendering thingy, which claims to be different to react although I’m not convinced that the philosophical differences are SO deep. It does look faster and smaller FWIW.

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, e.g. the many alternative work-alikes such as riot, which look similar but lighter.) There are certain philosophical entalments to this system, as opposed to the traditional Model-View-Controller one, which are deeper than one would like and attract more pnotificating.

Vue/Angular etc: The 2-way binding ecosystem

Vue

  • AngularJS
  • MoonJS
  • VueJs according to wikipedia…

    was created by Evan You after working for Google on AngularJS. He later summed up his thought process, “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?”

Stimulus, jquery et al: the progressive enhancement ecosystem

  • handy, hoary, mullet (as in “business in front, party out back… oh god they are sucking down cream bulbs”) user interface library: jQueryUI Popular, kinda shit for tablets and touch devices though.
  • simulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal effort.

Performance concerns

Widgets

  • dat.gui is the simplest option is you simply want to update given scalar members of your control object, and don’t mind that it mixes view and controller. Use it if you can, because everything else is much more complex. The docs could be clearer; try David Walsh’s excellent tutorial.
  • Knobs? Try the handy SVG jimknopf. (I don’t believe it handles multitouch though)
  • jquery knob is not ugly, but not very fast or modern. Good for one-offs.
  • NexusUI offers a toolkit for musical/VJ controllers, including bridges to OpenSoundControl. But using canvas, for some godawful reason, which misses one of the strong points of browser interfaces - 20 years of developing a good interaction model.

    • Duplex Nexus OSC:

      allows Nexus UI control surfaces to be constructed via OSC without the hassle of writing any JavaScript or HTML.

    • interface

      is similar to NexusUI, but quirkier and about a year older, so has vanished from our goldfish collective memory. Also, Charlie Roberts’ code is powerful, brilliant even, but his highly opinionated aesthetic rubs me the wrong way so I don’t enjoy it.

  • tangible.js lists some further useful libraries for this purpose.

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

Icons

Geomicons are compact SVG icons.

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

Offline JS apps

See javascript apps?

Multitouch

Is tedious to debug because most 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.