BPMN Business Management Presentations Process Modeling

Industrial and Academic Experiences with a User Interaction Modeling Language: WebML and WebRatio


Seminar given in


Industrial and Academic Experiences with aUser Interaction Modeling Language: WebMLMarco Brambilla marcobrambiPolitecnico di Milano and www.webml.org L’Aquila, March 14, 2013 Agenda Problem Objective Language Tool Cases Standardization 2 Problem UI Modeling ProblemUI has been neglected in the MDE community Complexity of UIs increase in time • New events, devices, use cases, interactions WYSIWYG (well… more or less) for UI programming around • Widgets drag&drop • Hooks to execution No real MDE attempt to address the problem 4 User Interface vs. Interaction UI blends into visualization and graphics Distinguish Interaction from InterfaceUser interaction focus: Previous attempts failed because of: • Low usability and effectiveness of notation • Missing solid implementations with vendors support 5 The gapA perceived gap in the modeling efforts User interaction has been overlooked in modeling proposals No existing standard notation A bunch of proposals (mainly from Web or old Hypermedia fields) Previous attempts failed because of: • Low usability and effectiveness of notation • Missing solid implementations with vendors support 6 Objective FocusThe VIEW part of a software application view components view modules events interaction between components Interaction between the user and the components (events) the distribution of view components and referenced data and business logic at the different tiers of the architecture 8 ObjectivesExpressing Content of interfaces User events and interaction Binding to business logicof the front-end of applications belonging to diverse domains 9 Advantages formal specification of the different perspectives of the front-end Isolate implementation-specific issues of UIs Separate the concerns in the user interaction design Enable the communication of interaction design to non-technical stakeholders Automatic generation of code also for the application front-end part 10 Language: WebML Effective and essentialA visual modeling language (DSL) … Oriented to the high level design Incorporating all the details that are needed for refined specification… Effective and essential … Including only the concepts relevant to the domain No overhead because of verbose notation or orthogonality… For user interaction design … Page contents Navigation paths and UI events… Within web applications Born bottom-up from the features of dynamic web applications 12 Role and positioningContents: Process: User Interaction: Style:ER, class, .. BPMN WebML CSS, … BPMN model Backend: soaML, WSDL.. Services 13 Foundations and extensibilityThe language foundations Basic set of units Connection to a content model for data retrieval and management Links for control and data flow Page computation algorithms for execution semantics • The page content is automatically calculated also in case of complex topologies • Incoming links and dependencies among units are consideredThe language is open New units and operations can be specified For implementing ad-hoc business logics 14 The WebML notation example ReviewPageGetUser CurrentUser PreferredArtists Two pages Retrieval of session data (CurrentUser)CurrentUser CurrentUser Artist Review Page [UserPreference] AllArtists • Lists of (prefered) artists ArtistDetails • Links to artist details Albums Page Artist Artist • List of albums of selected artist KO Albums • Checkbox and deletion of AlbumIndex DeleteAlbum albums OK Album Album [PlayedByArtist] Content publishing units IN: UnitName OUT: Param1, … ParamN Params UnitType Concept [Selector (Param1, …, ParamN)]A WebML unit is the atomic information publishing elementA “view” defined upon a container of objects: The instances of a concept Based on one or more complex selection conditions (called selectors)A unit may need some inputs and produces some outputs Inputs are required to compute the unit itself (params of the selector) Outputs can be used to compute other unit(s) 16 Links AllArtists ArtistDetails Artist ArtistLinks in WebML have 3 purposes Describe navigation paths Transport parameters between units Activate computation of units and execution of side effectsNormally, links are rendered as one or more anchors/buttonsbased 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 Operation units OperationName OK OpType KO Concept [Selector (Param1, …, ParamN)]Execution of operations and business logicSimple failure/success model of operations Success: green “OK link” is navigated Failure: red “KO link” is navigatedChains of operations can be defined Control dictated by links Basic control flow elements available (loop, switch) 18 Units coverageContent publishingData Index MultiData Entry Scroller Multichoice HierarchicalIndexSession management Web Services Login Logout Get Set Request-Response ….CRUD OperationsCreate Modify Delete Connect Disconnect 19 Lesson learned from WebMLAdvantages of the notation Extremely compact (no useless overhead) Denormalization / no orthogonality (increased compactness) Effective (allows to model exactly what users want) Efficient (grants high reusability of model fragments) Easy to learn (very low learning curve) Comprehensive (covers most of the web interaction needs) Minimal but extensible (for covering any ad hoc logic) Executable (semantics defined and execution granted) 20 Tool: WebRatio What is WebRatioAn Eclipse-based development environment allowing: Modeling: ER + WebML + BPMN 100% code generation of standard JEE applications • Clear separation between design time and run time • No proprietary runtime Requirement Analysis Quick and agile development cycles Extending the generation rules • Defining new presentation styles Results Verification Solution Modeling • Defining new components Versioning, teamwork, full lifecycle mgt Truly multi-role model-driven development Prototype Generation 22 A fertile environment …… for designing, building and maintaining yourcustom enterprise applications 23 SummaryWebRatio is now at 7th release on the market since 2001WebRatio customers 130+ companies and 500+ commercial users in Italy, Europe and South AmericaWebRatio adoption 15,000+ users of the free edition Used in hundreds of universities all over the worldWebRatio partners 40+ software houses and system integrators 300+ universities worldwide, 12.000+ students WebRatio – Step 1You capture business requirements in abstract,technology independent models WebRatio Business Modeller User 25 Design the modelProcess Model Application Model Define business processes Define data, services, logic and managed by the application presentation details BPMN notation WebML notation 26 WebRatio – Step 2You customize the environment by defining your owngeneration rules Layout Java Designer Programmer 27 Customize the generation rulesLayout templates Custom components for a perfectly fine-tuned layout, for implementing any kind of tailored to your visual identity business logic, integration or complex task 28 WebRatio – Step 3You get a tailored, yet standard, Java Web applicationwith no proprietary runtime WebRatio Business Modeller User 29 Get the application Browser Standard execution environment Standard Java Web Application App Server Custom DBMS Information SOA System 30 An evolutionary prototyping dev cycleInvolve business users in the development process andconverge quickly to the target Requirement Analysis Solution Results Modelling Validation Application Generation The two ways of MDD Design-time Run-timeModel Interpretation Immediately available Model Model Analyst / Interpreter App User Modeller Vendor-dependent code Code Generation Generation and deploy Generation Generated Model Engine Application Analyst / Generation App User Modeller Rules Layout Java Designer Programmer 32 Why we chose Code Generation3 reasons in favour of Code Generation Execution environment is as standard as possible • standard architecture, standard libraries • fitting corporate IT policies Two degrees of freedom instead of one • not all the requirements can be modelled • define, use and reuse your own generation rules No vendor lock-in • generated code is human-readable, applications can be easily maintained without the tool 33 Our innovation environment Evolution of tool (and language) 35 The final picture 36 Agility + MDDIterative, agile development ? Zero-cost, 1- Development / Testing environment click, prototype generation Development Generation Prototype Model Test User Engine Generation Rules Final Application Final App User Different deployment Final execution environment configurations 37 The MDE Virtuous CycleDo not change the generated application codeTouch the generation rules instead ? Generation Generated Model Engine Application Generation Rules 38 Industrial Cases Kinds of application Document Customer Management Information Mgt Knowledge Web Content Sales and Lead Management Management Management Learning Customer Partner Management Knowledge Relationship Relationship Mgt Support Management Project Marketing Management Resources Mgt Business Web Customer Supply Chain Services Intelligence Management B2C/B2B E-Commerce Web Front-End of Financial Enterprise accounting sys. Services Resource Supplier Payment Services Planning Relationship Mgt Orchestration Product Life Cycle Human Capital Corporate Front-Office Management Management Operations Process Mgt Recruitment Enterprise Governance Training Risk and Workforce Compliance Management Order Mgt 40 AcerB2C + CMS Web applications initially for 14 EU countriesCorporate news, Product technical & commercial data,Service & Partner area, Where to Buy…Multilingual, multi-actor, distributed workflows for local andcentral PMs, local and central MarCom managers… and a: very limited Time to Market (7 weeks!!) Size & effort Class Dimension Value Size Number of localized B2C web sites 14 Number of main CMS applications 4 (Admin, News, Product, Other content) Number of supported languages 12 for B2C Web sites, 1 for CMS Number of data entry masks 39 Number of automatically generated database tables 46 Number of automatically generated database views 82 Number of automatically generated database 279 for data extraction, 89 for queries data update Number of automatically generated JSP page 48 templates Number of automatically generated or reused Java 250 classes Number of automatically generated Java lines of 12500 Non commented lines of code code Time & Number of elapsed workdays 49 effort Number of development staff-months (analysts and 6 staff-months (6 weeks x 4 developers) persons) Total number of prototypes 9 Average elapsed man days between consecutive 5,4 prototypes Average number of development man days per 15,5 prototype 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 ConsiderationsOn 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 stakeholdersMDD allows a more flexible distribution ofresponsibilities between the IT department and thebusiness unitsThe peak productivity rates has reached five timesthe number of delivered function points per staff-month of a traditional programming language likeJava 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 60 56 50 Number of developers 40 41 Units 30 32 31 28 Number of 24 24 20 21 maintained 17 applications 10 4 4 4 5 5 Number of served 0 countries 2001 2002 2003 2004 2005 Year GTT: Turin Transportation Group• Public company owned by the City of Turin in Italy• Local public transport serving 190 million passengers every year.• A new e-ticketing system (avail able at http://ecommerce.gtt.to.it and serving 64,000 daily passengers)• published on-line in only 2 months.• The application comprises 100 page templates (WebML pages) and 1215 WebML units.• KEY: iterative and quick prototyping approach supported by WebRatio 47 A2A: Utility in Milan• Multi-utility company buying and selling wholesale electric power.• Integrated Energy Management System that replaced individual productivity tools used by traders for the management of electric power. • management of electric power contracts; the management of “green package” contracts; the management of natural gas contracts; the management of the variable rate curve of both electric power contracts and gas contracts; the management of market indices; and the exporting/importing of ad-hoc statistical reports from different systems.• KEY: quick prototyping approach and involvement of actual users in the development process.• Deployment of final app in 6 months after the initial meeting with WebRatio (time to market that took one-third of the time estimated in case of adoption of a traditional development) 48 Other experiences• Banking (UniCredit) • BPM + SOA + Web interfaces • Crucial points: modularization, multiple models integration, multiple tools integration, strict runtime platform requirements• Banking (ABI) • System integration (Pure backend!) • Why WebML?• Latin America • Cooperatives, banks, public bodies, central government• Wholesale (IKEA)• Financial / leasing (undisclosed, USA) Where WebML works• Models integration• Large applications with strong need for coherence and standardized paradigms • Cooperatives, banks, public bodies, central government• Service orientation• No pure modeling exists• Code generation still win-win Model size and effort – some quantitativeinformation from sample cases Units and pages per project 100000″ 10000″ 1000″Numberofunits 100″ 10″ 1″ 10″ 100″ 1000″ Numberofpages Units per page (avg) Man/days per unit 0.2″ 0.18″ 0.16″ (man/days& unit)& 0.14″ r per& 0.12″ 0.1″ Effo t& 0.08″ 0.06″ 0.04″ 0.02″ 0″ 30″ 300″ 3000″ r Effo t& project& per& (man/days)& 1.2″ 0.02″ 0″Man/days per page 30″ 300″ 3000″ r Effo t& project& per& (man/days)& 1.2″ 1″ (man/days& page& r per& 0.8″ 0.6″ Effo t& page& per& 0.4″ 0.2″ 0″ 30″ 300″ 3000″ r Effo t& project& per& (man/days)& Tool usage stats Standardization Standardization gapA perceived gap in the standardization efforts No official standard from any recognized body Some activity now ongoing at the MBUI working group in W3C We are pushing for a standard modeling language in OMG INTERACTION FLOW MODELING LANGUAGE (IFML) Direct evolution/extension of WebML 58 In the OMG frameworkExploit the possible relations with BPMN — Already in place Structure models (Class, components, CWM …) SOAml SysML Others 59 How to develop a standard lang? A MOF-compliant metamodel which describes the user interaction within front- end interfaces, their constituents, and their connections with back-end business components, data storage and Web Services. A concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer. A UML Profile consistent to the metamodel. A complete mapping between the UML Profile and the metamodel. An interchange format between tools using XMI. A specification document. Implemented proof of concept. Some sample mappings to domain-specific platforms. Release of IPR/copyright/patents 60 Mandatory application requirements Multiple views for the same application Mobile and multi-device applications Visualization and input of data, and production of events Components independent of concrete widgets and presenation Interaction flow, initiated by the user or by external events User context: the user status in the current instant of the interaction (position, history, machine, platform,…) Modularization of the model (design-time containers for reuse purposes of model fragments) User input validation, according to OCL or other existing constraint languagesBut not: inference rules that make model specification simpler and more concise Backend modeling 61 The IFML metamodel – 1 62 The IFML metamodel – 2 63 The IFML metamodel – 3 64 The UML profile for IFMLStatic aspects «page» «page» «page» AlbumSearch Albums Album Album Search Album Index Album Detail «index» «index» MBox List «link» Message Index 65 The UML profile for IFMLStatic aspectsSignals with tagged values «signal» Tagged values. SelectMailMessages Parameter mBox mBox :string out name: selectedMBox in name: mBoxDynamic aspects SelectMailMessages(mBox) «index» «index» Message MBox List Index 66 IFML concrete syntax by example 67 IFML concrete syntax by example 68 IFML concrete syntax – extensions 69 A real example.. The complete Gmail UI GMAIL top [X] Messages [L D] <<XOR>> Message search <<D>> Search <<P>> FullSearch OUT: Keyword Message keyword Show search Message Message IN: SearchKey options full search search OUT: Keyword, From, notification To., … IN: SearchKey, Search mail FromKey, ToKey, .. Mbox List <<XOR>> Message Management <<L>> Settings MailBox {Self.MessageRecipients >1} OUT: AllMessages <<XOR>> Message Reader IN: MessageSet MarkAll Message ReplyToAll AsRead MarkAll * Message Index details Forward Reply Delete <<D>> OUT: MessageID IN: MessageID Archive Message toolbar State =”Reply” OR Delete ”Forward” Archive <<parameter>> Report MessageSet Report <<L>> Message writer OUT: SelectedMessages MoveTo Discard IN: MessageSet Reply OUT: Subject, From, <<form>> Message Writer Cc, Body, “ReplyAll” ToAll State = Add Cc IN: “Re:”+ Subject, To, Cc, ”NewMessage” OR <<field>> To Body, State “Forward” <<P>> Tag chooser <<field>> Cc State =”Forward” Associate Add Bcc Reply OR ”ReplyToAll” Tag/ <<field>> Bcc to tag / Folder Move to Select Index State =”Reply” <<field>> Subject folder Tag OR ”ReplyToAll” OUT: Subject, From, <<field>> Body “”, Body, “Reply” OUT: SelectedTag Edit subject IN: ATag Forward IN: “Re:”+ Subject, To, Cc, Create <<field>> Attachment Body, State OUT: NewTag IN: ATag New <<parameter>> State <<M>> Tag creator Add attachment Create OUT: Subject, “”, “”, Body, Tag/ New Tag/ Send Save “Forward” Folder Create Folder IN: “Fw:”+ Subject, To, Cc, Body, State OUT: NewTagName IN: TagName State =”Reply” OR ”ReplyToAll” Send Save Action Action 70 EditorPorting of WebRatio to full IFML complianceImplementation 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 71 Executability IFML produces Platform IFML IFML UI code specific editor model execution generator UI code calls UML editor produces input fUML fUML backend Interpreter business logic model execution calls Alf editor Alf + parser compiler 72 Concluding remarks Technical successes vs. business failures?• Service vs. product company• Scalability of models vs. scalability of business• 2 MLN turnover• 40 people• 12 years• Verticals• WebRatio Store• What’s next? • Cloud, social web, mobile web… and the USA Some AdsMD* blog MDSE In Practice – The bookwww.modeldrivenstar.com Brambilla, Cabot, Wimmer. Morgan & Claypool, 2012. Interaction Flow Modeling Language www.ifml.org Workshop on Communicating Business Process and Software Models at ICSM 2013 conference Some Ads www.BPM4people.org Research project on social enterprise Thanks! Questions?Marco Brambilla marcobrambi

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="https://www.businessprocessincubator.com/content/industrial-and-academic-experiences-with-a-user-interaction-modeling-language-webml-and-webratio/?feed=html" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples