web 2.0 expo ria offline desktop

Taking the Web Offline and On the Desktop

Ryan StewartDion Almaer

1

Taking the Web Offline and On the Desktop

Ryan StewartDion Almaer

.. and the future of the Web too!

1

Who are these chumps?2

Who are these chumps?2

3

The Web is the platform of today, and of the future

4

Landscape5

Landscape5

Landscape5

Landscape5

Landscape5

Landscape5

Landscape5

Adobe AIR enables web developers to use existing technologies to build and deploy rich

Internet applications on the desktop.

6

Why RIAs on the Desktop?Persistent connection

Desktop functionality Data access Efficient development

Branded experiences

7

Cross-OS ApplicationIntegratedRendering

Integrated DOMs& Scripting

Flash

FlexActionScriptXMLAudioVideo

HTML

PDF

HTML

HTMLJavaScriptXMLCSS

Flash

PDF

Adobe AIR APIs

Mac, Windows, Linux & Device OS

File SystemAccess

NetworkDetection

Notifications ApplicationUpdate

Drag andDrop

LocalDatabase

...

Adobe AIR Application Stack

8

Building AIR Applications

Use existing tools for designers and developers

Free SDK Available for debugging and packaging AIR applications

9

Building AIR Applications

Use existing tools for designers and developers

10

Universal Application Installer

.air installer contains all application files

Application files are cross platform web technologies SWF, HTML, PNG, XML, etc.

The same .air file installs Windows, Macintosh, and Linux

The installation process creates OS specific executables that allow the AIR application to behave like a native application

11

Privileges: AIR Applications have full desktop application privileges

read/write files, background execution, full network access

Administrator can limit application install and other sensitive capabilities

Installation: All applications must be signed by the creator

Mandatory, trusted install process

Development: Separation of application and non-application content

Enhanced HTML security model to limit injection

Minimum-privilege and safe-by-default APIs to decrease developer risk

Encrypted Local Storage to managing secrets like passwords or PINs

Enforcing Secure Application Deploymentt

12

Integrated rendering pipeline Filters

Visual effects

Cross scripting between HTML and Flash Flash classes can be used directly from JavaScript

JavaScript classes can be used directly from Flash

AIRAliases.js

Abstracts out “runtime.flash.*” references

Can be modified, added to, etc.

HTML and Flash Integration

13

WebKit HTML Engine

Open Source Engine

Web class HTML engine with full Ajax support and web compatibility

Used in Safari, KHTML

Benefits of WebKit Open Source

Proven

Small

Existing Mobile/Device Support

14

Local Database SQLite (http://www.sqlite.org)

Supports ACID transactions

Zero-configuration allowing for embedded solution

SQL-92

Complete database is a single file on disk

Supports terabyte-sized databases

Provide synchronous and asynchronous

var selectStmt:SQLStatement = new SQLStatement();

// A SQLConnection named "conn" has been created previouslyselectStmt.sqlConnection = conn;selectStmt.text = "SELECT itemId, itemName, price FROM products";

selectStmt.addEventListener(SQLEvent.RESULT, resultHandler);selectStmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);selectStmt.execute();

15

Custom Chrome, Transparent Applications, and Native Windows

Window Chrome Use native OS window chrome

Use custom chrome implemented by application

Transparent Transparent region can choose to receive or pass through

mouse clicks

Design windows of any shape

Enables complete control and branding of user interface

The developer can provide custom window controls

16

Custom Chrome, Transparent Applications, and Native Windows

//create the init optionsvar options:NativeWindowInitOptions = new NativeWindowInitOptions();options.transparent = false;options.systemChrome = NativeWindowSystemChrome.STANDARD;options.type = NativeWindowType.UTILITY;

//create the windowvar newWindow:NativeWindow = new NativeWindow(options);newWindow.title = "My Window";newWindow.width = 600;newWindow.height = 400;  //activate and show the new windownewWindow.activate();

You create native windows using the NativeWindow class. The settings for the window are contained in an instance of the NativeWindowInitOptions class as shown below:

17

Local File Access Create and delete files and directories

Copy and move files and directories

List the content of directories

Get system information on files and directories

Read and write text or binary files Text, XML

Video, Audio, Documents

Serialize and deserialize ActionScript objects

Register to handle files based on file extension

Support Synchronous and Asynchronous access

Encrypted Local Storage

18

What does Offline mean?

19

20

DatabaseEmbedded using SQLite

Contributed Full Text Search

var db = google.gears.factory.create('beta.database', '1.0');db.open('database-demo');

db.execute('create table if not exists Demo (Phrase varchar(255), Timestamp int)');db.execute('insert into Demo values (?, ?)', [phrase, currTime]);

21

Full Text Search

• Create the databasedb.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)');

• Search the databasedb.execute('SELECT dish FROM recipe WHERE recipe MATCH ?', ['tomatoes']);

Fun queries: dish:stew tomatoes Find rows with 'stew' in the dish field, and 'tomatoes' in any field.

22

Database Tools

23

Database ToolsGears in Motion

24

Buxfer25

Local ServerA mini-web server that groks 200 and 304

26

ResourceStoreManually Capturing

var pageFiles = [ location.pathname, 'gears_base.js', '../scripts/gears_db.js', ‘foo.html’];

try { localServer = google.gears.factory.create('beta.localserver', '1.0');} catch (e) { alert('Could not create local server: ' + e.message); return;}

var store = localServer.openStore(this.storeName) || localServer.createStore(this.storeName);

store.capture(pageFiles, function(url, success, captureId) { console.log(url + ' capture ' + (success ? 'succeeded' : 'failed'));});

27

ManagedResourceStore Capture entire applications

• List application resources in a separate manifest

• Gears captures and updates the list atomically

• Gears auto-updates automatically on each view (within reason)

• Supports multiple users per application

28

ManagedResourceStoreJSON Me

{ // version of the manifest file format "betaManifestVersion": 1,

// version of the set of resources described in this manifest file "version": "my_version_string",

// optional // If the store specifies a requiredCookie, when a request would hit // an entry contained in the manifest except the requiredCookie is // not present, the local server responds with a redirect to this URL. "redirectUrl": "login.html",

// URLs to be cached (URLs are given relative to the manifest URL) "entries": [ { "url": "main.html", "src": "main_offline.html" }, { "url": ".", "redirect": "main.html" }, { "url": "main.js" } { "url": "formHandler.html", "ignoreQuery": true }, ]}

29

HTML 5Offline in General

<html application=”manifest-of-urls.txt”>

<html application>“There’s a concept of an application cache. An application cache is a groupof resources, the group being identified by a URI (which typically happensto resolve to a manifest). Resources in a cache are either top-level ornot; top-level resources are those that are HTML or XML and when parsedwith scripting disabled have with the value ofthe attribute pointing to the same URI as identifies the cache.

When you visit a page you first check to see if you have that page in acache as a known top-level page.”

30

Worker PoolJavaScript needs threads after all? Brendan!

Browser JavaScript Engine

WorkerPool

WorkerPool

window, document no access

31

32

“The basic advice regarding response times has been about the same for thirty years:

“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.

“1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.”

Jakob NielsenNoted Usability ExpertProlific Author

32

User Interface

BackgroundThread

2

Browser

1

33

User Interface

BackgroundThread

2

X

Browser

1

33

User Interface

WorkerPool

Browser

1

WorkerPool

2 3

Message Passing

34

Use case: Encryption

dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))", "Neuberg", "Brad",

"555-34-8962")

35

The Digg Oracle36

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

The Ajax Universe Expanding

37

38

It takes too long to update the Web

I believe...

39

Gears: Open Source Update Mechanism for the Web

40

It’s not actually just offline

41

It’s not actually just offline

41

HTML 5 Gears

• Standards• Long term• All browsers• No plugin

• Implementation• Battle hardened• A place for innovation• Cross browser• Plugin

Past

Present A bleeding edge implementation

of HTML 5!

Future

42

HTML 5 WebKit

43

Location APIEven on a laptop?

// Getting the objectvar location = google.gears.factory.create( "beta.location", "1.0" ); // Setting up a callback to handle "location changed" eventslocation.onlocationstatechanged = function() { if (this.state == COMPLETE) { SetStatusText("Location accuracy:", this.accuracy); MoveMap(this.latitude, this.longitude); }}

location.startLocationUpdates();

44

Audio APIPlay and Record

// playvar audio = google.gears.factory.create('beta.audio');audio.src = 'http://blahblahblob.com/sampleaudio.wav';audio.load();audio.play();

// recordvar recorder = google.gears.factory.create('beta.audiorecorder');recorder.destination = <http post url>recorder.autoStream = true;recorder.record(); //asynchronous call

45

Notification APIGrowl for the Web

var notifier = google.gears.factory.create('beta.notifier', '1.0'); notifier.notify({ application: "My App", title: 'warning', description: 'some text', priority: 2, sticky: 'True', password: 'Really Secure',});

46

Got Beta?dion@almaer.com

twitter.com/dalmaer

47