Use a more robust library for view rendering

[joefitter]

Currently we use Hogan and Mustache to render views on the server before passing to the client. I believe this could be better achieved by using a dedicated view library such as React or Vue.js (with JSDOM).

Template mixins could be replaced a set of React components which contain all rendering logic and required into templates that need them:

import { Form, RadioGroup, Submit } from 'hof-components'

export default ({
  step
}) => (
  <Form step={step}>
    <RadioGroup ref='some-ref' />
    <Submit />
  </Form>
)

As React uses virtual DOM we would be able to benefit from universal rendering - send the rendered HTML to the client, but also benefit from client side JS without having to include onDomReady JS such as progressive reveal. This could actually be achieved with most front end view libraries by using JSDOM to render to HTML before sending to the client.

I see this way as more maintainable than having res.locals with a bunch of potentially conflicting mustache mixins in the same namespace.

Thoughts @JoeChapman @easternbloc @daniel-ac-martin ?

[joefitter]

Also as a note to add - with the above example I would still like to hide the rendering logic from the end user, they would only be concerned with a config file which would loop over steps and fields to render the forms programmatically. Overrides and custom HTML if really needed would be achieved in a similar way to how they are currently

[gavboulton]

I like the idea of this. It's definitely worth spiking.