Web 2.0 Take the Web Offline to the Desktop 
Taking the Web Offline and On the Desktop
Ryan Stewart Dion Almaer
1
Taking the Web Offline and On the Desktop
Ryan Stewart Dion 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
Landscape
5
Landscape
5
Landscape
5
Landscape
5
Landscape
5
Landscape
5
Landscape
5
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 Branded experiences
Desktop functionality
Data access
Efficient development
7
Adobe AIR Application Stack
HTML
HTML JavaScript XML CSS Flash
Flash
Flex ActionScript XML Audio Video HTML
Cross-OS Application
Integrated Rendering Integrated DOMs & Scripting
PDF
PDF
File System Access
Network Detection
Notifications
Application Update
Drag and Drop
Local Database
...
Adobe AIR APIs
Mac, Windows, Linux & Device OS
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:
Enforcing Secure Application Deploymentt
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
12
HTML and Flash Integration
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.
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 previously selectStmt.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
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: //create the init options var options:NativeWindowInitOptions = new NativeWindowInitOptions(); options.transparent = false; options.systemChrome = NativeWindowSystemChrome.STANDARD; options.type = NativeWindowType.UTILITY; //create the window var newWindow:NativeWindow = new NativeWindow(options); newWindow.title = "My Window"; newWindow.width = 600; newWindow.height = 400; //activate and show the new window newWindow.activate();
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
Database
Embedded 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 database • Search the database
db.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)');
db.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 Tools
Gears in Motion
24
Buxfer
25
Local Server
A mini-web server that groks 200 and 304
26
ResourceStore
Manually 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
ManagedResourceStore
JSON 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 5
Offline in General
“There’s a concept of an application cache. An application cache is a group of resources, the group being identified by a URI (which typically happens to resolve to a manifest). Resources in a cache are either top-level or not; top-level resources are those that are HTML or XML and when parsed with scripting disabled have with the value of the 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 a cache as a known top-level page.”
30
Worker Pool
JavaScript needs threads after all? Brendan!
WorkerPool Browser JavaScript Engine
WorkerPool
window, document
no access
31
32
Jakob Nielsen
Noted Usability Expert Prolific Author
“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.”
32
1
Browser
User Interface
2
Background Thread
33
1
Browser
User Interface
X
2
Background Thread
33
1
Browser
User Interface
Message Passing
2
3
WorkerPool
WorkerPool
34
Use case: Encryption
dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))", "Neuberg", "Brad", "555-34-8962")
35
The Digg Oracle
36
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
I believe...
It takes too long to update the Web
39
Gears: Open Source Update Mechanism for the Web
40
It’s not actually just offline
41
It’s not actually just offline
41
Future
A bleeding edge implementation of HTML 5!
Present
HTML 5
Past
Gears
• Standards • Long term • All browsers • No plugin
• • • • •
Implementation Battle hardened A place for innovation Cross browser Plugin
42
HTML 5
WebKit
43
Location API
Even on a laptop?
// Getting the object var location = google.gears.factory.create( "beta.location", "1.0" ); // Setting up a callback to handle "location changed" events location.onlocationstatechanged = function() { if (this.state == COMPLETE) { SetStatusText("Location accuracy:", this.accuracy); MoveMap(this.latitude, this.longitude); } } location.startLocationUpdates();
44
Audio API
Play and Record
// play var audio = google.gears.factory.create('beta.audio'); audio.src = 'http://blahblahblob.com/sampleaudio.wav'; audio.load(); audio.play(); // record var recorder = google.gears.factory.create('beta.audiorecorder'); recorder.destination =
recorder.autoStream = true; recorder.record(); //asynchronous call
45
Notification API
Growl 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