Modeling User Interfaces with Web Component with Quid, Keynote for ACM SIGCH EICS-2019, 21st of June, 2019, Valencia

1. Modeling
User Interfaces
with Web Components
in Quid
Dr. Pedro J. Molina
Founder at Metadev
@pmolinam
Valencia, 2019.06.21

2. Pedro J. Molina, PhD.
@pmolinam
Experience
 Metadev, Founder (2016-current)
 OpenAPI Initiative BGB member (2018-current), ISA-Group, University
of Seville
 Icinetic, CTO – CRO (2012-2016)
 Capgemini, Software Architect & Manager (2005-2011)
 CARE Technologies, Lead Researcher, SW Engineer (1999-2004)
 UPV, Research Fellowship (1998-1999)

3. Startup founded in 2016.10 at Sevilla
5 employees: full remote
Self-funded
Customers in SFO, London, Madrid, Valencia, & Sevilla
Sectors: banking, fintech, taxes, cloud computing, education,
industrial, SW development, & consulting.

4. What we do?
Build tools for creating DSLs ontheWeb.
Provide the best high-quality code
generation tailored to customer needs.

5. Agenda
UI Archeology
User Interface Modeling
AIO & CIOs
Conceptual User Interface Patterns
Model Driven Engineering
Web Components
Quid

6. User Interface Archeology
Client Server
SPA / JS
ASP.NET JSP Ruby
Silverlight / Flash / Applets
Heavy clients (.NET, Java Swing)
PHP CGI
Visual Basic / Delphi
Mainframe / Terminals VT52/VT100

7. User Interface Archeology

8. User Interface Archeology
Architectures
Model View Controller (Smalltalk ’80)
Model View Presenter (IBM ’90)
Model View View-Model (MS ‘99)
Reactive (ReactJS)
Unidirirectional (CycleJS)
Model View Update (Eml)
SAM …
Component Oriented (VB 1.0 ‘91)

9. User Interface Archeology
Visual Basic1.0, 1991
runningon Windows 3.11
Alan Cooper for Microsoft Corp.
 Components
 Properties
 Events
 Reusable Component
Palette

10. User Interface Modeling
Angel R. Puerta (1994)
Bodart & Vandendonckt (1996)
Task Models, Paterno (1997)
Just-UI (2002)
CAMALEON(2002)
UMLi
Ximl
UsiXML
UIML

11. AIOs & CIOs
AbstractInteractionObjects
Integer Selection
ConcreteInteractionObjects
Bodart & Vanderdonckt (1996)

12. Conceptual User Interface Patterns
 Catalog of UI Patterns present in 99% of business
oriented Apps (2002)
 HAT
 Command
 Instance
 Service
 Population/List
 Master/Detail
 Defined Selection
 Navigation
 State Recovery
 Etc.
This is the essence of my PhD Thesis on 2003.
Great starting point for modeling and code
generation.
http://pjmolina.com/cuip

13. “The Impossible Equation”
Jean Bezevin
The need for custom software exceed the offering.
It will lead to increased prices for software.
Bettertoolsneeded!
O(n)
O(en)

14. “Theentirehistoryof
SoftwareEngineeringis
theoneofraisinglevelsof
abstraction.
Abstractionistheprimary
wayhumansdealswith
complexity.”
Grady Booch

15. MDE / MDD / MD*
Definition
The usage of Models as the main artifacts to
Drive the Software Development

16. Separation of Concerns (SoC)
Know-Howcaptured in two separated buckets:
How
 Technological Know-How:
captured & encapsulated in form of
best practices, frameworks,
templates & code patterns in code
generators & interpreters.
What
 Business Know-How:
captured in form of models
(specifications): isolated from
technological issues

17. MDE: Economic Model
Domain Engineering
Application Engineering
Application Development
Environment
Applications
Feedback:
 Clients suggestions
 Improvements for the
development environment
ROI (development cost saving)
Investment

18. MDE: Economic Model
 Traditional Cost = N * CT
 MDD cost = Inv + N * CF
Family members
1 2 3 4 5
5 CT
4 CT
3 CT
2 CT
CT
Accumulatedcosts
Inv
Saving AF = CT - CF

19. Defects Cost and Distribution
% Defects
Analysis Design Coding Maintenance
Traditional life cycle
MDD life cycle Exponential cost
of defects
Snow ball effect
1 €
2 €
4 €
8 €

20. Models: some Cases of Use
Model
Checker
Model
1. Validation
Report
Interpreter
Model
Runtime
interpretation
2. Interpretation
Code
Generation
Model
3. Code Generation
Generated
Code
Code
Metadata
Doc
Config.
Tests
...

21. Conceptual Map for Code Generation
Metamodel
Model
Templates
Code
Transformations
Higher Abstraction Level Lower
InstancesTypes
Code Generator

22. Tooling matters
Textual Model Editor
Model(s)
Visual Model Editor
IDE
Model Checker
Model Transformation
Model
M2M M2T
Code
Doc, etc.
Reverse
Engineering
Tools
Metamodel(s)

23. Examples
Uses cases

24. Olivanova Model Execution
 CARE Technologies, Denia (1999-2004)
 Model-Driven tool for modelling
business app.
 Full code generation for targets:
 Visual Basic 6.0
 Cold Fusion
 Java + JSP
 C# + ASP.NET
 UI specification via CUIPs

25. PISA Project
 PISA Project
 For Bancaja / Capgemini 2005-07
 Results presented at Code
Generation 2007
 Model + Reverse engineering
Banking functions
 MS DSL Tools

26. Essential
 Essential (2009)
 IDE and a runtime for creating
code generators
 Declarative, Clean
 Fast
 Promotes reuse
 Forward engineering approach
http://pjmolina.com/essential

27. Ozui
 Navigation + UI Specification
 Client Service Consumption
 WYSIWYG approach
 Platform independent
 Generation to different
targets

28. Ozui

29. formQL

30. formQL
Parsing Model
Errors
Validation Rendering Runtime
Editor Browser
Error report
OnKeyPress() Render

31. formQL
Proof of Concept
Form definition language with constrains expression and styling
Architecture for custom DSL
Modeled with Essential
Textual + Projectional
Model interpretation under than 100 ms time response
Allowing real-time modeling and running on each keypress

32. buildup.io
First Web WYSIWYG native Mobile AppBuilder
Targets: Android, iOS & Xamarin
Customers:
Microsoft
IBM
Xamarin
Firefox

33. hivepod.io
Microservice definition, generation and cloud deploy

34. Web Components
Web Components are standardized technology by W3C to
bring to browsers:
Components
Properties
Events
Palette of Reusable Components
The Visual Basic & Delphi Model… on the web!...
27 years later!

35. Web Components. Base Standards
1. Custom Elements
2. HTML Templates
3. Shadow DOM
4. ES Modules

36. Browser Support at 2019.06

37. Quid
Prototype Web Componentson the Web https://quid.metadev.pro
Explore different WC frameworks
Banking Project with
Everis (2017-2018) for an
US investment Bank
 Generation of 60-80% of
user interfaceusing the
bank technology stack
 Metadev is specialized in
high-quality custom code
generation

38. SwiftUI
Presented by Apple on June/8th
https://developer.apple.com/xcode/swiftui/
1. Declarative
2. Minimal syntax
3. WYSIWYG approach
4. Drag & drop support

39. Predictions
About the UI Future:
1. Device fragmentation  myriad of devices: mobile, TV, laptops,
tablets, aural interfaces, VR, AR.
 Getting worse, and this is not going to stop.
 Multiplier for implement, test and support N devices/browsers/platforms.
2. Multi-device, Focus on the user task’s, not on the device, adaptable to
context.
 What tools do you need to design and implement a user experience that will
jump from device to device in ways you cannot anticipate?

40. Conclusions
The only solution for fragmentation:
Model  going declarative  code gen. details for each device/platform
following a pre-defined style guide.
UI Modeling tools keeps getting more and more declarative.
Web Components are a huge jump for standardizing the way we
share UI widgets on the Web
WC  Components Ecosystem.
Tools needed for this to happen!

41. pjmolina@metadev.pro
https://pjmolina.com | @pmolinam
Thank you!