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. S...
Why Offline applications ?


For mobility:


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



Mitigat...
And because Web is the plateform


HTML5 opens up lots of new possibilities, that were before only accessible to
native a...
It’s also about User experience



Online / Offline, users want the same experience !



Connection is a technical conce...
Summary


HTML5 APIs for Offline applications





Application Cache
Local data storage

Offline problems


Login


...
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...
Application Cache - GWT
GWT manages every application resources « out-of-the-box ». We just need to
write a « linker » to ...
Our Application Cache linker
// Executes in the context of the GWT compilation

@Shardable
@LinkerOrder( Order.POST )
publ...
Application Cache dynamics
Initial
loading

.html

DOWNLOADING

.manifest

Server

Offline HTML5 apps with GWT

Reloading
...
Application Cache – GWT


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



The browser checks if a new manifest...
Application Cache – Events management
public final class AppCache extends JavaScriptObject {
// call Javascript from Java
...
Local data Storage


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



Many standards exist (WebSQL, IndexedDB, FileS...
Summary


HTML5 API for Offline applications





Application Cache
Local data Storage

Offline problems


Login



...
Problems you might
encounter…
A typical wish-list…


Authenticate the user (even offline).



User should be able to manipulate data even when offline...
Offline Authentication


When online, authentication is done by the server.



We should then be able to re-authenticate...
An in-browser DBMS ?


Complex data queries, we’re not going to implement that again (complexity,
performance, index, joi...
SQL.js and GWT


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



SQL.js API :


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

public class SQLite extends JavaScriptObject
{
public static fin...
Homogeneous service contracts
public class BusinessLogicFacade
{
public ListItem> searchItems( int id,
AsyncCallback<ListI...
Data Synchronization


Three offline access, three difficulty levels

Local data access mode

Related problematic

Read O...
Continuous downstream
synchronization


Continuously feeding the local database,



Can use server-side counters or time...
Sending local new records to the
server

Offline
access in
READ + ADD

Managing new local records Ids:


Local new record...
Sending changes to the server


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



Version ve...
So what about out Wish-list?


Ideally, we’d had a fully compliant JPA implementation, enabling us to fully
share data ac...
Demonstration !
Used stack
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO J...
Online mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO ...
Offline mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Unreachable
Server

Business...
Transition to Online mode
GUI
Business facade

Server
replies

Server watchdog

RPC Services

AppCache management

Send lo...
Online mode
GUI
Business facade
Server watchdog

RPC Services

AppCache management

Synchro

Business layer

Synchro

DAO ...
Démonstration…

Offline HTML5 apps with GWT

34
Questions?

Offline HTML5 apps with GWT

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



Links :



SQL.JS



SQLITE



EMSCRIP...
Upcoming SlideShare
Loading in …5
×

Easing offline web application development with GWT

5,229 views

Published on

At this current time, HTML5 APIs are mature enough so that the web browser can now be a very good platform for applications that were before only implemented as native applications : offline applications with locally stored data, embedded SQL engines, etc. Although there are many good Javascript frameworks out there, the Java language allows to build, maintain, debug and work with ease on really big applications (> 100,000 LOC).

You'll discover in this presentation all the tools we assembled to make an application available with its data 100% of the time, even without internet!

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,229
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
73
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Easing offline web application development with GWT

  1. 1. Easing Offline web application development with GWT Arnaud Tournier, LTE Consulting
  2. 2. 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
  3. 3. 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 Offline HTML5 apps with GWT 3
  4. 4. 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. Offline HTML5 apps with GWT 4
  5. 5. 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 ! Offline HTML5 apps with GWT 5
  6. 6. Summary  HTML5 APIs for Offline applications    Application Cache Local data storage Offline problems  Login  Local DBMS  Data synchronization   Offline HTML5 apps with GWT Demo Conclusion 6
  7. 7. HTML 5 APIs for Offline applications Introduction to APIs and GWT integration
  8. 8. 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 Offline HTML5 apps with GWT 8
  9. 9. 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  Offline HTML5 apps with GWT 9
  10. 10. 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" ); } } Offline HTML5 apps with GWT 10
  11. 11. Application Cache dynamics Initial loading .html DOWNLOADING .manifest Server Offline HTML5 apps with GWT Reloading .html NOUPDATE UPDATE READY CACHED NEW MANIFEST FILE .manifest 11
  12. 12. 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 Offline HTML5 apps with GWT 12
  13. 13. 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
  14. 14. 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…) Offline HTML5 apps with GWT 14
  15. 15. Summary  HTML5 API for Offline applications    Application Cache Local data Storage Offline problems  Login  Local DBMS  Data synchronization   Offline HTML5 apps with GWT Demo Conclusion 15
  16. 16. Problems you might encounter…
  17. 17. 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). Offline HTML5 apps with GWT 17
  18. 18. 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 ); Offline HTML5 apps with GWT 18
  19. 19. 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 ? Offline HTML5 apps with GWT 19
  20. 20. 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… Offline HTML5 apps with GWT 20
  21. 21. 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(); }-*/; } Offline HTML5 apps with GWT // 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
  22. 22. 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( « … » ); Offline HTML5 apps with GWT 22 Client
  23. 23. 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 Offline HTML5 apps with GWT 23
  24. 24. 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. Offline HTML5 apps with GWT 24
  25. 25. 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. Offline HTML5 apps with GWT 25
  26. 26. 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. Offline HTML5 apps with GWT 26
  27. 27. 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. Offline HTML5 apps with GWT 27
  28. 28. Demonstration !
  29. 29. 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
  30. 30. Online mode 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 30
  31. 31. 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 SQLite/Local storage Server Applis Offlines HTML5 avec GWT Client 31
  32. 32. 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 SQLite/Local storage Server Applis Offlines HTML5 avec GWT Client 32
  33. 33. Online mode 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 33
  34. 34. Démonstration… Offline HTML5 apps with GWT 34
  35. 35. Questions? Offline HTML5 apps with GWT 35
  36. 36. Thanks, and see you soon! Twitter: @ltearno Email: contact@lteconsulting.fr  Links :   SQL.JS  SQLITE  EMSCRIPTEN  HTML5Rocks  JBOSS ERRAI  Offline HTML5 apps with GWT GWT CANIUSE.COM 36

×