View
2.689
Download
0
Category
Preview:
Citation preview
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)
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
Recommended