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 popularity contest winner 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.
- resource Wiki.
- react devtools gives you a browser debugger for chrome or firefox.
- create-react-app streamlines app building.
Vue/Angular etc: The 2-way binding ecosystem
Vue exemplifies a slightly different approach to the FRP style; AFAICT it is being gradually out-competed.
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?”
JQuery et al: the progressive enhancement ecosystem
- handy, hoary, mullet (as in “business in front, party out back… omg they are huffing cream bulbs”) user interface library: jQueryUI. Classic not great for 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 over-engineered 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 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.
See vector icons.
Offline JS apps
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.
No comments yet. Why not leave one?