# 6 the perfect experience.

# 6

the perfect experience.

Starbucks experience ...

the Virgin lounge ...

Vegas baby, yeah ...

gears. [ the quest ]

gears.

[ the quest ]

“ Make it possible to create web apps as powerful as desktop apps by unlocking the local machine’s capabilities.” - Gears Vision

“ Make it possible to create web apps

as powerful as desktop apps

by unlocking the local machine’s capabilities.”

- Gears Vision

BROWSER CHALLENGES desktop experience connectivity reliability responsiveness computing power busy? loop? what should I do?

BROWSER CHALLENGES

desktop experience

connectivity

reliability

responsiveness

computing power

busy?

loop?

what should I do?

MODULES offline database blob offline local server resumable upload offline workerpool geolocation desktop shortcuts file system load / save desktop notifications … much more on the way

MODULES

offline database blob

offline local server resumable upload

offline workerpool geolocation

desktop shortcuts file system load / save

desktop notifications

… much more on the way

gears. [ offline ]

gears.

[ offline ]

blind adaption. decide on offline features modal versus modeless manual versus background synchronization architecture

blind adaption.

decide on offline features

modal versus modeless

manual versus background synchronization

architecture

OFFLINE FEATURE AVAILABILITY caching transient data makes no sense Real-time stock quotes some data just does not make sense offline Instant messaging doesn’t mean you have to cache everything Frequently accessed data computational / disk space requirements make it unfeasable

OFFLINE FEATURE AVAILABILITY

caching transient data makes no sense

Real-time stock quotes

some data just does not make sense offline

Instant messaging

doesn’t mean you have to cache everything

Frequently accessed data

computational / disk space requirements make it unfeasable

MODAL distinct online / offline modes user is state aware and and participates in switching states online it only communicates with the server data synchronization when the user switches between states local data is not always up-to-date more user interaction required

MODAL

distinct online / offline modes

user is state aware and and participates in switching states

online it only communicates with the server

data synchronization when the user switches between states

local data is not always up-to-date

more user interaction required

MODELESS the application assumes it is offline or that it can loose connection at any time user does not have to be state aware application uses the local store as much as possible continuous small data syncs in the background data synchronization is also done when coming back online

MODELESS

the application assumes it is offline

or that it can loose connection at any time

user does not have to be state aware

application uses the local store as much as possible

continuous small data syncs in the background

data synchronization is also done when coming back online

MANUAL SYNCHRONIZATION user drives synchronization through user interface user must be aware of the network state user must remember to synchronize before going offline amount of data must be small enough to download quickly local data is not always up-to-date more user interaction required

MANUAL SYNCHRONIZATION

user drives synchronization through user interface

user must be aware of the network state

user must remember to synchronize before going offline

amount of data must be small enough to download quickly

local data is not always up-to-date

more user interaction required

BACKGROUND SYNCHRONIZATION continuous synchronization through background process user is unaware data is ready at all times (offline / accidentally disconnected) fast performance even when slow connection sync process might slow down the application

BACKGROUND SYNCHRONIZATION

continuous synchronization through background process

user is unaware

data is ready at all times (offline / accidentally disconnected)

fast performance even when slow connection

sync process might slow down the application

SYNCHRONIZATION IS HARD need GUIDs need timestamps (SQLite has no Date) need a strategy : last one wins lock / checkout let user decide

SYNCHRONIZATION IS HARD

need GUIDs

need timestamps (SQLite has no Date)

need a strategy :

last one wins

lock / checkout

let user decide

TRADITIONAL ARCHITECTURE GEARS ARCHITECTURE

TRADITIONAL ARCHITECTURE

GEARS ARCHITECTURE

GEARS FEATURES LocalServer cache and serve application resources locally Database store data locally in a fully-searchable relational database WorkerPool perform resource-intensive operations asynchrounously

GEARS FEATURES

LocalServer

cache and serve application resources locally

Database

store data locally in a fully-searchable relational database

WorkerPool

perform resource-intensive operations asynchrounously

LOCALSERVER ResourceStore manual resource capturing ManagedResourceStore capture entire applications list applications in separate manifest file gears captures and updates the list automatically

LOCALSERVER

ResourceStore

manual resource capturing

ManagedResourceStore

capture entire applications

list applications in separate manifest file

gears captures and updates the list automatically

WORKERPOOL run JavaScript in the background provides thread-like functionality no more blocking the browser UI inter WorkerPool Communication is via message Strings no shared state or threading primitives does not trigger the browser's "unresponsive script" dialog no DOM access no singleton, multiple instances can be instantiated

WORKERPOOL

run JavaScript in the background

provides thread-like functionality

no more blocking the browser UI

inter WorkerPool Communication is via message Strings

no shared state or threading primitives

does not trigger the browser's "unresponsive script" dialog

no DOM access

no singleton, multiple instances can be instantiated

DATABASE embedded SQLite full text search with FTS2 limited data types (Integer, Real, Text, Blob) low level API

DATABASE

embedded SQLite

full text search with FTS2

limited data types (Integer, Real, Text, Blob)

low level API

SECURITY one simple rule: Same-origin-policy all local files are stored in your local profile directory

SECURITY

one simple rule: Same-origin-policy

all local files are stored in your local profile directory

gears. [ advanced use case: orm ]

gears.

[ advanced use case: orm ]

DATA OBJECT + GEARS ORM ANNOTATIONS @gears.table (name=“Wishes”) public class Wish implements GearsDataObject { @gears.id (length = 50) private String name; @gears.column (name = “description”, length = 200) private String description; } BINDING <generate-with class=“ com.GearsDAOGenerator ”> <when-type-assignable class=“ com.GearsDataObject ”/> </generate-with>

DATA OBJECT + GEARS ORM ANNOTATIONS

@gears.table (name=“Wishes”)

public class Wish implements GearsDataObject {

@gears.id (length = 50)

private String name;

@gears.column (name = “description”, length = 200)

private String description;

}

BINDING

<generate-with class=“ com.GearsDAOGenerator ”>

<when-type-assignable class=“ com.GearsDataObject ”/>

</generate-with>

USAGE public void onModuleLoad() { GearsDAO wishDAO = GWT.create(Wish.class); // Initializes database Wish wish = new Wish(“Car”, “Red shiny with big wheels”); wishDAO. save(); Wish wish = wishDAO. findById(“Car”); wishDAO. delete(wish); }

USAGE

public void onModuleLoad() {

GearsDAO wishDAO = GWT.create(Wish.class); // Initializes database

Wish wish = new Wish(“Car”, “Red shiny with big wheels”);

wishDAO. save();

Wish wish = wishDAO. findById(“Car”);

wishDAO. delete(wish);

}

FIND BY EXAMPLE @gears.namedQuery (name=“ findByDescription ” sql=“select :Wishes where description = ?”) @gears.table (name=“ Wishes ”) public class Wish implements GearsDataObject { public static final String FIND_BY_DESCRIPTION = “ findByDescription ”; @gears.column (name = “description”, length = 200) private String description; }

FIND BY EXAMPLE

@gears.namedQuery (name=“ findByDescription ”

sql=“select :Wishes where description = ?”)

@gears.table (name=“ Wishes ”)

public class Wish implements GearsDataObject {

public static final String FIND_BY_DESCRIPTION = “ findByDescription ”;

@gears.column (name = “description”, length = 200)

private String description;

}

USAGE public void onModuleLoad() { GearsDAO wishDAO = GWT.create(Wish.class); GearsQuery query = wishDAO. getNamedQuery(Wish.FIND_BY_DESCRIPTION); query.setString(“Red shiny with big wheels”); List<Wish> wishes = query.execute(); }

USAGE

public void onModuleLoad() {

GearsDAO wishDAO = GWT.create(Wish.class);

GearsQuery query =

wishDAO. getNamedQuery(Wish.FIND_BY_DESCRIPTION);

query.setString(“Red shiny with big wheels”);

List<Wish> wishes = query.execute();

}

questions? or later, maarten@maartenvolders.com

MAARTENVOLDERS. com PASSIONATE ABOUT PEOPLE AND TECHNOLOGY

MAARTENVOLDERS. com

PASSIONATE ABOUT PEOPLE AND TECHNOLOGY