Embed Size (px)
Citation preview
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: [email protected] @marcobrambi
Thanks!
