- 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
- resource Wiki
- react devtools gives you a browser debugger for chrome or firefox
- atom editor support
- create-react-app streamlines app building
Vue/Angular etc: The non-React jS app ecosystem
- 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
Offline JS apps
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.