Extending a Reactive Expression Language with Data Update Actions for End-User Application Authoring

HTML language extension that makes creating web applications as easy as writing HTML

Mavo


		<body>
			<h1>My tasks</h1>
			<p>0 done of 1 total</p>

			<ul>
				<li>
					<input type="checkbox" />
					<span>Do stuff</span>
				</li>
			</ul>
		</body>

like spreadsheets, but with property names instead of grid cells.


		<body mv-app="todo" mv-storage="local">
			<h1>My tasks</h1>
			<p>[count(done)] done of [count(task)] total</p>

			<ul>
				<li property="task" mv-multiple>
					<input property="done" type="checkbox" />
					<span property="taskTitle">Do stuff</span>
				</li>
			</ul>
		</body>

Try Mavo out


		<link rel="stylesheet" href="//get.mavo.io/mavo.css"/>
		<script src="//get.mavo.io/mavo.js"></script>

or just visit play.mavo.io and start coding!

manually CRUD individual items. Need more general data manipulations by programmatically invoking these actions

todomvc.com
Framework Lines of JS
React 421
Backbone 297
Angular 294
Polymer 246
Mavo 0? 🎉

Click to

Mavo Data Update Actions

<button mv-action="action1(params),
                   action2(params);
                   action3(params)
                   ...">

Data mutation functions

We kept these functions minimal, to delegate selection and filtering logic to Mavo expressions. This maximizes the amount of computation specified in a reactive fashion.

Where operator

person where age > 30 and name = "Lea"
delete(task where done)
add(orderedWord, word) delete(last(orderedWord)) delete(orderedWord)
add(item, commonItem) add(commonItem, item)
add(diceHistory, dice), set(dice, random(1, 6))
set(winner, first(winnerCount, shuffle(candidate))) delete(candidate, winner)
add(event, group(lat: mouse.y / 2 - 90, lon: mouse.x / 2 - 180))
add(cart.product, product) delete(product)

User Study Can novices use data actions?
What is the most natural syntax for them?

20 participants

12
Female
8
Male

Age μ = 36.2, σ = 9.25

11
Beginner or worse programmers
9
Intermediate

Study design

Mavo Tutorial
Baseline Questions
17 Unconstrained Elicitation Questions
What is the most natural syntax?
Prototype Tutorial
Prototype Testing
Can novices formulate data action expressions?
Practice Tasks
5 Hands-on Tasks on 2 Apps
Can novices use data actions in practice?
Question Sample answer with our syntax prototype
Delete all men delete(man)
Add new man (with no info filled in) add(man)
Delete all people delete(man, woman)
Add a new man and a new woman add(man), add(woman)
Delete current man delete(man)
Make current man 1 year older set(age, age + 1)
Make everyone 1 year older set(age, age + 1)
Set everyone’s name to their age set(name, age)
Delete women older than 30 years old delete(woman where age > 30)
Move the current woman to the collection of men move(woman, man)
Delete "Dining" as a hobby from everyone delete(hobby where hobby = "Dining")
Add a woman with the name "Mary" and age of 30 add(woman, group(name: "Mary", age: 30))
Add a woman with the name "Mary" and age of 30 before the others add(woman, group(name: "Mary", age: 30), 0)
Rename every man with age > 40 to "Chris" set(man.name where age > 40, "Chris")
Move the current woman to the beginning move(woman, 0)
Change the age of the woman named "Mary" to 50 set(woman.age where name = "Mary", 50)
Move all men to the collection of women move(man, woman)

Elicitation results

Referencing

Implicit all items

E.g. delete(woman)

Implicit current item

E.g. delete(man)

Explicit all items

E.g. delete(woman.all)

Explicit current item

E.g. delete(man.current)

Underspecified expressions

Faulty logic or clever heuristic?

18 delete(predicate)

Default to closest item if only predicate passed?

15 set(age + 1) to increment

Default to first named token if only 1 argument passed?

5 Name as implied primary key

4 Using objects as numbers

fn(Argument, Separation)

7 No commas
5 Commas only for repetition
6 Mixed
2 Exclusively commas

Separators
(used by at least two subjects)

Separator Example Subjects
Equals (=) set(name = age)
Comma (,) delete(man, woman)
Keyword to move(man to woman)
Space ( ) move(woman first)
Colon (:) add(woman: name=Mary, age=30)
Allow keyword to, special case equality operator in set()?

Sequencing function calls

8 Used multiple function calls add(man), add(woman)
12 Tried to express compound actions via arguments add(man, woman)

different symbols or removing redundant tokens

Prototype Syntax

Patterns that persisted

Pattern
Prototype
Elicitation
delete(predicate)
Unable to sequence function calls
set(age + 1)
Objects as numbers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Hands-on tasks

App Tasks Success
Dice Roller
Roll dice 8
Add previous dice to history 8
Prevent current dice from showing in history 1
Words Game
Click to add word to sentence 7
Clear button 7
Undo button 6
Shopping List
Add common item to shopping list 6
Add shopping list item to common items 5

Overall reactions

“so intuitive, I don’t even need to look at the docs!”
“very application-centered, a page that can actually do something!”
“definitely more accessible than having to program, pretty cool”

Overall reactions

“[Data actions] are very useful, easy, and approachable”
“easier and quicker to make things without worrying about technicality. Very easy to use”
“the where syntax is like natural language, I did not expect it to be there and written as if I am saying it”