SOS

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

Archive for the ‘dijit’ 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 | 9 Comments »

Dijit Tree now ultra-stylable

Posted by Shane O'Sullivan on October 1, 2009

The Dojo Tree has always been easy to make look just like you want, from changing the icons to changing the labels.

However there was always a limitation in that an entire row could not be styled.  Well, today I put through a fix for that, and you can now specify a CSS class and style for each row using the getRowClass and getRowStyle functions.

You can see a simple test of this at http://archive.dojotoolkit.org/dojo-2010-06-01/dojotoolkit/dijit/tests/tree/test_Tree_Styling.html , available from Oct 2nd 2009, and it’ll be included in version 1.4, which goes into beta any day now.  It shows how you can easily make the tree appear like an expandable, nestable list widget, with just a tiny bit of CSS.

I also plan on writing up a number of dojo.cookie articles over at dojocampus.org in the coming weeks on all the cool things you can do with the tree.

treeStyle

Posted in dijit, Dojo, Javascript, open source | Tagged: | 7 Comments »

Massive TabContainer upgrade added to Dojo

Posted by Shane O'Sullivan on August 11, 2009

I previously wrote about work I was doing on the Dojo Ajax Toolkit‘s TabContainer widget.  This work prevents the tab buttons from wrapping around when they are wider than the available space, and instead allows you to use either a drop down menu to select the tab (like Firefox/IE7), or to use left and right slider buttons to “slide” the buttons.

Well, thanks to some great collaboration with Dijit master Bill and a Dojo contributer called alle, the work has now been committed to the code base.  It should be available to view HERE from Aug 12th 2009 onwards, and will be in v1.4 when it is released.

If you can’t wait for it, you can either download a copy of the nightly code base from http://archive.dojotoolkit.org/nightly after Aug 12th, or checkout the code yourself from Subversion right now.  Note that code in between releases is not guaranteed to be stable, as many features may be in the middle of upgrades.

There are a couple of issues remaining to be worked on, such as improved right-to-left support, but for people who have been clamouring for this to make it into the code base, you can grab this now, and get the upgraded, more stable widget in v1.4

Posted in Ajax, dijit, Dojo, Javascript, open source, tab, widget | 11 Comments »

Dojo TabContainer: beating the wrap

Posted by Shane O'Sullivan on April 4, 2009

One of the features of the Dojo Ajax Toolkit‘s TabContainer that always bugged me was that, once there were too many tabs to fit horizontally in the widget, they’d wrap around, like you can see in the picture below.

Wrapping Tabs

Wrapping Tabs

It would have been far nicer for them to not wrap, and instead smoothly scroll, using either a menu to select them (like Firefox), or providing buttons to make the list of tabs slide right and left.

So, after much work, I’m just about finished upgrading the TabContainer with two new TabControllers:

  • dijit.layout.TabController – the default widget, which places a single button to the right of the tabs, and shows a menu when you click it.  This is very similar to how many browsers deal with tabs.
  • dijit.layout.SlidingTabController – an optional widget, which places a button to left and right of the tabs, and slides the list left and right.

The video below shows the two widgets in action.

The upgrade is almost complete, and should hopefully make it into the upcoming 1.3.1 release of Dojo.

Update: the changes could not be put into 1.3.1, as that was only for bug fixes. It will be in 1.4 instead</b

Posted in Ajax, dijit, Dojo, tab, Technical | 46 Comments »

Cool Portlets in Dojo

Posted by Shane O'Sullivan on March 11, 2009

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible.  However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area.  A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

  • dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button.  All of these are optional.
  • dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list.  Hovering over an item shows a dijit.Tooltip with a summary of the news story.
  • dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
  • dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
  • dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
  • dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs.  However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

Posted in Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget | 72 Comments »

Context Menus And Korean Added To Chofter, 한국어판 출시

Posted by Shane O'Sullivan on October 17, 2008

Today two features I’m very happy with were added to Chofter, the next-generation search engine.

오늘 두가지의 새로운 기능이 Chofter, 차세대 검색 엔진,에 업데이트 되었습니다.

The first feature is the Context Menu. A new orange icon is placed next to search results which, when clicked, gives you list of actions you can take on the link in the search result. For example, you can create a bookmark, send it to Digg, add it to your online bookmarks at del.icio.us, share it on Facebook, and more. The image below shows it in action.

첫번째 기능은 팝업 메뉴창입니다. 검색 결과 페이지에 오렌지색의 아이콘들이 새롭게 만들어 졌는데, 이 아이콘을 클릭시 검색 결과에 관련된 링크 리스트가 보여집니다. 예를 들면 특정한 결과 페이지를 북마크에 더한다거나, del.icio.us로부터의 개별적인 온라인 북마크, Digg 사이트에 더할수도 있으며, 또는 페이스북에 원하는 검색 결과를 공유하는 등의 여러가지 기능이 더욱 손쉬어 졌습니다. 아래 사진에서 확인할수 있구요:-)

The second feature is Chofter’s first Asian language, Korean (which is why this post is in both languages). The translation was done by the lovely Francesca Kim, otherwise known as my main distraction.

두번째 새로운 기능은 Chofter의 첫번째 아시안 언어, 한국어 사용이 가능해졌습니다. 번역은 Francesca Kim님이 도와주셨습니다.

Chofter Context Menu

Chofter Context Menu

Posted in Ajax, chofter, dijit, Dojo, dojo.data, dojox.data, Javascript, open source, Technical | 1 Comment »

Chofter.com – A Next-Gen Search Portal is launched

Posted by Shane O'Sullivan on August 4, 2008

For quite a while, I had been working with various REST services, e.g. Flickr, the Google search services and more, as part of my contributions to the Dojo Ajax Toolkit, when it occurred to me that no one had done a good job of bringing all these various sources of information together in a usable way.

Cut to four months later, and I have launched my new search portal, Chofter.com.

To add it to the search bar in your browser, click here.

Immodest as it may sound, Chofter.com provides a better search experience than Google, Yahoo or Microsoft Live, because it incorporates search results from all of them, and much more.

The entire application is written using the Dojo toolkit, utilising

  • Layouts, Dialogs, Menus and ContentPanes for the user interface.
  • dojo.data and dojo.rpc for data transfer.
  • dojox.dtl (Django Templating Library) for transforming search data into visuals.
  • dojo.fx and FisheyeLite for eye candy
  • …. and a chunk of custom code.

As of writing, the following search sources are available, arranged into a number of categories:

  • Google – web, news, image, blog, video and book search.
  • Yahoo – web, news and image search.
  • Microsoft Live – web and news search.
  • YouTube – video search.
  • Flickr – image search.
  • BBC News – news and sports search.
  • Digg – web, news and video search.
  • Amazon.com – book search.
  • Wikipedia – web search.
  • IMDB – video search.
  • Technorati – blog search.
  • DZone – technical search.

I will be adding more as time goes on.  A forum is being set up, and I welcome all feedback on the site.  I’ve also set up a blog for the site at http://www.chofter.com/blog.

Posted in chofter, dijit, Dojo, dojo.data, dojox, dojox.data, Javascript, json, search, Technical | 4 Comments »

New Demos for Dojo & Google search engine online

Posted by Shane O'Sullivan on May 13, 2008

I’ve previously written about the data stores I committed to the Dojo Ajax Toolkit that enable you to search Google’s services for all sorts of things – books, news, blogs, images and everything else.

Now I’ve put some demos up on DojoCampus that show off a few of the stores.  Check them out at http://dojocampus.org/explorer/#Dojo_Data_GoogleSearchStore , especially the Google Images one – it’s shiny :-)

Posted in Ajax, demo, Demo Engine, dijit, Dojo, dojo.data, dojox, open source, Technical | 2 Comments »

Great Dojo Widget tutorial

Posted by Shane O'Sullivan on April 22, 2008

Pete Higgins has posted a great tutorial on how to write a Dojo widget, taking as an example his recent addition, FisheyeLite.  Check it out at http://dojocampus.org/content/?p=100

Posted in Ajax, dijit, Dojo, dojox, Javascript, open source, widget | 2 Comments »

Dojo Ajax Demo Engine released

Posted by Shane O'Sullivan on April 3, 2008

A great new demo engine has just been released for the Dojo Toolkit. Check it out at http://dojocampus.org/explorer/. It is based on the initial attempt at a demo engine I wrote a few months ago, but has since been updated with new demos, and made infinitely more sexy by css/theme master Nikolai Onken.

Dojo Demo Engine

The features include:

  • Demos for all three Dojo projects – Dojo (the base toolkit), Dijit (widgets) and DojoX (all that is newest and coolest) .
  • Source views for all demos. Not only do we show what Dojo can do, we show you how to do it! The source views also benefit from the very cool dojox.highlight project, which provides client side syntax highlighting.
  • Addressability - you can link directly to a demo, as I did with the dojox.highlight link above.
  • Search feature – a combo box that you can use to quickly find a demo on any subject. For example, type “image” into the box, and you’ll be shown a list of all demos to do with displaying images, such as dojox.image.Gallery, dojox.image.SlideShow etc.
  • Cool animated menus – totally aesthetic I know, but a very pretty addition by Peter Higgins. The menus separate the three projects, providing easier, clearer navigation.
  • Link hierarchies – each set of demos can have links attached to it, for example to extra tutorials or documentation. If you click a parent of that demo, you are shown all links of all children of that section. For example, click on the DojoX link on the top of the page, and you’ll be presented with a list of all links to all DojoX projects.
  • Browser Back Button management. Using the dojo.back package, you can navigate back and forward through the application using the browser’s back and forward buttons.

The demo engine is hosted on the extremely cool Dojo Campus website, which is a new learning resource for all things Dojo. It contains videos, tutorials and much more.

This version of the demo engine has many many examples in it. However, it is only the beginning, and there is a lot of room to add more content. The next step is to open the development process for community submissions of all the cool things people have done with Dojo. We will be making available the demo engine on Subversion, and writing development and submission processes to make it as easy as possible for people to contribute.

This is gonna be big!

Update: see http://ajaxian.com/archives/dojo-mini-and-the-feature-explorer for the Ajaxian post.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Posted in Ajax, demo, Demo Engine, dijit, django, Dojo, dojo.charting, dojo.data, dojo.event, dojo.image, dojo.query, dojox, dojox.data, dojox.image, Image Gallery, Javascript, json, open source, Technical | 16 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers