automatic code generation for cross platform, multi-device mobile apps. an industrial experience
TRANSCRIPT
![Page 1: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/1.jpg)
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
![Page 2: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/2.jpg)
The need
![Page 3: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/3.jpg)
Agenda
• Motivation• Problem setting• MD alternatives• Experience reporting• Success stories
![Page 4: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/4.jpg)
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
![Page 5: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/5.jpg)
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?
![Page 6: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/6.jpg)
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)
![Page 8: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/8.jpg)
IFML Focus on Mobile
• PIM-level• Mobile-specific concepts• Meta-model excerpts:
![Page 9: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/9.jpg)
… and the code you can generate from IFML!
![Page 10: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/10.jpg)
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)
![Page 11: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/11.jpg)
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:
![Page 12: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/12.jpg)
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:
![Page 13: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/13.jpg)
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
![Page 14: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/14.jpg)
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:
![Page 15: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/15.jpg)
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
![Page 16: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/16.jpg)
Summary of effort for each approach
![Page 17: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/17.jpg)
Industrial Experience: WebRatio Platform
• Built on open standards– UML, BPMN, IFML
• From code generation for the Web
• to code generation for Mobile
Product
![Page 18: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/18.jpg)
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
![Page 19: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/19.jpg)
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
![Page 20: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/20.jpg)
Mobile Generated Code
![Page 21: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/21.jpg)
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
![Page 22: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/22.jpg)
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.
![Page 23: Automatic code generation for cross platform, multi-device mobile apps. An industrial experience](https://reader036.vdocuments.mx/reader036/viewer/2022062904/587806971a28ab971e8b4a87/html5/thumbnails/23.jpg)
Automatic Code Generation for Cross-platform, Multi-Device Mobile Apps
Some Reflections from an Industrial Experience
Thanks
[email protected]@marcobrambi