Understanding dojo.require

Dojo provides a feature-rich system for including JavaScript modules. Before we begin this journey to explore this concept in depth, you should know that absolutely no knowledge of the Dojo module, packaging, and build system are required to use Dojo.

You can easily get started using Dojo by using a script element referring to a copy of Dojo on the AOL or Google CDNs. If you want to host your own version of Dojo, you can easily download dojo.js, include it in a web page using a script element, and be off and running with Dojo Base.

For those new to Dojo, the following resources give a quick overview of Dojo Base:

In general, dojo.js is a lot like jquery.js or prototype js: you get a competitive set of features founds in most JavaScript libraries that are essential for building great web applications. Those features include:

  • JavaScript Language Helpers
  • Object utilities
  • Array utilities
  • DOM Manipulation
  • A normalized event system
  • Ajax & Cross domain requests
  • JSON utilities
  • Simple effects
  • Browser sniffing

Continue reading

Efficient Lazy Loading of a Tree

Dojo 1.4 sports a fantastic tree widget, complete with ARIA compliance, keyboard accessibility, and internationalization (including right-to-left layout for appropriate countries and languages). For large tree data sets, we want to be able to only load the necessary data for the visible nodes of the tree. As a user expands a node, we then want to load the children of that node. Ideally, we only want to make one HTTP request per expansion for optimal performance. Historically, effective lazy loading has been a challenge, but some recent additions will make it much easier to utilize efficient lazy loading mechanisms in the tree.

Continue reading

Managing Widget Templates in Dojo 1.4

This article introduces dojo.cache and presents a technique for externalizing your widget templates in swappable configuration files, where they can be referenced by a custom templateKey widget property.

Introducing dojo.cache

Dojo 1.4 adds a new core utility called dojo.cache. To appreciate it we first have to review how Dijit’s templatePath works. When you define a _Templated widget with a templatePath property, the content from that URL is fetched the first time you instantiate the widget, and made available as a string. All subsequent instances get the cached string. Furthermore, when you run a build, your templatePaths get replaced with templateStrings and their content is inlined into the output from the build. This improves performance considerably by removing those synchronous XHR requests, while remaining transparent to the developer.

dojo.cache generalizes this pattern, making the same functionality available from Dojo Core—synchronous, cached content retrieval that gets inlined during the build. dojo.cache usage is much like dojo.moduleUrl:

dojo.require("dojo.cache");
my.stringResource = dojo.cache("module.path", "relative.path.html" );

Continue reading

Performance Testing of the Top 100 Sites is Misleading at Best

Recently, a number of performance tests have been released that are based on the performance of the top 100 web sites such as SpriteMe savings, the IE8 100 top sites test results, or the JSMeter research. These are in direct contrast with tests such as ACID3 which attempt to test the future of the web rather than just what’s possible today.

These efforts are outstanding and highly useful, especially the JSMeter work and their valiant effort to redefine performance tests that are indicative of today’s web apps.

I completely agree with one of their stated goals:

We hope our results will convince the JavaScript community to develop and adopt benchmarks that are more representative of real web applications.

However, I disagree with their approach: they are testing the performance of today’s already optimized sites! There’s nothing in the middle of testing today’s sites and the more unrealistic “test every feature” ACID tests.

I believe more accurate tests for tomorrow would be useful, testing what’s pushing the limits of the web today, but are not currently top 100 sites. My main objection with comparing performance across the top 100 web sites is this: The top 100 web sites are already relatively highly performant, because they are optimized for what’s possible today. They have and continue to improve thanks in large part to the work of Steve Souders and others in the performance optimization community. Because it costs significant amounts of money in server operations fees and bandwidth, high traffic web sites generally dedicate considerable resources to highly optimizing their sites. High traffic web sites also face significant competition and are highly scrutinized for acceptable page load time. Budget and competition result in popular sites not deploying code that makes pages load slower than their desired performance threshold. Even more importantly, top 100 sites have the budget to make their app work in the future when things change. You can dedicate people on your team to squeezing out performance improvements in all aspects if you have the budget for it. Most web apps cannot afford to do this.

When we’re testing the performance of new browsers or analyzing page load performance, we should also really be looking at what the top 100 sites will look like in terms of features and expectations in five years! So how do we do that today? There’s no simple answer, but here are some ideas:

  • Test popular web apps, e.g. mint.com populated with large amounts of data
  • Test apps that don’t support IE6, e.g. Google Wave
  • Test all sections of popular sites, not just the home page, through an automated performance test harness
  • Test ridiculous configurations of popular applications, e.g. enable every feature in modular applications until they slow down
  • Test apps over long amounts of time in the browser, not just initial page load time
  • Test 50 apps, each in a different tab, all at once, and see how fast you can make a browser like Firefox or IE crash!
  • Test throttled networks that emulate the profile of mobile and satellite networks, slow hotel wi-fi networks that often limit the length and duration of connections, corporate proxies, tech conferences, and countries with overloaded pipes (e.g. YouTube in New Zealand)

Only when browsers are pushed to their limits do we see where they break down, and how sites break them. We also need tests and tools (such as instrumented usage of YSlow, PageSpeed, SpeedTracer, etc.) comparing the most complex apps and how they perform across the various browsers, as today’s complex app is potentially tomorrow’s median site.

To be clear, I’m not saying “don’t optimize for today”. I’m saying, stop comparing cutting edge sites to Google search results. Lumping these two together in a common test is like putting apples against oranges because they are both round fruit.

Why We Love Chrome Frame

Google today announced Chrome Frame, a plug-in that selectively upgrades Internet Explorer without breaking existing sites. Think of it as working like Flash, but for open web technologies, replacing Internet Explorer’s entire rendering engine for sites that include a single meta tag indicating that they would prefer to use Chrome Frame rather than IE.

So why is this a good thing?

Continue reading

Your business is important to us. Please wait

Interacting with a web application is a conversation. The user interface is your company’s proxy, it communicates on your behalf and just like a real conversation, you communicate as much with your body language as with the words you exchange. Good visual design can provide the right setting for this conversation, but interaction is the body language in this analogy. And one of the defining characteristics of good interaction is responsiveness.

Continue reading

Web Page Global Variable Performance

Google recently released a new feature for their Google Docs writing application; the ability to draw a vector graphic and insert it in your document. This drawing module uses SVG and VML, much like DojoX GFX. I was curious about their code and explored with Firebug. To my surprise, I found that most of their code uses variables in the global scope. The code is compressed, but when observing with Firebug’s DOM tab, there are several pages and a few hundred lines of global variables.

Continue reading

Dynamic Stylesheets, Part 1

New to Dojo 1.2+ is dojox.html.style. This is a collection of methods which give you the ability to query the stylesheets collection in a document, add and remove rules, and dynamically create new sheets. In this article I’ll explain why and where this is of use, and walk through a split-panel demo that uses dynamic stylesheets to size a 2 column layout.

Continue reading

Patching Dojo

There are many reasons you might end up needing to patch your Dojo source tree. Maintaining patches can be a pain, and sometimes outside of your control entirely. It could be a bug you’ve found, or something you really wish a Dojo component did/didn’t do, or you are having to work against an older release of Dojo, or there’s a patch in trac that fixes an issue you have, but it has not yet been committed. In this post, we’ll present a neat way to make the change, keep what you did explicit so other developers aren’t confused, and maintain it outside the Dojo source.

Continue reading

More Query and Caching Power for Data Stores: ClientFilter, JsonQuery, and JsonQueryRestStore

Dojo includes several new modules which open up new querying and caching capabilities for Dojo data stores. dojox.data.ClientFilter is available in Dojo 1.2, and provides the ability to cache queries, update the query results and cached queries based on local modifications, and performs sub-queries and sorting on the client-side. The JsonQuery is a new mixin class for Dojo 1.3 that converts Dojo query objects and sort objects to JSONQuery expressions; JSONQuery can be used for delivering complex queries to the server. JsonQueryRestStore is a new module (for Dojo 1.3) that extends the JsonRestStore and combines the ClientFilter and JSONQuery such that any query can be executed on the client or the server automatically based on what data has been locally cached on the client-side, utilizing dojox.json.query to execute queries on the client-side when appropriate.

Continue reading