1. FUTURE-PROOF CODING WITH IFML

2. Daniel PardheMarco Brambilla
marco.brambilla@polimi.it
@marcobrambi linkedin.com/in/danielpardhe
daniel.pardhe@cognizant.com
FUTURE-PROOF CODING WITH IFML

3. 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?

4. 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

5. IT’S ALSO A COMMUNICATION PROBLEM
CHALLENGE: BRIDGING THE GAP BETWEEN BUSINESS REQUIREMENTS
AND IT REALIZATIONS (FROM DESIGN TO DEPLOYMENT)

6. 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

7. MODEL-DRIVEN ENGINEERING (MDE)
Engineering practices based on models
RepresentsMODEL SYSTEM

8. THE UI DESIGN SOLUTION: IFML
Platform independent
description of UIs
Focused on
user interactions
No definition of
graphics and styles
Reference to
external models

9. 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

10. IFML MAIN CONCEPTS
MailBox
Message List
Name
Container ViewComponent Event Navigation Flow
Screens,
windows
Widgets User actions Interaction paths

11. IFML BY EXAMPLE

12. IFML BY EXAMPLE
Artists
List
Artists
Artist

13. IFML BY EXAMPLE
Event
Artists
List
Artists
Artist
ViewComponent
View Container

14. MODEL-DRIVEN DEVELOPMENT
MODEL

15. MODEL-DRIVEN DEVELOPMENT
MODEL
TRANSFORMATION
SOURCE CODE

16. MODEL-DRIVEN DEVELOPMENT
MODEL
TRANSFORMATION
SOURCE CODE
SOURCE CODE
WEB APPLICATION
MOBILE APP

17. 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

18. 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

19. IFML EXAMPLE – CONNECTING BUSINESS LOGIC
Album
List
Albums
Album
Deletion

20. IFML EXAMPLE – ONLINE PAYMENT
Shopping Cart
Customer Information
Execute
the
payment
Payment Information
Confirmation

21. IFML EXAMPLE – ONLINE PAYMENT
Shopping Cart
Customer Information
Execute
the
payment
Payment Information
Confirmation
Product
List
«List»
Customer
Information
«Form»
Checkout
Payment
Information
«Form»
Confirmation
Message

22. IFML REUSABLE MODULES
Execute
the
payment
Customer
Information
Customer Information
«Form»
Payment
Information
Payment Information
«Form»
Amount
Confirmation
Payment Execution

23. USING IFML MODULES
Shopping Cart
Checkout
Confirmation
Confirmation
Message
«Details»
Payment
Execution
Product
List
«List»

24. INTEGRATION WITH BPMN

25. INTEGRATION WITH BPMN
Execute
the
payment
Customer
Information
Customer Information
«Form»
Payment
Information
Payment Information
«Form»
Amount
Confirmation
Payment Execution

26. SUCCESSFUL IFML PROJECTS IN INDUSTRY
SUCCESSFUL
IFML PROJECTS
IN INDUSTRY
Energy
Finance
Research
Transportation
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportation
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Finance
Research
Transportation
Government
Non
Disclosable
Logo
Transportation
Government
Industry Retail and Luxury
Non
sclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Energy
Finance
Research
Transportation
Government
Industry Retail and Luxury
Non
Disclosable
Logo
Non
Disclosable
Logo
Non
Disclosable
Logo
Major
Worldwide
Furniture
Producer

27. 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

28. 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

29. 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

30. QUESTIONS AND ANSWERS

31. 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)

32. THANK YOU FOR YOUR ATTENTION
Marco Brambilla
marco.brambilla@polimi.it
@marcobrambi

33. 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

34. TRAINING MATERIALS
A complete online training library on learn.webratio.com
IFML General Overview
+ IFML reference card and examples