React, JSX and ES6 as a template language

The last few years have seen an important popularity increase of front-end rendering frameworks and what once was a cosmetic paint coating using handwritten HTML and CSS became an abstracted JavaScript process that renders HTML and CSS. The benefits of client-side HTML rendering are plenty but one down side is the rise of complexity for web integrators.

What used to be rendered on the server using a template language (here moustache)…

…became a very noisy JavaScript module…

The majority of the content of this file is keywords and software development notions (module, object, function, point dereference…).

Using ES6 syntactic sugars and react functional component we can greatly reduce this noise.

What happened here? Technically speaking, we export as default an arrow function that destructures its only argument (props) and returns some JSX. The result is a much more simple syntax closer to a template.

But does this scale?

The benefit of this notation is that we get a declarative block at the top of the file that lists the needed properties and a template block at the bottom that uses the properties.

At Korbit we have been using this component style for hyphen.to. This static website can be maintained by developers and non-developers alike.