web 2.0 expo ria offline desktop

65
Taking the Web Offline and On the Desktop Ryan Stewart Dion Almaer 1

Upload: dion

Post on 06-May-2015

15.484 views

Category:

Technology


3 download

DESCRIPTION

Dion Almaer (Google) and Ryan Stewart (Adobe) went into detail on how you can build offline and desktop Web applications today, and explain how Gears and AIR are complementary, and are pushing the Web forward in new ways.

TRANSCRIPT

Page 1: Web 2.0 Expo Ria Offline Desktop

Taking the Web Offline and On the Desktop

Ryan StewartDion Almaer

1

Page 2: Web 2.0 Expo Ria Offline Desktop

Taking the Web Offline and On the Desktop

Ryan StewartDion Almaer

.. and the future of the Web too!

1

Page 3: Web 2.0 Expo Ria Offline Desktop

Who are these chumps?2

Page 4: Web 2.0 Expo Ria Offline Desktop

Who are these chumps?2

Page 5: Web 2.0 Expo Ria Offline Desktop

3

Page 6: Web 2.0 Expo Ria Offline Desktop

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

4

Page 7: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 8: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 9: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 10: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 11: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 12: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 13: Web 2.0 Expo Ria Offline Desktop

Landscape5

Page 14: Web 2.0 Expo Ria Offline Desktop

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

Internet applications on the desktop.

6

Page 15: Web 2.0 Expo Ria Offline Desktop

Why RIAs on the Desktop?Persistent connection

Desktop functionality Data access Efficient development

Branded experiences

7

Page 16: Web 2.0 Expo Ria Offline Desktop

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

Page 17: Web 2.0 Expo Ria Offline Desktop

Building AIR Applications

Use existing tools for designers and developers

Free SDK Available for debugging and packaging AIR applications

9

Page 18: Web 2.0 Expo Ria Offline Desktop

Building AIR Applications

Use existing tools for designers and developers

10

Page 19: Web 2.0 Expo Ria Offline Desktop

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

Page 20: Web 2.0 Expo Ria Offline Desktop

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

Page 21: Web 2.0 Expo Ria Offline Desktop

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

Page 22: Web 2.0 Expo Ria Offline Desktop

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

Page 23: Web 2.0 Expo Ria Offline Desktop

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

Page 24: Web 2.0 Expo Ria Offline Desktop

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

Page 25: Web 2.0 Expo Ria Offline Desktop

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

Page 26: Web 2.0 Expo Ria Offline Desktop

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

Page 27: Web 2.0 Expo Ria Offline Desktop

What does Offline mean?

19

Page 28: Web 2.0 Expo Ria Offline Desktop

20

Page 29: Web 2.0 Expo Ria Offline Desktop

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

Page 30: Web 2.0 Expo Ria Offline Desktop

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

Page 31: Web 2.0 Expo Ria Offline Desktop

Database Tools

23

Page 32: Web 2.0 Expo Ria Offline Desktop

Database ToolsGears in Motion

24

Page 33: Web 2.0 Expo Ria Offline Desktop

Buxfer25

Page 34: Web 2.0 Expo Ria Offline Desktop

Local ServerA mini-web server that groks 200 and 304

26

Page 35: Web 2.0 Expo Ria Offline Desktop

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

Page 36: Web 2.0 Expo Ria Offline Desktop

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

Page 37: Web 2.0 Expo Ria Offline Desktop

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

Page 38: Web 2.0 Expo Ria Offline Desktop

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

Page 39: Web 2.0 Expo Ria Offline Desktop

Worker PoolJavaScript needs threads after all? Brendan!

Browser JavaScript Engine

WorkerPool

WorkerPool

window, document no access

31

Page 40: Web 2.0 Expo Ria Offline Desktop

32

Page 41: Web 2.0 Expo Ria Offline Desktop

“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

Page 42: Web 2.0 Expo Ria Offline Desktop

User Interface

BackgroundThread

2

Browser

1

33

Page 43: Web 2.0 Expo Ria Offline Desktop

User Interface

BackgroundThread

2

X

Browser

1

33

Page 44: Web 2.0 Expo Ria Offline Desktop

User Interface

WorkerPool

Browser

1

WorkerPool

2 3

Message Passing

34

Page 45: Web 2.0 Expo Ria Offline Desktop

Use case: Encryption

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

"555-34-8962")

35

Page 46: Web 2.0 Expo Ria Offline Desktop

The Digg Oracle36

Page 47: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 48: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 49: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 50: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 51: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 52: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 53: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 54: Web 2.0 Expo Ria Offline Desktop

The Ajax Universe Expanding

37

Page 55: Web 2.0 Expo Ria Offline Desktop

38

Page 56: Web 2.0 Expo Ria Offline Desktop

It takes too long to update the Web

I believe...

39

Page 57: Web 2.0 Expo Ria Offline Desktop

Gears: Open Source Update Mechanism for the Web

40

Page 58: Web 2.0 Expo Ria Offline Desktop

It’s not actually just offline

41

Page 59: Web 2.0 Expo Ria Offline Desktop

It’s not actually just offline

41

Page 60: Web 2.0 Expo Ria Offline Desktop

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

Page 61: Web 2.0 Expo Ria Offline Desktop

HTML 5 WebKit

43

Page 62: Web 2.0 Expo Ria Offline Desktop

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

Page 63: Web 2.0 Expo Ria Offline Desktop

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

Page 64: Web 2.0 Expo Ria Offline Desktop

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