This document summarizes a presentation on model-driven development approaches for mobile and IoT applications. It discusses modeling user interactions and integrating IoT, implementation strategies like code generation from platform-independent models to native or cross-platform code. It also presents an approach for application monitoring and user behavior analysis based on integrating logs from the runtime with the application models. Finally, it discusses barriers to adopting model-driven approaches and results from experiments on modeling effort.

1. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
Domain-Specific Modeling and Code
Generation for Cross-platform Mobile and
IoT-based Applications
Contact:
Dr. Eric Umuhoza
eric.umuhoza@univaq.it
@EricUmuhoza
Università degli Studi
dell'Aquila
5/7/2017

2. Agenda
 User Interaction Modeling & Design Methodology
 Implementation
 Application Monitoring (User Behavior Analysis)
 Experiments on Modeling Effort
 Questions

3. Context
▪ More than 2.6 billion of smart-phone users by 2020
▪ Increasing number of mobile apps
▪ 5 million apps expected in Apple App store by 2020
▪ App revenues expected to reach 92 billion US
dollars by 2018
Motivation

4. A
B
Models in software development: Traditional usage
 Communication with customers and users
 Support for software design

5. Models in software development: Models as programs
Applications are generated (semi) automatically
from models

6. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
User Interaction Modeling Language
Mobile Modeling Language
Università degli Studi
dell'Aquila

7. Mobile Modeling Language - Requirements
 A platform independent
 Based on standards
 Covering mobile-specific requirements
 Code generation
 Easy to use
AutoMobile is EU 7th FP SME Research project which aims at creating solutions
that abridge the barriers of SMEs in the market of mobile apps development
http://automobile.webratio.com

8.  A platform independent modelling (PIM) language
o A mobile-specific extension of IFML (Interaction Flow Modeling
Language)
o Covering mobile-specific requirements
o Amenable to code generation
 Why IFML?
o It is an OMG Standard for User Interaction Modeling
o Right level of abstraction, technology-independent
o It is extensible
o Is proposed by Polimi and Webratio
Mobile Modeling Language

9. Interaction Flow Modeling Language (IFML)
Album
Search
«Window» AlbumSearch
Album
List
«Window» Albums
Album
Details
«Window» Album
«ParameterBindingGroup»
Title  AlbumTitle
Year  AlbumYear
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«Form» «List» «Details»
EventViewContainer
ViewComponent
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
Action
Navigation Flow
ParameterBinding

10. Mobile–specific extension of IFML
 Four main sets of mobile-specific concepts
1. ViewContainers and ViewComponents
• Screen
• MobileViewComponent
2. Events
• User interactions ( E.g.: touch, turn, pan)
• Device’s features (E.g.: battery, memory)
• Sensors
3. Mobile Actions
• Camera
• Microphone
4. Mobile Context
• Network
• Capacity
Bottom-up approach
Investigation of
Mobile
Platforms
Extraction of
Common Features
Abstraction
and
Conceptualization

11. Overview of Mobile Extensions

12. Mobile IFML - Events
 Events generated by the
interaction of the user
(gestures, …)
 Mobile Container
MobileContainer
MobileEvent
«Screen» List
«List» Lists
Options
«LongPress»
«Screen» Options
«Details» List
Edit list Delete list

13. Mobile IFML – Access to native features
MobileComponent
MobileAction MobileActionEvent
 Access to system features
 Native functions
 Phone sensors

14. Mobile IFML – Mobile Context
 It assumes particular relevance in mobile apps
 The context must gather all the dimensions that characterize
• Capacity of access device
• Communication network, etc.

15. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
User Interaction Modeling Language
IOT Integration

16. IoT Integration- Overview
 Interactions between the user and the IoT systems in two phases
1. User Terminal
2. TerminalIoT Devices

17. IoT Extensions
 IoT Actions
 IoT Events
 No new
ViewComponent
&
ViewContainer

18. IoT user interaction patterns – Set
Make
Cappuccino
Turn on
100°C
 Set patterns
• One device – One operation
• One device – More operations
• More devices – One operation
• More devices – More operations
• One device – One Program

19. IoT user interaction patterns – Get
• State of a device
• Details of a device
• Information from device
• Search device
• Nearby devices
• …
 Get patterns

20. Patterns- based UI modeling
▪ Get Information from whole Category
▪ Get Details of a Device
▪ State of a device
▪ Information from device

21. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
Implementation:
Code Generation Strategies
Università degli Studi
dell'Aquila

22. Code generation strategies
 CIM to several PIMs
 PIM to several PSMs
▪ Many other combinations
▪ Skipping levels
Model-driven architecture (MDA)
Application
Code
Model-to-Text
Transformation
(M2T)

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

24. PIM to Native Code
 Cross platform is achieved by providing one native code generator for
each targeted platform.
 Platform-specific details are embedded in the code generators
 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:

25. PIM to PSM to Native Code
 A global PIM is transformed into 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
▪ Example for iOS:

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

27. PIM to Cross-platform Code
 From PIM it generates the code required by the cross platform framework
▪ PhoneGap, AppCelerator Titanium, and Xamarin
 Requires only one model and one generator
▪ Plus tricks and tweaks!!
 E.g., PhoneGap
 USE: multiple platform availability
and time to market are more
important than high performance

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

29. Industrial Experience WebRatio Mobile Platform
 View Containers
Screen
Screen Set
Toolbar
 View Components
Details
Form
List
Message
Hierarchy
View Component
 Events
On Submit
On Select
 Flows
Navigation Flow
Data Flow

30. PIMCross-platfom Code (PhoneGap)

31. Industrial Experience: the Semioty Platform
www.semioty.com

32. Experience: the Sem-IoT-y platform

33. DSLs Advantages
 From Communication to Implementation
1. Models are used to automatically generate the applications

34. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
Application Monitoring:
Model-Driven Framework for User
Behavior Analysis
Università degli Studi
dell'Aquila

35.  Web analytics, the tool of choice to inform
• Business users
• Designers
 Several tools exist that support analysis of Web server logs
• residence time
• page views
• visitors,
• etc.
 Unaware of the design structure and the application content
• Design structure (what is actually present in the page)
o Hidden in the source code
• Content (entities involved)
o Hidden in the database
Context

36.  Provide valuable insights on application usage to
• designers
• decision makers
 Integration of two approaches
• Web Log Analytics
• Model Driven Development (MDD)
Objective
✓ The models include the structure of the application
MDD, is a software development paradigm where the models
are the main artefacts of the development process

37. Approach
Application
Modeling
(IFML Editor)
Deployment
Code Generator
(WebRatio)
Execution
App. Server
(Web Server + DB)
Analysis
(Spark Analyzer)
Model Code
RTX
Log
Web Server
Log
Data Visualization
Charts
+
Colored Models
Analysis
The runtime component log (RTXLog) stores events and data produced and consumed by the
application runtime for serving page requests. It traces the history of the ViewContainers,
ViewComponents, and operations that are executed, along with the executed queries.

38. Logs Integration
(d)
(c)
(b)
Model
RTXLog
Web Server Log
Database
RTXLog
WebServerLog
Model
Database
EnrichedLog
GlobalLog
FinalLog
RTX.sessionId = WebServer.sessionId AND
RTX.timestamp = WebServer.timestamp
EnrichedLog.elementId = Model.elementId
GlobalLog.tabelName = Database.tableName
AND Database.attributeName=“OID”
AND GlobalLog.instanceID = Database,value
(a)
(a)
(a)
(a)
• RTXLog stores events, data, ViewContainers and
ViewComponents. It traces operations that are
executed along with executed queries
• EnrichedLog contains Ids of all UI elements
• GlobaLog contains complete information
of UI elements
 Statistics are computed as SQL-like queries on the FinalLog
 Logs Integration

39. Analyses
 Navigation Based Analyses
o Includes information regarding how the users navigate the Web site
o Examples:
• Entrance Rate
• Bounce Rate
• Page Visit
• Residence Time
• Link Navigation
• Etc
 Content Based Analyses
o Comprehends information regarding the domain entities involved in the UI,
their types and their semantics
o Example (e-commerce website)
• Top K Visualized Books
• Top K Visualized Authors
• Top K Clicked Books
• Etc

40. Data Visualization Tool
Traditional charts like pie charts, bar charts, navigation flow
charts and so on..

41. Visual Feedback on Model Editor
Three types of visualization:
1. Color: the analytics is shown through the change of color of the corresponding model element
2. Label: the analytics is shown with a label on the corresponding model element
3. Properties: the analytics is shown in a separate property panel
 Link Out Ratio
 Link In Ratio
 …
 Residence Time
 Page visit
 …

42. DSLs Advantages
 From page level to Content level analysis
 Analytics visualized on models
1. Models are used to automatically generate the applications
2. Models allow to deepen the understanding user behavior over
generated applications

43. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
Barriers in the Adoption of Model-driven
Development Approaches
 How much is Application Modeling Time Consuming?
Università degli Studi
dell'Aquila

44. What is software modeling?
Where
▪ Design is Understanding, reasoning, and thinking about a solution
▪ Drawing and tool interaction is the Expression of the design in a
modeling notation
Modeling = Drawing and tool interaction
Modeling = Design + Drawing and tool interaction

45. Goal
Research Question:
RQ1: Ratio between Modeling Effort and Design-Thinking Effort
Understand whether it is modeling or designing that
dominates the effort for creating UML model

46. Experiments
Assumption : Participants do not think about the solution in phase β
Design Time DT = Tα – Tβ
Model Drawing Time MDT = Tα - DT
Design Time Percentage (DTP) = DT/ Tα
A two-phase experiment
▪ Phase α: create a domain model that addresses the assignment
Tα = Effort spent during Phase α = Design Time + Model Drawing Time
(Eq.2)
▪ Phase β: re-draw the same model as copy of the diagram produced in phase α
Tβ = effort spent during phase β
(Eq.1)
(Eq.3)
(Eq.4)
(Eq.5)

47. Experiment setup
▪ 3 application scenarios
• Every scenario describes a system to be designed
▪ 48 users
▪ 2 tests per user
Procedure with participants
1. Introduction
2. Instruction (test scenario)
3. Modeling assigned scenarios
1. Modeling phase
2. Redraw phase
4. User Questionnaire

48. Results analysis
Ratio between Modeling Effort and Design-Thinking Effort
Modeling effort BUT
• Design leads to software success
• Reuse
• Maintenance
▪ Model vs code
• Model-driven development
▪ Implementation from models
DSLs  Productivity
 The fault of supposedly unproductive processes should not be blamed on modeling
 But to (anyhow necessary) time devoted to thinking about the problem and identifying the solution

49. Conclusions
 User Interaction modeling for Mobile and IoT Systems
 Applications can be automatically obtained from models
 Model-driven development allows to enrich analytics on application
usage
(A case of Cognification of Model-driven Software Engineering?
“We believe cognification could drastically improve the benefits and reduce the
costs of adopting MDSE.”: J.Cabot and M. Brambilla )
 Domain specific modeling as a key for MDD adoption
o Choose right DSLs & tools
o Adapt standards languages to your needs
o If necessary, invest in custom solutions

50. References
 R. Jolak, E. Umuhoza, M. Chaudron, and M. Brambilla “Dissecting Design Time
and Modeling Time in UML Modeling”. EASE 2017.
 C. Bernaschina, M.Brambilla, A. Mauri, and E. Umuhoza "A Big Data Analysis
Framework for Model-Based Web User Behavior Analytics”. ICWE 2017.
 E. Umuhoza, M. Brambilla. “Model Driven Development Approaches for Mobile
Applications: A Survey”. MobiWIS 2014,22-24 August 2016, Vienna, Austria, 2016.
 E. Umuhoza, H. Ed-douibi, M. Brambilla, J. Cabot, A. Bongio “Automatic Code
Generation for Cross-platform, Multi-Device Mobile Apps: Some Reflections
from an Industrial Experience”. MobileDeli 2015,Pennsylvania,USA, October, 2015
 E. Umuhoza, M. Brambilla, D. Ripamonti, Jordi Cabot. “An Empirical Study on
Simplification of Business Process Modeling Languages”. SLE
2015,Pennsylvania,USA, October 25-27, 2015
 M. Brambilla, A. Mauri, Eric Umuhoza. “Extending the Interaction Flow Modeling
Language (IFML) for Model Driven Development of Mobile Applications Front
End”. MobiWIS 2014, Barcelona, Spain, August 27-29, 2014.

51. Firma convenzione
Politecnico di Milano e Veneranda Fabbrica
del Duomo di Milano
Aula Magna – Rettorato
Mercoledì 27 maggio 2015
Thanks
Università degli Studi
dell'Aquila
Murakoze!!!
Grazie