What’s in Leopard for Designers (2): WebKit & Safari

This series exploring future design implications of Leopard technologies started with What’s in Leopard for Designers (1): Core Animation. Today, we’ll look at various strategic directions ushered in by WebKit and Safari 3.0.

safari-win.png

When Apple announced Safari on Windows, it caught many developers and pundits unawares:

“For Windows users, the browser market is already far too crowded — who needs anything other than Internet Explorer or Firefox? Safari is one browser too many.”

For Apple, the significant bit in Safari is WebKit. Developed by Apple and based on KDE project’s layout engine KHTML and JavaScript engine KJS, WebKit is used by not only Safari in Leopard, but also pretty much by anything having to do with HTML including Dashboard, Mail and countless third-party applications.

WebKit as decoy

Traditionally, web designers and developers have targeted IE first and then Firefox, but seldom spent much additional time covering other browsers. Apple’s strategic goal is to establish WebKit as a main browsing engine alongside IE. The introduction of Safari on Windows was the first leg of that operation, iPhone is the second. In a way, Safari is Apple’s trojan horse into the developer community dressed up as an invitation to create web apps for the popular iPhone.

Taking a page out of popular Firefox plug-ins, Safari now offers an expanded WebKit Inspector, a sophisticated tool to navigate and debug web app development:

webinspector.png

What QuickTime is to iTunes, WebKit is to Safari. Wherever OS X goes so goes WebKit: today on Macs, iPhones and iPods, perhaps tomorrow on AppleTV or other platforms yet to come. This affords Apple a strategic ability to move its technologies across platforms, if it so chooses. For example, it would not be a difficult task to take WebKit based Dashboard widgets in Leopard and move them not only to the iPhone and iPod touch but also to Windows to better compete against Vista-only Microsofts Gadgets.

Weaving an x-platform web

nokia-webkit.png

Having an open source rendering engine like WebKit has advantages. Apple is certainly not the only company using WebKit. Its chief rivals in phones and applications also base their browsers on WebKit. Nokia’s higher-end S60 platform is based on S60WebKit. Adobe’s new AIR platform for creating rich-media online applications that can also run offline on the desktop uses WebKit to render HTML and run JavaScript. Even popular cross-platform framework developer Trolltech has announced that they are including WebKit in their upcoming Qt 4.4.

Who’s afraid of the browser?

Unlike Microsoft (which sat on IE for half a decade with no significant updates after vanquishing Netscape) Apple is not afraid of the web browser. In fact, until the native SDK arrives next year the only legitimate app development on the iPhone is through Safari. For Web 2.0 fans this has been a great step forward to move applications from walled gardens like Active X on IE to open platforms using familiar HTML and Ajax.

By next Spring there will be downloadable native apps running on the iPhone, but there will still be an order of magnitude more Web 2.0 developers cranking out Safari-based apps that run wherever WebKit can be found: on PCs, Macs, iPhones, iPods, and other devices/apps from Apple, Nokia and Adobe. Cloud-based applications that rely on web processing and storage (like Facebook, Salesforce or Google Apps) will find a very welcoming and fully-functional home on WebKit-based browsers.

What’s so great about WebKit?

canvas-graph.png

For starters, the <canvas> element. <canvas> defines a region of an HTML page between <canvas></canvas> to be scriptable and capable of dynamically rendering a gamut of bitmap drawing functions. If you played with Dashboard widgets with flips, animations, graphs, games and other 2D effects, you’ve already seen <canvas> in action. Apple introduced <canvas> for WebKit and now it’s also part of Safari, Dashboard, as well as Mozilla, Firefox, Opera and even IE via a workaround from Google.

<canvas> is part of HTML5, a web application platform from WHATWG. It is the primary agent enabling rich presentations in HTML, inching it closer to Adobe’s Flash and Microsoft’s Silverlight plug-ins. Hardware accelerated <canvas> regions for games or 3D can’t be that far off. Open source, multi-platform and without plug-ins!

Cookies on steroids

A knock on browser-based application design and development has always been the browser’s inability to dynamically store data. For a decade, the Netscape-introduced cookies have done the yeoman’s job keeping session state, personalization data, authentication IDs, and so on. But cookies are inherently limited, fragile and cumbersome to work with. When a browser is disconnected from network connectivity, it has no way to interact with data sources. This has critically impeded online application design and development, opening opportunities for plug-in based RIA platforms like Adobe Flash or Microsoft Silverlight.

But what if the web browser had a persistence layer, where data could be locally stored not in miniscule bites of cookies, but in a proper relational database?

Welcome to HTML5 client-side database storage! The emerging API allows the browser to store structured data using plain old SQL. Further, Apple has already integrated this into the Web Inspector, allowing the developer to see contents of a database used by the browser page, run arbitrary queries against it, and navigate it like a DOM tree:

webkit-data.png

So now, imagine if you will, the Safari browser in iPhone working without disruption with locally cacheable data even when not connected via EDGE or Wi-Fi. Or Safari in Leopard being able to do all kinds of sorting and manipulations on a data table in Google Docs even when a laptop is not connected to a network.

On Leopard, WebKit uses the already bundled SQLite database for storage. Both Google Gears and Adobe Flex also use embedded SQLite database engines for local storage of data.

Fortune cookie

What then is WebKit/Safari 3.0 foretelling us about design and development for the next 2-5 years? Once left for dead by the proponents of RIAs, the web browser is in ascendency, endowed with rich 2D effects capabilities, Ajax, embedded local data storage and capable of displaying applications across OSes and devices on an open source platform. As Moore’s law helps JavaScript and rendering catchup with native OS speeds, the browser closes the gap between web and desktop paradigms.

star

Previous article:

What’s in Leopard for Designers (1): Core Animation

Next, we’ll take a strategic look at other Leopard technologies that will affect designers, including virtualization, Time Machine, resolution independent UIs, widgets and others. Please come back or subscribe to the RSS feed.

9 thoughts on “What’s in Leopard for Designers (2): WebKit & Safari

  1. Pingback: WebKit HTML5 wrapper for Google Gears « counternotions

  2. SalesForce.com (CRM ticker symbol), the webs largest purveyor of interactive business software online, has just offically made a joint agreement to work with Apple undoubtly to exploit the web tools outlined here.

    I invested in CRM (abbreviation for the field of Customer Relations Management) because its CEO immediately recognized the value of Safari running on the iPhone. CRM is already a runaway success in software as an online service (SOS). One will recognize a lot of their named business clients. Webkit will only help cement its success.

    PS. I agree with the comment on Firefox. Safari can be maddeningly slow sometimes. So I would welcome Mozilla’s competition in developing the Web 2 world online. Anybody know where they are developmentally speaking on this?

  3. “I’m a Mac running Firefox… I really dislike Safari >_<. Annoying simplistic browser in my opinion.”

    I somewhat prefer Firefox, but I use both. Except I had big problems with FF 2 on my wifes’ MacBook 10.4.8. Slow, crashing. Any idea whether the Mozilla team has addressed these FF2 for Intel issues? Have you looked at the most recent Camino?

  4. Great content, iHope webkit does some great things, iHeard that Apple is going to keep releasing new version of their OS X. Whoopee, if it is anything like iSee leopard is, this 64-bit architecture thing could really be a quantum leap in personal computing, b2b business, and Apple, Inc.

  5. “Yes, Microsoft has been sleeping after killing Netscape, I hope Apple takes advantage of it!”

    Dead things persist a long time in Zombie-land (Enterprise IT). Look at Outlook/Exchange. Not a tenth as useful or user friendly as GMail.

  6. Be wary of making the assumption that a feature added this week to WebKit will show up in Leopard any time soon. It takes a lot of time and testing before features make it from initial development to the consumers computer.

  7. Pingback: Ghillie Suits » What’s in Leopard for Designers (2): WebKit & Safari

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s