Practi-O-Web Workshop at ICWE 2017

1. Towards a UML and IFML mapping to
GraphQL
Roberto Rodriguez-Echeverria, Javier L. Canovas, Jordi Cabot
ICWE 2017

2. Motivation
JSON
JSON
JSON
JSON
JSON
APIs first-class citizens on the Web
Primary means to data access

3. Motivation
Payloads got larger and larger
Performance issues (mobile-devices)
Performance issues (more hits to DBs)
Parsing
Querying
Storing
JSON
JSON
JSON
JSON
JSON

4. Motivation
JSON
JSON
JSON
GraphQL Schema (DB agnostic)
Fetching, querying & providing data
JSON
GraphQL
G
raphQ
L
Clients get what they need

5. Motivation
JSON
JSON
JSON
JSON
JSON
MDE widely used in Web Engineering
MDE
MDE
MDE
MDE
Even for REST APIs data publication
INTEGRATION
INTEGRATION
Poor integration of data backends
MDE
MDE
MDE
MDWE

6. Why not?
JSON
JSON
JSON
MDE tool: UML/IFML to GraphQL
Mapping from client-side artifacts
JSON
GraphQL
G
raphQ
L
Easy exploitation of data sources
UML
IFML
GraphQL
Schema
MDE

7. How
UML
IFML
GraphQL
Schema
M2M Transformation
Grammar
Metamodel
https://github.com/SOM-Research/graphQL-xtext-grammar
Client-side
Server-side
GraphQL
Schema
Editor
Manually

8. Example

9. Example
interface Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
}
type Human implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
starships: [Starship]
totalCredits: Int
}

10. Example
input ReviewInput {
id: ID!
stars: Int!
commentary: String
episode: Episode!
}
type Query {
casting(episode: Episode): [Character]
character(id:ID!): Character }
type Mutation {
createReview(episode: Episode,
review: ReviewInput): ReviewInput
}
schema{
query: Query
mutation: Mutation
}

11. Conclusions and Future Work
Our approach properly aligns with current MDWE approaches enabling designers
to deploy their applications into GraphQL-enabled infrastructures.
Just a first step, so next ideas:
- Providing support for other languages: OCL
- Reverse Engineering Non-MDE Web Apps to make them GraphQL-enabled
- GraphQL schema generation starting from the Web APIs
- Complex scenarios of data integration
- Integration with other technologies
- Hamza Ed-Douibi, Javier Luis Canovas Izquierdo and Jordi Cabot. A UML profile for
OData Web API. ICWE 2017, Web Data Management Session 2, Wednesday

12. A small milestone in a Project
“the goal of the project is to
make the promise of open
data a reality by giving
non-technical users tools
they can use to find and
compose the information
they need”
http://modeling-languages.com/open-data-for-all-api/

13. A small milestone in a Project
“the goal of the project is to
make the promise of open
data a reality by giving
non-technical users tools
they can use to find and
compose the information
they need”
http://modeling-languages.com/open-data-for-all-api/