A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
Download as PPTX, PDF1 like795 views
The document discusses a model-based method for creating a seamless experience across web and mobile platforms, highlighting the need for a unified development process that addresses diverse user requirements. It introduces tools like IFML and MOBML for effective UI and mobile-specific modeling, aiming to reduce costs and complexity in application development. The proposed solution emphasizes traceability, code generation, and a metadata-driven approach to improve speed and customization in creating digital business apps.
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
- 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!