Steve also put together a screencast that shows porting from iPhone to webOS in 10 minutes (as well as sharing tips and tricks of PhoneGap along the way):
If I put my Palm hat on, you may have heard about our $1M dollar Hot Apps program. It closes out at the end of June, but we have seen good apps rising in the ranks quickly. One recent example is Dropboxify. You still have time to get an application in the running for a decent prize. If you have a PhoneGap app already, then the 10 minutes are surely worth while ;)
John Gruber has spotted a library for iPhone web apps, from none other than Apple. This mysterious library, called PastryKit, seems to have flown under the radar as a Google search reveals precious little on it. In similar vein to other efforts, Apple’s library provides support for native-feel websites – websites that run in Mobile Safari, but feel like native apps. (That’s the objective anyway; some look-and-feel emulators are “good enough”, while others get stuck in the uncanny valley).
Now with the same site in regular Safari (on your Mac/PC), open up the Develop Menu (if it’s not there, enable it in Preference|Advanced). Choose User Agent > Mobile Safari 3.0 (or probably any other version number). And now you can see it in your browser. From Develop Menu, Web Inspector will let you view the script.
PastryKit accomplishes all three of the aforementioned things — hiding the MobileSafari address bar, providing fixed-position toolbars, and providing scrolling with momentum — by disabling regular scrolling and setting up its own view hierarchy and implementing its own scrolling.
The whole question of native iPhone apps was a hot topic last month after PPK whipped up a storm on the question of web apps replacing iPhone apps. The really interesting thing here is Apple’s stance. They launched the iPhone with web intended to be the platform for 3rd party apps, then switched over to native apps and haven’t done much to facilitate native-style web apps since then. Is a change coming? As Gruber puts it:
The $64,000 question, though, is whether PastryKit is something Apple intends (or that a team within Apple hopes) to ship publicly. It seems like a lot of effort to build a framework this rich just for this iPhone User Guide, so I’m hopeful the answer is yes. Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?
Medialets ran the SunSpider test suite in the following environments:
Safari 4.0.1 on a 2.0 GHz Intel Core 2 Duo White MacBook.
The MacBook results were used as a baseline for relative comparisons.
Mobile Safari on the iPhone 3G with iPhone OS v2.2.1
Mobile Safari on the iPhone 3G with iPhone OS v3.0
Mobile Safari on the iPhone 3GS with iPhone OS v3.0
The “Browser” app on the T-Mobile G1 with Android OS v1.5 (Cupcake)
The “Web” app on the Palm Pre with Web OS v1.0.2
Each device was fully restored and rebooted immediately before running the test suite. Every attempt was made to assure that no atypical background tasks were executing while the tests were running. The SunSpider tests automatically run five times sequentially and the mean average from all five tests are reported. Network speed and latency have no effect on the results of the test.
We all know to beware of benchmarks, but it does show off how powerful these devices are getting!
A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).
Once we have defined an animation, we apply it using -webkit-animation-name and related properties.
We’re documenting these enhancements on webkit.org and are proposing the specifications to standards bodies. Note that since they are currently features specific to WebKit they are implemented with a -webkit- prefix, although the specifications do not use the prefix.
Although, I am sure the SMIL folk could be a little miffed?
This is natural fodder for Ajax frameworks that handle animation now, to be able to use under the hood when available.
You should read this documentation if you are a web developer who wants to store data locally on a user’s computer in amounts beyond what can reasonably be stored in an HTTP cookie.
Michael Nordman of Google asked “Is this stuff built into shipping Safari or iPhone browsers yet?”
David Kilzer replied “This feature shipped with iPhone OS 2.1. When you use “Add to Home Screen” from the “+” button on Safari for iPhone, a web application with a manifest defined (per the HTML5 spec) will be saved with any cached resources. Note that the manifest file *must* be served with the correct MIME type for this to work.
There is no shipping version of Safari for Mac OS X or Windows that supports this feature yet.”
Now it works on the top of JSCocoa. It’s very helpful while inspecting the hierarchy of the view tree or size of the views etc.
Very cool stuff as you can run code on the fly and see it all change in the emulator. His article explains how you set it up, and gives you some fun examples.
Why you may want to do it
WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.
It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.
For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.
Now that the NDA has been released, book publishers are finally able to get out their wares. Christopher Allen and Shannon Appelcline have written iPhone in Action, and have kindly given the Ajaxian community free downloads of a couple of the early access chapters:
I hope to see books that focus on what you can do with the Web APIs too of course ;)
This article is based on iPhone in Action, to be published January 2009. It is being reproduced here by permission from Manning Publications. Manning early access books and ebooks are sold exclusively through Manning. Visit the book’s page for more information.
In thinking of an interesting test, I’ve created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it’s not really practical in this form.
So, I went about knocking up a very basic test version (try it on your iPhone). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action!
I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?