industrial and academic experiences with a user interaction modeling language: webml and webratio
DESCRIPTION
Seminar given inTRANSCRIPT
Industrial and Academic Experiences with a User Interaction Modeling Language: WebML
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
www.webml.orgwww.webratio.comwww.modeldrivenstar.com L’Aquila, March 14, 2013
2
Problem
Objective
Language
Tool
Cases
Standardization
Agenda
Problem
4
UI has been neglected in the MDE communityComplexity 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
UI Modeling Problem
5
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
User Interface vs. Interaction
6
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
The gap
Objective
8
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
Focus
9
Expressing
Content of interfaces
User events and interaction
Binding to business logic
of the front-end of applications belonging to diverse domains
Objectives
10
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
Advantages
Language: WebML
12
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
Effective and essential
13
Role and positioning
Contents: ER, class, ..
Process:BPMN
User Interaction: WebML
Style:CSS, ...
Backend:soaML, WSDL..
BPMN model
Services
14
The language foundationsBasic 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 openNew units and operations can be specified
For implementing ad-hoc business logics
Foundations and extensibility
Two pages
Retrieval of session data (CurrentUser)
Review Page• Lists of (prefered) artists • Links to artist details
Albums Page• List of albums of selected
artist• Checkbox and deletion of
albums
The WebML notation exampleReviewPage
CurrentUser
CurrentUser
AllArtists
Artist Artist
ArtistDetails
Albums
DeleteAlbum
Album
OK
KO
AlbumIndex
Album[PlayedByArtist]
GetUser
CurrentUser
Artist[UserPreference]
PreferredArtists
16
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 outputsInputs are required to compute the unit itself (params of the selector)
Outputs can be used to compute other unit(s)
Content publishing units
UnitName
Concept[Selector (Param1, ..., ParamN)]
UnitType
IN:Param1, ... ParamN
OUT:Params
Links in WebML have 3 purposesDescribe 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
Links
AllArtists
Artist Artist
ArtistDetails
Source Destination
18
Execution of operations and business logic
Simple failure/success model of operationsSuccess: green “OK link” is navigated
Failure: red “KO link” is navigated
Chains of operations can be definedControl dictated by links
Basic control flow elements available (loop, switch)
Operation units
OperationName
Concept[Selector (Param1, ..., ParamN)]
OpType
OK
KO
19
Content publishing Data Index MultiData Entry Scroller Multichoice HierarchicalIndex
Session management Web Services Login Logout Get Set Request-Response ….
CRUD OperationsCreate Modify Delete Connect Disconnect
Units coverage
20
Advantages of the notationExtremely 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)
Lesson learned from WebML
Tool: WebRatio
22
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
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
23
... for designing, building and maintaining your custom enterprise applications
A fertile environment ...
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
Summary
25
You capture business requirements in abstract, technology independent models
WebRatio – Step 1
BusinessUser
WebRatioModeller
26
Design the model
Process ModelDefine business processes managed by the application
BPMN notation
Application ModelDefine data, services, logic and presentation details
WebML notation
27
You customize the environment by defining your own generation rules
WebRatio – Step 2
LayoutDesigner
JavaProgrammer
28
Customize the generation rules
Layout templatesfor a perfectly fine-tuned layout, tailored to your visual identity
Custom componentsfor implementing any kind of business logic, integration or complex task
29
You get a tailored, yet standard, Java Web applicationwith no proprietary runtime
WebRatio – Step 3
WebRatioModeller
BusinessUser
30
Get the application
WebApp
DBMS
Browser
SOACustom
InformationSystem
Standard execution environment
Standard JavaApplication
Server
Involve business users in the development process and converge quickly to the target
An evolutionary prototyping dev cycle
Requirement Analysis
SolutionModelling
ApplicationGeneration
ResultsValidation
32
The two ways of MDD
Design-time Run-time
Model
Model
GenerationRules
Interpreter
Model
GeneratedApplication
GenerationEngine
Immediately available
Generation and deploy
Model Interpretation
Code GenerationVendor-dependent
code
Analyst /Modeller
LayoutDesigner
JavaProgrammer
App User
Analyst /Modeller
App User
33
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
Why we chose Code Generation
Our innovation environment
35
Evolution of tool (and language)
36
The final picture
37
Agility + MDD
DevelopmentPrototype
Test User
Zero-cost, 1-click, prototype generation
FinalApplication
Development / Testing environment
Final execution environmentDifferent deployment configurations
Iterative, agile development ?
Model
GenerationRules
GenerationEngine
FinalApp User
Model
GenerationRules
GenerationEngine
38
Do not change the generated application code
Touch the generation rules instead
The MDE Virtuous Cycle
GeneratedApplication
?
Industrial Cases
40
Kinds of application
Corporate Operations
Human Capital Management
Product Life Cycle Management
CustomerRelationshipManagement
Enterprise Resource Planning
Supply Chain Management
Knowledge Support
Sales and LeadManagement
Marketing Resources Mgt
Web CustomerServices
B2C/B2BE-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
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!!)
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
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
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
Maintenance effort
Served Contries and Applications
4 4 4 5 5
1724
32
41
56
1721 24
28 31
0
10
20
30
40
50
60
2001 2002 2003 2004 2005
Year
Un
its
Number of developers
Number ofmaintainedapplications
Number of servedcountries
47
• 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
GTT: Turin Transportation Group
48
• 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)
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 WebML?
• Latin America • Cooperatives, banks, public bodies, central government
• Wholesale (IKEA)
• Financial / leasing (undisclosed, USA)
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 WebML works
Model size and effort – some quantitative information from sample cases
Units and pages per project
Units per page (avg)
Man/days per unit
Man/days per page
Tool usage stats
Standardization
58
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
Standardization gap
59
Exploit the possible relations withBPMN -- Already in place
Structure models (Class, components, CWM …)
SOAml
SysML
Others
In the OMG framework
60
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
How to develop a standard lang?
61
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
Mandatory application requirements
The IFML metamodel - 1
62
The IFML metamodel - 2
63
The IFML metamodel - 3
64
65
Static aspects
The UML profile for IFML
« p a g e »AlbumSe arch
« p a g e »Albums
« p a g e »Album
Album Se arch Album Inde x Album De tail
« in d e x»M e ssage
Inde x
« in d e x»M Box List « lin k»
66
Static aspects
Signals with tagged values
Dynamic aspects
The UML profile for IFML
« s ig n a l»Se le ctM ailM e ssage s
mBo x :s tr in g
T a g g e d va lu e s.
Pa ra me te r mBoxo u t n a me : se le c te d MBo xin n a me : mBo x
« in d e x»M Box List
« in d e x»M e ssage
Inde x
Se le ctMa ilMe ssa g e s(mBo x)
67
IFML concrete syntax by example
68
IFML concrete syntax by example
69
IFML concrete syntax - extensions
A real example.. The complete Gmail UI
70
71
Porting of WebRatio to full IFML compliance
Implementation of new, open-sourceIFML modeling tool
Eclipse based
EMF / GMF ( + Graphiti framework)
Integration with:• UML modeling (class, activity, statechart mainly)• Papyrus UML editor • Papyrus fUML interpreter• Alf
Editor
72
Executability
Concluding remarks
• 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
Technical successes vs. business failures?
Some Ads
MDSE In Practice – The book
Brambilla, Cabot, Wimmer.
Morgan & Claypool, 2012.
Workshop on Communicating Business Process and Software Models
at ICSM 2013 conference
MD* blog
www.modeldrivenstar.com
Interaction Flow Modeling Language
www.ifml.org
Thanks! Questions?
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
www.webml.orgwww.webratio.comwww.modeldrivenstar.com