How to UI in 2018

thi.ng
thi.ng
Feb 4, 2018 · 10 min read

In CS speak: Derived views of pure data

HTML is (just) an UI assembly language

Brand identity generator for Leeds College of Music (2012–2013), built in Clojure, OpenGL & OpenCL. The entire UI is constructed from a single, deeply nested Clojure hashmap, completely describing/constraining various config options, layout, value constraints, events fired etc.

In Math speak: ui = f(s)

UI components using only vanilla JavaScript?

js:   ["div", "hello world"]
html: <div>hello world</div>
js: ["div#foo.warning.blink", "howdy!"]
html: <div id="foo" class="warning blink">howdy!</div>
js: ["div", {id: "foo", class: "warning blink"}, "howdy!"]
html: <div id="foo" class="warning blink">howdy!</div>
/**
* @param href link target
* @param body link body
*/
const link = (href, body) => ["a", {href}, body];
/**
* @param src image URL
* @param alt (optional)
*/
const img = (src, alt = "no desc") => ["img", {src, alt}];
link("http://thi.ng/hiccup-dom", "hiccup-dom");link("http://thi.ng/hiccup-dom", img("foo.png"));
const li = (body) => ["li", body];
const list = (type) => (items, tx = li) => [type, ...items.map(tx)];
// create different list types
const ol = list("ol");
const ul = list("ul");
ol(["alice", "bob", "charlie"]);
// [ 'ul', [ 'li', 'alice' ], [ 'li', 'bob' ], [ 'li', 'charlie' ] ]
// use custom list item function
ul(["alice.jpg", "bob.png", "charlie.gif"], (src) => li(img(src)));
// [ 'ul',
// [ 'li', [ 'img', {src: "alice.jpg"} ] ],
// [ 'li', [ 'img', {src: "bob.png"} ] ],
// [ 'li', [ 'img', {src: "charlie.gif"} ] ] ]
// static component w/ param
const
greeter = (name) => ["h1.title", "hello ", name];
// component w/ local state
// also note how this function returns another one
// more on this later...
const
counter = () => {
let i = 0;
return () =>
["button", { onclick: () => (i++) }, "clicks: " + i];
};
// root component is just a static array
const
app = ["div#app", greeter("world"), counter(), counter()];

Introducing thi.ng/hdom

Outlook

thi.ng

Written by

thi.ng

Computational design, data, TypeScript, Clojure/script, C

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade