CRUD Lightweight computation

todomvc.com
Framework SLOC
Angular 294
Polymer 246
React 421
Backbone 297

Creating on the Web

Vanilla JS
JS Frameworks
???
Prefab
Services

Research question Can non-programmers
create data interactions?


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

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

			<body 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>

Mavo Tutorial

Try Mavo out


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

or just visit play.mavo.io!

Activate Mavo


			<div mv-app="appName">
				<!-- Mavo app -->
			</div>

Mavo Building Blocks

Persistence


			<div mv-app mv-storage="local">
				<!-- Mavo app -->
			</div>
		

			<div mv-app mv-storage="http://github.com/leaverou">
				<!-- Mavo app -->
			</div>
		

			<div mv-app mv-storage="local" mv-autosave>
				<input property="name" value="Lea Verou"/>
				<input property="strength" type="range" />
				<select property="country">
					<option value="us">United States</option>
					<option value="gb">United Kingdom</option>
					<option value="jp">Japan</option>
				</select>
			</div>
Stored data

		

	


	

		

			<div mv-app class="cat" mv-storage="local">
				<img src="img/adamcatlace.png" property="photo">
				<h1 property="name">Adam Catlace</h1>
				<time property="birthday" datetime="2014-06-01">1 Jun 2014</time>
				Cuteness: <meter property="rating" value="3" max="5"></meter>
			</div>
		

		

			Stored data

		

	



	

		

			Hobbies:
			<ul>
				<li property="hobby" mv-multiple>Eating</li>
			</ul>
		

		

			Stored data

		

	


	

		

			<article property="cat" mv-multiple>
				<img src="img/adamcatlace.png" property="photo">
				<h1 property="name">Adam Catlace</h1>
				<span property="age">2</span>
				<p>Hobbies: <span property="hobby" mv-multiple>Eating</span>
			</article>
		

		

			Stored data

		

	


	

	

	

	


	

		

			<input type="range" property="strength"
			       title="Value: [strength] out of 100" />
			Value: [strength / 100]
		

	


	

		

			<div style="background-color: [color];">
				<input type="range" property="hue" max="360" />
				<input type="range" property="saturation" />
				<input type="range" property="lightness" />
				<code property="color">
					hsl([hue], [saturation]%, [lightness]%)
				</code>
			</div>
		

	


	

	

	

	


	

		
		

			<article property="cat"
			         mv-multiple>
				<img property="photo">
				<h1 property="name"></h1>
				<span property="age"></span>
			</article>

			
<h1>📊 Stats</h1>
			<p>[count(cat)] cats
			    ([count(age > 6)] old)
			<p>[count(age)] ages: [age]
			<p>Average age: [average(age)]

		

	


	

	

	











	

		
Evaluation

	


	

	

		
20 participants

		
			
				
				
				
			
		
		

		

			
13
 Female
			
6
 Male
			
1
 Other
		


		

			Age μ = 35.9, σ = 10.2
		


		

			
13
 Beginner or worse programmers
			
7
 Intermediate
		

	


	

		

			
			

			Structured study
		

		

			
		

	


	

		

			
Foodie log 12 tasks

		

		

			
Pros & Cons 10 tasks

		

		
		

			
CRUD
				
property
				mv-multiple
			
 → 

				Basic expressions
				
[foo]
				[count(foo)]
				[average(foo)]
			
 → 

				Complex expressions
				
Multi-block-aggregate
				count(foo > 5)
				if(foo < 5, yes, no)

			

		

	


	

	


	

		
“How long do you think it will take you?”


		
	


	

		
Results

	


	

		
Success

		100% on CRUD tasks
	


	

		
Success

		92.8% on basic expressions
	


	

	

		
Success

		74.6% on complex expressions
	


	

	

	

		
Success

		2⬇︎ in perceived difficulty 
on 5-point Likert scale
	


	

	

	

		

			

			Freestyle study
		

		

			
		

	


	

		
	


	

		
Success

		100% were able to convert
 their own HTML 
 to fully functional apps
	


	

		
Some even made apps for their own needs after the study!

		
	


	

		
Simplicity

		
It's very simple.  It's as logical as HTML.  You are eliminating a huge step in coding.

		
It's simpler than I expected.  My anxiety expects it to be hard, then I just say write what you think, and it turns out to be right. It’s very intuitive.

		
It’s so expressive, it tells you exactly what it’s doing!

	


	

		
Learnability

		
It didn't seem like a lot of new things had to be learned. Naming properties was just the same as giving classes and ids.

		
It seems much more straightforward, everything is right there. It's almost too easy!

	


	

		
Utility

		
Being able to do that... right in the HTML and not have to fool with a whole other JS file... That is fantastic.  I can't say how awesome that is.  I want this thing now.

		
When is this going to be available? This is terrific. This is exactly the stuff I have a hard time with.

		
I'm convinced it's magic to write templating logic and have it show up and be editable.

	


	

		
	





	

		
Mavo Actions

	


	

		
	


	

	




	

	

		
<-- Mavo right now

		
<-- Our vision

	


	

		
Granular access control

		

			
			
Bacon ipsum dolor amet leberkas turducken ball tip strip steak. Venison burgdoggen leberkas doner beef ground round andouille turkey ham hock bresaola pork kevin biltong fatback. 

			
Reply

		

		

			
			
Biltong tri-tip corned beef spare ribs tail capicola cow ground round kevin ham hock shoulder chuck jowl shank.

			
Reply
			Edit
			Delete

		

		

			
			
Meatball ham hock andouille capicola, kielbasa ham doner shankle. Hamburger bacon frankfurter, leberkas pancetta brisket shoulder pork chop venison.

			
Reply

		

	


	

		
Realtime apps

		
	


	

		
Data Exploration

			
		
	


	

		
Pivoting

		
	


	

	

		
Beyond the browser


		
	


	

		
GUIs