Automatic Code Generation for Cross-platform, Multi-Device Mobile Apps

Some Reflections from an Industrial Experience

Marco Brambilla, Eric Umuhoza, Politecnico di Milano, ItalyJordi Cabot, ICREA & UOC, Spain

Hamza Ed-douibi, AtlanMod EM Nantes, FranceAldo Bongio, WebRatio, Italy

The need

Agenda

• Motivation• Problem setting• MD alternatives• Experience reporting• Success stories

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

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?

Context: model-driven development

• Multi-level modeling

• Mapping approach

Model-to-Model Transformation (M2M)

Computation Independent Model (CIM)

Platform Independent Model (PIM)

Platform SpecificModel (PSM)

Platform Independent Model (PIM)Platform Independent

Model (PIM)

Platform SpecificModel (PSM)Platform Specific

Model (PSM)

M2M

Application Code

Model-to-Text Transfo. (M2T)

A Modeling Proposition for UI / UX: OMG’s IFMLwww.ifml.org

IFML Focus on Mobile

• PIM-level• Mobile-specific concepts• Meta-model excerpts:

… and the code you can generate from IFML!

Code generation strategies

PIM Native CodeM2TM2M

PSM

PIM Native Code

M2T

Native CodeM2T

PSM

PIMCross-

platform CodeM2T

M2TFSM

Cross-platform

CodePIM

M2M

(1)

(2)

(3)

(4)

(5)

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:

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:

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

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 importantthan high performance

• E.g., PhoneGap:

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

Summary of effort for each approach

Industrial Experience: WebRatio Platform

• Built on open standards– UML, BPMN, IFML

• From code generation for the Web

• to code generation for Mobile

Product

WebRatio Platform Architecture

..others..

Java EE WebappStandards-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 Cordova

Responsive

WebRatio Mobile – Final Features

• Cross-platformone model and deliver your apps to any device: iOS (iPhone, iPad), Android

• Fully functional offline modethe app works even without being connected to the internet (offline mode)

• Device-server data synchronizationdata 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

Mobile Generated Code

Mobile App ArchitecturePhoneGap Application

HTML JavaScript

CSS Resources

Web AppAccelerometer Geolocation

Camera Media

Compass Network

Contacts Notification

File Storage

Custom Plug-ins

PhoneGap Plug-ins

HTML Rendering Engine (WebView)

Services Sensor

Input GraphicMobile OS

HTML API’s

PhoneGap JavaScript

API’s

OS API’sOS API’s

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.

Automatic Code Generation for Cross-platform, Multi-Device Mobile Apps

Some Reflections from an Industrial Experience

Thanks

marco.brambilla@polimi.it@marcobrambi