Front-end design of mobile applications is a complex and multidisciplinary task, where many perspectives intersect and the user experience must be perfectly tailored to the application objectives. However, development of mobile user interactions is still largely a manual task, which yields to high risks of errors, inconsistencies and inefficiencies. In this paper we propose a model-driven approach to mobile application development based on the IFML standard. We propose an extension of the Interaction Flow Modeling Language tailored to mobile applications and we describe our implementation experience that comprises the development of automatic code generators for cross-platform mobile applications based on HTML5, CSS and JavaScript optimized for the Apache Cordova framework. We show the approach at work on a popular mobile application, we report on the application of the approach on an industrial application development project and we provide a productivity comparison with traditional approaches.

1. Extending the Interaction Flow Modeling
Language (IFML) for Model Driven
Development of Mobile Applications Front End
Marco Brambilla1, Andrea Mauri1, Eric Umuhoza1,2
1 Dipartimento di Elettronica, Informazione e Bioingegneria. Politecnico di Milano
2 AtlanMod team, Ecole des Mines de Nantes
Speaker:
eric.umuhoza@polimi.it
EricUmuhoza
MobiWIS Conference, Barcelona, August 27-29 ,2014

2. Outline
 Model driven development(MDD) approach &
mobile apps development
 The Interaction Flow Modeling Language(IFML)
 Mobile Extension to IFML(mobile IFML)
 Concrete syntax by example
 Mobile IFML & Code Generation
 Conclusions

3. MDD in mobile apps front end
 Manual coding is the predominant development approach
– Reuse of design artifacts is low
– High risks of errors
– High costs for cross-platform development
 Platform-independent user interaction modeling language
can bring several benefits
– Model once and generate for any platform of choice
– It improves the development process
– It enables the communication of interface and
interaction design to non-technical stakeholders
– It allows the early validation of requirements

4. The Interaction Flow Modeling
Language
 An OMG standard designed for expressing:
– Content visualized in the user interfaces
– User events and interaction, and
– Control behavior of the front-end of SW
applications

5. IFML main concepts
 Container
 ViewComponent
 Event
 Action

6. IFML main concepts - 2
 Navigation flow
 Data flow
 Parameter binding

7. IFML concrete syntax -example
View Container Parameter Binding
Event
View Component
Action
Navigation Flow

8. IFML metamodel - Extensions
 Organized in two main packages: – IFML Core
– IFML Extensions
and then you can extend it as
you want, for different fields
and platforms (Web, Mobile, …)

9. Why IFML?
 It is an OMG Standard for Interaction Flow
Modeling
 The composition of mobile apps interface
can be expressed with the core IFML
concepts of ViewContainers and
ViewComponents
 It is extensible
 Our IFML based modeling experience

10. Mobile IFML
 Two main motivation:
–Complexity of interaction patterns to
better exploit the limited space
– Interaction with other hardware and
software components(sensors, apps,…)

11. Mobile IFML - 2
 Four main extension definitions :
– ViewContainers and ViewComponents
– MobileContext, capturing all dimensions
that characterize the user’s intent,
device’s capacity and the
environment surrounding the user
– MobileEvents, addressing the capturing
of the mobile events
– MobileAction and MobileActionEvent

12. Mobile IFML – Container & Components
 Some concepts
may be extended
to better reflect
the terminology
and properties of
mobile apps.
 Plus <<MobileSystem>> stereotype

13. Mobile IFML – MobileContext
 It assumes particular relevance in mobile apps
 The context must gather all the dimensions that characterize:
– The user's intent
– The capacity of access device
– The communication network, and etc.

14. Mobile IFML – MobileEvents
 Three categories of mobile events:
– Events generated by the interaction of
the user such as LongPress, swipe, etc.
– Events triggered by the mobile device
features such as sensors, battery, etc.
– Events triggered by user actions related to
the device components such as taking a
photo, recording a video or using the
microphone

15. Mobile IFML – MobileViewElementEvent
 Events
generated by
the interaction
of the user

16. Mobile IFML – MobileSystemEvent
 Events produced
by the mobile
system

17. Mobile IFML – MobileActionEvent
Screen MobileViewElementEvent
MobileComponent
MobileAction MobileActionEvent

18. Modeling tool - demo
Open source project
http://ifml.github.io
Eclipse plugin available at
https://ifml.github.io/update/site.xml

19. Code Generation

20. Conclusions
 A mobile extension of OMG’s standard IFML
 A Sirius based IFML modeling tool
 Prototype of the code generators
 Future works
– Improvement of the modeling tool
– Implementation of more refined code
generators
– Study of the design patterns for MD mobile
apps design
 Acknowledgement: this work was partially funded by the AutoMobile EU
7th FP SME Research project(http://automobile.webratio.com)