SlideShare a Scribd company logo

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

Download as PPTX, PDF
Marco Brambilla, profile picture
Marco Brambilla

The document discusses the Interaction Flow Modeling Language (IFML), which aims to standardize user interface (UI) and interaction design in web and mobile applications. It outlines modeling levels, the UI modeling problem, and IFML's objectives, emphasizing its ability to bind to various layers of business logic and persistence. By providing a concrete syntax and facilitating the integration of IFML with other modeling languages, the document illustrates IFML's potential to streamline UI development while addressing complexity and inefficiency in traditional processes.

Technology
Related topics:
Object-Oriented Programming • Web Design and Development • Insights on Software Development
1 of 132
Downloaded 774 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Most read
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Most read
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Most read
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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

DOC
Online shopping cart system file
Sunil Jaiswal
 
PPTX
IFML - The interaction flow modeling language, the OMG standard for UI modeli...
Marco Brambilla
 
PPTX
4+1 view model
Shobana Chokkalingam
 
PPT
Lecture04- Use Case Diagrams
artgreen
 
PPTX
Staruml
valeri kopaleishvili
 
PPT
Usecase Presentation
Rungsun Promprasith
 
PDF
Use case diagrams
mohamed tahoon
 
PPTX
Software Development: Trends and Perspectives
Softheme
 
Online shopping cart system file
Sunil Jaiswal
 
IFML - The interaction flow modeling language, the OMG standard for UI modeli...
Marco Brambilla
 
4+1 view model
Shobana Chokkalingam
 
Lecture04- Use Case Diagrams
artgreen
 
Staruml
valeri kopaleishvili
 
Usecase Presentation
Rungsun Promprasith
 
Use case diagrams
mohamed tahoon
 
Software Development: Trends and Perspectives
Softheme
 

What's hot (20)

PPTX
Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...
Marco Brambilla
 
PDF
Domain Modeling
Harsh Jegadeesan
 
PDF
Model View Controller (MVC)
Javier Antonio Humarán Peñuñuri
 
PPTX
Dart ppt
Krishna Teja
 
PPTX
Uml
Vishwa Mohan
 
PPT
007 Uml Modelleri Analiz Ve Tasarim [74 Slides]
Erol Bozkurt
 
PPTX
Components of .NET Framework
Roshith S Pai
 
PPTX
Model driven architecture
Biruk Mamo
 
PPTX
RE processes and process models
Syed Zaid Irshad
 
PDF
CS8592-OOAD Lecture Notes Unit-5
Gobinath Subramaniam
 
PDF
Mudanças itil
Silvana vitorino
 
PPTX
Requirements Engineering @ Agile
Girish Khemani
 
PDF
Object Oriented Analysis Design using UML
Ajit Nayak
 
PPT
Uml
Túlio Filho
 
PPTX
React JS - Parte 1
Bruno Catão
 
PPT
HCI 3e - Ch 11: User support
Alan Dix
 
PPT
Uml introduciton
Dr. C.V. Suresh Babu
 
PPT
UNIT-4design-concepts-se-pressman-ppt.PPT
malathijanapati1
 
PDF
MVC Architecture
Prem Sanil
 
PPT
UML- Unified Modeling Language
Shahzad
 
Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...
Marco Brambilla
 
Domain Modeling
Harsh Jegadeesan
 
Model View Controller (MVC)
Javier Antonio Humarán Peñuñuri
 
Dart ppt
Krishna Teja
 
Uml
Vishwa Mohan
 
007 Uml Modelleri Analiz Ve Tasarim [74 Slides]
Erol Bozkurt
 
Components of .NET Framework
Roshith S Pai
 
Model driven architecture
Biruk Mamo
 
RE processes and process models
Syed Zaid Irshad
 
CS8592-OOAD Lecture Notes Unit-5
Gobinath Subramaniam
 
Mudanças itil
Silvana vitorino
 
Requirements Engineering @ Agile
Girish Khemani
 
Object Oriented Analysis Design using UML
Ajit Nayak
 
Uml
Túlio Filho
 
React JS - Parte 1
Bruno Catão
 
HCI 3e - Ch 11: User support
Alan Dix
 
Uml introduciton
Dr. C.V. Suresh Babu
 
UNIT-4design-concepts-se-pressman-ppt.PPT
malathijanapati1
 
MVC Architecture
Prem Sanil
 
UML- Unified Modeling Language
Shahzad
 
Ad

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)

PDF
Mobile extensions for OMG's IFML modeling language
Università degli Studi dell'Aquila
 
PPTX
Mobile extensions for OMG's IFML modeling language presented at MobiWIS confe...
Marco Brambilla
 
PPTX
Interaction Flow Modeling Language (IFML) First Submission at OMG
Marco Brambilla
 
PDF
Future-Proof Coding with IFML
WebRatio
 
PDF
IFML - Internet of Things and Internet of People: The Role of User Interactio...
Marco Brambilla
 
PPTX
Industrial and Academic Experiences with a User Interaction Modeling Language...
Marco Brambilla
 
PDF
Domain specific modeling for mobile and io t apps
Università degli Studi dell'Aquila
 
PPTX
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
Marco Brambilla
 
PPTX
WebML for OMG
Marco Brambilla
 
PPT
Financial Accounting
Navriti
 
PPT
Lecture Note for Introduction Class
Navriti
 
PDF
Uml 2 Toolkit Hanserik Eriksson Magnus Penker Brian Lyons David Fado
ellastzum
 
PDF
End-to-end Model-driven Development of Applications with Eclipse using the ...
emanuelemolteni
 
PDF
Domain-specific Modeling and Code Generation for Cross-platform Mobile and Io...
Università degli Studi dell'Aquila
 
PPTX
Applied MVVM in Windows 8 apps: not your typical MVVM session!
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
PDF
Uml intro
Preeti Mishra
 
PDF
Introduction to UML
University of Texas at Dallas
 
PDF
FPA applied to UML and Use Cases
Nesma
 
PDF
UML-based Web Engineering (UWE)
elliando dias
 
PPT
UML 2.0 Changes
manishthaper
 
Mobile extensions for OMG's IFML modeling language
Università degli Studi dell'Aquila
 
Mobile extensions for OMG's IFML modeling language presented at MobiWIS confe...
Marco Brambilla
 
Interaction Flow Modeling Language (IFML) First Submission at OMG
Marco Brambilla
 
Future-Proof Coding with IFML
WebRatio
 
IFML - Internet of Things and Internet of People: The Role of User Interactio...
Marco Brambilla
 
Industrial and Academic Experiences with a User Interaction Modeling Language...
Marco Brambilla
 
Domain specific modeling for mobile and io t apps
Università degli Studi dell'Aquila
 
A Model-Based Method for Seamless Web and Mobile Experience. Splash 2016 conf.
Marco Brambilla
 
WebML for OMG
Marco Brambilla
 
Financial Accounting
Navriti
 
Lecture Note for Introduction Class
Navriti
 
Uml 2 Toolkit Hanserik Eriksson Magnus Penker Brian Lyons David Fado
ellastzum
 
End-to-end Model-driven Development of Applications with Eclipse using the ...
emanuelemolteni
 
Domain-specific Modeling and Code Generation for Cross-platform Mobile and Io...
Università degli Studi dell'Aquila
 
Applied MVVM in Windows 8 apps: not your typical MVVM session!
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
Uml intro
Preeti Mishra
 
Introduction to UML
University of Texas at Dallas
 
FPA applied to UML and Use Cases
Nesma
 
UML-based Web Engineering (UWE)
elliando dias
 
UML 2.0 Changes
manishthaper
 
Ad

More from Marco Brambilla (20)

PDF
A GraphRAG approach for Energy Efficiency Q&A
Marco Brambilla
 
PDF
Essential concepts of data architectures
Marco Brambilla
 
PDF
M.Sc. Thesis Topics and Proposals @ Polimi Data Science Lab - 2024 - prof. Br...
Marco Brambilla
 
PDF
Thesis Topics and Proposals @ Polimi Data Science Lab - 2023 - prof. Brambill...
Marco Brambilla
 
PPTX
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Marco Brambilla
 
PDF
Exploring the Bi-verse. A trip across the digital and physical ecospheres
Marco Brambilla
 
PPTX
Conversation graphs in Online Social Media
Marco Brambilla
 
PPTX
Trigger.eu: Cocteau game for policy making - introduction and demo
Marco Brambilla
 
PPTX
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Marco Brambilla
 
PPTX
Analyzing rich club behavior in open source projects
Marco Brambilla
 
PDF
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
Marco Brambilla
 
PPTX
Community analysis using graph representation learning on social networks
Marco Brambilla
 
PDF
Available Data Science M.Sc. Thesis Proposals
Marco Brambilla
 
PPTX
Data Cleaning for social media knowledge extraction
Marco Brambilla
 
PPTX
Iterative knowledge extraction from social networks. The Web Conference 2018
Marco Brambilla
 
PDF
Driving Style and Behavior Analysis based on Trip Segmentation over GPS Info...
Marco Brambilla
 
PDF
Myths and challenges in knowledge extraction and analysis from human-generate...
Marco Brambilla
 
PPTX
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Marco Brambilla
 
PPTX
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
Marco Brambilla
 
PDF
Big Data and Stream Data Analysis at Politecnico di Milano
Marco Brambilla
 
A GraphRAG approach for Energy Efficiency Q&A
Marco Brambilla
 
Essential concepts of data architectures
Marco Brambilla
 
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...
Marco Brambilla
 
Hierarchical Transformers for User Semantic Similarity - ICWE 2023
Marco Brambilla
 
Exploring the Bi-verse. A trip across the digital and physical ecospheres
Marco Brambilla
 
Conversation graphs in Online Social Media
Marco Brambilla
 
Trigger.eu: Cocteau game for policy making - introduction and demo
Marco Brambilla
 
Generation of Realistic Navigation Paths for Web Site Testing using RNNs and ...
Marco Brambilla
 
Analyzing rich club behavior in open source projects
Marco Brambilla
 
Analysis of On-line Debate on Long-Running Political Phenomena. The Brexit C...
Marco Brambilla
 
Community analysis using graph representation learning on social networks
Marco Brambilla
 
Available Data Science M.Sc. Thesis Proposals
Marco Brambilla
 
Data Cleaning for social media knowledge extraction
Marco Brambilla
 
Iterative knowledge extraction from social networks. The Web Conference 2018
Marco Brambilla
 
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...
Marco Brambilla
 
Harvesting Knowledge from Social Networks: Extracting Typed Relationships amo...
Marco Brambilla
 
Model-driven Development of User Interfaces for IoT via Domain-specific Comp...
Marco Brambilla
 
Big Data and Stream Data Analysis at Politecnico di Milano
Marco Brambilla
 

Recently uploaded (20)

PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
Approach and Philosophy of On baking technology
30anthuong17
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 

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