This tutorial focuses on the Domain-specific Language (DSL) called IFML, which has been adopted as a standard by OMG in March 2013. The Interaction Flow Modeling Language (IFML) is designed for expressing content, user interaction and control behaviour of the front-end of software applications, as well as the binding to the persistence and business logic layers. IFML is the missing piece for modeling the front end of software applications and perfectly complements other modeling dimensions in broad system modeling projects. Therefore, IFML works best when integrated with other modeling languages in the MDA suite, such as UML and BPMN. This tutorial illustrates the basic concepts of IFML, presents the design best practices and integration with other modelling languages, and discusses some industrial experiences (also featuring quantitative measures of productivity) achieved by the companion tool WebRatio. At the end of the tutorial, attendees will get a general knowledge about IFML (they will be able to design simple models and to derive models from existing interfaces), will be able to associate front-end design with system modelling at large, will see the associated MDE tool WebRatio at work, and will get a glimpse of real-life industrial applications developed for large enterprises. This will let them appreciate the advantages of a model-driven development approach at work within large-scale industrial project. The tutorial is aimed at both industrial and academic attendees, including Ph.D. students. Prerequisite for attending the tutorial is a general knowledge about the bases of model-driven development, software engineering, and some general purpose modelling languages like UML.

1. IFML: Building the front end of
Web and Mobile applications with OMG’s
Interaction Flow Modeling Language
Marco Brambilla
marco.brambilla@polimi.it
@marcobrambi

2. The modeling approach

3. What is a model?
Models
Mapping Feature A model is based on an original (=system)
Reduction Feature A model only reflects a (relevant) selection of
the original‘s properties
Pragmatic Feature A model needs to be usable in place of an
original with respect to some purpose
ModelrepresentsSystem
Purposes:
• descriptive purposes
• prescriptive purposes

4. CIM, PIM, PSM
Modeling Levels
Computation independent (CIM): describe requirements and
needs at a very abstract level, without any reference to
implementation aspects
Platform independent (PIM): define the behavior of the
systems in terms of stored data and performed algorithms,
without any technical or technological details
Platform-specific (PSM): define all the technological aspects in
detail

5. Modeling levels - CIM
Eg., business process

6. Modeling levels - PIM
Eg., business object description and constraints

7. Modeling levels - PSM
How the functionality in the PIM is realized on a certain platform
Using a UML-Profile for the selected platform, e.g., EJB

8. The UI Modeling Problem

9. User interface and interaction development
is a painful phase of software process
… for everybody!
… not only for the Web!
UI Modeling Problem

10. Costly and
Inefficient process
Complexity of
user interfaces (UIs)
Ineffective
tools
Manual
development
No MDE
technology
The UI Design Problem

11. No model
driven
engineering
Platform independent
description of UIs
Focused on user
interactions
No definition of
graphics and styles
Reference external
models
The UI Design solution: IFML

12. User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)
Standardization gap

13. 13
We were going to make them an
offer they couldn’t refuse.
In less than 2 years
(a record in OMG!), we obtained
approval of the IFML standard
The Object Management Group

14. User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)
In less than 2 years (a record in OMG!), we obtained approval of the beta
IFML standard
Version 1.0 due to come out in these weeks
Standardization gap

15. The Interaction Flow
Modeling Language

16. IFML Objectives
Binding to Persistence
Layer
Navigation Path
Binding to
Business Logic
Content
Event

17. IFML Objectives: Content
Content

18. IFML Objectives: Navigation Path

19. IFML Objectives: Navigation Path

20. IFML Objectives: Events
Mouse Over

21. IFML Objectives: Events

22. IFML Objectives: Binding to business logic

23. IFML Objectives: Binding to business logic

24. IFML Objectives: Binding to persistence
Content
Book
Title: string
Cover: file
List Price: currency
Price: currency
Save: currency
Rating: integer
………

25. IFML Overview - Extensibility

26. IFML Essentials

27. Multiple views for the same application
Mobile and multi-device applications
Visualization and input of data, and production of events
Components independent of concrete widgets and presentation
Interaction flow, initiated by the user or by external events
User context: the user status in the current instant of the interaction (position,
history, machine, platform,…)
Modularization of the model (design-time containers for reuse purpose)
User input validation and constraints, according to OCL or other existing
constraint languages
Covered aspects

28. IFML by example
Basic navigation flow between ViewComponents

29. IFML by example
Basic navigation flow between ViewComponents
Artists
List
Artists
Artist
Event
View
Component
View Container
ParameterBinding«ParameterBindingGroup»
SelectedArtist  AnArtist

30. IFML by example
Album
Search
«Window» AlbumSearch
Album
List
«Window» Albums
Album
Details
«Window» Album
«ParameterBindingGroup»
Title  AlbumTitle
Year  AlbumYear
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«Form» «List» «Details»

31. IFML by example
Nesting of ViewContainers
Tagged ViewContainers (XOR)
Artist and
Album List
Albums&Artists
Albums&Artists
Artist Details
Artist
Album Details
Album
[XOR] Album or Artist
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«ParameterBindingGroup»
SelectedArtist  AnArtist
Select Artist
Select Album

32. ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
IFML – adding details to ViewComponents
«DataBinding» MailMessage
«ConditionalExpression»
self.mm2MailMessageGroup =
MailBox
«List» Message List
«Parameter» MailBox : MailBox

33. Joint use of IFML and other modeling languages:
• DataBinding to classes and attributes of UML Class Diagrams
• Also with other content models, such as: Entity-Relationship,
Ontologies, …
Data binding

34. IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum

35. Joint use of IFML and other modeling languages
Connection of Actions to back-end business logic as
• UML methods of classes
• whole UML dynamic diagrams
– activity diagram, sequence diagram, state chart diagram, …
Dynamic Behaviour

36. IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«Behaviour»
Album.Delete

37. OnSelect event
OnSubmit event
IFML – subtyping events
Throwing
events
Catching
events

38. .. And as many others as you want!
IFML – subtyping components

39. IFML by example
ActivationExpression, SubmitEvent, Event generation
MessageList
MailBox
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo Labels
«ActivationExpression»
not MessageSet.isEmpty()
MessageSelection
Delete
Archive
Report
«ParameterBindingGroup»
SelectedMessages  MessageSet
«ParameterBindingGroup»
SelectedMessages  MessageSet
«List»

40. IFML concrete syntax by example
intra-component events and flows
[L] Message Writer
Send
«Form» Message Writer
«SimpleField» to: String
«SimpleField» cc: String
«SimpleField» bcc: String
«SimpleField» subject: String
«SimpleField» body: String
«Parameter» State
«SimpleField» attachment: …
Save
Add cc
Add bcc
Edit Subject
Add attachment
Reply to all
Reply
Forward
Discard
«ActivationExpression»
State <> “Forward”
Send Save
«ActivationExpression»
State = “Reply” or
State = “Reply All”
«ParameterBindingGroup»
“Re:” + subject  subject
from  to
cc  cc
body  body
“Reply All”  State
«ParameterBindingGroup»
“Re:” + subject  subject
from  to
cc  cc
body  body
“Reply All”  State
«ParameterBindingGroup»
“Fw:” + subject  subject
body  body
“Forward”  State
«ActivationExpression»
State <> “Reply”
«ActivationExpression»
State <> “Reply All”
Action
Confirmed
Action
Confirmed

41. IFML concrete syntax by example
<<Details>>
Confirmation
Message
Confirmation Page
Action
Confirmed
Capturing of custom events
Note: typical problem of event-based systems (termination, …)

42. IFML example – online payment
Product
List
Shopping Cart
«List»
Customer
Information
Customer Information
«Form»
Execute
the
payment
Checkout
«ParameterBindingGroup»
Name  Name
Payment
Information
Payment Information
«Form»
«ParameterBindingGroup»
Name  Name
CreditCard  CC
Confirmation
Confirmation
Message
«Details»
«ParameterBindingGroup»
Total Amount

43. IFML concrete syntax – modules
IFML Modules - definition
Execute
the
payment
«ParameterBindingGroup»
Name  Name
«ParameterBindingGroup»
Name  Name
CreditCard  CC
Customer
Information
Customer Information
«Form»
Payment
Information
Payment Information
«Form»
Amount
Confirmation
Payment
Execution

44. IFML concrete syntax – modules
IFML Modules - usage
Shopping Cart
Checkout
«ParameterBindingGroup»
Total Amount
Confirmation
Confirmation
Message
«Details»
Payment
Execution
Product
List
«List»

45. Multiple aspects modeling – 1
(business and requirements)
UML Use Case BPMN process
UML Sequence
IFML
UML Statechart
Handle Rental
Sales Clerk
Handle Renter
<<Include>> <<Extend>>
Handover Car
<<UML Actor>>
Sales Clerk
<<UML
Model>>
IT
system
new rental
change
days
accept
payment

46. Integration with UML Use Cases
Each use case can be described by
A business process
A plain UI description in IFML
Some UML dynamic diagrams (e.g., activity, sequence, …)
Handle Rental
Sales Clerk
Handle Renter
<<Include>> <<Extend>>
Handover Car

47. Integration with BPMN
The UI of each activity
can be described by
An IFML module
Some UML dynamic
diagrams (e.g.,
activity, sequence, …)
Execute
the
payment
«ParameterBindingGroup»
Name  Name
«ParameterBindingGroup»
Name  Name
CreditCard  CC
Customer
Information
Customer Information
«Form»
Payment
Information
Payment Information
«Form»
Amount
Confirmation
Payment
Execution

48. Example of UML - IFML mapping
IFML Model
<< Use Case>>
Handle Rental
xUMLUseCaseDiagram
<<xUML Actor>>
Sales Clerk
<< Use Case>>
Handle Renter
<<Include>> <<Extend>>
<< Use Case>>
Handover Car
<<UML Actor>>
Sales Clerk
Handle
Rental
xUML Sequence Diagrams
<<UML Model>>
IT system
new rental
change dates
accept payment
IFML models can be
reworked or refined
after being generated

49. Multiple aspects modeling – 2
(implementation and architecture)
UML Sequence
UML Deployment
IFML
UI Mockup models

50. Description of deployment architecture
UI is just one facet of system design
Often need to position it in a broader architectural vision
UML deployment diagram
Integration with UML

51. 51
UML
Sequence
Diagrams
Tiers and
calls
Explicit
description of
interactions
between tiers

52. • Manual specification of BPMN process model
• Automatic transformation of BPMN to WebML
• Possible manual refinement of WebML models
• Automatic running code generation on J2EE platform
• Virtuous development cycle
Model-driven Development Process
(IFML)

53. The generated model artifacts

54. Executability experiment within OMG
IFML
editor
IFML
code
generator
UML
editor
Alf editor
+ parser
Alf
compiler
fUML
model
fUML
Interpreter
Platform
specific
UI code
produces
calls
IFML
model
produces
calls
input
UI
execution
backend
business logic
execution

55. An official metamodel of the language which describes the semantics of and
relations between the modeling constructs
A graphical concrete syntax for the interaction flow notation which provides an
intuitive representation of the user interface composition, interaction and control
logic for the front-end designer
A UML Profile consistent to the metamodel
An interchange format between tools using XMI
All this, specified through standard notations themselves
Practical results of having a standard

56. Static aspects
Also: interchange with profile-based diagrams.
The UML Profile for IFML
«page»
AlbumSearch
«page»
Albums
«page»
Album
Album Search Album Index Album Detail
Dynamic aspects
«index»
MBox List
«index»
Message
Index
SelectMailMessages(mBox)

57. BPMN and/or UML editor
Tight and seamless integration between different modeling tools
• Thanks to XMI interchange format, UML profiles, vendor-specific notation
implementations
• Thanks to model to model transformations
IFML modeling and
industrial-strenght
UI generation
Model integration and interchange
UML tool implementing
IFML profile
Other Domain-
specific modeling tool
XMI model
exchange
Model to
model
transformation

58. Joint usage of IFML with other MDA languages can be devised:
• SysML
• SoaML
• …
… and also with other frameworks (e.g., Model Driven Enterprise
Engineering)
Broader, enterprise-wide system modeling

59. The Metamodel
-- excerpts --

60. InteractionFlowModel

61. IFML Model

62. ViewElements

63. Referencing Content and Behaviour

64. Events

65. Context

66. Examples

67. Typical email interface
Usability
Friendliness
Complex interaction flows
Example 1: online mailer (e.g., Gmail)

68. [D] [L] MailMessages
[XOR] MAIL Top
[L] Contacts
Top down design from containers

69. Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] MAIL Top
[L] MessageWriter
«List»
«List»
…
Starting adding ViewComponents

70. Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] MAIL Top
[L] MessageWriter
«List»
«List»
«ParameterBindingGroup»
SelectedMailBox  MailBox
…
.. And further details

71. «List» MBoxList
«List» MessageList
«DataBinding» MailMessage
«ConditionalExpression»
self.mm2MailMessageGroup = MailBox
«DataBinding» MailMessageGroup
«ParameterBindingGroup»
SelectedMailBox  MailBox
MessageList
Parameters and Conditions
«Parameter» MailBox

72. MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
MailBox
Labels
«ActivationExpression»
not MessageSet.isEmpty()
«ParameterBindingGroup»
SelectedMessages  MessageSet
«List»
Activation expressions

73. MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MessageSelection
«Modeless» Tag Chooser
«Modal» Tag Creator
Select Tag Tag Folder List
Create New
New Tag FolderCreate
Message toolbar
MessageSelection
[XOR] Tags
Mailbox
«List»
«List»
«Form»

74. MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
«Modeless» Tag Chooser
«Modal» Tag Creator
Select Tag
MailBox
Tag Folder List
Create New
New Tag Folder
Create
Delete
Archive
Report
Associate
to Tag /
Move to
folder
Create Tag
and
Associate
Tag / Move
to folder
«List»
«ParameterBindingGroup»
SelectedMessages  MessageSet
«ParameterBindingGroup»
SelectedMessages  MessageSet
«ParameterBindingGroup»
SelectedTag  ATag
«List»
«ParameterBindingGroup»
NewTagName  TagName
«Form»

75. [XOR] MessageSearch
[D] Search
Message keyword
search
«Modeless» FullSearch
Message Full
Search
Show search options
Search mail Search mail
MailBox
Message List
«List»
«Form» «Form»
«ParameterBindingGroup»
Keyword  Key
«ParameterBindingGroup»
Keyword  Key
From  FromKey
To  ToKey
«ParameterBindingGroup»
Keyword  Keyword
Search forms

76. [XOR] MessageSearch
[D] Search «Modeless» FullSearch
Search mail
MailBox
«Form» Message Keyword Search «Form» Message Full Search
«SimpleField» Keyword: String
«SimpleField» Keyword: String
Search mail
«SimpleField» From: String
«List» Message List
«DataBinding» MailMessage
«ConditionalExpression» MailMessage IN
self.mm2MailMessageGroup = Mailbox
«ConditionalExpression»( if (Key.size() <= title.size()) then
Sequence(1..title.size() - Key.size()) -> exists(i |
title.substring(i,i+ Key.size()) = Key )
else
false) OR
(if (from.size() <= self.from.size()) then
Sequence(1..self.from.size() - from.size()) -> exists(i |
self.from.substring(i,i+ from.size()) = from )
else
false
)
Show search
options«ParameterBindingGroup»
Keyword  Key
«ParameterBindingGroup»
Keyword  Keyword
«ParameterBindingGroup»
Keyword  Key
From  From
Search Conditions

77. Message Details
Message Details
[L] Message Writer
Message Writer
Send
[XOR] Message Reader
Reply
Forward
ReplyAll
Send
«ActivationExpression»
MessageRecipients.size() > 1
«ParamBindingGroup»
MessageId  MessageId
«Details»
«Form»
…
Message follow-up

78. «Form» MessageWriter
Search mail
«RichTextSimpleField» Body
«RichTextToolBar» Toolbar[ClientSide]
ApplyFormat
[ClientSide]
ApplyFormat
Remove format «Modal» Alert
Cancel
[ClientSide]
ApplyFormat
Ok
[L] Message Writer
Client Side Logic

79. Typical mobile UI
Simple app
Complex interactions
Touch events
Example 2: Instagram
AutoMobile FP7 SME
EU research project
http://automobile.webratio.com

80. • Media (photos)
• Users
• Activity
• Tag
Content

81. Sign in
[H] Start Page
Register Sign In
Sign InRegister

82. Top level – app structure
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh Update
Content
<<modeless>>NoCon
normalTermination
exceptionalTermination

83. How to avoid duplication
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh Update
Content
<<modeless>>
NoConn
normalTermination
exceptionalTermination
[L] News
Refresh
Update
Content<<modeless>
> NoConn
normalTermination
exceptionalTermination
[L] Profile
Refresh
Update
Content<<modeless>
> NoConn
normalTermination
exceptionalTermination
[L] Take Picture
Refresh
Update
Content<<modeless>
> NoConn
normalTermination
exceptionalTermination
[L] Explore
Refresh
Update
Content<<modeless>
> NoConn
normalTermination
exceptionalTermination
[L][D] Home
Refresh
Update
Content<<modeless>
> NoConn
normalTermination
exceptionalTermination

84. Media Viewer
Media.postedBy: User (profilePhoto, userName)
Media(postTime)
 Media
- file
 PostedBy (User)
- profilePhoto
- userName
 LikedBy (User)
 Contains (Comment)
 QualifiedBy (Tag)
 Mentions (User)
Media (file)
Media.contains : Comment (text)
Media.LikedBy : User (username)
Media (location)
"Like" event
"Comment" event
Media object menu
"Refresh" event

85. <<Module>> MediaViewer
Media Viewer model
«NestedList» MediaViewer
«DataBinding» Media
«NestedDataBinding» likedBy
«NestedDataBinding» contains
«VisualizationAttributes» postTime, location, file
«VisualizationAttributes» numLikes
«ConditionalExpression»
MediaOIDs->includes (oid)
«VisualizationAttributes» userName
«VisualizationAttributes» userName, text
seeLikers
seeAllComment
s
BlockSize=6
«ActivationExpression»
size() > 6
«NestedDataBinding» comprises
«VisualizationAttributes» tagName
«ActivationExpression»
likedBy->size() <= 10
«ActivationExpression»
numLikes > 10
«NestedDataBinding» mentions
«VisualizationAttributes» userName
«ParameterBindingGroup»
OIDs  MediaOIDs
«NestedDataBinding» postedBy
«VisualizationAttributes» userName, photo
«OrderBy» postTime DESC

86. Other renderings

87. Other renderings
 Contains (Comment)
 QualifiedBy (Tag)
SeeSameTag
event

88. Detailed MediaViewer
«NestedList» MediaViewer
<< Modal >> User Medi
Menu
<< Modal >> LoggedUser
MediaMenu
«DataBinding» Media
See
Location
See
User
<<ModuleReference>>
Map
<<ModuleReference>>
User
<<ModuleRef>>
Tag
«NestedDataBinding» contains
SeeAllCommen
ts
«VisualizationAttributes» postTime, location, file
«VisualizationAttributes» numLikes
«ActivationExpression»
likedBy->size() <11
See
Media
Menu
See User
SeeSameTag
Comment
Toggle
Preference
Like
<<DoubleTouch>
> Like/See Tagged
Play / Stop
<<Touch>>
Play/Stop
«ActivationExpression»
type==“Video”
«ActivationExpression»
username != Context.userna
«ActivationExpression»
userName == Context.usern
<<ModuleReference>>
Likers
SeeLikers
See
Media
Logged
Menu
«ActivationExpression»
numLikes >10
BlockSize=6
«VisualizationAttributes» userName, text
«NestedDataBinding» comprises
«VisualizationAttributes» tagName
See User
«NestedDataBinding» mentions
«VisualizationAttributes» userName
See User
«NestedDataBinding» likedBy
«ConditionalExpression»
MediaOIDs->includes (oid)
«VisualizationAttributes» userName
«NestedDataBinding» postedBy
«VisualizationAttributes» userName, photo
Share Delete TagPeople
Report CopyURL

89. User Profile UI
Upper section
Lower
section
Commands
Profile menu
ProfileData ProfileData

90. User Profile – map and photos of you
MediaMap PhotosOfUser

91. <<XOR>> ProfileViewer
<<Module>> User
<<ViewContainer>> ProfileData
Overall view of User Profile
[XOR] <<ViewContainer>> UserPosts
[D][L] <<ModuleReference>>
MediaTiled
gle
wed
«Details» UserInfo
EditYourProfile
Options
<<View Co
BlCancel
«Activa
userNa
Contex
Posts
SeeFollowers
SeeFollowing
«VisualizationAttributes»
profilePhoto, userName, name, bio,
numPosts, numFollowing, numFollowers
«DataBinding» User
«ActivationExpression»
userName ==
Context.username
«ActivationExpression»
userName !=
Context.username
«ParamBindingGrou
p»
username  user
«ConditionalExpression» userName ==
user
[L] <<ModuleReference>>
MediaViewer
[L] <<MapView >> MediaMap
«Marker» <<List>> Locations
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression»
postedBy .userName ==
user
[L] <<ViewContainer>> PhotosOfUser
<<List>> TaggedMedia
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression»
tags.userName == user
Toggle
Options
<<Vie
Logge
«Activati
userNam
Context.
EditPhoto
<<View Contain
PhotoMenu
Pick ImpTake
<<View Con
ProfileEditor
<<View Con
Search
«List» PostOIDs
«DataBinding» Media
«ConditionalExpression» postedBy ==
user
«ParamBindingGrou
p»
MediaOids Oids

92. <<Module>> MediaTiled
Media tiles
<<ViewContainer>> MediaAsTiles
<<ModuleReference>>
MediaViewer
«List» MediaTiles
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression»
MediaOIDs->includes (oid)
Select
«ParameterBindingGroup»
OIDs  MediaOIDs
«ParamBindingGroup»
Selected  MediaOIDs
<<orderB>>y postTime DESC

93. 93
Classical ecommerce web site
Extensive coverage of products and details (huge site!)
But patterns of interaction are much simpler than minimalist
mobile UIs!
Basic content model coming up next…
Example 3: eBay

94. Figure 9.27

95. Search bar

96. High-level site structure
<<siteview>> eBayWebInterface
[L] <<page>> DailyDeals[H][L] <<page>> Home [L] <<area>> CustomerSupport [L] <<area>> Sell
[L] <<area>> SellerCenter
[L] <<area>> Community
[L] <<area>> Policies
[L] <<area>> MyeBay [L] <<modeless>> Notifications
[L] <<area>> Annoucements [L] <<area>> MoneyBack [L] <<area>> SecurityCenter [L] <<area>> ResolutionCenter
[L] <<page>> SiteMap [L] <<page>> OfficialTime [L] <<page>> Survey
[D] <<page>> Tell us
<<page>> Create
<<page>> Review<<area>> Listings Categories & Collections
[L] <<page>> NewFeatures

97. Categories

98. All Categories – right hand side dropdown

99. Search with autocompletion

100. LoggedIn User Menu
Overview
Master Page
Register
Sign in
«Details» UserName
«DataBinding» Context
«DataBinding»
Context
«Details» Shopping Cart
«DataBinding» Cart
«ConditionalExpression
»
of.userName=user
MyCollections
«Form» Search
Search
«Autocompletion» Search
«DataBinding» QuerySuggestion
«VisualizationAttributes» text
«Simplefield» SearchKey:string«ActivationExpression»
completion=false
«SelectionField» category
«DataBinding» Category
«VisualizationAttributes»
name
Hide Suggestions
Show Suggestions
«ActivationExpression»
completion=true
«ParamBindingGroup»
true  completion
«ParamBindingGroup»
false  completion
«ParamBindingGroup»
SearchKey  Keyword
SelectedCategory 
CategoryId
«Tree» ShopByCategory
«DataBinding» Category
«VisualizationAttributes»
Name
«NestedDataBinding»
Subcategories
«VisualizationAttributes
» Name
Search
Results
Select
SettingsSign
out
«ActivationExpression»
Context.userName = null
«ActivationExpression»
Context.userName != null
<<modeless>> Category tree
ShopByCategory
TrendingCollectionsAllCategories
Advanced
AdvancedSearch
«VisualizationAttributes»
userName
«VisualizationAttributes
» numItems
«ParamBindingGroup»
userName user

101. Search
options
«Form» Left Search Single Options
«ScrollableList»
Products
«Simplefield» MinimumPrice
«Simplefield» MaximumPrice
Search
«SelectionField» Format
«DataBinding» PurchaseFormat
«VisualizationAttributes» Name
«SelectionField» ItemLocation
«DataBinding» Listing
«VisualizationAttributes» Location
«Form» Left Search Multiple Options
«SelectionField» Size Type
«DataBinding» Fashion
«VisualizationAttributes» typeOfSize
«SelectionField» Size
«DataBinding» Fashion
«VisualizationAttributes» Location
«ConditionalExpression»
self.getSizeType (SelectedCategory) AND
SelectedCategory=“Fashion”
Deselect
See Size
«OnChange»
Select
«ConditionalExpression»
self. getSizeType (typeOfSize) AND
SelectedCategory=“Fashion”
«ParamBindingGroup»
selectedSizeType
sizeType
«SelectionField» Color
«DataBinding» Listing
«VisualizationAttributes» color
«ConditionalExpression»
«Autocompletion» Brand
«DataBinding» Listing
«VisualizationAttributes» brand
Deselect
«OnChange»
Select
«OnChange»
Select
Deselect
«SelectionField» DeliveryOptions
«DataBinding» Listing
«VisualizationAttributes» Location
«SelectionField»Condition
«DataBinding» Listing
«VisualizationAttributes» itemCondition
«SelectionField» OtherOptions
«DataBinding» AvailableOptions
«VisualizationAttributes» name, selection
«OnChange»
Select
Deselect
«OnChange»
Select
Deselect
«OnChange»
Select
«OnChange»
Select
«OnChange»
Select

102. The WebRatio tool

103. Drawing vs. modeling
Tool support for MDE/MDD

104. An Eclipse-based development environment allowing:
Modeling: ER + IFML + BPMN
100% code generation of standard JEE applications
• Clear separation between design time and run time
• No proprietary runtime
Quick and agile development cycles
Extending the generation rules
• Defining new presentation styles
• Defining new components
Versioning, teamwork, full lifecycle mgt
Truly multi-role model-driven development
What is WebRatio
Requirement Analysis
Solution Modeling
Prototype Generation
Results Verification

105. WebRatio is
now at 7th release
on the market since 2001
WebRatio customers
130+ companies and 500+ commercial users
mainly Italy, USA, Europe and Latin America
WebRatio adoption
15,000+ users of the free edition
Used in hundreds of universities all over the world
WebRatio partners
40+ software houses and system integrators
300+ universities worldwide, 13.000+ students
Some numbers

106. You capture business requirements in abstract,
technology independent models
BPMN + IFML
WebRatio – Step 1
Business
User
WebRatio
Modeller

107. You customize the environment by defining your own
generation rules
HTML 5 + CSS + Java
WebRatio – Step 2
Layout
Designer
Java
Programmer

108. You get a tailored, yet standard, Java Web application
with no proprietary runtime
Code generation
WebRatio – Step 3
WebRatio
Modeller
Business
User

109. Get the application
Web
App
DBMS
Browser
SOA
Custom
Information
System
Standard execution environment
Standard Java
Application
Server

110. Involve business users in the development process and
converge quickly to the target
Agile, quick prototyping
Requirement
Analysis
Solution
Modelling
Application
Generation
Results
Validation

111. Model
Generation
Rules
Generation
Engine
Do not change the generated application code
Touch the generation rules instead
The MDE Virtuous Cycle
Generated
Application
?

112. Case Studies

113. Kinds of application
Corporate
Operations
Human Capital
Management
Product Life Cycle
Management
Customer
Relationship
Management
Enterprise
Resource
Planning
Supply Chain
Management
Knowledge
Support
Sales and Lead
Management
Marketing
Resources Mgt
Web Customer
Services
B2C/B2B
E-Commerce
Learning
Management
Document
Management
Project
Management
Customer
Information Mgt
Partner
Relationship Mgt
Recruitment
Training
Workforce
Management
Supplier
Relationship Mgt
Business
Intelligence
Web Content
Management
Knowledge
Management
Risk and
Compliance
Enterprise
Governance
Order Mgt
Payment Services
Orchestration
Web Front-End of
accounting sys.
Front-Office
Process Mgt
Financial
Services

114. B2C + CMS Web applications initially for 14 EU countries
Corporate news, Product technical & commercial data, Service &
Partner area, Where to Buy…
Multilingual, multi-actor, distributed workflows for local and
central PMs, local and central MarCom managers
... and a: very limited Time to Market (7 weeks!!)
Acer

115. Size & effort
Class Dimension Value
Number of localized B2C web sites 14
Number of main CMS applications 4 (Admin, News, Product, Other
content)
Number of supported languages 12 for B2C Web sites, 1 for
CMS
Number of data entry masks 39
Number of automatically generated database tables 46
Number of automatically generated database views 82
Number of automatically generated database
queries
279 for data extraction, 89 for
data update
Number of automatically generated JSP page
templates
48
Number of automatically generated or reused Java
classes
250
Size
Number of automatically generated Java lines of
code
12500 Non commented lines of
code
Number of elapsed workdays 49
Number of development staff-months (analysts and
developers)
6 staff-months (6 weeks x 4
persons)
Total number of prototypes 9
Average elapsed man days between consecutive
prototypes
5,4
Time &
effort
Average number of development man days per
prototype
15,5

116. Size & effort
DEGREE OF AUTOMATION
Number of manually written SQL statements 17(SQL constraints)
Percentage of automatically generated SQL code 96%
Number of manually written/adapted Java classes /JSP templates 10% JSP templates
manually adapted
Percentage of automatically generated Java and JSP code 90% JSP templates,
100% Java classes
COST AND ROI
Total cost of software development of first version 75.000 €
HW, SW licenses, and connectivity cost of first version 70.000 € (db server
license)
Return on investment of first version 12-15 months
Average effort of extension to one additional country 0,5 staff-months
Average cost of extension to one additional country 7.500 €
Average ROI of extension to one additional country 2 months
PRODUCTIVITY
Number of function points 177 (B2C web site)
+ 612 (CMS) = 789
Average number of function points delivered per staff-month 131,5

117. On the positive side:
Almost 80% of the delivery effort concentrates in the phases of
data design, hypertext design and prototyping:
• more development time is spent with the application stakeholders
MDD allows a more flexible distribution of
responsibilities between the IT department and the
business units
The peak productivity rates has reached five times the
number of delivered function points per staff-month of
a traditional programming language like Java
Comments

118. On the negative side..
Acer estimates that it took from 4 to 6 months to have fully
productive developers with MDD, IFML, and WebRatio
Difficult to find skilled people
..but..
The initial investment in human capital required by MDD pays
off in the mid term
• MDD benefits testing, maintenance, and evolution (which account
for over 60% of the total lifecycle cost)
• reasoning on the system is far more effective at the conceptual
level
Comments (continued)

119. Maintenance effort
Served Contries and Applications
4 4 4 5 5
17
24
32
41
56
17
21
24
28
31
0
10
20
30
40
50
60
2001 2002 2003 2004 2005
Year
Units
Number of developers
Number of
maintained
applications
Number of served
countries

120. • Public company owned by the City of Turin in Italy
• Local public transport serving 190 million passengers every
year.
• A new e-ticketing system (avail able at
http://ecommerce.gtt.to.it and serving 64,000 daily passengers)
• published on-line in only 2 months.
• The application comprises 100 page templates (IFML pages)
and 1215 IFML units.
• KEY: iterative and quick prototyping approach supported by
WebRatio
GTT: Turin Transportation Group

121. • Multi-utility company buying and selling wholesale electric
power.
• Integrated Energy Management System that replaced individual
productivity tools used by traders for the management of
electric power.
• KEY: quick prototyping approach and involvement of actual
users in the development process.
• Deployment of final app in 6 months after the initial meeting
with WebRatio (time to market that took one-third of the time
estimated in case of adoption of a traditional development)
A2A: Utility in Milan

122. • Banking (UniCredit)
• BPM + SOA + Web interfaces
• Crucial points: modularization, multiple models integration,
multiple tools integration, strict runtime platform
requirements
• Banking (ABI)
• System integration (Pure backend!)
• Why IFML?
• Latin America
• Cooperatives, banks, public bodies, central government
• Wholesale (IKEA)
• Financial / leasing (GE Capital)
Other experiences

123. • Models integration
• Large applications with strong need for coherence and
standardized paradigms
• Cooperatives, banks, public bodies, central government
• Service orientation
• No pure modeling exists
• Code generation still win-win
Where IFML works

124. Components and pages per project
1"
10"
100"
1000"
10000"
100000"
10" 100" 1000"
Number'of'units'
Number'of'pages'

125. Components per page (avg)

126. 0"
0.02"
0.04"
0.06"
0.08"
0.1"
0.12"
0.14"
0.16"
0.18"
0.2"
30" 300" 3000"
Effo
r
t&(man/days&per&unit)&
Effo
r
t&per&project&(man/days)&
1.2"
Man/days per component

127. Man/days per page
0"
0.02"
30" 300" 3000"
r
Effo t&per&project&(man/days)&
0"
0.2"
0.4"
0.6"
0.8"
1"
1.2"
30" 300" 3000"
Effo
r
t&per&page&(man/days&per&page&
Effo
r
t&per&project&(man/days)&

128. Tool usage stats

129. Conclusion: innovation eco-system
Research
(Research group
at Polimi)
Method,
Language
and Platform
Spin-off
(WebRatio)
Customers
(including EU
projects)
Teaching
(Polimi and int.l courses)
innovation
innovation toolsuite
Toolsuite, industrial requirements
innovation
requirementsuse cases
Standard
& other SME
Partners

130. Some Ads
“Model Driven Software
Engineering in Practice”.
Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA, 2012
www.modeldrivenstar.com And the upcoming
IFML book!
Interaction Flow
Modeling Language
Model-driven UI
Engineering of Web
and Mobile Apps
with IFML
Morgan Kaufmann,
The OMG press,
USA, 2014

131. S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera: Designing Data-
Intensive Web Applications, Morgan-Kaufmann Publishers, San Francisco, ISBN 1-55860-
843-5 (Series edited by Jim Gray, foreword by Adam Bosworth) 590 pages.
M. Brambilla, J. Cabot, M. Wimmer: Model Driven Software Engineering in Practice.
Morgan & Claypool, USA, September 2012, foreword by Richard Soley (OMG), 184 pages.
ISBN 978-1608458820.
Manolescu, M. Brambilla, S. Ceri, S. Comai, P. Fraternali: Model-driven design and
deployment of service-enabled web applications. ACM Trans. Internet Technology (TOIT).
5(3), pp. 439-479 (2005).
M. Brambilla, S. Ceri, P. Fraternali, I. Manolescu: Process modeling in Web applications.
ACM Trans. Softw. Eng. Methodol (TOSEM). 15(4), pp. 360-409 (2006).
M. Brambilla, I. Celino, S. Ceri, D. Cerizza, E. Della Valle, F. M. Facca: Model-Driven
Design and Development of Semantic Web Service Applications, ACM Trans. on Internet
Technology (TOIT). 8(1), pp.3:1 - 3:31 (2007).
M. Brambilla: From Requirements to Implementation of Ad-hoc Social Web Applications: an
Empirical Pattern-Based Approach. IET Software, 6(2), 2012, pp.114-126.
M. Brambilla, S. Ceri, S. Comai, C. Tziviskou. Exception Handling in Workflow-Driven Web
Applications. WWW 2005 Int. Conference on World Wide Web. ACM, pp. 170-179.
(some) references

132. Marco Brambilla
marcobrambi
marco.brambilla@polimi.it
Thanks!