SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘Dojo’ Category

Dojo gets a speed boost on IE6 and IE7

Posted by Shane O'Sullivan on August 28, 2010

My former employer, Cúram Software, was good enough to give me a couple of months to work on the performance issues that Dojo and it’s widget project Dijit have in horrible legacy browsers IE6 and IE7.  Some of the fruits of that labour have now been checked into the code base and will be included in Dojo 1.6, out in Q4 2010.

So what I/we learned from the exercise?

DynaTrace rocks!

To begin with, I can’t praise DynaTrace enough.  It’s a fantastic piece of profiling software that delves deep into Internet Explorer’s innards to find every little horrible Microsoft bug.  It can take a while to get used to, but that is just because it presents you with so much data, all of it useful, and anyone would have trouble finding a way to make it easily consumable.  Long story short, if you’re having performance issues with your site in IE, download DynaTrace.

Touching className makes IE cry

Pretty much every time you change the className property of a node, IE6 and IE7 reflow the page.  It doesn’t matter if the new value is the same as the old one, or whether or not the changed CSS class has any visual effect, IE will redraw the page, resulting in a lot of time being lost.

Dojo was changing className too often, for example in dojo.addClass, if the class being added was already present, it would still assign the changed value to className.  I put a fix for this into v1.5.  There were also many cases where Dojo would use a combination of dojo.removeClass and dojo.addClass to replace a class, which changed className twice instead of just once.  To fix this, I’ve added a new public api dojo.replaceClass, which only changes className once.

Dijit widgets often add CSS classes to the DOM nodes which they are creating after the nodes have been inserted into the document.  This is costly, and a large performance improvement can be gained by applying these classes earlier in the lifecycle, before inserting into the document.  Bill Keese (Dijit master) checked in the first of the fixes for this for the BorderContainer recently, and a strategy is being formulated for the many other widgets that can benefit from this.  This work should be completed for v1.6.

Risky but…..

A solution that we cannot use for Dojo, but which we found gave huge performance gains for my company’s application, was to figure out what CSS classes Dojo would apply to a node and write those classes out when generating the HTML.  For example, when creating a dijit.layout.BorderContainer, our HTML contains the CSS class dijitBorderContainer.  There is an inherent risk with this approach, as Dojo may change the CSS classes in a later release, but if you’re willing to accept the risk and the upgrade pain, you can get a nice performance boost this way.

Reading offsetLeft and offsetTop is costly

When your code reads the offsetLeft or offsetTop of a node, all pending changes to the DOM have to be performed first.  This can be very expensive – we saw a number of single operations taking over 500ms each!  Many Dijits were using the dojo.marginBox method to get the left, top, width and height properties of a node, when all they needed was the width and height.

To solve this, I introduced a new method, dojo._getMarginSize, a private method that just returns the width and height of a node.  This has resulted in huge gains in performance on IE6 & 7, especially when used with layout widgets like the BorderContainer.

Unexplained gaps in DynaTrace profiles

We hit a bit of a wall at one point when analysing the performance profiles, where there was a 1.5 second gap in the profile where it seemed like nothing was happening, but everything was paused with the CPU at 100%.

We eventually discovered that there is a horrible bug in IE7 where if you have a :hover style on something that is not an anchor tag, it causes the rendering engine to go crazy, get all confused, and push the CPU up to 100% for no reason at all.

The solution: don’t user :hover styles on anything other than <a> tags.  Ridiculous I know, but so is the IE7 rendering engine.

Give it a go!

So, the long and short of it is that Dojo/Dijit should now be a good bit snappier on IE6 and 7.  With our application we got the load time for a huge application down from 20 seconds to 5 seconds using these techniques, making IE7 far, far more usable.  Of course it just flies on any other browser, even IE8 which, all credit to MS for once, is far less buggy than the earlier incarnations.

So feel free to try out the Dojo nightlies, you should find them to be a good bit more responsive in IE6 and 7 than just a few days ago, and now that we have learned some important lessons, Dojo will be even faster for v1.6.

Posted in Ajax, dijit, Dojo, Javascript, open source, performance, Technical | 8 Comments »

Dojo’s mobile widgets coming along nicely

Posted by Shane O'Sullivan on June 22, 2010

I’ve been working a lot on Dojo’s new mobile framework (see HERE for my intro post on dojox.mobile.app) and the Image widgets are coming along very nicely.  I just checked in a new Thumbnail viewer, and enhanced the ImageView widget.  Check them both out at http://bit.ly/cU3akI.

Click the “Browse Flickr” selection to see both images integrated with Flickr, as well as a dynamic group search view using the TextInput and List widgets.  Given that these widgets use cool fancy HTML5 effects, you’re best off viewing them in a WebKit browser, so Safari, Chrome, webOS, iPhoneOS (iOS now I guess) will give you the best experience.

The ImageThumbView uses CSS3 transforms to position the thumbnail images, and animates the opacity with CSS3 to fade in/out images. 

Posted in Ajax, Dojo, dojox, Javascript, mobile, open source, Palm, Technical, WebOS | 4 Comments »

My webOS Apps goes live, gets a big update

Posted by Shane O'Sullivan on March 14, 2010

My webOS Apps, the great tool I’ve written for webOS developers, is now available in the Palm App Catalog.  See my previous post about it here.

Using My webOS Apps a developer for webOS can

  • Keep track of their app download count.  That’s the real download count, not the inaccurate number shown in the Palm feeds which include updates.  You can also see how many apps were downloaded both today and this month, as well as your average download count and your best days download count for each app.
  • See each apps user ratings
  • Read the comments on each app
  • See your downloads for each app in graph form.  Three chart types are supported, line, column and area.  You can graph the downloads per day, by week or month.
  • View a timeline of events for one app or all apps.  This shows what happened to an app by date, from submission through to being accepted and published.
  • Tweet about your apps directly from the app.
  • Auto-Tweet when an app is published.  Set up a custom message to be tweeted automatically when an app is published.
  • Read your forum posts on developer.palm.com.
  • Read the latest forum posts on developer.palm.com.
  • See your financial reports per month, showing how much you’ve earned per month.
  • Backup and restore your data.  As many webOS developers wipe their phone on a regular basis to test different webOS releases, this makes sure you never lose any data.

See the video below for a run through of the app.  For a webOS developer, this is an invaluable tool.  Once you start using it, you’ll wonder how you ever did without it!

Posted in Ajax, chart, Dojo, dojo.charting, dojox.gfx, Javascript, json, Palm, WebOS | Leave a Comment »

Mazer – A Great free app for the Palm Pre & Pixi

Posted by Shane O'Sullivan on February 8, 2010

On Feb 1st I released a really fun free app for the Palm Pre & Pixi smartphones called Mazer. Mazer is a puzzle game that gives you an unlimited number of mazes to complete, both alone and racing against an automated opponent.

You control a ball by tilting the phone, rolling it around the game using a highly accurate physics engine.

Mazer also gives you Cannonball, a game where you navigate a ball around a board containing many different types of obstacles, such as holes to fall down, worm holes that transport you to other parts of the maze, and much more. There are over 50 levels already, and more on the way.

Some screenshots are shown below.  Mazer is available now from the Palm App Catalog, for the wonderful price of $FREE.  Enjoy!

Posted in Dojo, Javascript, mobile, Palm, Technical, WebOS | 7 Comments »

Flickr Addict for Palm Pre adds Groups & Blocking

Posted by Shane O'Sullivan on January 26, 2010

Flickr Addict and Flickr Addict Lite v0.2.1 have just been released on the Palm App Catalog.  This release adds two features that many users have asked for:

  • Group selection.  Previous versions of Flickr Addict allowed you to download photos from two Flickr groups, iPhoneWallpapers and PalmPreWallpapers.  This version allows you to add any group you like.
  • Photo and user blocking.  Sometimes images are downloaded which you might not like, and you can now block both individual images, and all images from a particular user.  You can also manage your blocked list to unblock images and users later.

The video below is of the previous version, v0.2.0.  Try it out for free with Flickr Addict Lite.

Posted in Ajax, Dojo, Flickr, Flickr Addict, Palm, Technical, WebOS | 11 Comments »

New version of ‘Irish Rain’ app released on Palm App Catalog

Posted by Shane O'Sullivan on January 14, 2010

I’ve just released a small update to my Dojo powered Irish Rain app for the Palm Pre and Pixi which I blogged about before.  The new version, v0.1.5, changes temperatures to celcius, and adds a progress bar to show when the data will be loaded.

The app is completely free, all the better to keep you (Irish People) from getting drenched!

Posted in Ajax, Dojo, Irish Rain, Palm, WebOS | 7 Comments »

Flickr Addict gets a huge upgrade

Posted by Shane O'Sullivan on December 22, 2009

Flickr Addict, my very cool (if I do say so myself) Dojo powered application for the Palm Pre & Pixi smartphones, has just been given a massive upgrade. Flickr Addict automatically downloads photos from Flickr and sets them as your wallpaper at set intervals.  It is completely configurable, and very easy to use.

Following some very helpful user feedback, I have added the following features:

  1. New image gallery, very similar to the Palm Photos app, which makes it very quick and simple to view all your downloaded photos.
  2. Full screen preview of all wallpapers.
  3. The ability to randomize the selection of photos from a user.
  4. The Palm Pre Wallpapers group on Flickr is now selectable, in addition to the iPhone Wallpapers group.

See the video below for a demo.  This version of Flickr Addict and Flickr Addict Lite is currently in review for the App Catalog, and will hopefully make it in soon.  However the previous version is in there now and available for download, and will be updated automatically when the new version is out.

Posted in Ajax, Dojo, Flickr, Flickr Addict, Palm, Technical, WebOS | Tagged: , , , | 15 Comments »

Huge performance increase on IE for Dojo 1.4

Posted by Shane O'Sullivan on December 15, 2009

Performance charts have just been published for the newly released Dojo v1.4, and the focus that the team put on improving Internet Explorer performance has really paid off.

On IE6, IE7 and IE8 there are speed improvements across the board of between 25% and 40%.  That’s huge.

See the charts (courtesy of Pete Higgins) here – http://dante.dojotoolkit.org/taskspeed/report/charts.html?exclude=puredom+jquery126+prototype1603+firefox35+safari40+opera100+chrome30+chrome40+opera96+firefox36+firefox30+firefox20+mozilla19+safari32+defaultbrowser0

Run the tests yourself here – http://dante.dojotoolkit.org/taskspeed

Posted in Ajax, Dojo, Javascript, open source, performance, Technical | Leave a Comment »

Flickr Addict – New Dojo powered app for the Palm Pre

Posted by Shane O'Sullivan on December 1, 2009

Flickr Addict, my second Dojo powered mobile application for the Palm Pre and Pixi has just been released in the Palm App Catalog.  Flickr Addict automatically downloads and displays a rotating set of great wallpapers for your Palm phone.

For users who just want very high quality wallpapers on their phone, auto-downloaded and changed on a regular basis, Flickr Addict gives you all you need.

For Flickr members who want to show their own photos, or the latest images from contacts, Flickr Addict gives you the control to select users and photo sets to download.

There are also a number of other options such as searching for photos that match a particular tag, or photos from the iPhone Wallpapers group.

For those interested in technical matters, Flickr Addict was written using Palm’s SDK and the Dojo Ajax Toolkit.

 

Posted in Ajax, Dojo, Flickr, Palm, Technical, WebOS | Tagged: | 22 Comments »

First Palm Pre Dojo-powered app, Irish Rain

Posted by Shane O'Sullivan on November 26, 2009

My first Palm Pre application, Irish Rain, has been published to the Palm App Catalog. See my first blog posting on it here.  Irish Rain is written using Mojo, Palm’s JavaScript framework, and the Dojo Ajax Toolkit, a project on which I’m a committer.

Irish Rain is completely free, and should help make sure that us poor Irish don’t get caught in the rain again.  However, I make no guarantees that your house won’t be washed away in a biblical flood!

Posted in Dojo, Flickr Addict, Irish Rain, Javascript, open source, Palm, WebOS | Tagged: | 5 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: