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.
Going deep on React
Vue/Angular etc: The 2-way binding 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
- 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.
- Measure Performance with the RAIL Model
- Chrome has draconion policies for scheduling on slower computers and tablets -
e.g. 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. 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.
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.
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 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.
Geomicons are compact SVG icons.
More complete and widely support but much bloatier are font icons such as fontawesome.
Offline JS apps