Lecture on WebDSL for course on model-driven software development at Delft University of Technology

1. WebDSL
a domain-specific language for web programming
Lecture 3
Course IN4308
Eelco Visser
http://eelcovisser.org
Master Computer Science
Delft University of Technology

2. Model-Driven Software Development
Problem
DSL HLL Machine
Domain
domain-specific models reduce gap between
problem domain and implementation

3. Language/Model Composition
code model model
code code code
modeling aspects of software system with different languages
customization/extensibility of models

4. Research: Software Language Engineering
Automatically derive efficient,
scalable, incremental compiler +
usable IDE from high-level,
declarativelanguage
definition

5. Research: Software Language Design
Systematically design domain-
specific software
languages with optimal
tradeoff between expressivity,
completeness, portability, coverage, and
maintainability

6. A Case Study in Domain-
Specific Language Engineering
Eelco Visser. WebDSL: A Case Study in Domain-
Specific Language Engineering. GTTSE 2008: 291-373

7. The Web Domain
browser server database
web app
code runs on server, browser, and database

8. Concerns in Web Programming
❖ Persistent data
★ data integrity
★ search
❖ User interface
★ data validation
★ styling, layout
★ navigation
★ actions
❖ Workflow
and m ore ...
❖ Access control

9. Separation of Concerns in Web Programming
Example
❖ Data modeling
★ Java classes with JPA annotations
❖ User interface
★ Java ServerFaces XML templates
★ Seam Java classes
❖ Access control
★ Acegi configuration/annotation

10. Problems in Web Programming
❖ Lack of integration
★ no inter-language consistency checking
★ leads to late (detection of) failures
❖ Low-level encoding
★ leads to boilerplate code

11. When Seam Fails
Welcome #{user.name} Welcome #{user.nam}

12. When Rails Fails
@post = Post.new(params[:get])
@post = Post.new(params[:post])

13. Late Failures in Web Applications
Zef Hemel, Danny M. Groenewegen, Lennart C. L. Kats, Eelco Visser.
Static consistency checking of web applications with WebDSL. Journal of
Symbolic Computation, 46(2):150-182, 2011.

14. WebDSL
Separation of Concerns
& Linguistic Integration
Danny M. Groenewegen, Zef Hemel, Eelco Visser. Separation of Concerns and
Linguistic Integration in WebDSL. IEEE Software, 27(5), September/October 2010.

15. WebDSL
Linguistic integration of
❖ Data models
❖ User interface templates
❖ Access control
❖ Data validation

16. webdsl.org
<screenshot webdsl.org>

17. YellowGrass
<screenshot yellowgrass>

18. researchr

19. 1,190,303
publications
http://researchr.org

20. publication
records
correct & extend

21. author
profiles

22. bibliographies
tagging
reputation system
access control rules
user groups
conference calendar
community engineering
etc.

23. 18,000 lines of WebDSL code
138 (generated) tables in mysql

24. Data Models

25. Entity Declarations
entity declaration
property

26. Data Model for Wiki
object identifier
domain-specific type

27. Automatic Persistence
Data Entity DB
Model Classes Schema
WebDSL Java DB
Object Object Records

28. Embedded Queries
entity Page {
name :: String (id)
content :: WikiText
modified :: DateTime
}
function recentlyChanged(n : Int) : List<Page> {
return from Page order by modified desc limit n;
}

29. Extending Built-in Types
type DateTime { // includes Date and Time types
utils.DateType.format as format(String):String
before(DateTime):Bool
after(DateTime):Bool
getTime():Long
setTime(Long)
}
type WikiText{
org.webdsl.tools.WikiFormatter.wikiFormat as format():String
}
type Email {
utils.EmailType.isValid as isValid():Bool
}
public class DateType {
public static String format(Date d, String s){
return (new java.text.SimpleDateFormat(s).format(d,new StringBuffer(),
new java.text.FieldPosition(0))).toString();
}
}

30. Importing External Types
native class org.json.JSONObject as JSONObject {
constructor()
constructor(String)
get(String) : Object
getBoolean(String) : Bool
getDouble(String) : Double
getInt(String) : Int
getJSONArray(String) : JSONArray
getJSONObject(String) : JSONObject
getString(String) : String
has(String) : Bool
names() : JSONArray
put(String, Object)
toString() : String
toString(Int) : String
}

31. User Interface Templates

32. Page Definition & Navigation
page navigation (page call)
entity A { b -> B }
entity B { name :: String }
define page a(x : A) {
navigate b(x.b){ output(x.b.name) }
}
define page b(y : B) {
output(y.name)
}
page definiti
on

33. Rendering Data
rendering values
define page page(p : Page) {
header{output(p.name)}
markup par{ output(p.content) }
navigate editpage(p) { "[edit]" }
}

34. Templates (Page Fragments)
template definition
define main() {
includeCSS("wiki.css")
top()
block[class="content"] {
elements()
template call }
parameter
}
define span top() {
navigate root() {"Wiki"}
}

35. wiki.css
define span top() {
navigate root() {"Wiki"}
}
wiki.css

36. Forms
define page editpage(p : Page) {
main{
header{output(p.name) " (Edit)"} data
form{ binding
input(p.content)
submit action{ return page(p); } { "Save" }
}
}
} submi t page
flow
no separate controller: page renders form and handles form submission

37. Forms
navigate
action

38. Non-Existing Wiki Pages
navigate
action

39. Creating Objects
find/create object by id
define page page(name : String) {
var p := getUniquePage(name)
main{
header{output(p.name)}
par{ output(p.content) }
navigate editpage(p) { "[edit]" }
}
}

40. Modifying Data
define page editpage(p : Page) {
main{
header{output(p.name) " (Edit)"}
form{
input(p.content)
submit action{return page(p.name);}{"Save"}
}
}
}
pass string

41. Core Wiki
navigate creates page
action

42. Page Index
define page root() {
main{
list{
for(p : Page order by p.name asc) {
listitem{
navigate page(p.name){output(p.name)}
}
}
}
}
}

43. Output Object = Navigation
define output(p : Page) {
navigate page(p.name) { output(p.name) }
}
define page root() {
main{
list{
for(p : Page order by p.name asc) {
listitem{ output(p) }
}
}
}
}

44. Output Object = Navigation
define output(p : Page) {
navigate page(p.name) { output(p.name) }
}
define output(p : Page) {
define page navigate page(p) { output(p.name) }
root() {
main{ }
list{
for(p : Page order by p.name asc) {
listitem{ output(p) }
}
custom definition
} default definition
}
}

45. Wrapping XML Templates
define menubar(){
var elementid := "menu"+getUniqueTemplateId()
includeCSS("dropdownmenu.css")
<div class="menuwrapper" id=elementid all attributes>
<ul id="p7menubar" class="menubar">
elements()
</ul> define appmenu() {
</div>
} menubar{
define menu(){ menu{
<li class="menu" all attributes>
elements() menuheader{ "Foo" }
</li> menuitems{
}
define menuheader(){ menuitem{ "Bar" }
<span class="menuheader" all attributes> menuitem{ "Baz" }
elements()
</span> }
} }
define menuitems(){
<ul class="menuitems"> }
elements() }
</ul>
}
define menuitem(){
<li class="menuitem" all attributes>
elements()
</li>
}

46. AJAX AJAX
Michel Weststrate. Abstractions for Asynchronous User Interfaces in
Web Applications. Master's thesis, Delft University of Technology, 2009.

47. AJAX
Deliver page fragments, not just full pages
❖ Replace page elements by new fragments
❖ Templates are unit of replacement

48. Placeholders
placeholder
define page page(name : String) {
var p : Page
init{ p := findPage(name); }
main{
placeholder pageBody {
if(p == null) { pagenotfound(name) } else { showpage(p) }
}
}
}
default view

49. Replace
define ajax showpage(p : Page) {
header{output(p.name)}
block[class:=content]{ output(p.content) }
block[class:=modified]{ replace
"Last modified on " output(p.modified) " "
submitlink action{
replace(pageBody, editpage(p));
} { "[Edit]" }
}
block[class:=contributions]{
"Contributions by " output(p.authors)
}
} define ajax editpage(p : Page) {
action save() { replace(pageBody, showpage(p)); }
header{output(p.name) " (Edit)"}
form{
par{ label("Text"){ input(p.content) } }
submit save() { "Save" }
}
}

50. Inline Edit Text (Call by Ref)
define page page(p : Page) {
main{
editableText(p.content) }
define ajax editableText(text : Ref<WikiText>) {
placeholder showText { showWikiText(text) }
}
} }
define ajax showWikiText(text : Ref<WikiText>) {
editLink(text)
output(text)
}
define span editLink(text: Ref<WikiText>) {
action edit(){ replace(showText, editWikiText(text)); }
submitlink edit() { "[edit]" }
}
define ajax editWikiText(text : Ref<WikiText>) {
form{
input(text)
submit action{ replace(showText, showWikiText(text)); }{ "Save" }
}
submit action{ replace(showText, showWikiText(text)); }{ "Cancel" }
}

51. Email
AJAX

52. Email Templates
entity Registration {
username :: String
fullname :: String (name)
email :: Email
message :: WikiText
password :: Secret
status :: String
created :: DateTime
function register() {
email confirmEmail(reg);
}
}
define email confirmEmail(reg : Registration) {
to(reg.email)
subject("Verify your registration")
par{ "Dear " output(reg.fullname) ", "}
par{ "We have received a registration request for you" }
par{ "To confirm the request follow this link: "}
navigate registration(reg) {"confirm"}
}

53. Search
Search

54. Search
search annotations
search queries

55. Data Validation
Data Validation
Danny M. Groenewegen, Eelco Visser. Integration of Data Validation and User Interface
Concerns in a DSL for Web Applications. Software and Systems Modeling, 2011.

56. Data Validation
Check input & maintain data integrity
Types of validation
❖ Data invariants
❖ Input assertions
❖ Action assertions (see paper)
❖ Value well-formedness (see paper)
User interface integration
❖ Display errors

57. Validation Rules
data validation
form validation
action assertions messages

58. Data Invariants

59. Data Invariants

60. Input Assertions

61. Customizing Error Messages
define errorTemplateAction(messages : List<String>){
elements()
block[class="validationErrors"] {
for(ve: String in messages){
output(ve)
}
}
}

62. Data Validation Lifecycle

63. Access Control
Danny M. Groenewegen, Eelco Visser. Declarative Access Control for WebDSL:
Combining Language Integration and Separation of Concerns. ICWE 2008: 175-188

64. Principal
representation of principal
turn on access control

65. securityContext
representation of principal
turn on access control

66. Authentication

67. Authentication

68. Authentication

69. Registration

70. Access Control Rules
Access Control Rules

71. Access Control Rules
Constraints over data model
❖ boolean expression over properties of objects
Rules restrict access to resources
❖ page, template, action
Infer restriction of navigation
❖ don’t show link to inaccessible page or forbidden
action

72. Access Control Rules
‘may access page f with
argument x if boolean
expression e is true’

73. Wiki Access Control Rules
‘anyone can view
existing pages, only
logged in users can
create pages’
‘only logged in users may edit pages’

74. Wiki Access Control Rules

75. Wiki Access Control Rules

76. Wiki Access Control Rules

77. Wiki Access Control Rules

78. Access Control Policies
Access Control Policies

79. Access Control Policies
Standard Policies
❖ Mandatory access control (see paper)
❖ Discretionary access control
❖ Role-based access control
Mixing policies
❖ Role-based + discretionary access control
WebDSL
❖ No restrictions on access control policies

80. Encoding Access Control Policies
Rules
❖ Who may access which resources?
❖ Who can apply which actions?
Representation
❖ How are permissions stored?
Administration
❖ How can permissions be changed?
❖ Who can change permissions?

81. Wiki: Data Model

82. Wiki: User Interface Templates
(abbreviated to navigation structure)

83. Wiki: Generic Access Control Rules

84. Mandatory Access Control
Security Labels
❖ Classification label protects object
★ Top Secret, Secret, Confidential, Unclassified
❖ Clearance indicates access of subject
Confidentiality rules
❖ Read-down: clearance should be higher than or
equal to classification document to read
❖ Write-up: clearance is lower than or equal to
classification of document to write

85. MAC: representation

86. MAC: predicates

87. Discretionary Access Control
Access control lists
❖ objects have owner
❖ owner grants, revokes users access to object
Example: Unix file permissions
❖ read, write, execute permissions for
❖ owner, group, anyone

88. DAC: representation

89. DAC: predicates

90. DAC: administration

91. Role-Based Access Control
Role: group of activities
❖ authorization assigned to roles
❖ users assigned to roles
❖ robust to organizational changes
Hierarchical roles
❖ least privilege: use minimal permissions for task
Separation of duties
❖ critical actions require coordination

92. RBAC: representation

93. RBAC: predicates

94. RBAC: administration

95. Mixing Access Control Policies
Real policies
❖ Mix of DAC & RBAC
❖ AC rules are constraints over object graph
WebDSL
❖ No policies built-in

96. AccessSummary Rules
Control

97. Linguistic Integration
❖ Data models
★ automatic persistence
❖ User interface templates
★ parameterized definition of page fragments
★ request and response handling
❖ Data validation
★ form validation & data integrity
❖ Access control rules and policies
★ through constraints over objects

98. Customization and Extension
Built-in
❖ Search (Lucene)
❖ Email
❖ Call-by-ref templates
Extension points
❖ Embedded XML, JavaScript, HQL
❖ Importing ‘native’ classes
❖ Extending built-in types

99. The Future of Quarter 3
❖ Lecture 4 (10/2 Thursday!)
★ Zef Hemel: mobl
❖ Lecture 5 (15/2)
★ Markus Voelter: DSLs in Industry
❖ Lecture Extra (22/2)
★ Sebastian Erdeweg: Sugar Libraries
❖ Lecture 6 (1/3)
★ Sander Vermolen: Coupled Data Evolution
❖ Lecture 7 (8/3)
★ Andre Boonzaaijer: Domain-Driven Design

100. Workflow Workflow
Zef Hemel, Ruben Verhaaf, Eelco Visser. WebWorkFlow: An Object-Oriented
Workflow Modeling Language for Web Applications. MoDELS 2008: 113-127
Note: WebWorkFlow is not supported by current version of WebDSL

101. Workflow
Coordinating activities by participants
WebWorkFlow
- object-oriented workflow definition
- integrate all aspects of workflow
★ data
★ user interface
★ access control
★ control-flow
- abstractions on top of base WebDSL

102. WebWorkFlow by Example: Progress Meeting

104. workflow procedure
workflow object
procedure call
process definition

105. parallel
enable next step
iterate

106. access control
access control

109. action

110. no user interface

111. condition

112. Workflow Remarks
Recursive workflows (see paper)
Issue: user interface patterns for workflow
Is workflow an anti-pattern?
❖ is workflow good interaction design?
❖ determine order of user actions
❖ what are alternatives?