Programming Social Applications

OpenSocial Templating

As you’ve seen in many of the OpenSocial gadgets in the earlier chapters, two of the most widely used and accepted approaches to developing the visualization layer within a gadget are to insert new content directly into the innerHTML of a DOM node, or to dynamically create new nodes and inject them into the DOM structure through the JavaScript layer. One major issue with these approaches is that you mix your markup and script layers, which makes the code base difficult to maintain, very hard to reuse, and unwieldy.

As we talked about in the section Porting Applications from Facebook to OpenSocial in Chapter 5, one key to making a portable application is to separate visual markup from programming logic. In the traditional approaches to gadget development I just mentioned, markup and programming logic is not split. This means that application portability is a major concern, and you risk limiting the reach of your application within different containers.

OpenSocial templating provides a way for developers to create a UI that is driven by a data source, such as through data pipelining. This approach separates out programming logic from the markup layer, extending all of the benefits of portability that come with that separation. In addition, this approach gives you a code base that is easily maintainable, reusable, and that reduces code bloat with redundant functions and code blocks.

OpenSocial templates offer several features for defining a markup layer on top of ...