GWT@Jazoon08 - Part 6/6 - The Perfect Experience

LOGO SPEAKER‘S COMPANY

# 6the perfect experience.

LOGO SPEAKER‘S COMPANY

Starbucks experience ...

LOGO SPEAKER‘S COMPANY

the Virgin lounge ...

LOGO SPEAKER‘S COMPANY

Vegas baby, yeah ...

LOGO SPEAKER‘S COMPANY

gears.[ the quest ]

LOGO SPEAKER‘S COMPANY

“Make it possible to create web appsas powerful as desktop appsby unlocking the local machine’s capabilities.”

- Gears Vision

LOGO SPEAKER‘S COMPANY

BROWSER CHALLENGES

desktop experience

connectivity

reliability

responsiveness

computing power

busy?

loop?

what should I do?

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

gears.[ offline ]

LOGO SPEAKER‘S COMPANY

blind adaption.

decide on offline features

modal versus modeless

manual versus background synchronization

architecture

LOGO SPEAKER‘S COMPANY

OFFLINE FEATURE AVAILABILITY

caching transient data makes no senseReal-time stock quotes

some data just does not make sense offlineInstant messaging

doesn’t mean you have to cache everythingFrequently accessed data

computational / disk space requirements make it unfeasable

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

SYNCHRONIZATION IS HARD

need GUIDs

need timestamps (SQLite has no Date)

need a strategy :

last one wins

lock / checkout

let user decide

LOGO SPEAKER‘S COMPANY

TRADITIONAL ARCHITECTURE

GEARS ARCHITECTURE

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

LOCALSERVER

ResourceStore

manual resource capturing

ManagedResourceStore

capture entire applications

list applications in separate manifest file

gears captures and updates the list automatically

LOGO SPEAKER‘S COMPANY

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

LOGO SPEAKER‘S COMPANY

DATABASE

embedded SQLite

full text search with FTS2

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

low level API

LOGO SPEAKER‘S COMPANY

SECURITY

one simple rule: Same-origin-policy

all local files are stored in your local profile directory

LOGO SPEAKER‘S COMPANY

gears.[ advanced use case: orm ]

LOGO SPEAKER‘S COMPANY

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>

LOGO SPEAKER‘S COMPANY

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);

}

LOGO SPEAKER‘S COMPANY

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;

}

LOGO SPEAKER‘S COMPANY

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();

}

LOGO SPEAKER‘S COMPANY

questions?or later, maarten@maartenvolders.com

LOGO SPEAKER‘S COMPANY

MAARTENVOLDERS.comPASSIONATE ABOUT PEOPLE AND TECHNOLOGY