A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.

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


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!


ContextUsers expect seamless experience.But not the same experience!


Problem

Different use cases, presentation, interaction, and features on different devices

Custom design for every platform should be studied

With extremely high cost


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


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


Why is that a problem?

Why is that a problem anyway?


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 …


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


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


Example of IFML modelGeneric View Container

Generic Events View Component

General purposeAction


MobileComponentMobileAction MobileActionEven

t

Example of IFML mobile model

No programming involved

Customization of code generators and styles

Designer oriented

Full code generation


Background on MobML

Reuse

Extensibility

Multi-viewpoint modeling

Mobile development approach


Background on MobMLReal-time collaboration

Integration with source code

Tangibility


Proposed process


Sample Scenario: 1) Requirements

Tagging of use cases:Mobile + Web


Sample Scenario: 2) Business Modeling (CIM)

Business process (E.g. BPMN)


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

Interaction flow (IFML)


Sample Scenario: 4) Mapping IFML MobML


Sample Scenario: 5) PIM design in MobML


Simple Scenario: 6) Code Generation

Coarse hybrid code from IFML• With WebRatio (www.webratio.com)

Refined native or hybrid code from MobML

http://www.webratio.com/


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


A Model-Based Method for Seamless Web and Mobile Experience

Contacts: [email protected] @marcobrambi

Thanks!

A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.

Technology