Javascript user interfaces


Leverage javascript’s ubiquity and brainshare and tooling to build user interfaces. My target audience with this notebook is people like myself who are not UX professionals but do want to bang out a quick interface for some minimum viable project which can be palmed off to an actual professional once the glitzy animations and oversaturated colour scheme has charmed the boss into allocating resources.

Visualisation is important in this domain; javascript is the emergent weapon of choice for interactive visualisation. If that is what you are doing, maybe try starting witt the limited but ultra simple dat.gui; fall back to more complicated options as needed. 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

One useful trick for me was/is plugging in to functional reactive style for handing user interfaces meshing with other streams of data. The the popularity contest winner here is React, but there are other contestants.

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.

One thing that looks usefully different for my purposes is Svelt which is a javascript framework offering a developer experience similar to react, but it compiles to an optimised minimal version. Compiling javascript to javascript which is in turn compiled again is obviously absurd. Except the various javascript app bundling frameworks do a giant code analysis and mangling step anyway, so you may as well do something useful while sitting around accruing that overhead.

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

dat.gui

dat.gui is the simplest option. It is designed for tech demos and such where the main user interface option is a slider widget. Use it if you can, because everything else is much more complex. On the other hand, if you are really, truly sure in your heart of hearts that you are starting off a big project that is intrinsically more messy than a fixed set of sliders and numerical widgets, do not use this. Use some overengineered alternative and resign yourself to much more wasted time getting to the payoff of a usable interface in exchange for the future flexibility. The docs could be clearer; try David Walsh’s excellent tutorial.

Widgets

  • 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 endlessly more widgets! You can get more widgets using Web components.

Web components

Web components which, thanks to projects like polymer, give you shinyshiny knobs, buttons and HUDs from plain old HTML.

Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Powerful. Flexible. Almost certainly too complicated for what I want. Intrinsically complicated, even if browsers were all the same, but they are not, so you have to venture into an even more complicated world of “polyfills” and sensitive version dependencies to use them.

Do you really need to go there? Are you sure you don’t want to hire a user interface professional to deal with that bit? Well, OK, you mad bastard, I can’t stop you.

See this plain-talk webcomponents howto or welcome to polymer, or Polymer code or PolymerLabs code or other things I am too unspeakably bored to countenance.

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. I’ve been using touch-emulator, which is adequate so long as you are using a build tool to prevent you from accidentally deploying it in production.