Wednesday, August 20th, 2008

Making creating DOM-based applications less of a hassle

Category: Framework, JavaScript, Library

<p>Creating a lot of HTML using DOM methods can be a real pain. This is what students of the Juku training course that I held two weeks ago found out quite quickly and complained about the verbosity of it all. I listened to their concerns and came up with a framework for JavaScript applications called
ViewsHandler.

One of the tasks I had given the class is to create a thumbnail show with image information from a link pointing to Flickr using the JSON API. The following is a solution using and showing the options of ViewsHandler:

A flickr show created with ViewsHandler

A flickr show created with ViewsHandler

ViewsHandler is not another JavaScript templating solution but works on the assumption that in most cases you’ll have to create a lot of HTML initially but you’ll only have to change the content of some elements dynamically as new information gets loaded or users interact with the app. So instead of creating a lot of HTML over and over again all I wanted to provide is a way to create all the needed HTML upfront and then have easy access to the parts of the HTML that need updating.

The first thing you’ll need to do to define your application is to create an object with the different views and pointers to the methods that populate the views:

javascript
< view plain text >
  1. var views = {
  2.     index:{
  3.       create:createIndex
  4.     },
  5.     detail:{
  6.       create:createDetail
  7.     },
  8.    info:{
  9.     create:createInfo
  10.   }
  11. };

ViewsHandler then creates DIV elements for each of these views and hides them for you. In your methods you create all the HTML the different views need to have and apply it with an add() method. You then define the parts of the HTML that should change later on as fields using the define() method and you can use the set() method to change the content of these fields and the view() method to change between views.

The benefit is that for setting the data you don’t need to access the DOM any longer or use innerHTML or nodeValue. ViewsHandler created a pointer to the element all of this is cached. The set() method also allows you to either add a new node as the value or a string. In the latter case it’ll create a text node for you.

One convenience method is linkto() which creates links pointing to the different views for you. None of this is rocket science, but it helped the class to create large applications with complex views without losing track of what they are doing. Maybe it can help you, too.

Related Content:

Posted by Chris Heilmann at 11:13 am
13 Comments

+++--
3.2 rating from 23 votes

13 Comments »

Comments feed TrackBack URI

Interesting solution. Another approach to this verbosity of creating JavaScript widgets etc I have found is to have a HTML document filled with all component templates (DIV structures etc) that is Jaxed into the page as and when required and of course the template components can be duplicated. Also give you a neat HTML file to maintain actual HTML code of UI components instead of re-mapping element creation in your JS code.
It’s an idea at least, works quite nice so far, sure it has some drawbacks though but I like it :)

Comment by RobFrontEndDeveloper — August 20, 2008

I use html templates in hidden divs as well. Much easier to code and maintain than using DOM els and setters. Then, you should use DOM to navigate and manipulate.

Comment by creppie — August 20, 2008

Well, the problem with loading HTML documents with AHAH is that you have no handle into them – you need to use DOM scripting to find the elements to manipulate. This is where it gets expensive and slow. The benefit of this method is that you already have these pointers. It is the same with using innerHTML – it is a fast way to add content, but then you need to find the parts to manipulate. If you created them and stored pointers in variables you don’t need to do that.

Comment by Chris Heilmann — August 20, 2008

Dojo framework has a concept of “templates”, which define the UI layout. The templates can have dojoAttachPoints, which can later be used to access the DOM. For ex:

templateString: ”+
”+

And later in the code:

this.containerNode.appendChild(whatever);

Any DOM API can be used. This approach keeps the UI separate from the code and I kind of like this approach.

Comment by Rags — August 20, 2008

I think, my HTML markup got filtered out. Trying again.

templateString: ''+
''+
''

Comment by Rags — August 20, 2008

The benefit is that for setting the data you don’t need to access the DOM any longer or use innerHTML or nodeValue. You might be interested in Dojo’s new Widget.attr(), too. It’s a standard interface for setting/getting all widget attributes, including innerHTML of templates nodes.

Comment by maine — August 20, 2008

Rags, try again, you still haven’t gone to Riches.

Comment by Nosredna — August 20, 2008

hmm… this makes me wonder if there’s a nice intersection between a json-like dsl for js templating and haml.. interesting post!

Comment by ilazarte — August 20, 2008

I dig it :). Maybe viewsHandler.add could be absorbed by viewsHandler.define (they seem to be called 1 after another consistently) . For example if “define” is called and the element has not been “add”‘ed then auto add it. Also viewsHandler may benefit from chaining:
viewsHandler.create(…).set(…).set(…);

This can be used with other frameworks which is cool too.
Good job :D

Comment by jdalton — August 20, 2008

More Dojo plugging – Dojo also has an implementation of the Django templating language, dojox.dtl. This is an extremely powerful template engine that, similar to this one, creates the HTML once, then updates it when the data changes.

You simply update the data, call the template.render method, and the HTML is updated – no creating nodes repeatedly, no innerHTML or nodeValue access.

Comment by sos — August 21, 2008

It’s great to have small solution like this so we can use it any framework we want, thanks for sharing.

Comment by AdrenalinMd — August 21, 2008

ExtJS also has a great built-in solution called XTemplate for doing this that’s worth looking at also.
http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate

Comment by gancelot — August 21, 2008

I personally like EJS the most! Templates are compiled into JavaScript and it’s just great!

Comment by kolev — August 23, 2008

Leave a comment

You must be logged in to post a comment.