Activate your free membership today | Log-in

Tuesday, January 12th, 2010

Progressive XMLHttpRequest

Category: Ajax

Kyle Scholz has brought up the topic of progressive response handling in XHR:

Perhaps it's subtle, but the draft spec for XMLHttpRequest calls for support for progressive response handling: 

4.7.6 The responseText attribute

The responseText attribute must return the result of running these steps: 

1. If the state is not LOADING or DONE return the empty string and terminate these steps.
2. Return the text response entity body.

He then goes on to test this out by having a response with delimiters such as:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. window.aFunction();
  3. // -- //
  4. window.bFunction();
  5. // -- //
  6.  

and then watching for those in the response:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var index = 0;
  3. var buffer = '';
  4. var DELIMITER = '//--//';
  5.  
  6. function handlePartialResponse(request) {
  7.   var i = request.responseText.lastIndexOf(DELIMITER);
  8.   if (i> index) {
  9.     i += DELIMITER.length;
  10.     var newChunk = request.responseText.substr(index, (i - index));
  11.     buffer += newChunk;
  12.     index = i;
  13.     flushBuffer();
  14.   }
  15. }
  16.  

Posted by Dion Almaer at 11:54 am
7 Comments

+++--
3.6 rating from 23 votes

Monday, November 2nd, 2009

A State of the Web via October Tweets

Category: Ajax

A lot of great news is coming in via Twitter. I make a lot of Ajax comments under @dalmaer and wanted to give you a roundup on the month of October via Tweets. Always interesting to take a glance at the month. What do you think?

Posted by Dion Almaer at 6:44 pm
10 Comments

+----
1.5 rating from 86 votes

Monday, August 24th, 2009

$100 off The Ajax Experience expires Friday

Category: Ajax, Ajaxian.com Announcements, Conferences, The Ajax Experience

This Friday, August 28 marks the $100 off early-bird deadline for The Ajax Experience conference, September 14-16 in Boston, MA. Friday is your last chance to save $100 off the registration fee. Visit the conference site to register now!

Below is the latest agenda at-a-glance with over 40 essential sessions, case studies, interactive panels and insightful keynotes from Dion and Ben of Ajaxian.com, Brendan Eich, Douglas Crockford and Ross Boucher. Register now to take advantage of $100 early-bird savings and join your peers right in Boston. This great offer expires on Friday, August 28.

--------------------------------------------------------------------------------

DAY ONE - Monday, September 14

7:00 - 8:00 a.m.   Registration and Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘The Future of Ajax: The Browser Reinvented' with Ben Galbraith and  Dion Almaer, Co-founders, Ajaxian.com

9:05 - 9:45 a.m.   5-minute Lightning Rounds (HOT Ajax topics coming soon!)

9:45 - 10:10 a.m.   Refreshment Break, Peer and Vendor Networking

10:10 - 11:10 a.m.   Choose between:
‘Design Tips for Dynamic UIs' with Patrick Lightbody
‘Beyond IFrames: Web Sandboxes' with Scott Isaacs
‘Building Accessible User Interfaces with jQuery and Fluid Infusion' with Colin Clark
‘From Desktop to Web - Getting it Right' with John Trelfa

11:20 - 12:00 p.m.   Luncheon Keynote

12:00 - 12:50 p.m.   Lunch and Peer Networking

1:00 - 2:15 p.m.   Panel: ‘ES5: ECMAScript Standards for a Better Web' led by Allen Wirfs-Brock
Panelists: Brendan Eich, Douglas Crockford, Mark Miller

2:25 - 3:25 p.m.   Choose between:
‘Interoperable Ajax Tools and Mashups' with Adam Peller
‘API Doc Smackdown: YUI Doc versus JS Doc Toolkit' with Ted Husted
‘Even Faster Web Sites' with Steve Souders
‘Designing for Interesting Moments' with Bill Scott

3:25 - 3:50 p.m.   Refreshment Break, Peer and Vendor Networking

3:50 - 4:15 p.m.   New Technology Launch

4:15 - 5:15 p.m.   Keynote: ‘The JSON Saga' with Douglas Crockford, Author, ‘JavaScript: The Good Parts'; Creator, JSON

5:15 p.m.   Ajax Experience Evening Event

 

DAY TWO - Tuesday, September 15

7:30 - 8:00 a.m.   Registration and Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘ECMAScript Harmony and the Future of JavaScript' with Brendan Eich, Creator, JavaScript; CTO, Mozilla Foundation

9:05 - 9:35 a.m.   5-minute Lightning Rounds (HOT Ajax Topics)

9:35 - 10:00 a.m.   Refreshment Break, Peer and Vendor Networking

10:00 - 11:30 a.m.   Choose between:
Standards Session with Brendan Eich
‘Web Compatibility and Performance Testing in a Multi-Browser World' with Imad Mouline & Ryan Breen

11:40 - 12:20 p.m.   Luncheon Keynote

12:20 - 1:10 p.m.   Lunch and Peer Networking

1:20 - 1:50 p.m.   Vendor Tech Sessions

2:00 - 3:00 p.m.   Choose between:
‘Advanced Web Application Security' with Joe Walker
‘Adaptive Static Resource Optimization in the Ajax World' with David Wei & Changhao Jiang
‘Object-Oriented CSS: for Scalable, Fast and Beautiful Web Applications' with Nicole Sullivan
‘JavaScript: The Good Parts' with Douglas Crockford

3:00 - 3:25 p.m.   Refreshment Break, Peer and Vendor Networking

3:25 - 4:25 p.m.   Choose between:
‘Ample SDK: Standards-based Runtime for Client-side Applications' with Sergey Ilinsky
‘How to Simplify and Automate Testing Ajax Applications' with Ted Husted
‘Web Services and JavaScript - Using and Offering Data on the Web for All of Us' with Christian Heilmann

4:25 - 5:25 p.m.   Ask the Expert Discussion Groups (Meet one-on-one with speakers)

5:25 p.m.    Ajax Experience Evening Event

 

DAY THREE - Wednesday, September 16

7:30 - 8:00 a.m.   Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘The Future of Development Tools' with Ross Boucher, Co-founder, 280 North

9:05 - 9:20 a.m.   5-minute Lightning Rounds (HOT Ajax Topics coming soon!)

9:30 - 10:30 a.m.   Choose between:
‘Improving Facebook's Performance with Ajax and Browser Caching' with David  Wei & Changhao Jiang
‘Bringing Data to Life in the Browser with the YUI Library' with Jenny Han Donnelly
‘Designing for the Mobile Web with JavaScript' with Brian LeRoux
‘Building Voice Recognition and Audio Recording into Web Applications with WAMI' with Andrew Sutherland

10:30 - 10:55 a.m.   Refreshment Break, Peer and Vendor Networking

10:55 - 12:55 p.m.   Panel: ‘Secure Mashups: Getting to Safe Web Plug-ins' with Douglas Crockford, Scott Isaacs, Mike Samuel, Marcel Laverdet

12:25 - 1:15 p.m.   Lunch and Peer Networking

1:25 - 2:25 p.m.   Choose between:
‘The Challenges and Rewards of Writing a 100K-line JavaScript Application with Laurens van den Oever
‘Building Rich Web Applications with Ext JS 3.0' with Rich Waters
‘Cappuccino Web Framework' with Ross Boucher

2:35 - 3:35 p.m.   Choose between:
‘Testing the Testers: YUI Unit versus QUnit' with Ted Husted
‘Building a Web Application with Atlas, Start to Finish' with Ross Boucher
‘Web. Smartphone. Future. Now.' with Jason O'Keefe
‘ARIA - Pushing Accessibility Even Further and How to Get Your Boss to Join in' with Joe McCann

3:35 p.m.   Conference ends

Visit AjaxExperience.com to learn more and save $100!

Posted by tberardi at 6:19 pm
7 Comments

++---
2.9 rating from 25 votes

Cross domain iframe communication without location polling

Category: Ajax

Piers Lawson has come up with an interesting new technique for cross domain communication using an iframe and not having to poll the location for a #hashchange:

Most articles on using the URL Fragment technique advocate the target iFrame polling its Location to detect changes in the fragment… perhaps checking 5 times a second. Julien Lecomte describes a variant that creates throw away proxy iFrame’s. These can check their location within an onload event handler, extract the message, then make a call to the target iFrame, passing in the message. Once complete, the iFrame can be deleted. This means polling is no longer required. Also, when combined with caching, it should be fast and remove the risk of missing a message.

This post by Michael Mahemoff provides a good introduction to both techniques.

I came across these blog entries after I had come up with something similar, but with a slight twist… it may not be new but I didn’t find any other examples along these lines. I used a permanent proxy frame instead of throw away proxies. However, rather than polling the Location, I signalled a new “message” was ready to be processed by resizing the proxy iFrame. The JavaScript within the proxy iFrame registers a resize handler which when triggered reads the message. This approach is more immediate than both the polling and the dynamic iFrame techniques. I’m not 100% sure on whether threading within browser could allow messages to be lost in the case of several being sent close together, but I don’t believe so.

It is interesting to see how it all works:

The Parent Page hosts two iFrames. One contains the Content to be displayed, the second is a Proxy that is moved out of sight (both iFrames are served by the same domain);

The Parent Page sends messages to the Content iFrame by changing the URL Fragment of the Proxy iFrame and signalling that a new message is available (by toggling the size of the Proxy):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function SendMessageToFrame(message) {
  3.     var elem = document.getElementById('innerFrameProxy');
  4.     elem.contentWindow.location = 'http://www.pierslawson.plus.com/Examples/CrossDomain/InnerFrameProxy.html#' + message;
  5.     elem.width = elem.width> 50 ? 50 : 100;
  6. }
  7.  

The Proxy registers a handler that is called as its size is changed. The handler inspects the URL Fragment and passes the message on to the Content iFrame (this is allowed as it is not a cross domain call). It is this call that fails with Opera… there does not appear to be a way for the Proxy iFrame to get a handle to the Content iFrame. Internet Explorer and Firefox can use parent.frames["hostFrame"] to find the Content iFrame.

Nice work Piers!

Posted by Dion Almaer at 4:30 am
11 Comments

+++--
3.9 rating from 26 votes

Thursday, August 20th, 2009

jXHR: XHR API, JSON-P backend conduit

Category: Ajax

The Mullet: Business up front, party in the rear

Kyle has take the XHR API that we all know and.... wrap.... and married it with a JSON-P transport to make jXHR.

He tells us more:

I've put out a very simple little project called jXHR which does cross-domain Ajax via JSON-P calls (meaning, totally javascript based), but does so with an emulation of the native XHR API ("onreadystatechange", "open", "send", etc). It also provides some basic error handling capabilities, which is something most JSON-P solutions don't currently offer, at least not without complicated timers, etc.

The goal was to provide a simpler interface for making cross-domain Ajax calls with JSON-P, but in nearly the same way you make same-domain calls, by using the standard XHR API. Also, I wanted the solution to be framework independent for those who don't or can't use jQuery, Dojo, etc

Frameworks such as Dojo allow you to choose an transport independent of their API (e.g. iframe transport versus XHR).

Posted by Dion Almaer at 6:55 am
12 Comments

++++-
4.7 rating from 20 votes

Sunday, July 12th, 2009

Keynotes Announced for The Ajax Experience!

Category: Ajax, Conferences, The Ajax Experience

Ajaxian.com's The Ajax Experience gives you access to over 40 sessions presented by framework founders, independent experts and development leaders - all focused on proven solutions for current and emerging challenges plaguing Ajax developers, like performance, cross-browser rendering, security and architecture.

Register Now for The Ajax Experience! September 14-16 in Boston, MA.

Keynote presentations examine advancements being made in JavaScript, CSS and browser implementations that you can leverage now to create quality Ajax apps. Plus you gain key insights into development tools that you can use today to cut weeks off development timelines.

Keynotes Include:

'The Future of Ajax: The Browser Reinvented' with Ben Galbraith and Dion Almaer, Co-founders of Ajaxian.com.

See how to leverage new browser technologies on the horizon (and in most cases, largely already here) that will power the future of Ajax applications. Drawing from real-life examples of cutting-edge applications, Ben and Dion showcase Ajax innovations that you can tap into today to create compelling applications that users demand - including Canvas, faster JavaScript, Web Workers, Bespin and more.

'The Future of Development Tools' with Ross Boucher, Co-founder of 280 North.

There are many different development tools available and choosing the one that best meets your needs, and getting the most out of that tool, can be challenging and time-consuming. Ross Boucher shares little-known tips for developing applications versus web pages and websites, with a focus on JavaScript debugging and profiling tools as well as existing and upcoming development IDEs, including the much anticipated Atlas.

'A Web of Confusion' with Douglas Crockford, Author of JavaScript: The Good Parts

The browser is generally regarded as an incompetent blunder, crafted with horrendous security vulnerabilities which, 14 years on, still have not been repaired. Yet, despite the browser's lousy reputation, when it comes to security, it is significantly better than everything else. Attend and hear Douglas Crockford uncover emerging security threats in the browser and the necessary steps to avoid putting your apps at risk.

 ----------------------------------------------

These are just a few key highlights of what promises to be the most educational web development event of the year or your money back - no questions asked. Sessions are being finalized but many are ready for your review right now! View the full agenda.

And don't forget to take advantage of the special $300 savings before the discount expires July 31!

Posted by tberardi at 6:37 pm
6 Comments

++++-
4.2 rating from 13 votes

Wednesday, June 17th, 2009

Registration Now Open for The Ajax Experience 2009!

Category: Ajax, Ajaxian.com Announcements, Conferences, The Ajax Experience

 "When the heck are you guys going to open registration for The Ajax Experience this year!?"

Over the last 3 months that is, without question, the most frequently received email we've had from Ajaxian members like you. The good news is that the wait is finally over! Registration has officially opened for this year's Ajax Experience conference and best of all, we're offering you $300 off when you register by July 31st. Check out our just-launched Web site right here for all the benefits we have lined up for you this year:  The Ajax Experience, September 14-16 in Boston, MA

Please Note: While we'll be adding the bulk of our sessions to our individual conference tracks over the next few weeks, we want to be sure you take advantage of the early-bird discount now. That said, we've once again confirmed today's best and brightest Ajax minds from across the globe and we're featuring a number of these keynote presenters and session experts for your review on the site right now, including:

* Ben Galbraith and Dion Almaer, Co-founders of Ajaxian.com
* Brendan Eich, Creator of JavaScript and CTO of Mozilla
* Douglas Crockford, Creator of JSON and Author of JavaScript: The Good Parts
* Bill Scott, Director of UX at Netflix
* Ross Boucher, Co-founder of 280 North and the Cappuccino & Atlas frameworks
* Joe Walker, Creator of DWR
* Nicole Sullivan, Creator of Object-Oriented CSS
* David Wei and Xiang Chaong, Research Scientists at Facebook
* And more! 

More essential speakers and sessions to be announced in the coming weeks, so stay tuned and start planning. One feature we think you're going to love this year is "session previews." Each morning we're featuring 5-minute lightning rounds where presenters entice the audience to attend their session by giving them a brief synopsis of what they will learn. Now you'll have even more exposure to new, cutting-edge technologies and proven solutions - and a better idea of how to spend your days.

 Don't delay, register now for The Ajax Experience to take advantage of your $300 early bird savings.

Posted by tberardi at 12:06 pm
Comment here

+++--
3.6 rating from 24 votes

Thursday, May 21st, 2009

Digg shows Multipart XMLHttpRequest prototype

Category: Ajax, JavaScript, Performance

Micah Snyder of Digg posted on DUI.Stream, an experimental library that implements a multipart XHR technique to bundle resources into one request and then breaks them out at the other end:

One of the ways that high-performance websites like Yahoo suggest speeding up load times is by reducing the number of HTTP requests per page. We started thinking about what we could do to reduce HTTP overhead, and where we could get the biggest benefits from it. Well, one thing led to another and the next thing we knew we were talking about writing a generalized framework for bundling files, sending them through a single request, then separating them for use once they head down the pipe.

We call this technique MXHR (short for Multipart XMLHttpRequests), and we wrote an addition to our Digg User Interface library called DUI.Stream to implement it. Specifically, DUI.Stream opens and reads multipart HTTP responses piece-by-piece through an XHR, passing each chunk to a JavaScript handler as it loads.

Why do this? Well, DUI.Stream will allow developers to drastically improve the speed of uncached page loads by bundling most of their resources into a single HTTP request, with a single time-to-first-byte and no request throttling by the user agent. Additionally, the size of the response has no effect on the rendering time of each chunk, as the client handles each piece of the response on the fly and can inject it into the DOM for rendering immediately, in the exact order you specify. On a high traffic, high-activity site like Digg, we have to display incredible amounts of data on each permalink — typically hundreds of user images within the first 50 comment threads on a page alone, not to mention the UI chrome and actual comment data. (You can see this for yourself: notice the number of HTTP requests that queue up when you expand a page of comments). So our primary use case for DUI.Stream is turning that first long, arduous page load on an empty cache into something nearly indistinguishable from a page of data with fully cached resources.

You can take a look at a demo in action. Reloading the puppy shows how life varies so much on each request. The demos looks like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var s = new DUI.Stream();
  3.  
  4. var content = '';
  5.        
  6. s.listen('text/html', function(payload) {
  7.     content += payload;
  8. });
  9.  
  10. s.listen('complete', function() {
  11.     $('#stream').append('<p>Stream took: ' + ((new Date).getTime() - streamStart) + 'ms</p>' + content);
  12.    
  13.     var normalStart = (new Date).getTime();
  14.    
  15.     for(var i = 0; i <9; i++) {
  16.         $.ajax({
  17.             'url': 'loremIpsum.html',
  18.             'async': true,
  19.             'type': 'GET',
  20.             'dataType': 'html',
  21.            
  22.             'success' : function(html) {
  23.                 $('#normal').append(html);
  24.             }
  25.         });
  26.     }
  27.    
  28.     $.ajax({
  29.         'url': 'loremIpsum.html',
  30.         'async': true,
  31.         'type': 'GET',
  32.         'dataType': 'html',
  33.        
  34.         'success' : function(html) {
  35.             $('#normal').append(html);
  36.             $('#normal').prepend('<p>Normal took: ' + ((new Date).getTime() - normalStart) + 'ms');
  37.         }
  38.     });
  39. });
  40.  
  41. var streamStart = (new Date).getTime();
  42. s.load('testStreamData.php');
  43.  

How does Digg see this as a benefit?

Let’s talk a bit about the architectural benefits of implementing MXHRs with DUI.Stream. Back when the web was based largely on a page metaphor (i.e.: one central document with external references), whenever you loaded the page, the page requested its images, stylesheets, etc, then you were done. These days you’re just as often loading an application; the page progressively enhances into a stateful UI by loading extra stylesheets, scripts and a whole mess of UI chrome after the initial request. Yet, we’re still using the old model flow of get markup –> render markup –> request external resources –> load and display externals.

Take our modal login dialog box for example. In order to reduce requests we bundle its JavaScript in with the rest of the page, we put its CSS up in the header with the rest of the styles, then we request only the markup for the dialog box, render it, and let it fire its own HTTP requests for the images that make up its chrome. In this broken model, HTTP connections and rendering behaviors split our UI architecture up into different parts of the page that all render at different times at the browser’s discretion. Even if we put everything into one cohesive structure and loaded the CSS link, script tag and markup together, they’d still all fire their own HTTP requests and the images would still come in afterwards on the first page load. This just won’t do.

Now, let’s rethink how our login dialog could work using DUI.Stream. We can request a Stream that contains everything needed to render and use the dialog box. As each part comes in, it gets passed through to be built, and renders immediately with no image backfill or delayed JS behavior. The DUI.Stream framework can then pass those resources back into cacheable elements for our next page load, which can happily 302 its way quickly through the rendering process. Pretty sweet right? Right.

Posted by Dion Almaer at 7:31 am
19 Comments

++---
2.1 rating from 70 votes

Friday, May 15th, 2009

Ajax Frameworks Decision Center

Category: Ajax

Why choose which Ajax framework you can use, when you can let The Machine tell you! Jim Briggs of Athenz has pointed his decision machine at the age old problem of choosing which darn library to script src!

Here is what Jim told us about the new service:

There has been some discussion lately on Ajaxian about “What is the best framework?” As Dion said in another post, “It is agonizing. It is hard. It isn't pretty.” Both newbies and gurus have weighed in on the subject. As a Ajax programmer, the issue is personally important to me, but rather than cast out another opinion, I’ve created a web site, The Ajax Frameworks Decision Center, that allows anybody to evaluate and select the Ajax or RIA framework that best meets their particular needs. The Decision Center includes a 100-plus requirements model, tools to prioritize, compare, and evaluate frameworks, and a 35 page guide that elaborates on the requirements and the features that you find in frameworks.

In addition, anyone can publish an evaluation of any framework and vendors can publish product information inside the Decision Center. All of this is free.

Objectively, the choice of a framework can be difficult. Subjectively, the choice can be agonizing. The Decision Center doesn’t eliminate all the difficulty, but it provides a way to make a good and justifiable decision and feel confident about it in the end.

This is a brand new service and I’ll respond quickly to any feedback so I can make the site better and so I can help you make better technology decisions now and in the future.

Or see it at work:

You have to signup to check it out, and it may feel like you are filling out a TPS form ;)

Posted by Dion Almaer at 5:50 am
15 Comments

++---
2.3 rating from 58 votes

Wednesday, April 29th, 2009

Ajax Framework Analysis Results

Category: Ajax

Matt Raible has posted on the analysis the he has done for a client on choosing an Ajax framework. This is the age old question "which Ajax framework should I use?" It is agonizing. It is hard. It isn't pretty. We created a dartboard:

Matts take compares Dojo, Ext JS, GWT, and YUI using various criteria that you can see here (including his ratings):

What you quickly see is that it is fairly hard to choose between the popular frameworks (and this is a specific subset that was narrowed down, hence no jQuery, Prototype, Mootools, etc).

I am interested in seeing what other criteria people use to choose.

Posted by Dion Almaer at 6:44 am
49 Comments

++---
2.1 rating from 95 votes

Monday, April 6th, 2009

Need a Script? Check out AjaxRain.com

Category: Ajax

Launched in June, 2007, AjaxRain.com has continued its steady growth of aggregating awesome extensions for the popular JavaScript frameworks. It was a late starter coming after the popular site MiniAjax but while MiniAjax unfortunately stopped updates, AjaxRain continued loading up with top scripts from around the web. Currently listing 1200+ scripts, it has become the starting place for finding cool features to leverage in your apps.

Looking at the jQuery, MooTools & Prototype categories you can see a wealth of options for all types of functionality.

They've also just updated the site:

  • Enhancing the UI
  • Improving advanced search options to increase discoverability
  • Tags for every aspect of UI design

In addition, they've now started to leverage Twitter and Facebook to spread the word about new scripts.

Finding good scripts is tough as it is with so many being hosted all over the web. So it's good to see a service which is offering to wrap all of these up in a nice centralized manner.

Posted by Rey Bango at 10:37 am
4 Comments

++++-
4.5 rating from 31 votes

Monday, March 9th, 2009

Share Your Knowledge at The Ajax Experience!

Category: Ajax, Ajaxian.com Announcements, Conferences, The Ajax Experience

We're seeking a few good technologists and speakers for The Ajax Experience 2009, to be held in Boston on September 14-16, 2009.  If you have experience with frameworks, techniques, or technologies that drive high performance Web applications, or build frameworks or other tools to enable the creation or test of Ajax applications, take a look at our call for papers to see where your talk may fit in.

Please click here for more details on what we're looking for and how to submit your proposals.  Here is the official submission form. Deadline for submissions is April 1st.

See you at The Ajax Experience in September!

Posted by tberardi at 8:54 am
1 Comment

+++--
3.7 rating from 30 votes

Monday, February 2nd, 2009

Forget Chuck, Preloaders 3D right now!

Category: Ajax, Utility

I enjoy the US show Chuck (maybe because a geeky guy gets to hang with a beautiful woman? :) and there is a 3D episode to launch their new season. Our 2009 Ajax season relaunches an old favourite meme, the Ajax loaders (e.g. ajaxload.info) with a new 3D special.

Timur Gafforov has given us Preloaders which allows you to select size, speed, and from a set of 3D spinners. Make your users wait in style! :)

Posted by Dion Almaer at 12:41 am
24 Comments

++++-
4 rating from 75 votes

Thursday, January 22nd, 2009

Platform Optimization Strategies for Ajax Toolkits

Category: Ajax, Editorial, Examples, Library

Dylan Schiemann has posted on Platform Optimization Strategies for Ajax Toolkits which covers techniques for having code run on multiple platforms effectively.

He talks about how some frameworks have code paths for specific browsers to shorten the if (foo) type overhead. Having a compile step like GWT does makes this easy. TIBCO GI "builds an optimized code tree for each major browser release (the opposite of the approach jQuery 1.3 and others have taken, as code only makes it into a build for that browser if that browser is known to support that functionality)."

excludeStart(”webkitMobile”)

Dylan then discusses what is happening in the Dojo community:

In recent discussions on the Dojo mailing list, discussions turned to how to make Dojo faster for mobile users. In most cases, this involves removing code and features that are not needed on that platform given the precious resources available on mobile devices and over mobile networks.

Alex Russell checked in some work he started last year that looks like this:

[javascript]
//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
!dojo.isIE &&
//>>excludeEnd("webkitMobile");
[./javascript]

The syntax is a bit verbose, but it excludes the code between the start and end in a Dojo build created for webkitMobile:

./build.sh profile=base action=clean,release webkitMobile=true

While we would love to switch to pure feature detection over browser version detection like John has done with jQuery 1.3, version detection is generally more concise and precise, and does not necessarily make Dojo any less forwards compatible.

Version detection also makes it easy to exclude code created solely for browsers that require major workarounds, such as IE 6. To get the most out of this though would require doing something similar for each major browser, which would make Dojo more challenging to understand and maintain, would probably require a build step even during development (not just in production to improve performance).

At this point, there are no clear answers, just a lot of questions on how to create a toolkit that offers edge of the web features for desktop users, and still preserves performance for mobile web users. What approach do you think is best?

Posted by Dion Almaer at 2:14 am
2 Comments

+++--
3.6 rating from 28 votes

Thursday, January 8th, 2009

Backwards compatibility and HTML 5

Category: Ajax, HTML

John Allsopp has a thoughtful piece that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.

It is great to have new semantics for <section> and all, but what will browsers do with these new tags?

John walks through a simple example with the new tags, shows some issues, and then wonders if we could use the existing extension points (attributes):

Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:

<div structure="header">

Let’s see how our browsers fare with this.

Of course, all our browsers will style this element with CSS.

PLAIN TEXT
HTML:
  1.  
  2. div {color: red}
  3.  

But how about this?

div[structure] {font-weight: bold}

In fact, almost all browsers, including IE7, style the div with an attribute of structure, even if there is no such thing as the structure attribute! Sadly, our luck runs out there, as IE6 does not. But we can use the attribute in HTML and have all existing browsers recognize it. We can even use CSS to style our HTML using the attribute in all modern browsers. And, if we want a workaround for older browsers, we can add a class value to the element for styling. Compare this with the HTML 5 solution, which adds new elements that cannot be styled in Internet Explorer 6 or 7 and you’ll see that this is definitely a more backward-compatible solution.

John then goes on to discuss the potential use of the role attribute, and more.

It feels like there are two issues here:

  1. Are new tags the right way to provide new semantic value
  2. Are there work arounds to back/forward compatibility.

Without compatibility, it will be impossible to get this off the ground for many people. What if we mix both worlds, and a shim is put in place to convert the new tags to divs and the like at runtime for browsers that don't support it. Is that enough?

You can get IE to support new tags as shown in this example by using document.createElement().

Posted by Dion Almaer at 7:39 am
6 Comments

++++-
4.9 rating from 7 votes

Thursday, December 18th, 2008

Rich UI Apps Should Not Be Considered Harmful

Category: Ajax

Herb Sutter is a great leader in our industry, and he has taken on Jeff Atwood's post on Web 2.0 app design.

It comes to the age old issue of how "desktop-y" do you make your Web application? Herb believes that having them look like desktop apps is natural. I think that I disagree. I like Gmail because it is a great blend of web-y and desktop-y. In fact, it is more like pine on the Web than Outlook on the Web :)

The best applications seem to nail that blend of both worlds. What do you think?

This is Herb's conclusion:

Most SaaS/Web 2.0 applications today look and feel pretty much the way GUI applications looked and felt like on DOS, before technologies like Windows and OS/2 PM existed. Around the late 1980s, people wrote lots of GUI applications that ran on DOS, but we didn’t have a widely-used common GUI infrastructure that handled basic windows and menus and events, much less standards like CUA that tried to say how to use such a common infrastructure if we had it. So they each did their own thing, borrowing where possible from what seemed to work well for GUIs on other platforms.

Twenty years ago, everyone writing GUIs on DOS designed the UIs as best they could, borrowing where possible from what they saw worked on platforms like the Macintosh and Xerox Alto and Star — but the results were all over the map, and would stay that way until a standard environment, followed by standard guidelines, came into being.

Today, everyone writing rich Web 2.0 applications is doing their own thing, borrowing as best they can from Macs and Windows and others — but the results are all over the map, and will continue to be until there actually is such a thing as a UI standard for rich-GUI web applications. You can see that in the differences between Zimbra and Outlook Web Access. In the meantime, it’s not just okay to borrow from what we’ve learned on the desktop; it’s necessary.

And the question isn’t whether metaphors users already understand on the desktop will migrate to the web, but which ones and how soon, because it’s the whole point of SaaS. The industry will soon be going well beyond Google Apps; with offerings like Office Online already announced for the short term, which puts still more rich-client GUI apps like word processors and spreadsheets in the browser (with functionality somewhere between Google Apps and the desktop version of Office).

Zimbra and Outlook Web Access aren’t examples of poor web app design, but exactly the opposite: They’re just the beginning of the next wave of rich web apps.

Posted by Dion Almaer at 6:05 am
12 Comments

++++-
4.3 rating from 24 votes

Next Page »