overwatering.org

blog

about

There’s a really straight-forward approach to updating the UI in a JavaScript browser app. Use chunk of hidden HTML, duplicate this and then manually update the duplicated elements to show your data. With thanks to Joe Walnes, here’s some HTML.

<html>
  <head>
    <style> .template { display: none } </style>
  </had>
  <body>
    <section class="books">
      <article class="book template">
        <h1 class="title">A book title goes here</h1>
        <p>Price: <span class="price">$99</span></p>
      </article>
    </section>
  </body>
</html>

Here’s some data to display.

books = [
  {title:'On Capital', price:12.45},
  {title:'The God Delusion', price:56.76}
];

And here’s the script to display that data, according to that template.

function onBooksLoaded(books) {
  books.forEach(function(book) {
    var el = $('.book.template').clone().removeClass('template').appendTo('#books');
    el.find('.title').text(book.title);
    el.find('.price').text(formatPrice(book.price));
  });
}

In my apps I’ve always written something pretty similar to this, except that I’ve used ICanHaz.js and Mustache.js to remove the boring, repetitive element update calls. I’ve certainly not used anything more complex or framework-y on top of these two simple libraries.

But I had been thinking that it was time to update my tools to one of AngularJS or Knockout. They seem to be the new hotness.

I never liked data binding back in my days of desktop GUI programming. I always found it was channel through which your UI could leak into the rest of your program. I’d never bind to the data in my UI code, instead I’d translate it to some simple representation and bind. Which made binding pointless.

Except in apps that are just really thin layers over some data source. But those apps are boring.

As JS apps have been getting so much more sophisticated, I keep looking at what we used to do back in the 80s and 90s before we forgot how to write rich apps. This has what has got me excited about React and, particularly, Om.

React has re-discovered the Vertical Blanking Interval.

And Om has capitalised on that by using immutable data structures to reflect (bitblit) the absolute minimum changes from the shadow DOM (offscreen GWorld) to the browser DOM (video memory), rapidly.

Forget AngularJS and Knockout, I’m heading straight for React and Om.