Easing offline web application development with GWT

Easing Offline web
application development
with GWT
Arnaud Tournier, LTE Consulting

Speaker : Arnaud Tournier


Developper, Architect and CEO at LTE Consulting. 10 years experience with
C/C++ on Windows. Since 5 years+ : GWT and Web technologies.



GWT and AppEngine trainer

Offline HTML5 apps with GWT

2

Why Offline applications ?


For mobility:


3G throughput sometimes is not enough (ex: offline blog reader)



Mitigate innoportune disconnections (ex: emails)



Moving out of covered zones


3

And because Web is the plateform


HTML5 opens up lots of new possibilities, that were before only accessible to
native applications.



Accessible concepts to HTML5 applications:



Application cache,



File system,



Worker thread,



Web sockets, WebRTC,



Web GL, Audio,



Devices access (webcam, microphone, gps, …),





Data storage,

…

Benefits : lower the development cost for a multiplatform application.


4

It’s also about User experience



Online / Offline, users want the same experience !



Connection is a technical concept, not for user…



Thus the most connected application works also offline !


5

Summary


HTML5 APIs for Offline applications





Application Cache
Local data storage

Offline problems


Login



Local DBMS



Data synchronization





Demo
Conclusion

6

HTML 5 APIs for Offline
applications
Introduction to APIs and GWT integration

Application Cache


Tell the browser to store necessary resources for the application to work
when internet is down



A « manifest » file describing the list of resources to cache



Cache management and event API


8

Application Cache - GWT
GWT manages every application resources « out-of-the-box ». We just need to
write a « linker » to generate the manifest file :



All your application resources, including images, css, js, and so on, are
automatically added to the manifest: we can work offline !

Code Generator




9

Our Application Cache linker
// Executes in the context of the GWT compilation

@Shardable
@LinkerOrder( Order.POST )
public class AppCacheLinker extends AbstractLinker {
…

@Override
public ArtifactSet link( LinkerContext context, … ) {
for( Artifact artifact : artifacts )
sb.append( artifact.getPartialPath() );
emitString( logger, sb.toString(), ontext.getModuleName() + ".appcache" );
}
}

10

Application Cache dynamics
Initial
loading

.html

DOWNLOADING

.manifest

Server


Reloading

.html

NOUPDATE

UPDATE READY

CACHED

NEW MANIFEST FILE

.manifest

11

Application Cache – GWT


Cache API integration in GWT (using JSNI / Elemental).



The browser checks if a new manifest is available when loading the app. We
can ask for further checks with the update() function.



Upon receiving an application update, we can tell the user to refresh the
page to get the latest app version.
In JavaScript, we use the object :
window.applicationCache


12

Application Cache – Events management
public final class AppCache extends JavaScriptObject {
// call Javascript from Java
public static final native AppCache get()
/*-{
return $wnd.applicationCache;
}-*/;

public enum AppCacheEvent
{
// Application en cache
CACHED,

// launch an app cache update
public final native void update()
/*-{
this.update();
}-*/;

// Vérification en cours
CHECKING,
// Téléchargement en cours
DOWNLOADING,

public interface Callback {
void handleEvent( AppCacheEvent event );
}

// Une erreur s’est produite
ERROR,
// Pas de mise à jour
NOUPDATE,

// register to App Cache events
public final native void registerEvents( Callback callback )
/*-{
this.addEventListener('cached', function( s ) {
// Call Java from Javascript
callback
.@package.AppCache.Callback::handleEvent(Lpackage/AppCacheEvent;)
(@package.AppCacheEvent::CACHED);
} );
…
}-*/;
}

// Le fichier manifest n’existe plus
OBSOLETE,
// Mise à jour en cours
PROGRESS,
// Mise à jour prête à être déployée
UPDATEREADY;

}
13

Local data Storage


Locally store data in the browser (user scope !).



Many standards exist (WebSQL, IndexedDB, FileSystem ) but only one is really
multiplatform: LocalStorage



It’s a Map<String, String>.



GWT provides a LocalStorage API wrapper « out of the box », no JSNI to write.



POJO serialization into the storage space might be done with JSON (since it’s
really fast on browsers).



Data is persistent accross page refresh !



5 Mega bytes max (spec) ! (But browsers allow for more…)


14

Summary


HTML5 API for Offline applications





Application Cache
Local data Storage

Offline problems


Login



Local DBMS



Data synchronization





Demo
Conclusion

15

Problems you might
encounter…

A typical wish-list…


Authenticate the user (even offline).



User should be able to manipulate data even when offline.



Application should transparently synchronize its data with the server.



For our awesome developpers : they need a local DBMS (and if we can a JPA
provider).


17

Offline Authentication


When online, authentication is done by the server.



We should then be able to re-authenticate him/her without the server.



Be careful ! Local storage completely unsecure !



We thus store the user’s password in the browser, salted and crypted with
SHA-3.



Find a Java SHA-3 implementation, copy-paste in the project :


String shaEncoded = SHA3.digest( String clearString );


18

An in-browser DBMS ?


Complex data queries, we’re not going to implement that again (complexity,
performance, index, joints, transactions, …) !



Database oriented HTML 5 APIs are not implemented on every browser, except
Local Storage which is just a String to String map…



Jboss ERRAI is a really interesting project, aiming to implement JPA, but it is
too light for majority of cases (no joins, tx, dynamic queries…).



SQL.js is a javascript compiled version of SQLite. Done with the emscripten
compiler from Alon Zhakai. Emscripten = C/C++ to Javascript cross-compiler
based on the LLVM compiler toolkit. Is that a good idea ?


19

SQL.js and GWT


SQLite is the most deployed embedded DBMS in the world (~500 millions)



SQL.js API :


a JavaScript object : window.SQL



3 functions : open(data), execute(statement), exportData(). Talks in JSON.



How to persist the DB ? With Local Storage !



JSNI code to bind the sql.js API



A mini ORM to bind SQL results to our POJOs (we like comfort a bit)



That gives us…


20

SQL.js with GWT
SQL.js creates a « SQL » global
variable

public class SQLite extends JavaScriptObject
{
public static final native SQLite open( JsArrayInteger data )
/*-{
return $wnd.SQL.open( data );
}-*/;

var result = window.SQL.exec( « select… »);
// result holds the results in JSON
class DbHelper {
SQLite db;
public <T>
List<T> query( String query ) {
// parse query and generate select
…

public final native JavaScriptObject execute( String statement )
/*-{
return this.exec( statement );
}-*/;
public final native JsArrayInteger exportData()
/*-{
return this.exportData();
}-*/;
public final native void close()
/*-{
this.close();
}-*/;
}


// execute query
JavaScriptObject jso = db.execute( transformedQuery );
JSON json = new JSONObject( jso );
// generate List<T> from JSON
return list;

}
}

List<Item> items = db.query( « select {Item:i}
from Item i
left join Brand b on i.brandId=b.id
where b.id=42 » ).getResultList();
21

Homogeneous service contracts
public class BusinessLogicFacade
{
public ListItem> searchItems( int id,
AsyncCallback<ListItem>> callback ) {
return currentImplementation.searchArticles( … );
}

public class RemoteBusinessLogic {
private static ApplicationServiceAsync proxy =
GWT.create(ApplicationService.class);
public List<Item> searchItems( int id,
AsyncCallback<List<Item> callback ) {
// simply delegate to remote service
return proxy.searchArticles( … );
}

public void switchImplementation( impl ) {
currentImplementation = impl
}
}

}
… On the server …
businessLogic = BusinessLogic( new JPADAO() );

// Servlet delegates the délègue au code métier
return business.searchArticles( … );
// le code métier appelle son DAO …
class BusinessLogic {
DAO dao;
…

}

public class SQLiteBusinessLogic {
BusinessLogic businessLogic =
new BusinessLogic( new SQLiteDAO() );
public List<Article> searchArticles( int id,
AsyncCallback<List<Article>> callback ) {
// simply delegate to local service
callback.onSuccess( business.searchArticles(…) );
}

Server

// … qui utilise ici JPA
return em.createQuery( « … » ).getResultList();

}
// Le même code métier appelle cette fois le DAO SQLite
return db.query( « … » );


22

Client

Data Synchronization


Three offline access, three difficulty levels

Local data access mode

Related problematic

Read Only

Continuous Synchronization

Read + Add

Sending inserts to the server

Read, Add, Modification,
Suppression

Conflict management


23

Continuous downstream
synchronization


Continuously feeding the local database,



Can use server-side counters or timestamps,



Client asks for unknown data,



Offline
access in
READ ONLY

For server-side deletes, a trigger feeds a log table.


24

Sending local new records to the
server

Offline
access in
READ + ADD

Managing new local records Ids:


Local new records are associated to negative Ids,



Send them when going back to online mode,



Reconciliate local Ids with the server ones.


25

Sending changes to the server


Worst scenarios are possible! Similar problems as for distributed systems.



Version vectors for causality tracking.



Full offline
access
READ WRITE

Conflict management, several resolution policies :


Last writer wins,



Source wins,



Destination wins,



Specified replica wins,



Merge, automatic or manual ?



Log and deffer, etc.


26

So what about out Wish-list?


Ideally, we’d had a fully compliant JPA implementation, enabling us to fully
share data access code between server and client.



ERRAI may be enough in some situations,



Or an home made mini-ORM.



We are building a fully JPA compliant implementation for GWT


http://www.lteconsulting.fr/jpa-for-gwt.html



We didn’t explore security.



Quite a big impedance between HTML5 platform potential and tools we have.
Community needs better tools.



BUT, our goal is fulfilled!


An application running offline, with the same functionalities as online. User
doesn’t need to know whether he is connected or not.


27

Used stack
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO JPA

DAO SQL.JS/GWT

JDBC compliant DBMS

SQLite/Local storage

Server
Applis Offlines HTML5 avec GWT

Client
29

Online mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO JPA

DAO SQL.JS/GWT

JDBC compliant DBMS


Server

Client
30

Offline mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Unreachable
Server

Business layer

Synchro

DAO JPA

DAO SQL.JS/GWT

JDBC compliant DBMS


Server

Client
31

Transition to Online mode
GUI
Business facade

Server
replies

Server watchdog

RPC Services

AppCache management

Send local changes to
Business layer
the server

Synchro

Synchro

DAO JPA

DAO SQL.JS/GWT

JDBC compliant DBMS


Server

Client
32

Online mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO JPA

DAO SQL.JS/GWT

JDBC compliant DBMS


Server

Client
33

Démonstration…


34

Questions?


35

Thanks, and see you soon!
Twitter: @ltearno
Email: contact@lteconsulting.fr



Links :



SQL.JS



SQLITE



EMSCRIPTEN



HTML5Rocks



JBOSS ERRAI




GWT

CANIUSE.COM

36

Easing offline web application development with GWT

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Easing offline web application development with GWT

Similar a Easing offline web application development with GWT (20)

Último

Último (20)

Easing offline web application development with GWT