Glow Technical Overview
Post categories: open source
| 15:06 UK time, Thursday, 9 July 2009
Hi, I'm Jake Archibald, a developer on Glow, the ³ÉÈËÂÛ̳'s recently open-sourced JavaScript library.
As a follow-up to Stephen Elson's introductory post, I'd like to go over some of the technical features and reasons for Glow.
Like many developers, English is my second language but I don't yet have a first. The ³ÉÈËÂÛ̳ can't afford me a ghostwriter so we're all going to have to suffer my terrible grammar.
What is Glow?
Glow aims to make working with JavaScript and the DOM easier by providing shortcuts for common functions while ironing out the differences between browsers.
Browsers are the #1 cause of gentle sobbing and even screaming in a web developer's life. From that, I guess you could say Glow's goal is to "minimise screaming and sobbing".
I'm sure you're already aware that Glow isn't the first JavaScript library to do this, which begs the question...
Why did the ³ÉÈËÂÛ̳ build Glow?
Glow isn't the ³ÉÈËÂÛ̳'s first JavaScript library, although it is the first to get an open source release.
Before Glow there was a library called JSTools, and before that was EOLTools. To give you a rough timescale, EOLTools had code to differentiate between Internet Explorer 3 and Netscape Navigator 3, code which I only became aware of when it started politely suggesting Safari 3 users upgrade to IE3 on an ancient ³ÉÈËÂÛ̳ page.
JSTools was showing its age and needed replacing. Plans were in motion to bring our page templates kicking and screaming into a "standards mode" doctype. Then, Netscape Navigator 4 fell off our level 2 browser support list, which was a major blocker to making a 'modern' JavaScript library.
Why not use an existing library?
At the time we were considering this question, there were a range of excellent open source JavaScript libraries available, the most popular (with ³ÉÈËÂÛ̳ developers at least) being . In fact, the first version of the current style ³ÉÈËÂÛ̳ homepage design used jQuery, as Glow was still in the early development stages. However, no existing libraries met our standards of browser support and accessibility.
At the time we were still fully supporting IE5.5 and Safari 1.3, among others, and we continue to support Safari 2. On top of this, we have to actively avoid errors in our "Level 2" browsers, which still includes IE5. IE5 for instance will throw an unpleasant parsing error if it encounters a non-greedy quantifier in a regular expression.
The ³ÉÈËÂÛ̳'s support standards are based on usage stats and the upgrade paths available to users of particular browsers. For instance, while we had a significant number of users on Safari 1.3 we refrained from asking them to upgrade to Safari 2, as that would be asking OSX 10.3 users to pay for 10.4 or later. Asking them to switch to Firefox 2 would have been biased, and providing a list of all alternatives would have been confusing and unhelpful. Considering all this, it was clear we couldn't just use an off-the-shelf solution.
Forking an existing library to add the necessary browser support was an option, but that would still mean actively developing a library, and as the original library moved forward we'd be left maintaining code no longer supported by the original library.
As parts of many ³ÉÈËÂÛ̳ pages are independently developed and controlled, we needed a library that could sit alongside other potentially incompatible versions without namespace collisions or CSS styles clashing (as in, CSS rules intended for Glow 1.5 widgets must not affect 1.6 widgets).
Should I stop using my favourite JavaScript library in favour of Glow?
Glow was created because we have requirements that most people don't. It goes without saying that if everyone had similar requirements to the ³ÉÈËÂÛ̳, other JavaScript libraries would meet them.
Glow won't be able to make use of technologies in newer browsers unless they can be at least emulated in all the browsers the ³ÉÈËÂÛ̳ needs to support. Other libraries will be able to drive forward new & exciting technologies, whereas Glow will be there for those who can't adopt those technologies for browser support and accessibility reasons.
We don't expect or want to steal users from existing libraries, but provide a library for those in a similar situation to the ³ÉÈËÂÛ̳.
What does Glow do?
Please explore Glow's demos and documentation for full details. However, here's a quick run-down of the core features:
DOM manipulation
The backbone of Glow is our DOM module, which allows you easily gather and manipulate parts of a page. For example, if you wanted to add "link:" to the start of all links:
glow.dom.get("a").prepend("Link: ");If you're familiar with other JavaScript libraries you'll recognise this 'NodeList' pattern. In fact, you may want to map glow.dom.get to a shorter variable for familiarity, such as:
var $ = glow.dom.get;Events
The events system allows you to nominate a function to call when a particular event occurs. The interface to listen for events is identical between DOM nodes and other objects
glow.events.addListener("#myLink", "click", function(event) {
alert("ow!");
});
var myBall = new Ball();
glow.events.addListener(myBall, "bounce", function(event) {
alert("boing!");
});
The above assumed Ball is a user-created constructor, and at some point it contains...
glow.events.fire(this, "bounce");Animation
Animations in JavaScript can be a major source of screaming and sobbing, but Glow provides methods to make it simple.
To slide an element away over 3 seconds:
glow.anim.slideUp("#myDiv", 3);You can also, animate most CSS properties. To animate a background colour to red over 2 seconds:
var myAnim = glow.anim.css("#myDiv", 2, {
"background-color": "red"
}).start();Widgets
Whereas the previous features are building blocks, widgets are more 'out of the box' user interface components which can be easily styled to fit your site. These include (but are not limited to):
- AutoSuggest - A dropdown list of 'suggestions' that appear when the user types in an input element. Used on Glow's API quick reference
- Carousel - Scrollable list of items
- Panel - An overlaid dialog which can be modal / modeless. This is used on many ³ÉÈËÂÛ̳ pages as light boxes or modal dialogs.
- Slider - Form control for setting a numerical value within a range
- Timetable - A scrollable display of items positioned by time & duration
What's next?
Glow was developed as an internal library for the ³ÉÈËÂÛ̳, and parts of Glow 1.5 may reflect that. But work now begins on Glow 2.0. Our priorities are:
Performance
Many Glow modules were created while we were still fully supporting Safari 1.3 and IE5. Development became a balance between slowing faster browsers down with lowest-common-denominator code, and increasing file size by forking code so newer browsers got a speed benefit while maintaining compatibility with older browsers.
As we've since waved goodbye to some of those browsers, we can remove those forks and start getting the most out of our current support list.
File size & structure
Glow + widgets + CSS file currently weighs in at ~60k, which is comparable to other libraries. However, for the majority of development we were unable to use gzip due to an obscure IE bug that was menacing our stats (another blog post perhaps?). As a result, some code was written to get the most out of YUI Compressor, perhaps at the expense of YUI Compressor + gzip.
Expanding existing features
Glow 1.x was about building a set of modules and widgets, now we have the opportunity to go back and improve features on existing modules.
For instance, our CSS selector support is relatively simple and needs expanding. Glow 2.0 would deal with that, and yes, we're considering adopting a library dedicated to CSS selectors to do this.
Improving stability on non-³ÉÈËÂÛ̳ pages
Glow has been (so far) developed with the ³ÉÈËÂÛ̳'s page templates in mind, and some modules may have issues outside of them.
For instance, the Sortable widget was developed for the ³ÉÈËÂÛ̳ homepage and hasn't been thoroughly tested outside of that.
Comprehensive accessibility testing
Accessibility testing is difficult as assistive technology usage stats are unreliable, usually being based on sales figures rather than actual use. However, we intend to create an accessibility support list similar to our browser support list and improve testing strategies.
Want to get involved?
Download Glow, try it, and let us know what you think:
Once Glow 2.0 is released we'll be looking to introduce new features and widgets, so we're eager to hear what you'd like those to be!
Jake Archibald is Senior Client Side Developer, Apps Team, Vision, ³ÉÈËÂÛ̳ FM&T.
Comment number 1.
At 9th Jul 2009, mbrodbin wrote:Nice post - thanks for sharing the history & thinking behind Glow. Look forward to v2.0!
Complain about this comment (Comment number 1)
Comment number 2.
At 10th Jul 2009, sachinkhosla wrote:Great post, this will help me to continue writing more about Glow on my blog
Complain about this comment (Comment number 2)
Comment number 3.
At 11th Jul 2009, richardwhiuk wrote:I'm not sure how it can be seen as biased to ask a user to upgrade to a better browser, when their current one fails to support modern standards? That's like the government not asking people to change their driving style to a more acceptable one, because their current one is causing accidents, because they don't want to be seen as biased towards a specific style of driving.
Ludicrous.
Also, I'm disappointed that the internet can not revolve around a javascript library. It seems to me that lots of different libraries, all supporting different features and platforms help nobody.
Complain about this comment (Comment number 3)
Comment number 4.
At 12th Jul 2009, amarjitsinghkullar wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 4)
Comment number 5.
At 13th Jul 2009, davidramsay wrote:Perhaps you would like to comment on the following -
It seems strange that the ³ÉÈËÂÛ̳ would not know about Glow the first National Internet for Education in the World!
Complain about this comment (Comment number 5)
Comment number 6.
At 30th Mar 2010, U14402580 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 6)
Comment number 7.
At 12th May 2010, U14460911 wrote:All this user's posts have been removed.Why?
Complain about this comment (Comment number 7)
Comment number 8.
At 20th May 2010, magic1001981 wrote:I'm not sure how it can be seen as biased to ask a user to upgrade to a better browser, when their current one fails to support modern standards? That's like the government not asking people to change their driving style to a more acceptable one, because their current one is causing accidents, because they don't want to be seen as biased towards a specific style of driving
Complain about this comment (Comment number 8)