The JavaScript blog.


browser ie chrome dojo

Dropping Legacy IE Is No Panacea

Posted on .

The presiding sentiment of client-side developers seems to be that dropping legacy IE support fixes cross-browser issues. While it does reduce a lot of rendering quirks, it doesn't mean you can stop browser testing altogether.

The reality is that there are four popular browsers with a wide range of versions. Using DailyJS's readership during August as an example, Chrome's versions break down like this: Chrome 28 has 53%, and Chrome 29 is at 13%. Firefox has 43% on version 22 and 41% on version 23. That means we see very few Firefox and Chrome readers on older versions, so they're doing an excellent job of keeping users up to date. Digging into the IE stats, I can see 50% using IE 10, and 0.33% on IE 6!

Why am I bothering you with browser stats? It was because I saw this bug in Dojo earlier today: #17400: Chrome 29 breaks dojo.query in Dojo 1.4.4 through Dojo 1.6. The Dojo developers quickly fixed the bug. It seems someone had used array-style accessors on a DOM node instead of the children and childNodes properties.

Even though IE 10 is far better than its predecessors, and Chrome and Firefox see fast upgrade rates due to their update mechanisms, you can't leave out proper cross-browser testing. It's hard work and dull, but unfortunately still important. I have a feeling the disparity in mobile browser technology will be the new IE 6, but that's another story...


libraries mvc backbone.js dojo

Ditto, sudo.js, dry-observer

Posted on .


Ditto (GitHub: bitpshr / ditto, License: WTFPL) by Paul Bouchon is a tool for resolving a project's Dojo dependencies. A project's zip file can be dropped onto the site, and it will analyse it and extract all of the required AMD modules. There's an options tab that has an option for the legacy dojo.require syntax, and paths can be ignored as well.


sudo.js (License: MIT, npm: sudoclass) by Rob Robbins (sent in by Yee Lee) is a library that features inheritance helpers, view and view controllers, and data binding support. The API is documented in the sudo.js wiki.

The author has included a test suite, compatibility polyfills for things like the console object and String.prototype.trim, and an optional build with a small templating library.


dry-observer (License: MIT) by Austin Bales is a small library for working with centralising binding and unbinding to events, while encouraging consistent handler naming. It requires a Backbone.js or at least a Backbone.Events-compatible object.

Here's a quick example by the author:

# Observe a Model by passing a hash…
@observe model,
  'song:change'   : @onSongChange
  'volume:change' : @onVolumeChange
  'focus'         : @onFocus

# …or a String or Array.
# Observation will camelCase and prefix your events.
@observe model, 'song:change volume:change focus'

# Stop observing and dereference your model…
@stopObserving model

# …or stop observing /everything/


libraries apps editors mvc ES6 dojo

More ES6 Modules Reactions, Dojo 1.8 Calendar, Maria, Brackets

Posted on .

More ES6 Modules Reactions

Yesterday I mentioned Isaac Schlueter's post about ES6 modules, and now James Burke has responded with Comments on Isaac's ES modules post. James' comments are interesting given his background with RequireJS, and it's easy to see how much his thoughts are influenced by AMD.

James has also written ES Modules: suggestions for improvement, in which he states "I want AMD and RequireJS to go away":

They solve a real problem, but ideally the language and runtime should have similar capabilities built in.

New Dojo Components

Dojo calendar

The new Dojo calendar and gauges are explored in Introducing new visualization components in Dojo 1.8. A lot of client-side developers have asked me about full-blown calendar libraries over the years, and this one looks extremely elaborate.

The calendar documentation shows off how simple the API is:

require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],  
  function(parser, ready, Calendar){
      calendar = new Calendar({
                   dateInterval: "day",
                   style: 'position:relative;width:500px;height:500px'
                }, 'someId');

There's also a stunning amount of documentation, with examples, diagrams, and CSS styling details.


I really love the TodoMVC project by Addy Osmani. It showcases lots of client-side MVC frameworks. However, seeing as most people seem to misinterpret what MVC means, Peter Michaux has created Maria to set the record straight:

An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC.

In Maria, models are event targets that can be observed by any other objects (including views, controllers, and other models). Views observe models and represent their current state. Controllers determine what happens when users interact with views.

There's a TodoMVC example for Maria that breaks down like this:

The view files change elements based on models, but you won't see a fragment of HTML in them. In Maria, the concept of a view is distinct from a template. For example, TodoTemplate.js contains the list element HTML fragment.

This stricter interpretation of MVC may be beneficial because views become easier to reuse, and the event-based design seems natural in JavaScript.

Now, you're probably not going to replace your Backbone.js projects with Maria anytime soon, but it's definitely worth trying out Peter's project to see how it can better inform development with your MVC-style library of choice.



Brackets (GitHub: adobe / brackets, License: MIT) from Adobe is an open source editor aimed at web developers. There's detailed blog post all about it here: Building a Desktop-Quality App on Web Technologies.

Although it's built with web technology, it includes a native desktop application to make working with local files easier. It seems like they'll be working to remove this dependency in the future, and there's always the possibility of using something like Filepicker.io for accessing files from services like Dropbox.

Coincidentally, Cloud9 IDE has been updated with new collaboration features, compilation (gcc) and interpreter support (Ruby, Python) support, and offline editing.