Sunday, August 5, 2007

Eval’ing with IE’s window.execScript

Plaxo’s Joseph Smarr has been playing with on-demand javascript, i.e. downloading extra JS code after the page has already loaded. When you grab the code via a remote call and eval() it, it doesn’t get into global scope. So here’s how he dealt with it.

Here’s a simplified version of the situation we faced:

function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
return eval(code); // doesn’t work in FF or IE
}

function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}

The thing to note above is that just calling eval() doesn’t stick the code in global scope in either browser. Dojo’s loader code solves this in Firefox by creating a dj_global variable that points to the global scope and then calling eval on dj_global if possible:

function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
var dj_global = this; // global scope object
return dj_global.eval ? dj_global.eval(code) : eval(code);
}

This works in Firefox but not in IE (eval is not an object method in IE). So what to do? The answer turns out to be that you can use a proprietary IE method window.execScript to eval code in the global scope (thanks to Ryan “Roger” Moore on our team for figuring this out). The only thing to note about execScript is that it does NOT return any value (unlike eval). However when we’re just loading code on-demand, we aren’t returning anything so this doesn’t matter.

The final working code looks like this:

function loadMyFuncModule() {
var dj_global = this; // global scope reference
if (window.execScript) {

window.execScript(code); // eval in global scope for IE
return null; // execScript doesn’t return anything
}
return dj_global.eval ? dj_global.eval(code) : eval(code);
}

function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}

And once again all is well in the world.

How to write a Google Gadget

I’ve written some notes on the Google Gadget API and how to write a gadget, targeted at developers who already know Ajax.

What’s a Gadget?

  • The gadget is an XML file sitting on your server. In my case, http://ajaxify.com/run/widgets/google/diggroundup.xml. It will get cached, so effectively it must be a static file.
  • The user adds your gadget to their igoogle portal, or codes it into their own website, by specifying this URL (it may be done indirectly - via the gadget registry. You’ll appear in the registry if you’ve submitted your gadget to igoogle.)
  • The gadget is rendered as an iframe, so you have all the usual security constraints which stop you borking the portal and other gadgets. This also means you can’t communicate with other Gadgets other than via than remote calls to a common third-party server (or has anyone tried hooking them together using the iframe-fragment identifier hack? ).

It’s based on a Digg Roundup tool, where the gadget show Digg stories according to user preferences such as topic and whether to go for popular or upcoming stories.


source: ajaxian.com

Current Concerns with Ajax

Our fellow Ajaxian Michael Mahemoff, has written about his current concerns with Ajax.

His main concerns are:

  • Accessibility
  • Documentation: it is getting better for Prototype, Dojo, and the rest
  • Lack of good cross domain option: Are you jealous that Yahoo! can put in a crossdomain.xml in for Pipes and Flash API users can do what they want with it?
  • Cross-browser programming is still painful
  • Comet (HTTP Streaming) is becoming really important, but is still out of reach for the typical Ajax programmer. Too resource-intensive, too many issues to overcome, especially in the server.

Do you agree with these? Do you have other concerns?

Five Ajax Anti-patterns

I have liked Jack Herrington since I read his book Code Generation in Action which is one of the very few pragmatic treatments of the subject (no dumb MDA there!)

Jack has recently written up his thoughts on five Ajax anti-patterns which are:

Polling on a timer when you don't need to

Beware window.setInterval() code. Jack rips apart a simple example, and ends up with a nice usage for autocomplete.

Not inspecting the return results in the callback

Check for if (req.readyState == 4 && req.status == 200 ) {. That being said, I would argue that for almost all cases, you shouldn't be writing directly to XHR. Use a framework. There are a couple out there these days.

Passing complex XML when HTML would be better

"I don't want to send back HTML as I want to be pure". There is a place for talking XML, but often life is easier if you just speak HTML and innerHTML all day.

Passing XML when you should pass JavaScript code

The benefits are clear. In this example, there was a 52% savings in the size of the data blob downloaded to the client by going with the JavaScript language. There's a performance increase, as well. It was 9% faster to read the JavaScript version. While 9% might not seem like a lot, just remember that this was a fairly rudimentary example. Larger blocks of data or more complex structures will require more XML parsing code, while the JavaScript code will remain unchanged.

Doing too much on the server

There is always a balancing act on the client vs. server question. Often more of an art than a science.

What do you think? What are anti-patterns that you see out there?

Monthly Ajaxian Roundup for June, 2007: Airing out the Gears

High Level / Big News

June has been a busy month, and the focus has been around the release of Google Gears, and the Apple iPhone. Both have shaken up the market showing the the future for Ajax is bright and expanding. It is reaching to the desktop, and the phone.

Offline: Gears and AIR

Shortly after Gears was released we saw a flurry of activity that consisted of apps being ported to work offline and libraries being extended to support offline use:

Adobe renamed Apollo to AIR and continues to stay in the news:

Mobile / iPhone

The hype around the iPhone is almost unprecedented. We have tried to keep from joining in, but there has been a lot of interesting work done around Ajax support, and the iPhone is pushing the bounds on Mobile Ajax, just by getting users online. The users will demand more, and vendors will have to step up. We will then have to deliver the applications that they deserve. In the US there isn't the luxury of a top notch network, so we need to deliver it in a smart way too.

Browsers and Standards

With Safari for Windows being announced there has been a lot of talk around browsers. We also got some good news with significant IE memory leaks being fixed.

Ajax Libraries

General JavaScript

GWT

Moo

The FancyUpload with MooTools component is yet another attempt to help with browser based uploads.

Ext

Ext is growing from strength to strength. The team announced Ext 1.1 Beta + Feed Reader 3 Demo, thoughts on 2.0 alpha, a new Ext Accordion Control, and IDE support via Spket IDE: Ext Support. I think July will be an even bigger month.

Prototype

jQuery

Showcases

Some high profile sites and apps have gotten an upgrade such as Apple, CNN, and Google Docs and Spreadsheets Updated.

We also saw useful tools such as an Entity Lookup that helps.

source : ajaxian.com

Bay Partners Announces Facebook AppFactory Seed Program

Salil Deshpande has announced a bold move with the Facebook AppFactory. Bay Partners is announcing The AppFactory, a seed program to fund Facebook application developers via a fast-track process.

This program shows that Bay Partners believes that Facebook, in essence, has become the Social Operating System. And historically the creation of an operating system, or platform, has always led to the creation of an applications market atop that platform. "We think that the Facebook platform is broad enough, technically sound, appealing to businesses, and such a culture-fit for today’s internet ecosystem that it will become a significant and meaningful social operating system platform, if not the dominant one."

We asked Salil, Partner at Bay Partners, a few questions on the news:

What are you investing?

We will award between $25,000 - $250,000 to between 10 and 50 entrepreneurs with a flexible, fast-track process. Because early investments of this size are really bets on people and concepts, Bay Partners looks at the AppFactory as a fantastic relationship starter with tomorrow’s innovators. Because the investments are small, when compared to traditional venture investments, and because the amount of due-diligence that be done on kernels of ideas is often also small, Bay expects entrepreneurs to invest no more than a few hours into the process, and expects to make go no-go decisions in days rather than weeks.

What does this mean for Ajax developers?

With announcements such as this, and Google Gadget Ventures, firms are putting money where their mouth is. We are seeing the birth of web platforms, and these platforms become distribution mechanisms for entrepreneurs. The technical bar is lowered, as it is easy to create applications on top of Facebook, Google Gadgets, and the other platforms out there.

Currently we see simple, almost trivial apps. As time goes on those apps will become more and more sophisticated, and will be a blend of on-platform and off-platform experiences, and will likely involve a lot of Ajax.

What types of applications do you foresee coming from this platform?

We definitely see the open Facebook platform resulting in real, valuable applications. We believe that the Facebook apps of the future will be deep and sophisticated and will strike the right balance between adding value to the Facebook fabric, and having value independent of Facebook. For example, a shipping app that lets Facebook friends transparently use a service such as LicketyShip to physically lend and borrow books listed as favorites from each other, can monetize by charging for the shipping. A stock picking app that lets friends view each others’ stock portfolios could monetize at the point where friends want their own portfolio to reflect a friend’s picks.

And can people really make money from Facebook applications?

Yes! Incorrect conclusions are being drawn from the unmonetizability of some apps that have spread fast on Facebook to date. Some apps are like jokes that get forwarded around by email – and will always be unmonetizable. But meaningful apps will be monetizable just as meaningful web 2.0 websites are monetizable. We are interested in backing entrepreneurs that will be imaginative about what types of applications can be built on Facebook’s Social OS.

Facebook’s user interface is critiqued as being sterile - not very rich , flexible, customizable, or personal. Will this change things?

First off, the Facebook apps we are looking to fund are not necessarily those that focus only on jazzing up the user experience. Having said that, yes, we definitely think that the open API will allow a whole new level and set of rich experiences to be available on Facebook. Now that Facebook has put itself in the platform business, the application developer community is bound to create rich user experiences, whether they are enhancements to Facebook’s current user experience, or alternative user experiences.

What will the other social networks’ APIs look like?

Here’s some bold speculation. By the time other social networks open up their platforms, Facebook may have a sizeable lead in developer mindshare, and in the number of applications on their platform. The other social networks may struggle if they introduce APIs that are not compatible with Facebook’s. We think that the other networks should consider making their API compatible, if not identical, to the FaceBook API. This will allow one-click deploy of apps written for the FaceBook platform, onto the other platforms, thus mitigating Facebook’s lead. And we think they will seriously consider this.

This once again shows what a great time it is for Ajax developers. Everyone wants us!

Best uses of Ajax in Wordpress Plugins

Pete Cashmore has posted about the 30+ AJAX-Powered WordPress Plugins that he things are good.

He has split-up the plugins into two categories, for the blogger, and for the reader which includes:

Blogger

  • AjaxWP - Adds AJAX to all aspects of your WordPress site speeding up the load times.
  • Alexa Rank - Display your Alexa rank with pride.
  • Ajax Comment Preview - Allows readers to preview their comment before submitting.
  • asTunes - Retrieves data from your Audioscrobbler/last.fm profile and posts it as a list on your blog.
  • Codebox - Side scrolling box for displaying code snippets.

Reader

  • AJAX Comments 2.0 - Auto updates the comments page with no full reload, much smoother commenting than the older full reload system.
  • AJAX Google Video Search - Search Google Video without having to leave your favorite blog.
  • AJAX Shoutbox - Realtime conversation with sound to alert of new messages.
  • Cool Weather - Allows visitors to see the weather forecast for any area they define.
  • Currency Converter - Adds a real time currency converter to the page with data pulled from Yahoo Finance.
  • Google AJAX Search - Allows you to set search for just the contents of your site and the web, or another option allows for search of a second site such as your Flickr account.
source : ajaxian.com