Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
1 This slide deck is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
The Exploitation of OpenAPI
Documents for the Generation of
Web Frontends
István Koren, Ralf Klamma
Advanced Community Information Systems (ACIS)
RWTH Aachen University, Germany
koren@dbis.rwth-aachen.de
The Web Conference, Developers‘ Track
April 26, 2018
Lyon, France

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
2
Agenda
 Motivation
 OpenAPI & Interaction Flow Modeling Language
 Transformation Approach
 Tool Presentation
 Conclusion

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
3
Motivation
 APIs are ubiquitous in Web service and IoT worlds
 Componentization leads to even more of them
 ProgrammableWeb lists around 20,000 APIs;
apis.guru indexes around 550 public OpenAPIs
 But: How they work and what they do is hard to
understand.
 Our goal is to automate the time-consuming process
from Web API to frontend.

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
4
OpenAPI
 OpenAPI (fka Swagger) is a specification for RESTful
Web service documentation.
 Governed by the OpenAPI Initiative
 Human and machine readable
 Use cases
– code generation
– test case automation
– interactive documentation

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
5
openapi: 3.0.0
servers:
-description:Development Server
url:http://127.0.0.1:3000
info:
version: 1.0.0
title:AddressBookService
description:The API ofthe AddressBookService.
tags:
-name: contact
description:Everything about contacts.
paths:
"/contacts":
get:
tags:
-contact
description:Returnsallcontacts.
operationId: getContacts
responses:
'200':
description:Allthe contacts.
content:
application/json:
schema:
type: array
items:
"$ref": "#/components/schemas/Contact"
"/contacts/{contactId}":
get:
tags:
-contact
description:Returnsa particularcontact.
operationId: getContactById
parameters:
-in: path
name: contactId
description:ID ofa contact.
required:true
schema:
type: integer
format:int64
responses:
'200':
description:A specificcategory.
content:
application/json:
schema:
"$ref": "#/components/schemas/Contact"
delete:
tags:
-contact
description:Deletesa contact.
operationId: deleteContactById
parameters:
-in: path
name: contactId
description:ID ofa contact.
required:true
schema:
type: integer
format:int64
responses:
'200':
description:Contactdeleted.
'404':
description:Contactnot found.
components:
schemas:
Contact:
type: object
properties:
id:
type: integer
format:int64
name:
type: string
lastname:
type: string
email:
type: string

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
6
Interaction Flow Modeling Language
 The Interaction Flow Modeling Language (IFML) is a
visual domain-specific modeling language for the
design of abstract user interactions and data flows.
 Standardized by Object Management Group
 Platform-independent
 Mappings to WPF and HTML available

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
7
Address Book IFML Model

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
8
Transformation Approach
Step 1:
Parsing OpenAPI
Step 2:
Designing Model
Step 3:
Generating HTML

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
9
Live Demo

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
10
Challenges
 Synchronization between HTML, JavaScript & SVG
 Web Component (Polymer!) versions and updates
 Usability issues like information overload
 Limitations
– OpenAPI correctness
– Nested JSON schemas are not supported (no longer…)
– Interaction patterns like pagination are missing

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
11
Conclusion
 APIs are ubiquitous, OpenAPI increasingly used
 Our methodology enables generating Web frontends
out of OpenAPI interface descriptions with an
intermediary model-based representation.
 Web components are a powerful foundation!
 Future work
– empirical evaluation with OpenAPIs “in the wild”
– user management and awareness
– component store
– explore use cases in IoT & AR/VR

Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
12
fin
 Thank you for your attention!
 Do you have any questions?
koren@dbis.rwth-aachen.de
@istinhere
Ideas? Please contribute them on https://requirements-
bazaar.org/projects/303/categories/439