This presentation discusses generating web frontends from OpenAPI API documentation. It introduces OpenAPI and the Interaction Flow Modeling Language (IFML) used to model user interactions. The transformation approach involves parsing the OpenAPI file, designing an IFML model, and generating HTML. A live demo shows an address book application generated this way. Challenges include synchronization across technologies and limitations of the input. The methodology enables automatic frontend creation but future work includes empirical evaluation and additional features.

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

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

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

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

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

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

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

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

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

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

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

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