1.
Automatic Code Generation
for Cross-platform, Multi-Device Mobile Apps
Some Reflections from an Industrial Experience
Marco Brambilla, Eric Umuhoza, Politecnico di Milano, Italy
Jordi Cabot, ICREA & UOC, Spain
Hamza Ed-douibi, AtlanMod EM Nantes, France
Aldo Bongio, WebRatio, Italy

2.
The need

3.
Agenda
• Motivation
• Problem setting
• MD alternatives
• Experience reporting
• Success stories

4.
Motivation
• App revenues to reach 92 billion $ by 2018
• Integration with IoT paramount
• No single technology will dominate
• Cross-platform and multi-device development
• A barrier for today's IT solution providers,
especially SMEs
• High cost and technical complexity
• Browser-based (HTML 5) VS native dilemma

5.
Research Questions
• Native or cross-platform apps?
A Model-driven mindset
Really turns into
• At what level to model app behavior?
• How to implement executability?
• Assumption: Code generation
• Yes, but: how to generate the code then?
• and what code?

6.
Context: model-driven development
• Multi-level
modeling
• Mapping
approach
Model-to-Model
Transformation (M2M)
Computation Independent
Model (CIM)
Platform Independent
Model (PIM)
Platform Specific
Model (PSM)
Platform Independent
Model (PIM)Platform Independent
Model (PIM)
Platform Specific
Model (PSM)Platform Specific
Model (PSM)
M2M
Application Code
Model-to-Text
Transfo. (M2T)

7.
A Modeling Proposition for UI / UX: OMG’s IFML
www.ifml.org

8.
IFML Focus on Mobile
• PIM-level
• Mobile-specific concepts
• Meta-model excerpts:

9.
… and the code you can generate from IFML!

10.
Code generation strategies
PIM
Native
CodeM2TM2M
PSM
PIM
Native
Code
M2T
Native
CodeM2T
PSM
PIM
Cross-platform
Code
M2T
M2T
FSM
Cross-platform
CodePIM
M2M
(1)
(2)
(3)
(4)
(5)

11.
PIM to Native Code
• Cross platform is achieved by providing one native code
generator for each targeted platform.
• All the platform-specific details are embedded in the code
generator.
• No need of PSM, but PS details in the code generator reduces
its flexibility.
• Use: Data-driven native apps would be better suited for this
option. Example for Android:

12.
PIM to PSM to Native Code
• A global PIM is transformed into a set of PSMs that refine
it for specific platforms
• PSM models are the input of the code-generator
• PSM level allows to benefit from the specificities of the
platform
• Use: develop native apps, with complex device-specific
functionalities. Ezample for iOS:

13.
PSM to Native Code
• Modeling is directly at the PSM level
• One model per development platform (!!)
• Then generate the app code from these PSMs
• USE: developing native apps for one specific platform

14.
PIM to Cross-platform Code
• From PIM it generates the code required by the cross platform
framework (such as PhoneGap, AppCelerator Titanium, and
Xamarin) to produce the cross platform apps.
• Requires only one model and one generator
– Plus tricks and tweaks!!
• USE: apps in which
multiple platform
availability (and
time to market)
is more important
than high performance
• E.g., PhoneGap:

15.
PIM to Framework Specific Model
to Cross-platform Code
• The Framework Specific Model gathers the information
regarding the cross platform framework used to produce the apps.
• A PSM in which the Platform in the MDA terminology, is actually a
Cross-Platform Framework for mobile apps development

16.
Summary of effort for each approach

17.
Industrial Experience: WebRatio Platform
• Built on open standards
– UML, BPMN, IFML
• From code generation
for the Web
• to code generation
for Mobile
Produ
ct

18.
WebRatio Platform Architecture
..others..
Java EE Webapp
Standards-based
Open code
Client-side
(Front-end)
Server-side
(Back-end)
Web
(and Mobile Web)
Mobile
App
Interaction Flow Model
Compile time Runtime
Business Process Model
Data Model
Integration Model
Layout/Style Model
DBMS BPMS
Data sync /
offline mode
Design time
Apache CordovaResponsive

19.
WebRatio Mobile – Final Features
• Cross-platform
one model and deliver your apps to any device: iOS (iPhone, iPad),
Android
• Fully functional offline mode
the app works even without being connected to the internet (offline
mode)
• Device-server data synchronization
data synchronization between the mobile device and the back-end
server is managed by a smart algorithm for bandwidth optimization
• Unified Web and Mobile User Experience

20.
Mobile Generated Code

21.
Mobile App Architecture
PhoneGap Application
HTML JavaScript
CSS Resources
Web App
Accelerometer Geolocation
Camera Media
Compass Network
Contacts Notification
File Storage
Custom Plug-ins
PhoneGap Plug-ins
HTML Rendering
Engine (WebView)
Services Sensor
Input Graphic
Mobile OS
HTML
API’s
PhoneGap
JavaScript
API’s
OS API’sOS API’s

22.
Tool and Learning Resources
• www.ifml.org and www.webratio.com
• Free to use tool
• Online training materials (videos + MOOCs)
• Certification program
• Book: Interaction Flow Modeling
Language: Model-Driven UI Engineering
of Web and Mobile Apps with IFML. Marco
Brambilla and Piero Fraternali.
Morgan Kauffmann & OMG Press, USA.
– Find it on Amazon.

23.
Automatic Code Generation
for Cross-platform, Multi-Device Mobile Apps
Some Reflections from an Industrial Experience
Thanks
marco.brambilla@polimi.it
@marcobrambi