Designing out designers?

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 came out of the realization that logic in templates can easily be abused rather than a considered evaluation of the role logic should play in templates. 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. :-/

But that’s not my main beef. My main beef is that this approach alienates designers from the development process.

The primary languages used by web designers are HTML and CSS. These, not JavaScript, are the coding languages for expressing structure and visual intent. Templating languages in general come about to solve a variety of issues. While any templating language represents a new language that users need to learn, a templating language’s domain is so specific that (a) the actual amount of new language the user needs to learn is small and (b) its syntax can leverage the root language’s conventions (HTML in the case of web design).

For these reasons, HTML templating languages are far easier for UI designers to learn and reason with 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 reasonably adept JavaScript programmers if they want to have any ownership of their projects’ HTML.

That just doesn’t seem right.

Leave a Reply

Your email address will not be published. Required fields are marked *