Seminar given in

1. Industrial and Academic Experiences with a
User Interaction Modeling Language: WebML
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
www.webml.org
www.webratio.com
www.modeldrivenstar.com L’Aquila, March 14, 2013

2. Agenda
Problem
Objective
Language
Tool
Cases
Standardization
2

3. Problem

4. UI Modeling Problem
UI has been neglected in the MDE community
Complexity of UIs increase in time
• New events, devices, use cases, interactions
WYSIWYG (well… more or less) for UI programming around
• Widgets drag&drop
• Hooks to execution
No real MDE attempt to address the problem
4

5. User Interface vs. Interaction
UI blends into visualization and graphics
Distinguish Interaction from Interface
User interaction focus:
Previous attempts failed because of:
• Low usability and effectiveness of notation
• Missing solid implementations with vendors support
5

6. The gap
A perceived gap in the modeling efforts
User interaction has been overlooked in modeling proposals
No existing standard notation
A bunch of proposals (mainly from Web or old Hypermedia fields)
Previous attempts failed because of:
• Low usability and effectiveness of notation
• Missing solid implementations with vendors support
6

7. Objective

8. Focus
The VIEW part of a software application
view components
view modules
events
interaction between components
Interaction between the user and the components (events)
the distribution of view components and referenced data and business logic at
the different tiers of the architecture
8

9. Objectives
Expressing
Content of interfaces
User events and interaction
Binding to business logic
of the front-end of applications belonging to diverse domains
9

10. Advantages
formal specification of the different perspectives of the front-end
Isolate implementation-specific issues of UIs
Separate the concerns in the user interaction design
Enable the communication of interaction design to non-technical
stakeholders
Automatic generation of code also for the application front-end part
10

11. Language: WebML

12. Effective and essential
A visual modeling language (DSL) ...
Oriented to the high level design
Incorporating all the details that are needed for refined specification
... Effective and essential ...
Including only the concepts relevant to the domain
No overhead because of verbose notation or orthogonality
... For user interaction design ...
Page contents
Navigation paths and UI events
... Within web applications
Born bottom-up from the features of dynamic web applications
12

13. Role and positioning
Contents: Process: User Interaction: Style:
ER, class, .. BPMN WebML CSS, ...
BPMN model
Backend:
soaML, WSDL..
Services
13

14. Foundations and extensibility
The language foundations
Basic set of units
Connection to a content model for data retrieval and management
Links for control and data flow
Page computation algorithms for execution semantics
• The page content is automatically calculated also in case of complex topologies
• Incoming links and dependencies among units are considered
The language is open
New units and operations can be specified
For implementing ad-hoc business logics
14

15. The WebML notation example
ReviewPage
GetUser CurrentUser PreferredArtists Two pages
Retrieval of session data
(CurrentUser)
CurrentUser
CurrentUser Artist Review Page
[UserPreference]
AllArtists
• Lists of (prefered) artists
ArtistDetails
• Links to artist details
Albums Page
Artist Artist • List of albums of selected
artist
KO
Albums • Checkbox and deletion of
AlbumIndex DeleteAlbum albums
OK
Album Album
[PlayedByArtist]

16. Content publishing units
IN: UnitName OUT:
Param1, ... ParamN Params
UnitType
Concept
[Selector (Param1, ..., ParamN)]
A WebML unit is the atomic information publishing element
A “view” defined upon a container of objects:
The instances of a concept
Based on one or more complex selection conditions (called selectors)
A unit may need some inputs and produces some outputs
Inputs are required to compute the unit itself (params of the selector)
Outputs can be used to compute other unit(s)
16

17. Links
AllArtists ArtistDetails
Artist Artist
Links in WebML have 3 purposes
Describe navigation paths
Transport parameters between units
Activate computation of units and execution of side effects
Normally, links are rendered as one or more anchors/buttons
based on the dataset and semantics of the source unit
Various behaviors are allowed (automatic, asynchronous, transport ..)
Transport links: only carry parameters, no navigation nor side effects

18. Operation units
OperationName OK
OpType
KO
Concept
[Selector (Param1, ..., ParamN)]
Execution of operations and business logic
Simple failure/success model of operations
Success: green “OK link” is navigated
Failure: red “KO link” is navigated
Chains of operations can be defined
Control dictated by links
Basic control flow elements available (loop, switch)
18

19. Units coverage
Content publishing
Data Index MultiData Entry Scroller Multichoice HierarchicalIndex
Session management Web Services
Login Logout Get Set Request-Response ….
CRUD Operations
Create Modify Delete Connect Disconnect
19

20. Lesson learned from WebML
Advantages of the notation
Extremely compact (no useless overhead)
Denormalization / no orthogonality (increased compactness)
Effective (allows to model exactly what users want)
Efficient (grants high reusability of model fragments)
Easy to learn (very low learning curve)
Comprehensive (covers most of the web interaction needs)
Minimal but extensible (for covering any ad hoc logic)
Executable (semantics defined and execution granted)
20

21. Tool: WebRatio

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

23. A fertile environment ...
... for designing, building and maintaining your
custom enterprise applications
23

24. Summary
WebRatio is
now at 7th release
on the market since 2001
WebRatio customers
130+ companies and 500+ commercial users
in Italy, Europe and South 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, 12.000+ students

25. WebRatio – Step 1
You capture business requirements in abstract,
technology independent models
WebRatio
Business Modeller
User
25

26. Design the model
Process Model Application Model
Define business processes Define data, services, logic and
managed by the application presentation details
BPMN notation WebML notation
26

27. WebRatio – Step 2
You customize the environment by defining your own
generation rules
Layout Java
Designer Programmer
27

28. Customize the generation rules
Layout templates Custom components
for a perfectly fine-tuned layout, for implementing any kind of
tailored to your visual identity business logic, integration or
complex task
28

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

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

31. An evolutionary prototyping dev cycle
Involve business users in the development process and
converge quickly to the target
Requirement
Analysis
Solution
Results Modelling
Validation
Application
Generation

32. The two ways of MDD
Design-time Run-time
Model Interpretation
Immediately available
Model Model
Analyst / Interpreter App User
Modeller
Vendor-dependent
code
Code Generation
Generation and deploy
Generation Generated
Model
Engine Application
Analyst / Generation App User
Modeller
Rules
Layout Java
Designer Programmer
32

33. Why we chose Code Generation
3 reasons in favour of Code Generation
Execution environment is as standard as possible
• standard architecture, standard libraries
• fitting corporate IT policies
Two degrees of freedom instead of one
• not all the requirements can be modelled
• define, use and reuse your own generation rules
No vendor lock-in
• generated code is human-readable, applications can be easily maintained without the
tool
33

34. Our innovation environment

35. Evolution of tool (and language)
35

36. The final picture
36

37. Agility + MDD
Iterative, agile
development
?
Zero-cost, 1- Development / Testing environment
click, prototype
generation
Development
Generation Prototype
Model Test User
Engine
Generation
Rules
Final
Application
Final
App User
Different deployment Final execution environment
configurations
37

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

39. Industrial Cases

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

41. Acer
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!!)

42. Size & effort
Class Dimension Value
Size 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 279 for data extraction, 89 for
queries data update
Number of automatically generated JSP page 48
templates
Number of automatically generated or reused Java 250
classes
Number of automatically generated Java lines of 12500 Non commented lines of
code code
Time & Number of elapsed workdays 49
effort Number of development staff-months (analysts and 6 staff-months (6 weeks x 4
developers) persons)
Total number of prototypes 9
Average elapsed man days between consecutive 5,4
prototypes
Average number of development man days per 15,5
prototype

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

44. Critical Considerations
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

45. Critical Considerations (continued)
On the negative side..
Acer estimates that it took from 4 to 6 months to have fully
productive developers with MDD, WebML, 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

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

47. GTT: Turin Transportation Group
• 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 (WebML pages) and 1215
WebML units.
• KEY: iterative and quick prototyping approach supported by WebRatio
47

48. A2A: Utility in Milan
• 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.
• management of electric power contracts; the management of "green package"
contracts; the management of natural gas contracts; the management of the variable
rate curve of both electric power contracts and gas contracts; the management of
market indices; and the exporting/importing of ad-hoc statistical reports from different
systems.
• 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)
48

49. Other experiences
• 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 WebML?
• Latin America
• Cooperatives, banks, public bodies, central government
• Wholesale (IKEA)
• Financial / leasing (undisclosed, USA)

50. Where WebML works
• 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

51. Model size and effort – some quantitative
information from sample cases

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

53. Units per page (avg)

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

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

56. Tool usage stats

57. Standardization

58. Standardization gap
A perceived gap in the standardization efforts
No official standard from any recognized body
Some activity now ongoing at the MBUI working group in W3C
We are pushing for a standard modeling language in OMG
INTERACTION FLOW MODELING LANGUAGE (IFML)
Direct evolution/extension of WebML
58

59. In the OMG framework
Exploit the possible relations with
BPMN -- Already in place
Structure models (Class, components, CWM …)
SOAml
SysML
Others
59

60. How to develop a standard lang?
A MOF-compliant metamodel which describes the user interaction within front-
end interfaces, their constituents, and their connections with back-end business
components, data storage and Web Services.
A 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.
A complete mapping between the UML Profile and the metamodel.
An interchange format between tools using XMI.
A specification document.
Implemented proof of concept.
Some sample mappings to domain-specific platforms.
Release of IPR/copyright/patents
60

61. Mandatory application requirements
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 presenation
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 purposes of model
fragments)
User input validation, according to OCL or other existing constraint languages
But not:
inference rules that make model specification simpler and more concise
Backend modeling
61

62. The IFML metamodel - 1
62

63. The IFML metamodel - 2
63

64. The IFML metamodel - 3
64

65. The UML profile for IFML
Static aspects
«page» «page» «page»
AlbumSearch Albums Album
Album Search Album Index Album Detail
«index» «index»
MBox List «link» Message
Index
65

66. The UML profile for IFML
Static aspects
Signals with tagged values
«signal» Tagged values.
SelectMailMessages
Parameter mBox
mBox :string out name: selectedMBox
in name: mBox
Dynamic aspects
SelectMailMessages(mBox)
«index»
«index»
Message
MBox List
Index
66

67. IFML concrete syntax by example
67

68. IFML concrete syntax by example
68

69. IFML concrete syntax - extensions
69

70. A real example.. The complete Gmail UI
GMAIL top [X]
Messages [L D] <<XOR>> Message search
<<D>> Search <<P>> FullSearch
OUT: Keyword Message
keyword Show search Message Message
IN: SearchKey options full search
search
OUT: Keyword, From, notification
To., ...
IN: SearchKey,
Search mail FromKey, ToKey, ..
Mbox
List
<<XOR>> Message Management <<L>> Settings
MailBox {Self.MessageRecipients >1}
OUT: AllMessages <<XOR>> Message Reader
IN: MessageSet
MarkAll Message ReplyToAll
AsRead
MarkAll * Message
Index details Forward
Reply
Delete <<D>>
OUT: MessageID
IN: MessageID
Archive Message toolbar
State =”Reply” OR
Delete ”Forward”
Archive <<parameter>>
Report MessageSet
Report <<L>> Message writer
OUT: SelectedMessages MoveTo Discard
IN: MessageSet Reply OUT: Subject, From,
<<form>> Message Writer Cc, Body, “ReplyAll”
ToAll
State = Add Cc IN: “Re:”+ Subject, To, Cc,
”NewMessage” OR <<field>> To
Body, State
“Forward”
<<P>> Tag chooser <<field>> Cc
State =”Forward”
Associate Add Bcc Reply OR ”ReplyToAll”
Tag/ <<field>> Bcc
to tag /
Folder
Move to Select Index State =”Reply” <<field>> Subject
folder Tag OR ”ReplyToAll” OUT: Subject, From,
<<field>> Body “”, Body, “Reply”
OUT: SelectedTag Edit subject
IN: ATag Forward IN: “Re:”+ Subject, To, Cc,
Create <<field>> Attachment Body, State
OUT: NewTag
IN: ATag New
<<parameter>> State
<<M>> Tag creator Add attachment
Create OUT: Subject, “”, “”, Body,
Tag/ New Tag/ Send Save “Forward”
Folder Create Folder IN: “Fw:”+ Subject, To, Cc,
Body, State
OUT: NewTagName
IN: TagName
State =”Reply” OR
”ReplyToAll”
Send Save
Action Action
70

71. Editor
Porting of WebRatio to full IFML compliance
Implementation of new, open-source
IFML modeling tool
Eclipse based
EMF / GMF ( + Graphiti framework)
Integration with:
• UML modeling (class, activity, statechart mainly)
• Papyrus UML editor
• Papyrus fUML interpreter
• Alf
71

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

73. Concluding remarks

74. Technical successes vs. business failures?
• Service vs. product company
• Scalability of models vs. scalability of business
• 2 MLN turnover
• 40 people
• 12 years
• Verticals
• WebRatio Store
• What’s next?
• Cloud, social web, mobile web… and the USA

75. Some Ads
MD* blog MDSE In Practice – The book
www.modeldrivenstar.com Brambilla, Cabot, Wimmer.
Morgan & Claypool, 2012.
Interaction Flow
Modeling Language
www.ifml.org
Workshop on Communicating
Business Process and Software Models
at ICSM 2013 conference

76. Some Ads
www.BPM4people.org
Research project on
social enterprise

77. Thanks! Questions?
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
www.webml.org
www.webratio.com
www.modeldrivenstar.com