SlideShare a Scribd company logo

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

Pedro J. Molina
Pedro J. Molina
Pedro J. MolinaFounder at Metadev

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

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

1 of 41
Download to read offline
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

More Related Content

What's hot

BrendanCaylorCV-May2016vrs3
BrendanCaylorCV-May2016vrs3BrendanCaylorCV-May2016vrs3
BrendanCaylorCV-May2016vrs3Brendan Caylor
 
CV-Roy-Salha
CV-Roy-SalhaCV-Roy-Salha
CV-Roy-Salharoy salha
 
Nirosha dotnet cv (2) copy mvc
Nirosha dotnet cv (2)   copy  mvcNirosha dotnet cv (2)   copy  mvc
Nirosha dotnet cv (2) copy mvcNirosha balaneni
 
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, ObectoMobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, ObectobeITconference
 
Senior .Net engineer
Senior .Net engineerSenior .Net engineer
Senior .Net engineerAdam Sowter
 
DotNet Fundamentals
DotNet FundamentalsDotNet Fundamentals
DotNet FundamentalsMajdi SAIBI
 
Zhen li Resume
Zhen li ResumeZhen li Resume
Zhen li ResumeZhen Li
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27Koubei UED
 
Modeling and Code Generation in the Cloud for Citizen Developers and Beyond
Modeling and Code Generation in the Cloud for Citizen Developers and BeyondModeling and Code Generation in the Cloud for Citizen Developers and Beyond
Modeling and Code Generation in the Cloud for Citizen Developers and BeyondPedro J. Molina
 
Senior Front End Developer - contract london
Senior Front End Developer - contract londonSenior Front End Developer - contract london
Senior Front End Developer - contract londonMark Long
 
Senior Front End Developer – Contract Position, see @Bradley_abrs
Senior Front End Developer – Contract Position, see @Bradley_abrsSenior Front End Developer – Contract Position, see @Bradley_abrs
Senior Front End Developer – Contract Position, see @Bradley_abrsMark Long
 
Web developer / Full Stack Engineer/ backend Developer /Frontend Developer
Web developer / Full Stack Engineer/ backend Developer /Frontend DeveloperWeb developer / Full Stack Engineer/ backend Developer /Frontend Developer
Web developer / Full Stack Engineer/ backend Developer /Frontend Developerruochen Liao
 
Andraz Zuccato CV (Front End Developer)
Andraz Zuccato CV (Front End Developer)Andraz Zuccato CV (Front End Developer)
Andraz Zuccato CV (Front End Developer)Andraz Zuccato
 

What's hot (20)

10012015
1001201510012015
10012015
 
Latest cv
Latest cvLatest cv
Latest cv
 
BrendanCaylorCV-May2016vrs3
BrendanCaylorCV-May2016vrs3BrendanCaylorCV-May2016vrs3
BrendanCaylorCV-May2016vrs3
 
CV-Roy-Salha
CV-Roy-SalhaCV-Roy-Salha
CV-Roy-Salha
 
Nirosha dotnet cv (2) copy mvc
Nirosha dotnet cv (2)   copy  mvcNirosha dotnet cv (2)   copy  mvc
Nirosha dotnet cv (2) copy mvc
 
CV Nirosha
CV NiroshaCV Nirosha
CV Nirosha
 
Jerry vigil
Jerry vigilJerry vigil
Jerry vigil
 
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, ObectoMobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
 
Senior .Net engineer
Senior .Net engineerSenior .Net engineer
Senior .Net engineer
 
DotNet Fundamentals
DotNet FundamentalsDotNet Fundamentals
DotNet Fundamentals
 
Zhen li Resume
Zhen li ResumeZhen li Resume
Zhen li Resume
 
MAMOHailegebreal
MAMOHailegebrealMAMOHailegebreal
MAMOHailegebreal
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27
 
Abhishek_Anand_Resume
Abhishek_Anand_ResumeAbhishek_Anand_Resume
Abhishek_Anand_Resume
 
Modeling and Code Generation in the Cloud for Citizen Developers and Beyond
Modeling and Code Generation in the Cloud for Citizen Developers and BeyondModeling and Code Generation in the Cloud for Citizen Developers and Beyond
Modeling and Code Generation in the Cloud for Citizen Developers and Beyond
 
dot net
dot netdot net
dot net
 
Senior Front End Developer - contract london
Senior Front End Developer - contract londonSenior Front End Developer - contract london
Senior Front End Developer - contract london
 
Senior Front End Developer – Contract Position, see @Bradley_abrs
Senior Front End Developer – Contract Position, see @Bradley_abrsSenior Front End Developer – Contract Position, see @Bradley_abrs
Senior Front End Developer – Contract Position, see @Bradley_abrs
 
Web developer / Full Stack Engineer/ backend Developer /Frontend Developer
Web developer / Full Stack Engineer/ backend Developer /Frontend DeveloperWeb developer / Full Stack Engineer/ backend Developer /Frontend Developer
Web developer / Full Stack Engineer/ backend Developer /Frontend Developer
 
Andraz Zuccato CV (Front End Developer)
Andraz Zuccato CV (Front End Developer)Andraz Zuccato CV (Front End Developer)
Andraz Zuccato CV (Front End Developer)
 

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

Live Cycle ES2 News From Adobe MAX
Live Cycle ES2 News From Adobe MAXLive Cycle ES2 News From Adobe MAX
Live Cycle ES2 News From Adobe MAXMatthias Zeller
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov
 
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...WSO2
 
Φάννυ Κοφινά, 7th Digital Banking Forum
Φάννυ Κοφινά, 7th Digital Banking ForumΦάννυ Κοφινά, 7th Digital Banking Forum
Φάννυ Κοφινά, 7th Digital Banking ForumStarttech Ventures
 
Platform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on AzurePlatform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on AzureWSO2
 

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

Resume
ResumeResume
Resume
 
Sanjeev
SanjeevSanjeev
Sanjeev
 
Resume
ResumeResume
Resume
 
Anil Kumar
Anil KumarAnil Kumar
Anil Kumar
 
Subhani - CV
Subhani - CVSubhani - CV
Subhani - CV
 
JimmyEdward
JimmyEdwardJimmyEdward
JimmyEdward
 
Live Cycle ES2 News From Adobe MAX
Live Cycle ES2 News From Adobe MAXLive Cycle ES2 News From Adobe MAX
Live Cycle ES2 News From Adobe MAX
 
Soumya_S_Mukherjee_Resume
Soumya_S_Mukherjee_ResumeSoumya_S_Mukherjee_Resume
Soumya_S_Mukherjee_Resume
 
Abhishek Singh-Resume
Abhishek Singh-ResumeAbhishek Singh-Resume
Abhishek Singh-Resume
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015
 
Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015Viktor Aleksandrov-Resume-2015
Viktor Aleksandrov-Resume-2015
 
SunidhiSharma
SunidhiSharmaSunidhiSharma
SunidhiSharma
 
DotVVM Fundamentals
DotVVM FundamentalsDotVVM Fundamentals
DotVVM Fundamentals
 
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...
Choreo - Build unique digital experiences on WSO2's platform, secured by Etho...
 
Φάννυ Κοφινά, 7th Digital Banking Forum
Φάννυ Κοφινά, 7th Digital Banking ForumΦάννυ Κοφινά, 7th Digital Banking Forum
Φάννυ Κοφινά, 7th Digital Banking Forum
 
RGProfile
RGProfileRGProfile
RGProfile
 
Platform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on AzurePlatform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on Azure
 
Dhiraj_Kalra
Dhiraj_KalraDhiraj_Kalra
Dhiraj_Kalra
 

More from Pedro J. Molina

dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebdotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebPedro J. Molina
 
Infrastructure as Code with Terraform
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with TerraformPedro J. Molina
 
Esencia de Web Components
Esencia de Web ComponentsEsencia de Web Components
Esencia de Web ComponentsPedro J. Molina
 
Esencia de web components
Esencia de web componentsEsencia de web components
Esencia de web componentsPedro J. Molina
 
Securizando por construcción mediante MDE
Securizando por construcción mediante MDESecurizando por construcción mediante MDE
Securizando por construcción mediante MDEPedro J. Molina
 
Building APIs with the OpenApi Spec
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi SpecPedro J. Molina
 
Micro vs Nano (servicios)
Micro vs Nano (servicios)Micro vs Nano (servicios)
Micro vs Nano (servicios)Pedro J. Molina
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPIPedro J. Molina
 
SVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosSVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosPedro J. Molina
 
Tecnologías para microservicios
Tecnologías para microserviciosTecnologías para microservicios
Tecnologías para microserviciosPedro J. Molina
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackPedro J. Molina
 
Microservicios sobre MEAN Stack
Microservicios sobre MEAN StackMicroservicios sobre MEAN Stack
Microservicios sobre MEAN StackPedro J. Molina
 
Hivepod: Casos de uso en OpenData
Hivepod: Casos de uso en OpenDataHivepod: Casos de uso en OpenData
Hivepod: Casos de uso en OpenDataPedro J. Molina
 
Introducción a StackOverflow
Introducción a StackOverflowIntroducción a StackOverflow
Introducción a StackOverflowPedro J. Molina
 

More from Pedro J. Molina (20)

MDE en la industria
MDE en la industriaMDE en la industria
MDE en la industria
 
Terraform
TerraformTerraform
Terraform
 
dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebdotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
 
Infrastructure as Code with Terraform
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with Terraform
 
Are Startups for me?
Are Startups for me?Are Startups for me?
Are Startups for me?
 
Esencia de Web Components
Esencia de Web ComponentsEsencia de Web Components
Esencia de Web Components
 
Esencia de web components
Esencia de web componentsEsencia de web components
Esencia de web components
 
OpenAPI 3.0.2
OpenAPI 3.0.2OpenAPI 3.0.2
OpenAPI 3.0.2
 
Securizando por construcción mediante MDE
Securizando por construcción mediante MDESecurizando por construcción mediante MDE
Securizando por construcción mediante MDE
 
Building APIs with the OpenApi Spec
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi Spec
 
Micro vs Nano (servicios)
Micro vs Nano (servicios)Micro vs Nano (servicios)
Micro vs Nano (servicios)
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPI
 
SVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosSVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para Microservicios
 
Introducción a Angular
Introducción a AngularIntroducción a Angular
Introducción a Angular
 
Tecnologías para microservicios
Tecnologías para microserviciosTecnologías para microservicios
Tecnologías para microservicios
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN Stack
 
Microservicios sobre MEAN Stack
Microservicios sobre MEAN StackMicroservicios sobre MEAN Stack
Microservicios sobre MEAN Stack
 
Hivepod: Casos de uso en OpenData
Hivepod: Casos de uso en OpenDataHivepod: Casos de uso en OpenData
Hivepod: Casos de uso en OpenData
 
Introducción a StackOverflow
Introducción a StackOverflowIntroducción a StackOverflow
Introducción a StackOverflow
 
Modeling on the Web
Modeling on the WebModeling on the Web
Modeling on the Web
 

Recently uploaded

Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveDomotica daVinci
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfDomotica daVinci
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfMarielaL5
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxBrandon Minnick, MBA
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfOTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfPaige Cruz
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEandreiandasan
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Memory Fabric Forum
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfIsidro Navarro
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxKyle Willson
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 

Recently uploaded (20)

Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-Wave
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptx
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfOTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdf
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 

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

  • 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
  • 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)
  • 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)
  • 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
  • 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
  • 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
  • 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!