DailyJS

BBC Glow: Overview and Example

Introduction

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

bbc glow tutorials frameworks

BBC Glow: Overview and Example

Posted by Alex R. Young on .
Featured

bbc glow tutorials frameworks

BBC Glow: Overview and Example

Posted by Alex R. Young on .

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 = '{from_user} {text}';
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.