Starter page - interactive diagrams

I have a interactive tutorial that takes you step by step to make an interactive tutorial. However, the code for that is more involved than I’d like, so I wanted to make something even simpler.

 1  Vanilla javascript#

No libraries, no build step.

Demo and code^[1]

• Output is imperative style.
• Use createElement and appendChild, with setAttribute to set attributes and createTextNode to set text.
• Create and update are separate code. You have to keep track of whether something’s already created.
• Input is with addEventListener and callback functions.
• Redraw is explicit. Call redraw every time you change data.
• Modularity through your own abstractions in code.

 2  Lit-html#

Small output library, no build step required.

Demo and code^[2]

• Output is template style, described with html`…` in html syntax in the javascript file.
• Use attr=${value} to set attributes and ${value} to set text.
• Use javascript logic for branch/loop in templates.
• Create and update are unified. The system keeps track of whether something’s already created.
• Input is with @click in the html to attach a click event handler.
• Redraw is explicit. Call redraw() every time you change data.
• Modularity through your own abstractions in code.

Tricky: need to use svg`` for svg elements instead of html``. Tricky: in html syntax, tags don’t self-close, so <element /> is only the open tag, and you still have to close it with </element>. Tricky: there’s no bundled version of the library, so it loads slower than other libraries. It’s possible to bundle it yourself with Snowpack but frustrating that it doesn’t come with a bundle like Vue does.

 3  Vue v2#

Medium sized input&output library, no build step required.

Demo and code^[3]

• Output is template style, described with html syntax in the html file or in the javascript file.
• Use :attr="value" to set attributes and {{value}} to set text.
• Use v-if and v-for for branch/loop in templates.
• Create and update are unified. The system keeps track of whether something’s already created.
• Input is with @click in the html to attach a click event handler.
• Redraw is automatic for state shared with Vue. Run this.x = 5 and Vue will automatically redraw. If you pass an object into Vue, you can still modify the state outside of Vue and it will pick it up.
• Modularity through custom elements like <my-gridworld>.

Tricky: need to use view-box.camel instead of viewBox because of naming convention differences (js uses camel case; html uses kebab case, except for this property); only applies when writing the template in the html, and not when writing the template in javascript. Tricky: Vue 2 tracks changes to arrays and objects, including methods like push, but not to the new Set or Map types; have to force an update for these new types. Vue 3 tracks more types.

 4  React#

Medium sized input&output library, build step strongly recommended to convert code into regular Javascript.

Demo and code^[4] (demo doesn’t use the build step)

• Output is template style, described with xml syntax (jsx) in the javascript file.
• Use attr={value} to set attributes and {value} to set text.
• Use javascript logic for branch/loop in templates.
• Create and update are unified. The system keeps track of whether something’s already created.
• Input is with onClick in the html to attach a click event handler.
• Redraw is automatic for state kept inside React’s components. Call this.setState({x: 5}) and React will redraw. Redraw is manual for state kept outside of React. Copy it into React every time you change something so that React will see it.
• Modularity through custom elements like <Gridworld>.

Tricky: need to use the javascript names of elements and attributes instead of the html names. For example, use className=... instead of class=... like you would in html.

 5  TODO: Svelte#

Medium sized input&output library, build step required to convert Svelte code into regular Javascript

• Output is template style, described with html syntax in its own Svelte code file.
• Use attr={value} to set attributes and {value} to set text.
• Use #{if} and {#each} for branch/loop in templates.
• Create and update are unified. The system keeps track of whether something’s already created.
• Input is with on:click in the html to attach a click event handler.
• Redraw is automatic for state kept inside Svelte. It tracks top level changes to your underlying data and automatically redraws.
• Modularity through custom elements like <Gridworld>.

Tricky: Svelte tracks changes based on assignment statements, but not methods like push.

 6  My thoughts#

The main idea with templates is that instead of writing commands to generate html, we describe the html we want, with some placeholders for values that come from Javascript values. For example:

<rect fill=red x=${col} y=${row} width=1 height=1 />

Compare this to the vanilla approach:

let rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect");
rect.setAttribute("fill", "red");
rect.setAttribute("x", col);
rect.setAttribute("y", row);
rect.setAttribute("width", 1);
rect.setAttribute("height", 1);
svg.appendChild(rect);

or the d3.js approach:

let rect = svg.append("rect")
              .attr("fill", "red")
              .attr("x", col)
              .attr("y", row)
              .attr("width", 1)
              .attr("height", 1);

I find templates to be a big win. The major libraries in this space (React, Vue, Svelte, lit-html) all use templates, but the details differ.

<rect fill=red x={col} y={row} width=1 height=1 />
<rect fill=red :x="col" :y="row" width=1 height=1 />
<rect fill=red x=${col} y=${row} width=1 height=1 />

There’s some difference in how the templates are written. React uses an extension of Javascript called JSX to allow you to write html in your Javascript. You run a compiler to translate that into regular Javascript. Vue reads HTML from your document, or in strings in the source code. Lit-html uses a relatively new feature, Javascript template literals. Svelte also uses its own file format that is compiled into regular Javascript.

In addition, React, Vue, and Svelte offer a component system that allows you to create custom elements like <GridWorld> that are then expanded into HTML. Lit-html doesn’t do this, and instead leaves that to a separate library, LitElement. For my small projects, the component system doesn’t help me, as I can use regular Javascript functions and classes instead. However, for larger projects, it provides some modularity and also allows you to reuse components that others have written.

Tricky: in some of these template systems, it is hard to programatically construct the html in certain ways. For example in lit-html the tag name has to be specified statically.