Web Info & Tutorials

Cyra Richardson, Senior Program Manager Lead on the IE team, gave a presentation at MIX 2007 on Making Ajax Applications Scream on the Client.

The scope of the presentation is to show how to speed things up right now, not in the future.

Optimizing Symbol Resolution

How to speed up in a late binding world. Discusses the scope chain from vars to the DOM itself, and how to make sure that you don’t keep running around the chain.

JavaScript Code Inefficiencies

To make string manipulation more effience in IE:

• Use local vars
• Cache strings from IE objects
• Use Array.join for concatenation

(I prefict that array.join will stick around even when it isn’t faster, just like the equivilent in Java land).

Some other thoughts:

• Don’t use eval unless you really have too. Instead of parameterized code
• SWITCH is costly for large sets, consider a hash table wrapped in a try/catch
• WITH is costly due to symbol lookups everywhere, use manual iterators
• Don’t use your own get/set accessors

IE Performance Considerations

DOM is expensive in IE, especially due to the generic nature of the platform. Also watch out for layout improvements such as hover CSS style.

HTTP Performance

Simplify and reduce:

• Script in on JS file
• Styles in one CSS file
• Fewer, smaller, unscaled images
• Simplify layout
• Use HTTP compression (lots of detail on cache control)

Tools and Techniques

• Developer Toolbar
• Fiddler: HTTP traffic watching
• Ajax View: New from MS Research. On the fly rewrite the JavaScript and add instrumentation code.

Over in Gears land I met with Chandra Patni, the creator of happyhour:

Open Social Happy Hour is a port of Open Social Container Sample that employs Google Gears for persistence. It allows data coherency of open social widgets across browser windows.

As I said on the Gears blog:

The motivation for the project was speeding up the development cycle of OpenSocial components by allowing developers to bypass talking to a production server, or even a local one. Load up an HTML file and you are good to go. This also helped when getting designers into the mix as they could just style the HTML and they were done.

The container supports Caja, and adds useful minor features such as munging between a JavaScript date, and an ISO 8601 date that SQLite uses:

PLAIN TEXT

JAVASCRIPT:

1.  
2. opensocial.HappyHourContainer.prototype.toISO8601String = function (date) {
3.     var zeropad = function (num) { return ((num <10) ? '0' : '') + num; }
4.  
5.     var str = "";
6.     str += date.getUTCFullYear();
7.     str += "-" + zeropad(date.getUTCMonth() + 1);
8.     str += "-" + zeropad(date.getUTCDate());
9.     str += "T" + zeropad(date.getUTCHours()) +
10.                ":" + zeropad(date.getUTCMinutes())+
11.                ":" + zeropad(date.getUTCSeconds());
12.     var ms =  date.getUTCMilliseconds();
13.     str += "."+(ms <10 ? "00"+ms : (ms <100 ? "0"+ms : ms));
14.     return str;
15. };
16.  

In your application, you will probably want to pass in a bootstrap callback where you can insert dummy data to get going.

We had a busy day yesterday:

• Brad posted on his thoughts on pervasive Wireless and its effects on the need for offline
• He also talked about Buxfer
• I kept the Gears series going on my own blog, talking about a Notification API that would allow Web developers to get Growl like notifications in a simple way.

We fresh posted most the Ajax behindhand the election news on CNN in the states.

We then heard from churchman Braes, a developer who worked on another semipolitical Ajax recreation over in Flanders, Belgium. This is a contact humorous since Belgique has been streaming without a newborn polity for how some months now?

Bruno talked most the project:

The important determine of the website was online business of election results with advantageous votes and statistical aggregation (including man/woman ratio, geezerhood collection of the elected person, take of participation). The website transcribed peaks of 8.45 meg hits an hour, 3 meg feature pages and more than 350,000 unequalled visitors on Oct 8th. The semiautomatic refresh, the user-friendliness and availability of the place resulted in mitigated users.

For every interior test accumulation hardware as substantially as for business of aggregation to the right concern digit ordered of EML (Election Markup Language) supported XML (eXtensible Markup Language) - writing types was used. This planetary accepted guaranteed, over the whole election process, a homogenous and substantially registered act to citizens, the media, the polity involved, the topical organisations and the semipolitical parties.

Using AJAX profession exclusive 3 noise HTML pages were utilised to help every election results via XML accumulation translated into a JavaScript goal model, presented springy and real-time on the punctuation of the elections. By using AJAX profession the alluviation on the computer was bottom because we dominated when the newborn accumulation was pulled by the browser, by lettered the literal instance newborn accumulation was acquirable on the server. Another plus of using AJAX was no “flicker” was shown when reloading noesis (which happens automatically after a predefined punctuation of time). During the punctuation of the elections, the website was also utilised by the semipolitical parties on bounteous screen/projector without the requirement of having to change the pages themselves.

Various 3rd band libraries (Prototype, Scriptaculous, TrimPath JST engine, …) were used, as substantially as a aggregation of bespoken scripts.

You crapper ease check it out, and sure you undergo a pair of cities, much as Antwerp, to block in. You crapper also click on a map.

Hopefully both countries hit beatific semipolitical body in the reaching months!