GWTcon FirenzeFrancesco Radaelli

GWT Development

for Handheld Devices

A successful story within

a retail store chain

- November 2014 -

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.

Handheld DevicesMotorola 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

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

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.

Framework Dependecies

PDA Framework

RhoMobile«GWT wrapper»

HTML5Application Cache

HTML5 Web Message

«GWT wrapper»

GWT

JBoss ErraiRhoMobile JS API

Applications

RhoMobile Runtime RhoMobile Exts

MGWT

PDA Framework

PDA Framework ComponentsV

ario

us

UI

Man

ager

s Application

Manager

BatteryManager

Local DataManager

Notification

Manager

Remote CommandManager

SignalManager

ThemeManager

Dialogs Buttons Others

CachesRemoteLogging

PersistentQueue

Local Databases

Themes

BarcodeManager

CacheManager

BatteryWrapper

BatteryWrapper

DatabaseWrapper

SignalWrapper

BarcodeWrapper

RhoMobile JS API

BatteryManager

Local DataManager

SignalManager

BarcodeManager

Barcode GWT Wrapper

Errai CDI

GWT JSNI: Motorola (default) implementation

GWT Deferred Binding

GWT JSNI: Datalogic implementation

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

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.

Deferred Binding… (2/2)

4 devices 4 permutations

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.

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.

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».

Application Cache Manifest- Compile Time -

manifest.map

1

artifacts

2

PermutationMapLinker

Application Cache Manifest- Run Time -

server

manifest.map

2: read

4

client

6

mc3100

artifacts

4: request

5: response

E4080E6DBA00EBDBFCDE21EB12A3F855.manifestApplicationCache.db

Local Storage- Incoming Data Persistence -

Errai JSON marshaller

HTML5 Local Storage

0110101010

Local Storage- Outgoing Data Persistence -

● Implementation of a custom persistent queuefor 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) byPersistentQueueConsumerRemoteCallback with

a PUT/POST.

● Consumer can be also connected to

NotificationManager.

0110101010

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

«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%).

Menu

App 6

App 1

App 2

App 3

App 4

App 5

Menu

App 1

App 2

App 3

App 4

App 5

App 6

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/

Q&A

<Thank You!>