Marco Brambilla. Mobile! Wshop @SPLASH 2016

A Model-Based Method for Seamless Web and Mobile Experience

Marco Brambilla, Andrea Mauri, Mirco Franzago, Henry MucciniPolitecnico di Milano, Università dell’Aquila

@marcobrambi

Mobile! Workshop at SPLASH 2016 Amsterdam

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 experienceBut not the same!

Marco Brambilla. Mobile! Wshop @SPLASH 2016

ContextUsers expect seamless experience.But not the same experience!

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

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

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Tagging + IFML + MobMLVisual modelingPlatform tagging of all the development phases Traceability of design featuresProduct lines philosophyCode generation

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Why is that a problem?

Why is that a problem anyway?

Marco Brambilla. Mobile! Wshop @SPLASH 2016

WebRatio Platform Architecture

Client-side

Server-side

Web Mobile Web

Mobile App

Interaction FlowModel

Compile time Runtime

Business ProcessModel

Data Model

Operational Logic Model

Integration

Layout/Style

DBMS SAP / IBM Other legacy …

Marco Brambilla. Mobile! Wshop @SPLASH 2016

The real challengeNever 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

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Background: IFMLOMG IFML (Interaction Flow Modeling Language)

An OMG Standard for User Interaction ModelingRight level of abstraction, technology- and platform-independentIntegrated with other languagesExtensible

www.ifml.org

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Example of IFML modelGeneric View Container

Generic Events View Component

General purposeAction

Marco Brambilla. Mobile! Wshop @SPLASH 2016

MobileComponentMobileAction MobileActionEven

t

Example of IFML mobile model

No programming involved

Customization of code generators and styles

Designer oriented

Full code generation

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Background on MobML

Reuse

Extensibility

Multi-viewpoint modeling

Mobile development approach

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Background on MobMLReal-time collaboration

Integration with source code

Tangibility

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Proposed process

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Sample Scenario: 1) Requirements

Tagging of use cases:Mobile + Web

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Sample Scenario: 2) Business Modeling (CIM)

Business process (E.g. BPMN)

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Sample Scenario: 3) Platform-ind. UI design in IFML

Interaction flow (IFML)

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Sample Scenario: 4) Mapping IFML MobML

Marco Brambilla. Mobile! Wshop @SPLASH 2016

Sample Scenario: 5) PIM design in MobML

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

Marco Brambilla. Mobile! Wshop @SPLASH 2016

ConclusionDevelopmen

t Speed

Native SDKs

Cross-compile toolsHybrid containers

Our proposalMetadata-driven

tools

Prepackaged apps

Level of customization

Speed and level of customization needed for addressing the new «digital business» apps

Marco Brambilla. Mobile! Wshop @SPLASH 2016

A Model-Based Method for Seamless Web and Mobile Experience

Contacts: marco.brambilla@polimi.it @marcobrambi

Thanks!