SlideShare a Scribd company logo
IFML: Building the front end of
Web and Mobile applications with OMG’s
Interaction Flow Modeling Language
Marco Brambilla
marco.brambilla@polimi.it
@marcobrambi
The modeling approach
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
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
Modeling levels - CIM
Eg., business process
Modeling levels - PIM
Eg., business object description and constraints
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
The UI Modeling Problem
User interface and interaction development
is a painful phase of software process
… for everybody!
… not only for the Web!
UI Modeling Problem
Costly and
Inefficient process
Complexity of
user interfaces (UIs)
Ineffective
tools
Manual
development
No MDE
technology
The UI Design Problem
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
User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)
Standardization gap
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
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
The Interaction Flow
Modeling Language
IFML Objectives
Binding to Persistence
Layer
Navigation Path
Binding to
Business Logic
Content
Event
IFML Objectives: Content
Content
IFML Objectives: Navigation Path
IFML Objectives: Navigation Path
IFML Objectives: Events
Mouse Over
IFML Objectives: Events
IFML Objectives: Binding to business logic
IFML Objectives: Binding to business logic
IFML Objectives: Binding to persistence
Content
Book
Title: string
Cover: file
List Price: currency
Price: currency
Save: currency
Rating: integer
………
IFML Overview - Extensibility
IFML Essentials
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
IFML by example
Basic navigation flow between ViewComponents
IFML by example
Basic navigation flow between ViewComponents
Artists
List
Artists
Artist
Event
View
Component
View Container
ParameterBinding«ParameterBindingGroup»
SelectedArtist  AnArtist
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»
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
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
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
IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
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
IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«Behaviour»
Album.Delete
OnSelect event
OnSubmit event
IFML – subtyping events
Throwing
events
Catching
events
.. And as many others as you want!
IFML – subtyping components
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»
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
IFML concrete syntax by example
<<Details>>
Confirmation
Message
Confirmation Page
Action
Confirmed
Capturing of custom events
Note: typical problem of event-based systems (termination, …)
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
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
IFML concrete syntax – modules
IFML Modules - usage
Shopping Cart
Checkout
«ParameterBindingGroup»
Total Amount
Confirmation
Confirmation
Message
«Details»
Payment
Execution
Product
List
«List»
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
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
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
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
Multiple aspects modeling – 2
(implementation and architecture)
UML Sequence
UML Deployment
IFML
UI Mockup models
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
UML
Sequence
Diagrams
Tiers and
calls
Explicit
description of
interactions
between tiers
• 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)
The generated model artifacts
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
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
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)
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
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
The Metamodel
-- excerpts --
InteractionFlowModel
IFML Model
ViewElements
Referencing Content and Behaviour
Events
Context
Examples
Typical email interface
Usability
Friendliness
Complex interaction flows
Example 1: online mailer (e.g., Gmail)
[D] [L] MailMessages
[XOR] MAIL Top
[L] Contacts
Top down design from containers
Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] MAIL Top
[L] MessageWriter
«List»
«List»
…
Starting adding ViewComponents
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
«List» MBoxList
«List» MessageList
«DataBinding» MailMessage
«ConditionalExpression»
self.mm2MailMessageGroup = MailBox
«DataBinding» MailMessageGroup
«ParameterBindingGroup»
SelectedMailBox  MailBox
MessageList
Parameters and Conditions
«Parameter» MailBox
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
MailBox
Labels
«ActivationExpression»
not MessageSet.isEmpty()
«ParameterBindingGroup»
SelectedMessages  MessageSet
«List»
Activation expressions
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»
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»
[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
[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
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
«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
Typical mobile UI
Simple app
Complex interactions
Touch events
Example 2: Instagram
AutoMobile FP7 SME
EU research project
http://automobile.webratio.com
• Media (photos)
• Users
• Activity
• Tag
Content
Sign in
[H] Start Page
Register Sign In
Sign InRegister
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
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
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
<<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
Other renderings
Other renderings
 Contains (Comment)
 QualifiedBy (Tag)
SeeSameTag
event
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
User Profile UI
Upper section
Lower
section
Commands
Profile menu
ProfileData ProfileData
User Profile – map and photos of you
MediaMap PhotosOfUser
<<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
<<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
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
Figure 9.27
Search bar
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
Categories
All Categories – right hand side dropdown
Search with autocompletion
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
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
The WebRatio tool
Drawing vs. modeling
Tool support for MDE/MDD
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
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
You capture business requirements in abstract,
technology independent models
BPMN + IFML
WebRatio – Step 1
Business
User
WebRatio
Modeller
You customize the environment by defining your own
generation rules
HTML 5 + CSS + Java
WebRatio – Step 2
Layout
Designer
Java
Programmer
You get a tailored, yet standard, Java Web application
with no proprietary runtime
Code generation
WebRatio – Step 3
WebRatio
Modeller
Business
User
Get the application
Web
App
DBMS
Browser
SOA
Custom
Information
System
Standard execution environment
Standard Java
Application
Server
Involve business users in the development process and
converge quickly to the target
Agile, quick prototyping
Requirement
Analysis
Solution
Modelling
Application
Generation
Results
Validation
Model
Generation
Rules
Generation
Engine
Do not change the generated application code
Touch the generation rules instead
The MDE Virtuous Cycle
Generated
Application
?
Case Studies
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
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
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
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
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
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)
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
• 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
• 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
• 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
• 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
Components and pages per project
1"
10"
100"
1000"
10000"
100000"
10" 100" 1000"
Number'of'units'
Number'of'pages'
Components per page (avg)
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
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)&
Tool usage stats
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
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
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
Marco Brambilla
marcobrambi
marco.brambilla@polimi.it
Thanks!

More Related Content

What's hot

Class diagrams
Class diagramsClass diagrams
Class diagrams
Nadia_Nazeer
 
Writing Good Use Cases
Writing Good Use CasesWriting Good Use Cases
Writing Good Use Cases
IBM Rational software
 
Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)
WSO2
 
Omg bpmn tutorial
Omg bpmn tutorialOmg bpmn tutorial
Omg bpmn tutorial
Beta-Research.org
 
Introduction to UML
Introduction to UMLIntroduction to UML
User interface-design
User interface-designUser interface-design
User interface-design
DarkHorse Technologies Pvt Ltd
 
HCI 3e - Ch 17: Models of the system
HCI 3e - Ch 17:  Models of the systemHCI 3e - Ch 17:  Models of the system
HCI 3e - Ch 17: Models of the system
Alan Dix
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15koolkampus
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
Alan Dix
 
Structured Vs, Object Oriented Analysis and Design
Structured Vs, Object Oriented Analysis and DesignStructured Vs, Object Oriented Analysis and Design
Structured Vs, Object Oriented Analysis and Design
Motaz Saad
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
Alan Dix
 
Uml
UmlUml
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
Alan Dix
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
Alan Dix
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Anuja Arosha
 
HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3
Alan Dix
 
Types of UML diagrams
Types of UML diagramsTypes of UML diagrams
Types of UML diagrams
Mukesh Tekwani
 
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
VijiPriya Jeyamani
 
Architecture vs Design
Architecture vs DesignArchitecture vs Design
Architecture vs Design
Luc Trudeau
 
OOAD unit1 introduction to object orientation
 OOAD unit1 introduction to object orientation OOAD unit1 introduction to object orientation
OOAD unit1 introduction to object orientationDr Chetan Shelke
 

What's hot (20)

Class diagrams
Class diagramsClass diagrams
Class diagrams
 
Writing Good Use Cases
Writing Good Use CasesWriting Good Use Cases
Writing Good Use Cases
 
Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)
 
Omg bpmn tutorial
Omg bpmn tutorialOmg bpmn tutorial
Omg bpmn tutorial
 
Introduction to UML
Introduction to UMLIntroduction to UML
Introduction to UML
 
User interface-design
User interface-designUser interface-design
User interface-design
 
HCI 3e - Ch 17: Models of the system
HCI 3e - Ch 17:  Models of the systemHCI 3e - Ch 17:  Models of the system
HCI 3e - Ch 17: Models of the system
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
 
Structured Vs, Object Oriented Analysis and Design
Structured Vs, Object Oriented Analysis and DesignStructured Vs, Object Oriented Analysis and Design
Structured Vs, Object Oriented Analysis and Design
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
 
Uml
UmlUml
Uml
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3
 
Types of UML diagrams
Types of UML diagramsTypes of UML diagrams
Types of UML diagrams
 
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
 
Architecture vs Design
Architecture vs DesignArchitecture vs Design
Architecture vs Design
 
OOAD unit1 introduction to object orientation
 OOAD unit1 introduction to object orientation OOAD unit1 introduction to object orientation
OOAD unit1 introduction to object orientation
 

Similar to IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. A standard of Object Management Group (OMG). By Marco Brambilla

Domain specific modeling for mobile and io t apps
Domain specific modeling for mobile and io t appsDomain specific modeling for mobile and io t apps
Domain specific modeling for mobile and io t apps
Università degli Studi dell'Aquila
 
Innovate2011_MAC-1597A
Innovate2011_MAC-1597AInnovate2011_MAC-1597A
Innovate2011_MAC-1597AArman Atashi
 
Interaction Flow Modeling Language (IFML) First Submission at OMG
Interaction Flow Modeling Language (IFML)  First Submission at OMG Interaction Flow Modeling Language (IFML)  First Submission at OMG
Interaction Flow Modeling Language (IFML) First Submission at OMG Marco Brambilla
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
VGaneshKarthikeyan
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
VGaneshKarthikeyan
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
VGaneshKarthikeyan
 
Object Oriented Analysis and Design with UML2 part1
Object Oriented Analysis and Design with UML2 part1Object Oriented Analysis and Design with UML2 part1
Object Oriented Analysis and Design with UML2 part1
Haitham Raik
 
MDA with Executable UML
MDA with Executable UMLMDA with Executable UML
MDA with Executable UML
Chris Raistrick
 
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Jean Vanderdonckt
 
Executable UML and SysML Workshop
Executable UML and SysML WorkshopExecutable UML and SysML Workshop
Executable UML and SysML Workshop
Ed Seidewitz
 
OMG Specifications for Enterprise Interoperability
OMG Specifications for Enterprise InteroperabilityOMG Specifications for Enterprise Interoperability
OMG Specifications for Enterprise Interoperability
Brian Elvesæter
 
UML: Once More with Meaning
UML: Once More with MeaningUML: Once More with Meaning
UML: Once More with Meaning
Ed Seidewitz
 
EclipseCon 2007: Effective Use of the Eclipse Modeling Framework
EclipseCon 2007: Effective Use of the Eclipse Modeling FrameworkEclipseCon 2007: Effective Use of the Eclipse Modeling Framework
EclipseCon 2007: Effective Use of the Eclipse Modeling Framework
Dave Steinberg
 
Lecture Note for Introduction Class
Lecture Note for Introduction ClassLecture Note for Introduction Class
Lecture Note for Introduction ClassNavriti
 
Financial Accounting
Financial AccountingFinancial Accounting
Financial AccountingNavriti
 
Innovate2012_MAC-2196
Innovate2012_MAC-2196Innovate2012_MAC-2196
Innovate2012_MAC-2196Arman Atashi
 
EA Transferability Workshop
EA Transferability WorkshopEA Transferability Workshop
EA Transferability Workshop
Tony Toole
 
xUMLFinalPresentation.ppt
xUMLFinalPresentation.pptxUMLFinalPresentation.ppt
xUMLFinalPresentation.ppt
ssuser2ef938
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPFDoncho Minkov
 

Similar to IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. A standard of Object Management Group (OMG). By Marco Brambilla (20)

Domain specific modeling for mobile and io t apps
Domain specific modeling for mobile and io t appsDomain specific modeling for mobile and io t apps
Domain specific modeling for mobile and io t apps
 
Innovate2011_MAC-1597A
Innovate2011_MAC-1597AInnovate2011_MAC-1597A
Innovate2011_MAC-1597A
 
Interaction Flow Modeling Language (IFML) First Submission at OMG
Interaction Flow Modeling Language (IFML)  First Submission at OMG Interaction Flow Modeling Language (IFML)  First Submission at OMG
Interaction Flow Modeling Language (IFML) First Submission at OMG
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
 
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.pptUNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
UNIT-I(Unified_Process_and_Use Case_Diagrams)_OOAD.ppt
 
Object Oriented Analysis and Design with UML2 part1
Object Oriented Analysis and Design with UML2 part1Object Oriented Analysis and Design with UML2 part1
Object Oriented Analysis and Design with UML2 part1
 
MDA with Executable UML
MDA with Executable UMLMDA with Executable UML
MDA with Executable UML
 
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
 
Executable UML and SysML Workshop
Executable UML and SysML WorkshopExecutable UML and SysML Workshop
Executable UML and SysML Workshop
 
OMG Specifications for Enterprise Interoperability
OMG Specifications for Enterprise InteroperabilityOMG Specifications for Enterprise Interoperability
OMG Specifications for Enterprise Interoperability
 
UML: Once More with Meaning
UML: Once More with MeaningUML: Once More with Meaning
UML: Once More with Meaning
 
Tally9erp
Tally9erpTally9erp
Tally9erp
 
EclipseCon 2007: Effective Use of the Eclipse Modeling Framework
EclipseCon 2007: Effective Use of the Eclipse Modeling FrameworkEclipseCon 2007: Effective Use of the Eclipse Modeling Framework
EclipseCon 2007: Effective Use of the Eclipse Modeling Framework
 
Lecture Note for Introduction Class
Lecture Note for Introduction ClassLecture Note for Introduction Class
Lecture Note for Introduction Class
 
Financial Accounting
Financial AccountingFinancial Accounting
Financial Accounting
 
Innovate2012_MAC-2196
Innovate2012_MAC-2196Innovate2012_MAC-2196
Innovate2012_MAC-2196
 
EA Transferability Workshop
EA Transferability WorkshopEA Transferability Workshop
EA Transferability Workshop
 
xUMLFinalPresentation.ppt
xUMLFinalPresentation.pptxUMLFinalPresentation.ppt
xUMLFinalPresentation.ppt
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
 

More from Marco Brambilla

M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
Marco Brambilla
 
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Marco Brambilla
 
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Hierarchical Transformers for User Semantic Similarity - ICWE 2023Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Marco Brambilla
 
Exploring the Bi-verse. A trip across the digital and physical ecospheres
Exploring the Bi-verse.A trip across the digital and physical ecospheresExploring the Bi-verse.A trip across the digital and physical ecospheres
Exploring the Bi-verse. A trip across the digital and physical ecospheres
Marco Brambilla
 
Conversation graphs in Online Social Media
Conversation graphs in Online Social MediaConversation graphs in Online Social Media
Conversation graphs in Online Social Media
Marco Brambilla
 
Trigger.eu: Cocteau game for policy making - introduction and demo
Trigger.eu: Cocteau game for policy making - introduction and demoTrigger.eu: Cocteau game for policy making - introduction and demo
Trigger.eu: Cocteau game for policy making - introduction and demo
Marco Brambilla
 
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Marco Brambilla
 
Analyzing rich club behavior in open source projects
Analyzing rich club behavior in open source projectsAnalyzing rich club behavior in open source projects
Analyzing rich club behavior in open source projects
Marco Brambilla
 
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
Analysis of On-line Debate on Long-Running Political Phenomena.The Brexit C...Analysis of On-line Debate on Long-Running Political Phenomena.The Brexit C...
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
Marco Brambilla
 
Community analysis using graph representation learning on social networks
Community analysis using graph representation learning on social networksCommunity analysis using graph representation learning on social networks
Community analysis using graph representation learning on social networks
Marco Brambilla
 
Available Data Science M.Sc. Thesis Proposals
Available Data Science M.Sc. Thesis Proposals Available Data Science M.Sc. Thesis Proposals
Available Data Science M.Sc. Thesis Proposals
Marco Brambilla
 
Data Cleaning for social media knowledge extraction
Data Cleaning for social media knowledge extractionData Cleaning for social media knowledge extraction
Data Cleaning for social media knowledge extraction
Marco Brambilla
 
Iterative knowledge extraction from social networks. The Web Conference 2018
Iterative knowledge extraction from social networks. The Web Conference 2018Iterative knowledge extraction from social networks. The Web Conference 2018
Iterative knowledge extraction from social networks. The Web Conference 2018
Marco Brambilla
 
Driving Style and Behavior Analysis based on Trip Segmentation over GPS Info...
Driving Style and Behavior Analysis based on Trip Segmentation over GPS  Info...Driving Style and Behavior Analysis based on Trip Segmentation over GPS  Info...
Driving Style and Behavior Analysis based on Trip Segmentation over GPS Info...
Marco Brambilla
 
Myths and challenges in knowledge extraction and analysis from human-generate...
Myths and challenges in knowledge extraction and analysis from human-generate...Myths and challenges in knowledge extraction and analysis from human-generate...
Myths and challenges in knowledge extraction and analysis from human-generate...
Marco Brambilla
 
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Marco Brambilla
 
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
Model-driven Development of  User Interfaces for IoT via Domain-specific Comp...Model-driven Development of  User Interfaces for IoT via Domain-specific Comp...
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
Marco Brambilla
 
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
A Model-Based Method for  Seamless Web and Mobile Experience. Splash 2016 conf.A Model-Based Method for  Seamless Web and Mobile Experience. Splash 2016 conf.
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
Marco Brambilla
 
Big Data and Stream Data Analysis at Politecnico di Milano
Big Data and Stream Data Analysis at Politecnico di MilanoBig Data and Stream Data Analysis at Politecnico di Milano
Big Data and Stream Data Analysis at Politecnico di Milano
Marco Brambilla
 
Web Science. An introduction
Web Science. An introductionWeb Science. An introduction
Web Science. An introduction
Marco Brambilla
 

More from Marco Brambilla (20)

M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
 
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
 
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Hierarchical Transformers for User Semantic Similarity - ICWE 2023Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
 
Exploring the Bi-verse. A trip across the digital and physical ecospheres
Exploring the Bi-verse.A trip across the digital and physical ecospheresExploring the Bi-verse.A trip across the digital and physical ecospheres
Exploring the Bi-verse. A trip across the digital and physical ecospheres
 
Conversation graphs in Online Social Media
Conversation graphs in Online Social MediaConversation graphs in Online Social Media
Conversation graphs in Online Social Media
 
Trigger.eu: Cocteau game for policy making - introduction and demo
Trigger.eu: Cocteau game for policy making - introduction and demoTrigger.eu: Cocteau game for policy making - introduction and demo
Trigger.eu: Cocteau game for policy making - introduction and demo
 
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
 
Analyzing rich club behavior in open source projects
Analyzing rich club behavior in open source projectsAnalyzing rich club behavior in open source projects
Analyzing rich club behavior in open source projects
 
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
Analysis of On-line Debate on Long-Running Political Phenomena.The Brexit C...Analysis of On-line Debate on Long-Running Political Phenomena.The Brexit C...
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
 
Community analysis using graph representation learning on social networks
Community analysis using graph representation learning on social networksCommunity analysis using graph representation learning on social networks
Community analysis using graph representation learning on social networks
 
Available Data Science M.Sc. Thesis Proposals
Available Data Science M.Sc. Thesis Proposals Available Data Science M.Sc. Thesis Proposals
Available Data Science M.Sc. Thesis Proposals
 
Data Cleaning for social media knowledge extraction
Data Cleaning for social media knowledge extractionData Cleaning for social media knowledge extraction
Data Cleaning for social media knowledge extraction
 
Iterative knowledge extraction from social networks. The Web Conference 2018
Iterative knowledge extraction from social networks. The Web Conference 2018Iterative knowledge extraction from social networks. The Web Conference 2018
Iterative knowledge extraction from social networks. The Web Conference 2018
 
Driving Style and Behavior Analysis based on Trip Segmentation over GPS Info...
Driving Style and Behavior Analysis based on Trip Segmentation over GPS  Info...Driving Style and Behavior Analysis based on Trip Segmentation over GPS  Info...
Driving Style and Behavior Analysis based on Trip Segmentation over GPS Info...
 
Myths and challenges in knowledge extraction and analysis from human-generate...
Myths and challenges in knowledge extraction and analysis from human-generate...Myths and challenges in knowledge extraction and analysis from human-generate...
Myths and challenges in knowledge extraction and analysis from human-generate...
 
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
 
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
Model-driven Development of  User Interfaces for IoT via Domain-specific Comp...Model-driven Development of  User Interfaces for IoT via Domain-specific Comp...
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
 
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
A Model-Based Method for  Seamless Web and Mobile Experience. Splash 2016 conf.A Model-Based Method for  Seamless Web and Mobile Experience. Splash 2016 conf.
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
 
Big Data and Stream Data Analysis at Politecnico di Milano
Big Data and Stream Data Analysis at Politecnico di MilanoBig Data and Stream Data Analysis at Politecnico di Milano
Big Data and Stream Data Analysis at Politecnico di Milano
 
Web Science. An introduction
Web Science. An introductionWeb Science. An introduction
Web Science. An introduction
 

Recently uploaded

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 

Recently uploaded (20)

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 

IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. A standard of Object Management Group (OMG). By Marco Brambilla

  • 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
  • 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
  • 16. IFML Objectives Binding to Persistence Layer Navigation Path Binding to Business Logic Content Event
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 98. All Categories – right hand side dropdown
  • 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
  • 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 ?
  • 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'
  • 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)&
  • 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