A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
-
Upload
marco-brambilla -
Category
Technology
-
view
477 -
download
0
Transcript of A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
![Page 1: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/1.jpg)
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
![Page 2: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/2.jpg)
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!
![Page 3: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/3.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
ContextUsers expect seamless experience.But not the same experience!
![Page 4: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/4.jpg)
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
![Page 5: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/5.jpg)
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
![Page 6: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/6.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Tagging + IFML + MobMLVisual modelingPlatform tagging of all the development phases Traceability of design featuresProduct lines philosophyCode generation
![Page 7: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/7.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Why is that a problem?
Why is that a problem anyway?
![Page 8: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/8.jpg)
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 …
![Page 9: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/9.jpg)
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
![Page 10: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/10.jpg)
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
![Page 11: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/11.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Example of IFML modelGeneric View Container
Generic Events View Component
General purposeAction
![Page 12: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/12.jpg)
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
![Page 13: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/13.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Background on MobML
Reuse
Extensibility
Multi-viewpoint modeling
Mobile development approach
![Page 14: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/14.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Background on MobMLReal-time collaboration
Integration with source code
Tangibility
![Page 15: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/15.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Proposed process
![Page 16: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/16.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario: 1) Requirements
Tagging of use cases:Mobile + Web
![Page 17: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/17.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario: 2) Business Modeling (CIM)
Business process (E.g. BPMN)
![Page 18: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/18.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario: 3) Platform-ind. UI design in IFML
Interaction flow (IFML)
![Page 19: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/19.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario: 4) Mapping IFML MobML
![Page 20: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/20.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
Sample Scenario: 5) PIM design in MobML
![Page 21: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/21.jpg)
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
![Page 22: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/22.jpg)
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
![Page 23: A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.](https://reader036.fdocuments.in/reader036/viewer/2022070602/587806971a28ab971e8b4a8b/html5/thumbnails/23.jpg)
Marco Brambilla. Mobile! Wshop @SPLASH 2016
A Model-Based Method for Seamless Web and Mobile Experience
Contacts: [email protected] @marcobrambi
Thanks!