future-proof coding with ifml
TRANSCRIPT
FUTURE-PROOF CODING WITH IFML
Daniel Pardhe Marco Brambilla [email protected]
@marcobrambi linkedin.com/in/danielpardhe
FUTURE-PROOF CODING WITH IFML
UI DEVELOPMENT: CAN WE DO BETTER?
User interface and interaction development is a painful phase of software process for everybody! That’s why some different method needs to be thought and followed.
When was the last time you got mad
when developing the front-end of a
software application?
IT’S ALSO A COMMUNICATION PROBLEM
Different
language
Different
quality metrics
Different objectives
Communication chasm between business and IT is one of the main weaknesses of large organizations
IT’S ALSO A COMMUNICATION PROBLEM
CHALLENGE: BRIDGING THE GAP BETWEEN BUSINESS REQUIREMENTS AND IT REALIZATIONS (FROM DESIGN TO DEPLOYMENT)
Complexity of user interfaces (UIs)
Ineffective design tools
Manual specification of data and visualization
Hard to consolidate agreement
THE UI DESIGN PROBLEM
The last mile to the user: Costly and inefficient process
MODEL-DRIVEN ENGINEERING (MDE)
Engineering practices based on models
Represents MODEL SYSTEM
THE UI DESIGN SOLUTION: IFML
Platform independent description of UIs
Focused on user interactions
No definition of graphics and styles
Reference to external models
IFML OBJECTIVES
Binding to Persistence Layer
(data storage)
Interaction Options and
Navigation Paths
Binding to Business Logic
Content of the UI
User and System Events
IFML Objectives
IFML MAIN CONCEPTS
MailBox
Message List Name
Container ViewComponent Event Navigation Flow
Screens, windows
Widgets User actions Interaction paths
IFML BY EXAMPLE
IFML BY EXAMPLE
Artists List
Artists
Artist
IFML BY EXAMPLE
Event
Artists List
Artists
Artist
ViewComponent
View Container
MODEL-DRIVEN DEVELOPMENT
MODEL
MODEL-DRIVEN DEVELOPMENT
MODEL
TRANSFORMATION
SOURCE CODE
MODEL-DRIVEN DEVELOPMENT
MODEL
TRANSFORMATION
SOURCE CODE SOURCE CODE
WEB APPLICATION MOBILE APP
MODELING TOOLS AND ENGINES
New specification
IFML free and opensource editor
No code generation
WebRatio Platform tool suite
Editors
Code generators
Documentation, team work, debugging…
Learning resources
… for Web and Mobile
Further vendors engaged with the specs
ADVANTAGES
formal specification of the different perspectives of the front-end Isolation of implementation-specific issues of Uis separation of concerns (user interaction vs. backend) communication of interaction design to non-technical stakeholders automatic generation of code also for the application front-end part
IFML EXAMPLE – CONNECTING BUSINESS LOGIC
Album List
Albums
Album Deletion
IFML EXAMPLE – ONLINE PAYMENT
Shopping Cart
Customer Information
Execute the
payment
Payment Information
Confirmation
IFML EXAMPLE – ONLINE PAYMENT
Shopping Cart
Customer Information
Execute the
payment
Payment Information
Confirmation
Product List
«List»
Customer Information
«Form»
Checkout
Payment Information
«Form»
ConfirmationMessage
IFML REUSABLE MODULES
Execute the
payment
Customer Information
Customer Information
«Form»
Payment Information
Payment Information
«Form»
Amount Confirmation
Payment Execution
USING IFML MODULES
Shopping Cart
Checkout
Confirmation
Confirmation Message
«Details»
Payment Execution
Product List
«List»
INTEGRATION WITH BPMN
INTEGRATION WITH BPMN
Execute the
payment
Customer Information
Customer Information
«Form»
Payment Information
Payment Information
«Form»
Amount Confirmation
Payment Execution
SUCCESSFUL IFML PROJECTS IN INDUSTRY
SUCCESSFUL IFML PROJECTS IN INDUSTRY
Energy
Finance
Research
Transportat ion
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportat ion
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportat ion
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportat ion
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportat ion
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Major Worldwide Furniture Producer
SUCCESS STORIES OF IFML AND WEBRATIO
Fleet Management System integrated with legacy systems and high standard security 3 countries 200K users
Online leasing quotations Creditworthiness evaluation system Building construction check-up system 220 roles
Q&A and internal trouble ticket system System for organizing cash register intake at the end of the day 42 Countries
Worldwide public portal www.acer.com Workflow system for managing content production, approval and visualization 60 Countries 22 Languages
Major Worldwide Furniture Producer
CHALLENGES AND VALUE
Change of mind set of developers. From low-end
programming to high level modeling
Coherency of design and perceived unity
of the interaction
Design for the future: maintenance and
evolution is when you get the best (Acer case: 5 people for hundreds of apps)
Scalable approach with size of the
projects. Actually, the bigger the better
IT’S ALSO A COMMUNICATION PROBLEM
Extremely quick time-to-market
Repeatable, reusable, and
coherent resulting UI
Reliable bug-free code & based on
best practices
Given that IFML is an EXECUTABLE model…
Possibility of complete code
generation of the UIs
Continuous improvement &
maintenance cycle
QUESTIONS AND ANSWERS
NEXT WEBINARS
WEBRATIO - THE COMPREHENSIVE IFML DEVELOPMENT PLATFORM November 18, 2015
5pm CET (Rome) / 11am EST (New York)
LIVE DEMO - END2END APP DEVELOPMENT ON WEBRATIO December 2, 2015
5pm CET (Rome) / 11am EST (New York)
TRAINING MATERIALS
Model Driven Software Engineering in Practice
Brambilla, Cabot, Wimmer
Morgan&Claypool, USA, 2012
Interaction Flow Modeling Language Model-driven UI Engineering of Web
and Mobile Apps with IFML Richard Soley & Marco Brambilla
Morgan Kaufmann, The OMG press, USA, 2014
TRAINING MATERIALS
A complete online training library on learn.webratio.com
IFML General Overview + IFML reference card and examples