ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina

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

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)

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

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

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

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

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)

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

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

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

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

“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)

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

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

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

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

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

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 €

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

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

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)

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

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

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

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

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

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

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

hivepod.io
Microservice definition, generation and cloud deploy

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!

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

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

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

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?

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!

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

ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina

More Related Content

What's hot

Similar to ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina

More from Pedro J. Molina

Recently uploaded

ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina