Make web apps work offline Offline and Desktop Web Applications www.web2os.com Rhys Jones Barcamp London 2 February 17th 2007

Why? 6:00am Wales - London Train journeys No Wifi Patchy 3G I use Google Office Web Apps mail, calendar, docs & spreadsheets no use when offline… what are my options?

6:00am Wales - London Train journeys

No Wifi

Patchy 3G

I use Google Office Web Apps

mail, calendar, docs & spreadsheets

no use when offline…

what are my options?

Can’t you already do this? iCal + Google Calendar iMail + Gmail POP3 MS Office + ?

iCal + Google Calendar

iMail + Gmail POP3

MS Office + ?

I want.. Desktop Rich Internet Applications Web application Work offline Keep a local copy of my data Interact with my desktop resources

Desktop Rich Internet Applications

Web application

Work offline

Keep a local copy of my data

Interact with my desktop resources

Many options.. File->Work Offline ….? Dojo Storage, Dojo Offline Toolkit Firefox 3 WPF/E Adobe Apollo web2os.com

File->Work Offline ….?

Dojo Storage, Dojo Offline Toolkit

Firefox 3

WPF/E

Adobe Apollo

web2os.com

Dojo Dojo Storage Flash DOM Storage Dojo Offline Toolkit Small http proxy Library for synchronisation More at http://labs.sitepen.com/dot/

Dojo Storage

Flash

DOM Storage

Dojo Offline Toolkit

Small http proxy

Library for synchronisation

More at http://labs.sitepen.com/dot/

Firefox 3 DOM Storage No need for proxy Pin pages in cache

DOM Storage

No need for proxy

Pin pages in cache

Adobe Apollo Cross platform runtime Flash / Flex / Actionscript HTML / Javascript / CSS / AJAX PDF labs.adobe.com/wiki/index.php/Apollo

Cross platform runtime

Flash / Flex / Actionscript

HTML / Javascript / CSS / AJAX

PDF

Adobe Apollo File I/O Online / Offline support Http / REST / Sockets Custom Chrome

File I/O

Online / Offline support

Http / REST / Sockets

Custom Chrome

Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo

Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo

How do we get there? Application reengineering Google Calendar in Dojo ? WPF/E ? Adobe Apollo ? Firefox 3…

Application reengineering

Google Calendar in

Dojo ?

WPF/E ?

Adobe Apollo ?

Firefox 3…

Hack it Take the Greasemonkey approach? server Browser HTML, CSS, JS Grease monkey Userscripts

Take the Greasemonkey approach?

Current Web Applications

Intermediate

Intermediate

Work offline

Synchronise later

_web2os_ Only proxy defined URLs www.google.com/calendar/.* SQLite database for each ‘app’ Sandboxed Javascript Local file, Applescript, COM access Use Javascript MVC for proxy apps

Only proxy defined URLs

www.google.com/calendar/.*

SQLite database for each ‘app’

Sandboxed Javascript

Local file, Applescript, COM access

Use Javascript MVC for proxy apps

Javascript MVC Create the Model

Create the Model

Javascript MVC Create the controller

Create the controller

Javascript MVC Create the Views

Create the Views

Hook the Proxy Tell the proxy what to look for

Tell the proxy what to look for

A real example Map Google Calendar API

Map Google Calendar API

Other possibilities… Cross domain xmlhttprequest Google office on the Intranet Local mashups iTunes + Flickr mashup

Cross domain xmlhttprequest

Google office on the Intranet

Local mashups

iTunes + Flickr mashup

Beta + Opensource soon at: www.web2os.com

www.web2os.com