Web Views as Data

HTML provides a semantic structure around data presented on the web. We can build on this to create a simpler presentation layer that avoids the need for complex view logic.

Consider this bit of HTML:

<article>
  <h2>
    hello world
  </h2>

  <p>
    :wave:
  </p>
</article>

The semantics of this simple fragment provide us with a basic understanding of the data that will be presented. We can think of the article as representing a unit of content, each unit containing a heading and a body.

If we think of the article as representing a data object, we can let the data itself drive the rendering process. Doing this requires a bit more knowledge though, since we need to know what part of the data each node represents. We can do this with HTML data attributes:

<article>
  <h2 data-prop="title">
    <!-- post title goes here -->
  </h2>

  <p data-prop="body">
    <!-- post body goes here -->
  </p>
</article>

Now we can parse the view template into a structure; something like this:

view = {
  title: node_for_title
  body: node_for_body
}

Rendering is now a matter of transforming the view structure to match the data that we want to present. Once the view and data match, final presentation happens by mapping each value into its respective node:

data = {
  title: 'hello world',
  body: ':wave:'
}

# present it
data.each do |key, value|
  view[key].text = value
end

When we treat the view as data, rendering is replaced with a transformation of one data structure into another. Given a view template and some data, complex rendering can be expressed as simple presentation:

view.present(data)

We only have to say what should be presented and the data drives the rest of the presentation process. Interested in seeing this in practice? Take a look at Pakyow, a web framework built around this approach.