Consumer-centered software applications nowadays are required to be available both as mobile and desktop versions. However, the app design is frequently made only for one of the two (i.e., mobile first or web first) while missing an appropriate design for the other (which, in turn, simply mimics the interaction of the first one). This results into poor quality of the interaction on one or the other platform. Current solutions would require different designs, to be realized through different design methods and tools, and that may require to double development and maintenance costs. In order to mitigate such an issue, this paper proposes a novel approach that supports the design of both web and mobile applications at once. Starting from a unique requirement and business specification, where web– and mobile–specific aspects are captured through tagging, we derive a platform independent design of the system specified in IFML. This model is subsequently refined and detailed for the two platforms, and used to automatically generate both the web and mobile versions. If more precise interactions are needed for the mobile part, a blending with MobML, a mobile-specific modeling language, is devised. Full traceability of the relations between artifacts is granted.

1. Marco Brambilla. Mobile! Wshop @SPLASH 2016
A Model-Based Method for
Seamless Web and Mobile Experience
Marco Brambilla, Andrea Mauri, Mirco Franzago, Henry Muccini
Politecnico di Milano, Università dell’Aquila
@marcobrambi
Mobile! Workshop at SPLASH 2016 Amsterdam

2. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Context
Consumer software is expected to properly work
• across devices, both mobile and desktop
• as web apps in browser or a native app
Users expect seamless experience
But not the same!

3. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Context
Users expect seamless experience.
But not the same experience!

4. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Problem
Different use cases, presentation, interaction, and
features on different devices
Custom design for every platform should be studied
With extremely high cost

5. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Proposed Solution
A unified development process for multi-platform and multi-
device applications
Characterization of variants by design vs. as a side effect
(“responsive” philosophy)
Based on models, transformations and code generation

6. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Tagging + IFML + MobML
Visual modeling
Platform tagging of all the development phases
Traceability of design features
Product lines philosophy
Code generation

7. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Why is that a problem?
Why is that a problem anyway?

8. Marco Brambilla. Mobile! Wshop @SPLASH 2016
WebRatio Platform Architecture
Client-side
Server-side
Web Mobile
Web
Mobile
App
Interaction Flow
Model
Compile time Runtime
Business Process
Model
Data Model
Operational Logic Model
Integration
Layout/Style
DBMS SAP / IBM
Other legacy
…

9. Marco Brambilla. Mobile! Wshop @SPLASH 2016
The real challenge
Never wonder: Mobile first or Web first
Managing and keeping track of diverse requirements of
the different platforms
Complexity (and intertwining) of levels:
Platform-, Language-, Device- specific features

10. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Background: IFML
OMG IFML (Interaction Flow Modeling Language)
An OMG Standard for User Interaction Modeling
Right level of abstraction, technology- and platform-independent
Integrated with other languages
Extensible
www.ifml.org

11. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Example of IFML model
Generic View Container
Generic Events View Component
General purpose
Action

12. Marco Brambilla. Mobile! Wshop @SPLASH 2016
MobileComponent
MobileAction MobileActionEvent
Example of IFML mobile model
No programming involved
Customization of code
generators and styles
Designer oriented
Full code generation

13. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Background on MobML
Reuse
Extensibility
Multi-viewpoint modeling
Mobile development approach

14. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Background on MobML
Real-time collaboration
Integration with source code
Tangibility

15. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Proposed process
Requirements
Collection
Platform-independent
UI Modeling
Mobile-specific
modeling
Business
Modeling Mobile Code
Generation
Web Code
Generation
Execution
Mobile Code
Generation

16. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario:
1) Requirements
Tagging of
use cases:
Mobile + Web

17. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario:
2) Business Modeling (CIM)
Business process (E.g. BPMN)
Register for
Enrollment
Visit
Secretariat
Pay Tuition
W
M M+W
Book
Secretariat
M+W
Student

18. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario:
3) Platform-ind. UI design in IFML
Interaction flow (IFML)

19. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario:
4) Mapping IFML  MobML

20. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario:
5) PIM design in MobML

21. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Simple Scenario:
6) Code Generation
Coarse hybrid code from IFML
• With WebRatio (www.webratio.com)
Refined native or hybrid code from MobML

22. Marco Brambilla. Mobile! Wshop @SPLASH 2016
Conclusion
Development
Speed
Native SDKs
Cross-compile tools
Hybrid containers
Our proposal
Metadata-driven tools
Prepackaged apps
Level of customization
Speed and level of
customization needed for
addressing the new
«digital business» apps

23. Marco Brambilla. Mobile! Wshop @SPLASH 2016
A Model-Based Method for
Seamless Web and Mobile Experience
Contacts: marco.brambilla@polimi.it @marcobrambi
Thanks!