Offline capable web applications with Google Gears and Dojo Offline

55
Offline Web Applications with Dojo Offline & Google Gears "Hello? No... I'm sorry... I'm offline at the moment...!"

description

Offline capable web applications with Dojo Offline and Google Gears. And a short introduction to Comet. By Tobias Günther / puremedia.

Transcript of Offline capable web applications with Google Gears and Dojo Offline

Page 1: Offline capable web applications with Google Gears and Dojo Offline

Offline Web Applications with Dojo Offline & Google Gears

"Hello? No... I'm sorry...I'm offline at the moment...!"

Page 2: Offline capable web applications with Google Gears and Dojo Offline

www.puremedia-online.de

• Internet-only company in Stuttgart

• AJAX / JavaScript

• Ruby on Rails

• TYPO3 incl. extension development

puremedia t 0700 / 0078 0079 [email protected]. 37 m 0179 / 90 16 016 www.puremedia-online.de70178 Stuttgart f 0700 / 0078 0079

Page 3: Offline capable web applications with Google Gears and Dojo Offline

• Internet-only company in Stuttgart

• AJAX / JavaScript

• Ruby on Rails

• TYPO3 incl. extension development

Customers include...

www.puremedia-online.de

Page 4: Offline capable web applications with Google Gears and Dojo Offline

Contents

• Offline??? Browser based Applications!

• Use Cases / Examples

• Offline Tools

• Google Gears

• Architecture

• Components

• Dojo Offline

• Comet

Page 5: Offline capable web applications with Google Gears and Dojo Offline

"User interface and usabilityin the browser are bad."

Page 6: Offline capable web applications with Google Gears and Dojo Offline

Offline??? Browser based Applications!

AJAX.

Page 7: Offline capable web applications with Google Gears and Dojo Offline

"You can only really use the browser when you're connected to the internet."

Page 8: Offline capable web applications with Google Gears and Dojo Offline

Offline??? Browser based Applications!

Offline capable Web Applications.

Page 9: Offline capable web applications with Google Gears and Dojo Offline

Offline??? Browser based Applications!

Offline closes one of the last gaps between web and desktop apps!

Page 10: Offline capable web applications with Google Gears and Dojo Offline

Use Cases / Examples

Use Cases

• Internet connection is...• spotty / unstable / slow• not existing

• on the road• airplane / train / bus• at the customer's

Page 11: Offline capable web applications with Google Gears and Dojo Offline

Use Cases / Examples

Examples

• Offline News Reader [Google Reader]• Notepad [GearPad]• Task list [Remember The Milk]• Email Client• CRM• Projectmanagement-Tools• Calendar• .........

Page 12: Offline capable web applications with Google Gears and Dojo Offline

Offline Tools

Tools [in the past] - (Offline is not brand new)

• Dojo Storage• Derby / JavaDB• Zimbra (Derby-based)

Page 13: Offline capable web applications with Google Gears and Dojo Offline

Offline Tools

Tools [today]

• Adobe AIR (früher: Apollo)

• Joyent Slingshot (Ruby on Rails)

• Google Gears

Page 14: Offline capable web applications with Google Gears and Dojo Offline

Offline Tools

Tools [coming soon]

• Firefox 3• Webkit (Safari)• HTML5 Working Draft of the WHATWG ("Client-side database

storage")

Page 15: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Basics

What is Google Gears?

• Browser-Plugin• Firefox• Internet Explorer• maybe soon: Opera and Safari

Page 16: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Basics

What does it cost? Under which license?

• License• OpenSource (New BSD license)

Page 17: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Differences

What distinguishes Gears from other offline tools?

• App stays completely in the browser (no extra app / start up)• Google's AJAX background -- developers use well-known technologies

(JS / CSS / HTML), extended by a few now JS-API-calls• lightweight / hardly no installation necessary• open framework• "offline only" (no goodies)• ...it's from Google!

Page 18: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Components

LocalServerLocal URL- / resource-cache

DatabaseLocal relational DB (SQLite)

Workerpoolputs time-intensive processes in the background

Page 19: Offline capable web applications with Google Gears and Dojo Offline

Google Gears

Flow in ONLINE mode

WebserverLocalserver

InternetLocalServer

DB(SQLite)

Client

Webserver

DB

Server

Page 20: Offline capable web applications with Google Gears and Dojo Offline

Google Gears

Flow in ONLINE mode

WebserverLocalserver

InternetLocalServer

DB(SQLite)

Client

Webserver

DB

Server

Page 21: Offline capable web applications with Google Gears and Dojo Offline

Google Gears

Flow in OFFLINE mode

WebserverLocalserver

InternetLocalServer

DB(SQLite)

Client

Webserver

DB

Server

Page 22: Offline capable web applications with Google Gears and Dojo Offline

Google Gears

Flow in OFFLINE mode

WebserverLocalserver

InternetLocalServer

DB(SQLite)

Client

Webserver

DB

Server

Page 23: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Local Server

Local Server

• Intercepts requests to previously defined resources (CSS, HTML, JS...)...• ...and serves them from the local cache ("Resource Store")...• ...regardless of offline/online mode.

• Resources are kept in a "Resource Store" ("URL-Container")• Resource Store (manual update)• Managed Resource Store (automatic update)

Page 24: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Database

SQLite

• complete relational DB (Transactions, Primary keys, Views, Full-text search...)

• multiple DBs per App possible• sandbox / same origin policy

• ATTACH / DETACH not available• bind parameter

• execute() with bind parameters protects from SQL Injections

Page 25: Offline capable web applications with Google Gears and Dojo Offline

Google Gears

Local data storage

Page 26: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Workerpool

JavaScript in the background

• time-intensive processes can be run in the background• UI stays responsive / browser doesn't block• no warning dialog "Unresponsive Script"

• Restrictions:• no access to the DOM• no access to XMLHttpRequest (see Gears 0.2)

• Use case: Synchronization

Page 27: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Security

Security in Gears

• same-origin policy• access only your own DB• LocalServer can only cache resources in its own origin

• User opt-in before Gears can run• Data is stored in user profile of OS• Bind parameter protects from SQL-Injection attacks

Page 28: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Architecture

Architecture - modal

• online? Communication with the server• offline? Communication with local Gears components

• Pros• easy to implement

• Cons• User must explicitly and manually change modes (Button "Go offline")• If user forgets to click "take me offline"...

Page 29: Offline capable web applications with Google Gears and Dojo Offline

Google Gears - Architecture

Architecture - modeless

• online? Almost only for syncing (continuously)• offline? Always being assumed

• Pros• User doesn't have to switch modes by hand• Data is always available• Performance is better

• Cons• more difficult to implement...• ...mostly because of sync in background

Page 30: Offline capable web applications with Google Gears and Dojo Offline

"How do I know if the useris currently online or offline?"

Page 31: Offline capable web applications with Google Gears and Dojo Offline

"How can I do easy synchronizationwithout reinventing the wheel?"

Page 32: Offline capable web applications with Google Gears and Dojo Offline

Dojo Offline

JavaScript toolbox for Gears

• "Offline Widget" (on/offline detection)• slurp() finds used resources• Data storage +

• encryption• alternative storage

• Sync framework

Page 33: Offline capable web applications with Google Gears and Dojo Offline

Dojo Offline

Data storage

• Dojo SQL• sits on top of Gears' SQLite-implementation• pro: query-results directly available als JS-objects!• encryption

• Dojo Storage• simple Hash-Table (key/value-pairs)• pros: quick & easy

Page 34: Offline capable web applications with Google Gears and Dojo Offline

Dojo Offline

Synchronization

• automatic syncing when...• ...app starts / reloads• ...when going back online

• manual sync possible

Page 35: Offline capable web applications with Google Gears and Dojo Offline

Offline

Resume

• Offline closes one of the last gaps between web and desktop apps• Use cases are limited - but in some cases very interesting • Offline capability is not a byproduct

Page 36: Offline capable web applications with Google Gears and Dojo Offline

C: "What's the news?" - S: "Nothing."C: "What's the news?" - S: "Nothing!"C: "What's the news?" - S: "Nothing!!!"C: "What's the news?" - S: "NOTHING!!!"C: "What's the news?" - S: "Data. Listen!"

Page 37: Offline capable web applications with Google Gears and Dojo Offline

Comet

Polling

• Using polling in AJAX means:• "The client (JavaScript / AJAX) asks...• the server...• in certain intervals...• if there's new data."

Page 38: Offline capable web applications with Google Gears and Dojo Offline

Comet

The problem with polling

a) intervals are too short most of the request are useless wasted bandwidth / high server load

b) intervals are too long UI gets out of date displayed data is out-dated

Page 39: Offline capable web applications with Google Gears and Dojo Offline

Comet

The bottom line

• why not let the server inform the client [PUSH] instead of

• having the client permanently ask [PULL]

Page 40: Offline capable web applications with Google Gears and Dojo Offline

Comet

How does a traditional request work? [simplified...]

Page 41: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a traditional request work?

1. Client makes a request to the server. A connection is opened.

Client / Browser

Server

Page 42: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a traditional request work?

1. Client makes a request to the server. A connection is opened.2. Server answers.

Client / Browser

Server

Page 43: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a traditional request work?

1. Client makes a request to the server. A connection is opened.2. Server answers.3. Connection is closed.

Client / Browser

Server

Page 44: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a traditional request work?

1. Client makes a request to the server. A connection is opened.2. Server answers.3. Connection is closed.

Client / Browser

Server

Page 45: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a Comet request work?

1. Client makes a request to the server. A connection is opened.

Client / Browser

Server

Page 46: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a Comet request work?

1. Client makes a request to the server. A connection is opened.2. Maybe there's no new data yet, but the connection is kept open!

Client / Browser

Server

Page 47: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a Comet request work?

1. Client makes a request to the server. A connection is opened.2. Maybe there's no new data yet, but the connection is kept open!3. The connection is kept open...

Client / Browser

Server

Page 48: Offline capable web applications with Google Gears and Dojo Offline

WebserverLocalserver

Comet

How does a Comet request work?

1. Client makes a request to the server. A connection is opened.2. Maybe there's no new data yet, but the connection is kept open!3. The connection is kept open...4. News on the server! The server answers! The connection is closed or is

even kept open!

Client / Browser

Server

Page 49: Offline capable web applications with Google Gears and Dojo Offline

Comet

Central idea with Comet

• "long-lived HTTP-Connections"

Page 50: Offline capable web applications with Google Gears and Dojo Offline

Comet

Comet

• PUSH instead of PULL• Low Latency• Low Bandwidth• UI not getting out-dated / always up-to-date

Page 51: Offline capable web applications with Google Gears and Dojo Offline

"Is Comet »Web 3.0«??"

Page 52: Offline capable web applications with Google Gears and Dojo Offline

Comet

1. Problems with Comet

• one thread on the server per connection...long-lived connection = many threadsmany threads = many resources (limited number of threads!)no more resources / threads allowed = no more new connections

• Firewalls: close connections that are open for "too long"• Proxies: can buffer pushed data - and therefore deliver late• Browser: one browser can only open 2 connections to the same server

Page 53: Offline capable web applications with Google Gears and Dojo Offline

Comet

1. Problems with Comet

Solutions are on the way:• Jetty Continuations• Cometd• different Hostnames

Page 54: Offline capable web applications with Google Gears and Dojo Offline

Comet

2. Is Comet necessary???

• For the majority of use cases AJAX / polling is sufficient!

• Use Cases for Comet• multi-user / collaborative applications

• e.g. collaboratively working on a document; chatting• applications with real-time data

• e.g. stock prices, chats

Page 55: Offline capable web applications with Google Gears and Dojo Offline

Offline Web Applications with Dojo Offline & Google Gears

puremedia t 0700 / 0078 0079 [email protected]. 37 m 0179 / 90 16 016 www.puremedia-online.de70178 Stuttgart f 0700 / 0078 0079