Designing out designers? – Mithat Konar (the blog)

I’m teaching myself React, the JavaScript library du jour that’s meant “for building user interfaces.” Interestingly, it doesn’t use a templating language. Instead it offers JSX: an extension of the JavaScript language that lets you write JS code that looks very much like HTML and that can be rendered into HTML. On the surface this seems like a cool idea, but the apparent simplicity starts to break down when you want to do anything other than straight-line HTML.

For example, if you want to render a list, you’re supposed to leverage JavaScript:

...
<ul>
{this.thingList()}
</ul>
...

thingList() {
  return this.state.things.map(thing =>
    <li key={thing.id}>{thing.val}</li>
  );
}

If you want to conditionally render something, you again use JavaScript:

<h4>Some things about our bananas</h4>
{this.anyBananas()}

anyBananas() {
  if (!this.hasBananas)
    return <p>Yes, we have no bananas.</p>
}

or possibly,

<h4>Some things about our bananas<h4>
{!this.hasBananas && <p>Yes, we have no bananas.</p>}

In short, if you want to do anything other than straight-line HTML, you need to use JavaScript.

I know some people will say this is a VeryGoodThing because templates are supposed to be logicless—a view that as near as I can tell is a throw-the-baby-out reaction to the realization that logic in templates can easily be abused. However, I hope even the logicless template crowd will recognize that in the React approach, the UI code ends up being cluttered with calls off to mysterious code generators. This is great if you’re feeling nostalgic for the early days of PHP.

I’m not. :-/

But this nostalgia for old-school PHP isn’t my main beef. My main beef is that this approach alienates designers from the development process.

The primary languages used for expressing the structure and visual intent of a web page are HTML and CSS, not JavaScript. They are both declarative rather than imperative or functional languages—making them very unlike JavaScript.

Templating languages typically come about to solve a variety of issues. While any templating language represents a new language that a user needs to learn, a good templating language’s domain will be so specific that (a) the actual amount of new language the user has to learn will be small and (b) its syntax can leverage the root languages’ conventions. For these reasons, HTML templating languages are far easier for UI designers to learn and use for building interfaces than, say, JavaScript.

OTOH, libraries like React (and to a much lesser extent Vue.js) require UI designers to think in terms of JavaScript and become quite adept at it rather than have just basic JavaScript skills if they want to have ownership of their projects’ HTML.

In other words, React and JSX are a technologies that make developers go, “Cool!” and designers go, “What the f***?” When there are alternative approaches, this just doesn’t seem right.

Leave a Reply Cancel reply