Ajaxian » Ajax http://ajaxian.com Cleaning up the web with Ajax Thu, 02 Feb 2012 22:23:48 +0000 en hourly 1 http://wordpress.org/?v=3.2 Best Practices for test revisited http://ajaxian.com/archives/best-practices-for-test-revisited http://ajaxian.com/archives/best-practices-for-test-revisited#comments Fri, 08 Apr 2011 17:08:30 +0000 jvaughan http://ajaxian.com/?p=10538 Read the rest...]]> With Google and their apps like Search, Docs or GMail only a very small time is actually spent in the initial page load, writes Andreas Grabner in a recent blog post. Of course, much time is spent in JavaScript, XHR Calls and DOM Manipulations triggered by user actions. Grabner writes:

It is very important to speed up Page Load Time – don’t get me wrong. It is the initial perceived performance by a user who interacts with your site. But it is not all we need to focus on. Most of the time in modern web applications is spent in JavaScript, DOM Manipulations, XHR Calls and Rendering that happen after the initial page load. Automatic verification against Best Practices won’t work here anymore because we have to analyze individual user actions that do totally different things. The way this will work is to analyze the individual user actions, track performance metrics and automate regression detection based on these measured values.

]]> http://ajaxian.com/archives/best-practices-for-test-revisited/feed 0 COR Blimey! Cross domain Ajax is really here http://ajaxian.com/archives/cor-blimey-cross-domain-ajax-is-really-here http://ajaxian.com/archives/cor-blimey-cross-domain-ajax-is-really-here#comments Wed, 26 May 2010 11:09:34 +0000 Dion Almaer http://ajaxian.com/?p=9407 Read the rest...]]>

There is a lot of solid support for cross-domain Ajax in modern web browsers, yet most developers are still unaware of this powerful capability. Usage requires just a little bit of extra JavaScript work and a little extra server-side work to ensure that the correct headers are being sent. IE8’s implementation lags a bit behind the others in terms of allowing advanced requests and credentialed requests, but hopefully support for CORS will continue to improve.

Nicholas C. Zakas concludes the above in his post on cross domain with cross origin resource sharing (and XDR for IE).

He shares some simple code:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createCORSRequest(method, url){
  3.     var xhr = new XMLHttpRequest();
  4.     if ("withCredentials" in xhr){
  5.         xhr.open(method, url, true);
  6.     } else if (typeof XDomainRequest != "undefined"){
  7.         xhr = new XDomainRequest();
  8.         xhr.open(method, url);
  9.     } else {
  10.         xhr = null;
  11.     }
  12.     return xhr;
  13. }
  14.  
  15. var request = createCORSRequest("get", "http://www.nczonline.net/");
  16. if (request){
  17.     request.onload = function(){
  18.         //do something with request.responseText
  19.     };
  20.     request.send();
  21. }
  22.  

to do the work of cross domain.

Read the detail for the various headers and tweaks, and then check out the CORS demo page by Arun of Mozilla.

]]> http://ajaxian.com/archives/cor-blimey-cross-domain-ajax-is-really-here/feed 10 Telling robots about your crawl-able Ajax apps http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls#comments Wed, 28 Apr 2010 05:37:31 +0000 Dion Almaer http://ajaxian.com/?p=9163 Read the rest...]]> Weston Ruter wants to talk to the search robots out there and tell them about the URL format for crawling Ajax apps.

Google came out with a spec for doing this with hash bang URLs such as: http://shepherdinteractive.com/#!portfolio/interactive/.

What if we could tell Google and others something like:

PLAIN TEXT
HTML:
  1.  
  2. <meta name="crawlable-fragment-prefix" content="/">
  3.  

and Google would grok http://shepherdinteractive.com/#/portfolio/interactive/ and convert it to http://shepherdinteractive.com/?_escaped_fragment_=portfolio/interactive/.

Want flexibility? Or want simplicity and think we should all just hash bang away?

]]> http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls/feed 10 Progressive XMLHttpRequest http://ajaxian.com/archives/progressive-xmlhttprequest http://ajaxian.com/archives/progressive-xmlhttprequest#comments Tue, 12 Jan 2010 16:54:32 +0000 Dion Almaer http://ajaxian.com/?p=8421 Read the rest...]]> 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.  
]]> http://ajaxian.com/archives/progressive-xmlhttprequest/feed 7 A State of the Web via October Tweets http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets#comments Mon, 02 Nov 2009 23:44:10 +0000 Dion Almaer http://ajaxian.com/?p=7828 Read the rest...]]> 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?

]]> http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets/feed 8 $100 off The Ajax Experience expires Friday http://ajaxian.com/archives/100-off-the-ajax-experience-expires-friday http://ajaxian.com/archives/100-off-the-ajax-experience-expires-friday#comments Mon, 24 Aug 2009 23:19:15 +0000 tberardi http://ajaxian.com/?p=7284 Read the rest...]]> 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!

]]> http://ajaxian.com/archives/100-off-the-ajax-experience-expires-friday/feed 5 Cross domain iframe communication without location polling http://ajaxian.com/archives/cross-domain-iframe-communication-without-location-polling http://ajaxian.com/archives/cross-domain-iframe-communication-without-location-polling#comments Mon, 24 Aug 2009 09:30:03 +0000 Dion Almaer http://ajaxian.com/?p=7276 Read the rest...]]> 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!

]]> http://ajaxian.com/archives/cross-domain-iframe-communication-without-location-polling/feed 11 jXHR: XHR API, JSON-P backend conduit http://ajaxian.com/archives/jxhr-xhr-api-json-p-backend-conduit http://ajaxian.com/archives/jxhr-xhr-api-json-p-backend-conduit#comments Thu, 20 Aug 2009 11:55:44 +0000 Dion Almaer http://ajaxian.com/?p=7263 Read the rest...]]>

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).

]]> http://ajaxian.com/archives/jxhr-xhr-api-json-p-backend-conduit/feed 11 Keynotes Announced for The Ajax Experience! http://ajaxian.com/archives/keynotes-announced-for-the-ajax-experience http://ajaxian.com/archives/keynotes-announced-for-the-ajax-experience#comments Sun, 12 Jul 2009 23:37:45 +0000 tberardi http://ajaxian.com/?p=7097 Read the rest...]]> 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!

]]> http://ajaxian.com/archives/keynotes-announced-for-the-ajax-experience/feed 2 Registration Now Open for The Ajax Experience 2009! http://ajaxian.com/archives/registration-now-open-for-the-ajax-experience-2009 http://ajaxian.com/archives/registration-now-open-for-the-ajax-experience-2009#comments Wed, 17 Jun 2009 17:06:03 +0000 tberardi http://ajaxian.com/?p=6969 Read the rest...]]>  "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.

]]> http://ajaxian.com/archives/registration-now-open-for-the-ajax-experience-2009/feed 0 Digg shows Multipart XMLHttpRequest prototype http://ajaxian.com/archives/digg-shows-multipart-xmlhttprequest-prototype http://ajaxian.com/archives/digg-shows-multipart-xmlhttprequest-prototype#comments Thu, 21 May 2009 12:31:44 +0000 Dion Almaer http://ajaxian.com/?p=6815 Read the rest...]]> 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.

]]> http://ajaxian.com/archives/digg-shows-multipart-xmlhttprequest-prototype/feed 19 Ajax Frameworks Decision Center http://ajaxian.com/archives/ajax-frameworks-decision-center http://ajaxian.com/archives/ajax-frameworks-decision-center#comments Fri, 15 May 2009 10:50:33 +0000 Dion Almaer http://ajaxian.com/?p=6799 Read the rest...]]> 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 ;)

]]> http://ajaxian.com/archives/ajax-frameworks-decision-center/feed 13 Ajax Framework Analysis Results http://ajaxian.com/archives/ajax-framework-analysis-results http://ajaxian.com/archives/ajax-framework-analysis-results#comments Wed, 29 Apr 2009 11:44:47 +0000 Dion Almaer http://ajaxian.com/?p=6706 Read the rest...]]> 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.

]]> http://ajaxian.com/archives/ajax-framework-analysis-results/feed 49 Need a Script? Check out AjaxRain.com http://ajaxian.com/archives/need-a-script-check-out-ajaxraincom http://ajaxian.com/archives/need-a-script-check-out-ajaxraincom#comments Mon, 06 Apr 2009 15:37:54 +0000 Rey Bango http://ajaxian.com/?p=6495 Read the rest...]]> 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.

]]> http://ajaxian.com/archives/need-a-script-check-out-ajaxraincom/feed 4 Share Your Knowledge at The Ajax Experience! http://ajaxian.com/archives/share-your-knowledge-at-the-ajax-experience-2 http://ajaxian.com/archives/share-your-knowledge-at-the-ajax-experience-2#comments Mon, 09 Mar 2009 13:54:38 +0000 tberardi http://ajaxian.com/?p=6241 Read the rest...]]> 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!

]]> http://ajaxian.com/archives/share-your-knowledge-at-the-ajax-experience-2/feed 1 Forget Chuck, Preloaders 3D right now! http://ajaxian.com/archives/forget-chuck-preloaders-3d-right-now http://ajaxian.com/archives/forget-chuck-preloaders-3d-right-now#comments Mon, 02 Feb 2009 05:41:02 +0000 Dion Almaer http://ajaxian.com/?p=5857 Read the rest...]]>

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! :)

]]> http://ajaxian.com/archives/forget-chuck-preloaders-3d-right-now/feed 23 Platform Optimization Strategies for Ajax Toolkits http://ajaxian.com/archives/platform-optimization http://ajaxian.com/archives/platform-optimization#comments Thu, 22 Jan 2009 07:14:10 +0000 Dion Almaer http://ajaxian.com/?p=5762 Read the rest...]]> 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?

]]> http://ajaxian.com/archives/platform-optimization/feed 1 Backwards compatibility and HTML 5 http://ajaxian.com/archives/backwards-compatibility-and-html-5 http://ajaxian.com/archives/backwards-compatibility-and-html-5#comments Thu, 08 Jan 2009 12:39:01 +0000 Dion Almaer http://ajaxian.com/?p=5593 Read the rest...]]> 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().

]]> http://ajaxian.com/archives/backwards-compatibility-and-html-5/feed 6 Rich UI Apps Should Not Be Considered Harmful http://ajaxian.com/archives/rich-ui-apps-should-not-be-considered-harmful http://ajaxian.com/archives/rich-ui-apps-should-not-be-considered-harmful#comments Thu, 18 Dec 2008 11:05:11 +0000 Dion Almaer http://ajaxian.com/?p=5444 Read the rest...]]> 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.

]]> http://ajaxian.com/archives/rich-ui-apps-should-not-be-considered-harmful/feed 12 RUI is not accessible? Check out Yahoo’s new Currency Converter http://ajaxian.com/archives/rui-is-not-accessible-check-out-yahoos-new-currency-converter http://ajaxian.com/archives/rui-is-not-accessible-check-out-yahoos-new-currency-converter#comments Wed, 17 Dec 2008 17:23:26 +0000 Chris Heilmann http://ajaxian.com/?p=5435 Read the rest...]]> I am proud to be able to announce the new currency converter on Yahoo finance. Why? Because it is a perfect example of how a complex rich user interface can be built in an accessible manner.

currency-converter-yahoo-finance

As the main developer, Dirk Ginader explains:

About 9 months ago my fellow co-worker, the User Experience Designer Graham Beale, and I started developing ideas for a prototype of a new Currency Converter for the worldwide relaunch of Yahoo! Finance.

We wanted Features we haven't seen like this in the Internet so far. We wanted conversion without a page reload, searching for currencies like in the Firefox 3 "awesome bar", total accessibility, much more and of course everything in realtime.

There will be an in-depth article on how Dirk and his colleagues (with a special mention to Artur Ortega who did all the screen reader testing) build the converter on the Yahoo Developer Blog after the holidays. For now, have a look at the code and see the wonderful attention to detail. One of the main tricks they've done can be mentioned already: dynamic re-writing of form labels.

]]> http://ajaxian.com/archives/rui-is-not-accessible-check-out-yahoos-new-currency-converter/feed 10