The slides of our EclipseCon Europe 2014 talk on the qb project for developing asynchronous RESTful APIs with the Play framework as well as client-side forms with Angular JS. See https://www.eclipsecon.org/europe2014/session/what-every-eclipse-developer-should-know-about-emf Many web applications use form-based UIs for entering and modifying data. The development of these forms involves creating the layout of the corresponding page for the widgets (HTML and CSS), retrieving data from the server (e.g., RESTful API and JSON), binding the form’s widgets to the data (e.g., JSON and AngularJS) and pushing the results back to the server (e.g., RESTful API and JSON). All of these parts typically require manual effort. In this talk, we present an alternative approach to manual UI development for web applications. The data to be entered, as well as the desired form-based UI, are defined declaratively (e.g., in a DSL). The data model and the view model are interpreted at runtime to create a form with databinding, a RESTful API to send and retrieve the data and a database backend to store the data. The implementation is open source and available under the Apache License. It is based on HTML5, AngularJS and the Play framework. During this presentation we will explain the general design principles of such an approach, which is transferable to other technology stacks, and discuss the advantages and caveats based on our experience in actual projects.

1. Efficiently developing web forms
EclipseCon Europe 2014, 2014-10-30, Ludwigsburg
Edgar Mueller and Philip Langer
{emueller|planger}@eclipsesource.com
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

2. Reactive systems
Modern web applications often have to be reactive
Taken from “The Reactive Manifesto”
http://www.reactivemanifesto.org/
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

3. Web
Server DB
These times are over
(at least for many web application providers)
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms
… 1-100 users
… Session data
The good old past
… Application

4. Web
Server
Web
Server
Web
Server
Load
Balancer DB
Web
Server
Web
Server
This is how many web applications are built today
(excerpt ;))
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms
Web
Server
DB
DB
The present

5. Web
Server
Web
Server
Web
Server
Load
Balancer DB
Web
Server
Reactive web applications
asynchronous stateless servers
asynchronous stateful clients
Web
Server
asynchronous communication among them
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms
Web
Server
DB
DB
The present

6. Web
Server DB
Great technologies
JSON JSON/SQL
JSON
Web
Server
REST API
REST
API
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

7. Still, there are several challenges
Lots of work and “conceptual redundancy”
Model Model
Web
Server DB
Web
Server
Model
Controller
View
Model
Model
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

8. The challenges
Composition and transformation chains of models
Model Model
Web
Server DB
Web
Server
Model
Controller
View
Model
Model
Model Model Model Model Model
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

9. The challenges
Each transformed/composed model needs to be valid/ated
Model Model
Web
Server DB
Web
Server
Model
Controller
View
Model
Model
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

10. The challenges
Client-side forms need to be bound to models on the server
Model Model
Web
Server DB
Web
Server
Model
Controller
View
Model
Model
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

11. qb project
● Ease the development of JSON-based web APIs & web forms
○ qbSchema defining models +transformation +validation
○ qbPlay integrating with Play +asynchronous +reactive
○ qbForms generating AngularJS forms +asynchronous +reactive
http://qb-project.org
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

12. qbSchema & qbPlay
val schema = qbClass(
"id" -> objectId,
"name" -> qbNonEmptyText,
"status" -> qbEnum("ACTIVE", "PASSIVE"),
"email" -> qbEmail)
Scala-based
Schema DSL
val schemaPlusDate = schema +
("creationDate" -> qbDateTime) -
"id" + otherSchema
Composition and
transformation
1
2
3 Play integration
REST API RESTful async
CRUD operations
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

13. Demo
val schema = qbClass(
"id" -> objectId,
"name" -> qbNonEmptyText,
"status" -> qbEnum("ACTIVE", "PASSIVE"),
"email" -> qbEmail)
val schemaPlusDate = schema +
("creationDate" -> qbDateTime) -
"id" + otherSchema
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

14. qbSchema & qbPlay & qbForms
val schema = qbClass(
"id" -> objectId,
"name" -> qbNonEmptyText,
"status" -> qbEnum("ACTIVE", "PASSIVE"),
"email" -> qbEmail)
val schemaPlusDate = schema +
("creationDate" -> qbDateTime) -
"id" + otherSchema
val userView = QBViewModel(schema,
QBViewControl("name", QBViewPath("name")),
QBViewControl("status", QBViewPath("status")),
QBViewControl("email", QBViewPath("email")))
CRUD Operations
REST API
Schema
View models
1
2
3
4 Play integration
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

15. qbSchema & qbPlay & qbForms & EMF model2web
val schema = qbClass(
"id" -> objectId,
"name" -> qbNonEmptyText,
"status" -> qbEnum("ACTIVE", "PASSIVE"),
"email" -> qbEmail)
val schemaPlusDate = schema +
("creationDate" -> qbDateTime) -
"id" + otherSchema
val userView = QBViewModel(schema,
QBViewControl("name", QBViewPath("name")),
QBViewControl("status", QBViewPath("status")),
QBViewControl("email", QBViewPath("email")))
CRUD Operations
REST API
Schema
View models
1
2
3
4 Play integration
1
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

16. qbSchema & qbPlay & qbForms & EMF model2web
val schema = qbClass(
"id" -> objectId,
"name" -> qbNonEmptyText,
"status" -> qbEnum("ACTIVE", "PASSIVE"),
"email" -> qbEmail)
val schemaPlusDate = schema +
("creationDate" -> qbDateTime) -
"id" + otherSchema
val userView = QBViewModel(schema,
QBViewControl("name", QBViewPath("name")),
QBViewControl("status", QBViewPath("status")),
QBViewControl("email", QBViewPath("email")))
CRUD Operations
REST API
Schema
View models
1
2
3
4 Play integration
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms
3

17. Demo 2
val userView = QBViewModel(schema,
QBViewControl("name", QBViewPath("name")),
QBViewControl("status", QBViewPath("status")),
QBViewControl("email", QBViewPath("email")))
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

18. Thanks a lot and please leave feedback
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms

19. http://qb-project.org
Edgar Mueller
emueller@eclipsesource.com
Maximilian Koegel
mkoegel@eclipsesource.com
Philip Langer
planger@eclipsesource.com
© 2014 EclipseSource | http://eclipsesource.com/munich | Dr. Philip Langer | Efficiently developing web forms