BBC Glow: Overview and Example

01 Nov 2009 | By Alex Young | Tags bbc glow tutorials frameworks

Glow is the BBC’s JavaScript framework. Things to note:

  • The namespacing makes it play nice with other frameworks (and itself)
  • It’s split into modules that are mostly self-contained (an exception will alert you to a missing dependency but this is rare)
  • Modules include: dom manipulation, language extensions, events, animations
  • Also features UI widgets with bundled images, HTML and CSS
  • The homepage works with the Konami code

Why does Glow exist?

To read what the developers say, see What is Glow?

To summarise, the BBC have strict browser support guidelines. They also have disparate teams that can work on different parts of the same page. Therefore:

  • Glow has impressive browser support: support table
  • Glow can work alongside different versions of itself

DOM and selector support

It’s not as advanced as Prototype or Sizzle, but the selectors provide enough abstraction for most tasks (child and grouping are present but pseudo selectors aren’t). Access the DOM using glow.dom.get("selector"). This will return a nodeList.

When working with Glow it’s best to think in terms of node lists (in a similar fashion to jQuery). NodeList has a lot of convenience methods. Adding a CSS class or iterating over lists of nodes is easy:

glow.dom.get("img").filter(function (i) {
  return this.width > 320;
});

glow.dom.get("#login a").addClass("highlight");

Language and Data

There are a few important methods in glow.lang to be aware of:

  • extend copies the prototype from one object to another
  • interpolate provides simple string templates
  • map is useful if you like iterators and expect them to work in IE

Here’s an interpolate example in which I add it to String’s prototype for convenience:

String.prototype.interpolate = function() { return glow.lang.interpolate(this, arguments[0], arguments[1]); };

var html = '<li><a href="http://twitter.com/{from_user}"><img width="48" height="48" src="{image}" />{from_user}</a> {text}<br clear="both" /></li>';
return html.interpolate({ image: tweet['profile_image_url'], from_user: tweet['from_user'], text: tweet['text'] });

Net (Ajax)

The network (Ajax) API is clean and easy to use. It’s all in glow.net, but there’s not much to it: glow.net.get and glow.net.post work in a similar way to most libraries.

Cross-domain requests are made possible with glow.net.loadScript. This inserts script tags into the document — this works especially well with JSON (pay attention to the use of {callback} in this example):

TwitterSearch.getTrends = function(callback) {
  var url = 'http://search.twitter.com/trends/current.json?callback={callback}';
  glow.net.loadScript(url, {
    onLoad: function(data) {
      var trends = [];
      for (i in data.trends) {
        trends = data.trends[i];
      }
      callback(glow.lang.map(trends.slice(0, 3), function(trend) { return trend.name; }));
    }
  });
}

Animations

The animation API is similar to scriptaculous: it provides a set of faders, sliders, highlight and CSS mutation. These are known as animation helpers.

glow.anim.fadeIn(tweet_html, 1);
glow.anim.css(element, 0.5, { 'bottom': { to: 0 } }).start();

The other major parts of the animation API are glow.anim.Animation, glow.tweens, and glow.anim.Timeline.

The glow.anim.Animation class can be used to build your own animation primitives. Specify a duration and a tween, then add a listener for frame events on the animation object itself.

Tweens are functions for modifying animations — there is a comprehensive set in glow.tweens.

Sets of animations can be orchestrated using glow.anim.Timeline and an array of animations and delays (known as channels). There’s a good Mexican wave example in the documentation.

My Glow example: Twitter search panels

I built a real time, user-configurable, Twitter search app just using Glow:

This demonstrates glow.dom, glow.lang, glow.events, glow.net with cross-domain API calls, and glow.animations.


blog comments powered by Disqus