AdLib, new iPad Javascript Framework for iPad web Development - by Benjamin Spiegel

Posted: April 7th, 2010 by Benjamin Spiegel

DOWNLOAD LINKS
DOWNLOAD UNCOMPRESSED ADLIB.JS and the IPAD INTRO.JS
Done21 reports on the curious discovery of a new Web-based framework used in the iPad that allows web pages to behave in ways much more akin to native applications than previously observed. The framework, dubbed ‘AdLib’ by the report’s author after the name of the file containing the code, was first noticed in action when navigating to Apple’s iPad User Guide using the iPad’s mobile version of Safari. It allows the user guide, which is simply a web page, to be offered in a split-pane view with scrollbars and with a native app-like feel.
What’s particularly interesting is that it does something that shouldn’t really be possible in Mobile Webkit: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS “scroll bars” and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.
Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari’s user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.
The framework, which weighs in at about 4,300 lines of code, permits Mobile Safari to display the native-like user guide simply using HTML, CSS, JavaScript, the basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described by John Gruber last December, although AdLib appears to be a more advanced version that incorporates iPad-specific references.
It remains to be seen whether Apple will release the custom API for use by third-developers, but despite an absence of documentation, the report notes that the framework is “extremely well thought out and complete” and could be of significant utility to developers.

Done21 reports on the curious discovery of a new Web-based framework used in the iPad that allows web pages to behave in ways much more akin to native applications than previously observed. The framework, dubbed ‘AdLib’ by the report’s author after the name of the file containing the code, was first noticed in action when navigating to Apple’s iPad User Guide using the iPad’s mobile version of Safari. It allows the user guide, which is simply a web page, to be offered in a split-pane view with scrollbars and with a native app-like feel.

What’s particularly interesting is that it does something that shouldn’t really be possible in Mobile Webkit: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS “scroll bars” and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.

Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari’s user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.

The framework, which weighs in at about 4,300 lines of code, permits Mobile Safari to display the native-like user guide simply using HTML, CSS, JavaScript, the basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described last December, although AdLib appears to be a more advanced version that incorporates iPad-specific references.

It remains to be seen whether Apple will release the custom API for use by third-developers, but despite an absence of documentation, the report notes that the framework is “extremely well thought out and complete” and could be of significant utility to developers.

What was more interesting is that there was an entire framework running this web application. The framework weighed in at 4,300 lines of code, and was unmistakably an Apple-born API. Every class and constant was prefixed with the letters “AD” and some of the classes include ADTabBarController, ADScrollPane, ADViewController, ADView, ADToolbar, and dozens more.

What does the AD prefix stand for? I don’t know. The framework itself was contained in a file called AdLib-ug-ipad.js, so for the time being let’s call it AdLib. I also appreciate the sense of humor the developers seem to have about the name. The accompanying application code that utilizes the framework is about 1,500 lines and offers a few clues as to how to use the AdLib framework. There is no documentation in the code or anywhere online, and the local variables are shortened to a, b, c, etc… If you want to know more about how it works, take a look at the code linked below.

Is AdLib a framework that Apple plans to release for the public? I sure hope so. The framework looks to be extremely well thought out and complete. Perhaps this will be a framework to support a future release of Dashcode, an application for writing dashboard widgets and Safari/iPhone web apps. Maybe we’ll hear something about it this Thursday at Apple’s event for iPhone OS 4.

8 Comments »

8 Comments on “AdLib, new iPad Javascript Framework for iPad web Development”

  1. 1 Jason said at 3:11 pm on April 7th, 2010:

    Awesome, just downloaded, will check it out

  2. 2 Nichole said at 3:16 pm on April 7th, 2010:

    Thanks!!!

  3. 3 Michael said at 3:33 pm on April 7th, 2010:

    Cool,
    any samples?

  4. 4 AdLib Apples iPad Javascript Framework « Apps Store Online said at 3:40 pm on April 7th, 2010:

    [...] NXFX just wrote a nice Article on AdLib, the JS Framework for iPad web Apps (Apple AdLib) [...]

  5. 5 uman said at 12:08 pm on April 16th, 2010:

    I presume the Ad is to link to iAd which was announced during the iPhone 4.0 event. Given that iAd allows rich, HTML5 video, audio and JavaScripted content. AdLib fits to adapt the web standard content to the platform-specific context…

  6. 6 TouchDome » Blog Archive » The Web App Opportunity said at 9:11 am on April 23rd, 2010:

    [...] Touch input is handled through touch events. And in case you were wondering, yes, Apple developed a similar framework for the documentation of the iPad. So the question is: what can’t a web application do [...]

  7. 7 Bonu Anil said at 6:57 am on June 15th, 2010:

    How to include addlib in my application? Any Help. Thanks in Advance

  8. 8 k0st4s said at 4:00 am on April 5th, 2011:

    By the way, for the record, AdLib (or iAd) is also used in the iPhone 4 user guide.

    help.apple.com/iphone/4/interface/


Leave a Reply