Talk di Francesco Radaelli alla GWTcon 2014.

2. GWTcon Firenze
Francesco Radaelli

3. GWT Development
for Handheld Devices
A successful story within
a retail store chain
- November 2014 -

4. Project Scope & Requirements
● Remake of all mobile «apps» used by point of
sales:
o Item Inventory, reorder, tracking;
o Competitor Price Survey;
o etc.
● Previous architecture:
o Native “apps” build with C# .NET + Oracle DB Lite;
o Windows CE on Motorola MC3090/MC3190.
● Requirements:
o Providing support to different:
o OS: Windows CE and Window Mobile (Android, etc);
o Device/Vendor models;
o Applications must work without network connectivity.

5. Handheld Devices
Motorola MC3190 Motorola MC55
MEM 256MB Ram
1GB Flash
MEM 256MB Ram
1GB Flash
CPU Marvel PXA320
624MHz
CPU Marvel PXA320
624MHz
RES 320x320px RES 480x640px
OS Windows CE OS Windows Mobile 6.5
Datalogic Skorpio Datalogic Elf
MEM 256MB Ram
512MB Flash
MEM 256MB Ram
256MB Flash
CPU XScale PXA310
624 MHz
CPU XScale PXA310
624 MHz
RES 240x320px RES 480x640px
OS Windows Mobile 6.5 OS Windows Mobile 6.5

6. Architecture
● Web-based solution.
● Adopted technologies:
o Client:
 GWT: v.2.5.1;
 HTML5: application cache manifest, local storage,
web message;
 JBoss Errai: CDI, JAX-RS;
 RhoMobile Suite: v.4.1.0.
o Server:
 Java EE: JAX-RS v1.1 (Jersey v.1.9.1), EJB
(v.3.1), JPA v.2.0;
 Oracle Weblogic 12c;
 Apache HTTP Server (static content);

7. RhoMobile Suite
● Build native enterprise mobile apps using web
skills: JS, HTML5 and CSS3.
● Includes:
o RhoMobile “mobile application container”:
● Rhodes JS/Ruby API: access to device level
capabilities like camera, geo-location, etc.
● RhoElements JS/Ruby API: access to Motorola
hardware capabilities like bar code scanner, etc.
o RhoStudio (Eclipse based)
o RhoConnect and RhoGallery
● Supports several mobile OSs:
o Android, Apple iOS, Windows Embedded Handheld,
Windows CE and Windows Phone 8.
● Provides a Webkit based browser to Windows
Mobile/CE platforms.

8. Framework Dependecies
PDA Framework
RhoMobile
«GWT wrapper»
HTML5
Application Cache
HTML5
Web Message
«GWT wrapper»
JBoss Errai
GWT
RhoMobile JS API
Applications
MGWT
RhoMobile Runtime RhoMobile Exts

9. PDA Framework Components
Various UI Managers
Application
Manager
Battery
Manager
Notification
Manager
Local Data
Manager
Remote
Command
Manager
Theme
Manager
Signal
Manager
Barcode
Manager
Dialogs Buttons Others
Caches
Remote
Logging
Persistent
Queue
Local
Databases
Themes
Cache
Manager
Battery
Wrapper
Battery
Wrapper
Database
Wrapper
Signal
Wrapper
Barcode
Wrapper
RhoMobile JS API

10. Barcode GWT Wrapper
Errai CDI
GWT Deferred Binding
GWT JSNI: Motorola (default) implementation
GWT JSNI: Datalogic implementation

11. Code Optimization
- Deferred Binding -
Motorola MC3190 Motorola MC55
MEM 256MB Ram
1GB Flash
MEM 256MB Ram
1GB Flash
CPU Marvel PXA320
624MHz
CPU Marvel PXA320
624MHz
RES 320x320px RES 480x640px
OS Windows CE OS Windows Mobile 6.5
Datalogic Skorpio Datalogic Elf
MEM 256MB Ram
512MB Flash
MEM 256MB Ram
256MB Flash
CPU XScale PXA310
624 MHz
CPU XScale PXA310
624 MHz
RES 240x320px RES 480x640px
OS Windows Mobile 6.5 OS Windows Mobile 6.5

12. Deferred Binding… (1/2)
1. «device.model» property definition.
3. «device.vendor» property definition.
4. «device.display» property definition.
2. property «device.model» property-provider
definition.

13. Deferred Binding… (2/2)
1. «device.vendor» property controls barcode and WIFI signals implementations and some
others system properties.
2. «device.display» property controls display/layout resource bundles e css classes.
4 devices 4 permutations

14. Web Applications and... offline
● Requirements:
o Applications must boot in case of network/server
problems («offline»);
o Application data must persist in «offline» mode and
after a reboot.
● Standard HTML5 features have been used:
o Application Cache Manifest;
o Local Storage.

15. Application Cache Manifest
● Not available in GWT«out of the box».
● MGWT library (v.1.1.2) has been used.
● Consists in:
o A further linker at compilation-time.
o A Servlet that returns the right manifest file at run-time.
● Custom permutation provider based on the
property «device.model».

16. Application Cache Manifest
- Compile Time -
1
manifest.map
artifacts
2
PermutationMapLinker

17. Application Cache Manifest
- Run Time -
server
manifest.map
2: read
4
client
mc3100
6
artifacts
4: request
5: response
E4080E6DBA00EBDBFCDE21EB12A3F855.manifest
ApplicationCache.db

18. Local Storage
- Incoming Data Persistence -
HTML5 Local Storage
Errai JSON marshaller
0110101010

19. Local Storage
- Outgoing Data Persistence -
● Implementation of a custom persistent queue
for outgoing data: PersistentQueue<T>.
● Outgoing data is stored in «Errai» json format.
● Data is consumed asynchronously by «generic»
consumer PersistentQueueConsumer<T>.
● Outgoing data is sent to the server in
«Jackson» json format (fast transformation) by
PersistentQueueConsumerRemoteCallback with
a PUT/POST.
● Consumer can be also connected to
NotificationManager.
0110101010

20. PersistentQueueConsumer<T>
● «Consumes» outgoing data when:
o Queue items number is greater than a lower bound;
o User does not interact with the device for specific amount
of time.
● Tries to consume a single item:
o On success:
 Removes the item from the queue.
 Consumes other items all together (up to an upper
bound).
o On failure:
 reschedules itself with a delay that grows exponentially
(up to an upper bound).

21. «App» Architecture
- Performance Considerations (MC3190)-
● 256MB  ~132MB really available.
● RhoMobile takes ~20s to start & ~ 23MB of memory  108MB
free.
● Different Build Modes:
o Standalone applications (AppN.cache.js ~2MB):
 Useful during the application development.
 “Low” memory usage: ~58MB (~44%).
 Integration among applications was more tricky (one
application running per time).
 Menu startup is slow (~30s, just once).
 Application launch is too slow (~40s, many times).
o Monolithic Application (AllApps.cache.js ~3.6MB):
 Full application startup is slower (~65s, just once).
 But application launch is very fast (~0s, many times).
 Higher integration among application.
 Higher memory usage: ~83MB (~63%).
App 6
Menu
App 1
App 2
App 3
App 5
App 4
Menu
App 1
App 2
App 6
App 3
App 5
App 4

22. References
● GWT:
http://www.gwtproject.org/articles/mvp-architecture.html
● mgwt:
http://www.m-gwt.com/
● RhoMobile Suite:
http://docs.rhomobile.com/
● JBoss Errai:
http://erraiframework.org/
● HTML5 cache Manifest:
http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
● HTML5 Web Storage:
http://www.w3.org/TR/webstorage/
● HTML5 Web Messaging:
http://www.w3.org/TR/webmessaging/

23. Q&A

24. <Thank You!>