A month ago Gordon L. Hempton wrote about twelve JavaScript frameworks in the Client-Side MVC space. His rating criteria were different to mine. One that really sticks out is that I like the logic not forcing the template HTML to migrate to <script> tags. Depending on the sophistication of the app, I like to be able to see the app in a browser or DreamWeaver when the framework is not running. It gives me a way of gauging the composition of the app. It appeals to a WYSIWYG leaning that I have. I like my UI frameworks to be built for designability if you like.

Addy Osmani has a number of implementation of a TODO app on a Github Pages site. For composition purposes, this really is the definitive place presently. Using those, I’m going to scrutinize the HTML and how it the app looks without JavaScript. I checked out Addy’s repo, then recursively deleted all javascript files, before loading the main page for each into a browser.

Angular

In the browser:

In DreamWeaver:

What I like is that I can see the repeating item in it’s mustache templating style: {{todo.content}}. What I don’t like is that I can’t see the “X item(s) left” message, that live updates. Angular leaves your template HTML in-situ – where it would be if there were no angular logic happening to it. Here’s the todo list in code (ng:repeat is the looping construct):

```html





  • <input class=“check” type=“checkbox” name=“todo.done” / >
    {‌{ todo.content }}

```

Backbone

Missing is the repeating TODOs. Instead, in the page, there is a <ul id="todo-list"></ul> placeholder for Backbone to insert child elements to later. Here’s the template, in canonical Backbone (hidden inside a <script> tag):

```html

```

There’s no ng:repeat equivalent code in the HTML, that’s done in JavaScript.

Knockout

I’m not sure if the way the TODO app was coded with knockout is the only way, but the line that would show an individual TODO item from the list of TODOs looks like <div class="todo-content" data-bind="text: content, event: { dblclick: edit }" style="cursor: pointer;"></div>. Without the frameworks attached, there’s nothing to see for that DIV. If I hard-code TODO-CONTENT in that DIV, and reload, then it looks more like Angular:

It is nice to see the inline templating rather than the template in a <script> tag like Angular:

```html




```

Knockback

Screenshot – as Backbone’s

Knockback is a very pragmatic merger of the best features of Backbone and Knockout. Unlike many of the websites for these technologies, Knockback’s site tries to instantly sell the technology to the developer. Like Backbone, Knockback keeps templates separate. Here’s their todo list: <ul class="todo-list" data-bind="template: {name: 'item-template', foreach: todo_list.todos}"></ul>. Here is the template for that:

```html

```

Broke

Screenshot – as Backbone’s

The template logic is in JavaScript files, which I really don’t like:

```javascript
todo.templates= {
list: ‘

    ’ +
    ‘’ +

,view: genericTaskTemplate
,create: ‘’
,update: ’
  • ’+
    ’ +
    ’ +
    ’ +

  • };
    ```

    Sammy

    Screenshot – as Backbone’s

    The template logic is in separate .template file, which seems unnecessary given it’s just an extended HTML format.

    ```html


    <% $.each(todos, function(index, todo) { >
    = todo.id >" class="<= todo.done ? ‘done’ : ‘’ >">


    <input class=“check” type=“checkbox” <= todo.done ? ’checked’ : ’’ >/>
    = todo.id >">
    = todo.id >" class=“todo-item”><= todo.name %>

    <% }); %>
    ```

    Ember

    ```html
    ```

    You should know by now that I’m really going to like Ember’s templating. From my point of view this one is in last position!

    ExtJs

    Screenshot – as Backbone’s

    The template logic is in JavaScript files. ExtJs is not so much HTML augmented with Client-Side MVC capability like the rest are. It’s more of a departure from HTML and a reality built on it’s own DSL which can be highly attractive in its own right. I’m only including it because Addy has it on his list. In this case, the ExtJS grammar is showing inlined HTML in the pertinent list of TODOs section:

    ```html
    Ext.define(‘Todo.view.TaskList’ , {
    store: ‘Tasks’,
    loadMask: false,
    itemSelector: ‘div.row’,
    extend: ‘Ext.view.View’,
    alias : ‘widget.taskList’,
    tpl: Ext.create(‘Ext.XTemplate’,
    ’,

    ’,
    ‘<input type=“checkbox” {[values.checked ? “checked” : ""]} />’,
    ‘<span class="{[values.checked ? “checked” : ""]}">{label}’,
    ’,
    ‘’,
    {compiled: true}
    )
    });
    ```

    Fidel

    Screenshot – as Backbone’s

    ```html

    ```

    Like Backbone, or this example, there’s no ng:repeat equivalent code in the HTML. It is done in JavaScript instead.

    JavaScriptMVC

    Screenshot – like Backbone’s. Template nesting (inside <script> tags) looks powerful:

    ```html


    ```

    JQuery with Handlebars

    Screenshot – like Backbone’s. Separate template again:

    ```html

    ```

    Spine

    Screenshot – as Backbone’s. Template again leverages <script> again but is inline with the HTML that contains it. Looping is not in the grammar though, so is performed by JavaScript as the template is acted on.

    ```html


    ```

    YUI Library

    Screenshot as Backbone’s. As is the norm the template is in a &lt;script> tag, with the looping in Javascript.

    ```html

    ```

    Batman

    (added 14 Feb)

    Batman’s TODO is in it’s own GitHub Repo, and not Addy’s one (yet). Batman uses CoffeeScript instead of JavaScript, which is alluring in its own right. Here’s the screenshot:

    Like Knockout, the bound field is not visible in design mode. Similarly, the number of items statistic is also missing. Lastly the <a> tag for ‘delete’ is missing a and thus does not appear as a link. The other frameworks were using fancy images for this, so that is probably the same for them too, but not apparent in their demos. I’ve hacked those things in (hard-coded) and taken another screenshot for your enjoyment:

    The good news (to me) is that the Batman extends HTML like Angular and Knockout.

    Conclusion.

    Only Angular, Knockout and Batman allow me to see what’s what in design mode, and see the mechanism of looping in the extended HTML grammar. That’s the opposite of one of Gordon L. Hempton’s “good” criteria.

    It is also interesting that one of these has Microsoft patronage, and another has Google support. I wonder if there’s a Dart port “Dangular” in the future from the Google fellows :-P

    After thought.

    Angular’s TODO list implementation could be even better in design mode, if it encoded stats like so:

    ```html



    {‌{statsCount()}} item{‌{statsPlural()}} left.



    Clear {‌{finishedTodos()}} completed item{‌{finsihedPlural()}}

    ```

    Instead of the way it is now:

    ```html

    ```

    We’d get a design mode view like so:

    Apr 19, 2012: This article was syndicated by DZone



    blog comments powered by Disqus

    Published

    February 13th, 2012

    Tags

    Categories