- Facebook’s UI library’s looks sophisticated: React
- handy, hoary, mullet (as in “business in front, party out back… oh god they are sucking on cream bulbs”) user interface library: jQueryUI Popular, kinda shit for tablets and touch devices though.
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.
- Measure Performance with the RAIL Model
- Chrome has draconion policies for scheduling on slower computers and tablets - see expensive task blocking scheduling logic, leading to lots of violation warnings if you use the scheduler. Google’s policy is that you need to do react updates in a webworker or in “micro partial updates” broken across several
- Moving Atom To React, including seeing GPU usage and the
translate3dtrick for shunting to the GPU
- Scrolling Performance
- debouncing for good animation performance
- Jank Busting for Better Rendering Performance
- 9 things every React.js beginner should know
- 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.
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.
tangible.js lists some further useful libraries for this purpose.
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
But how do you give access this UI?
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.