(2019-09-17) Udell Web Components Used In The Clingen App

Jon Udell: Web components used in the ClinGen app. A few years back I watched Joe Gregorio’s 2015 OSCON talk and was deeply impressed by the core message: “Stop using JS frameworks, start writing reusable, orthogonally-composable units of HTML+CSS+JS.” Earlier this year I asked Joe to reflect on what he’s since learned about applying the newish suite of web standards known collectively as web components. He replied with a blog post that convinced me to try following in his footsteps. (2019-09-17-GregorioLookingBackOnFiveYearsOfWebComponents)

The demo I’ll describe here comes from an app used by biocurators working for the ClinGen Consortium

the workflow is complex and the requirements for accurate tagging are strict. The app provides a guided workflow, and assigns tags automatically

This is plain vanilla web software: no package.json, no build script, no transpiler, no framework.

Here I digress to clarify a point of terminology. If you look up web components on Wikipedia (or anywhere else) you will learn that the term refers to a suite of web technologies, primarily Custom Elements, Shadow DOM, and HTML Template. What I’m showing here is only Custom Elements because that’s all this project (and others I’m working on) have required. (People sometimes ask: “Why didn’t web components take off?” Perhaps, in part, because nearly all the literature implies that you must adopt and integrate a wider variety of stuff than may be required.)

Two key patterns for custom elements are:
Use attributes to pass data into elements.
Use messages to send data out of elements. (messaging)

it beams that message at a couple of targets