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

“Our default workflow has been complicated
by the needs of large web applications”

— Mikeal Rogers https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210

Creating on the Web

Vanilla JS
JS Frameworks
???
Prefab
Services

Takeaway When you make something accessible to
novices, it becomes easier for everybody.

Mavo Building Blocks

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!

Activate Mavo


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

Persistence


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

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

mv-autosave

How multiple element types get edited , mv-multiple, hobbies collection

strength / 100, add <p>, font-size: [strength]px;

$now * 6 / 1000 mod 360

refresh, count(cat), count(age > 6), count(age), average(age)

User Study Does Mavo make web programming
accessible to novices?

20 participants

13
Female
6
Male
1
Other

Age μ = 35.9, σ = 10.2

13
Beginner or worse programmers
7
Intermediate

Study design

Mavo Tutorial
Structured study
What is Mavo’s Usability & Learnability?
Freestyle study
Are Mavo’s capabilities sufficent?


Structured study

Foodie log 12 tasks

Pros & Cons 10 tasks

CRUD

property mv-multiple

Basic expressions

[foo] [count(foo)] [average(foo)]

Complex expressions

Average of averages 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

What was hard

Concatenation

HTML fragment (goal) Success
</meter> [rating] 100%
title="Overall rating: [rating]" 100%
</meter> [weight] 100%
style="background: url([pic])" 77.8%
class="weight-[weight]" 75%
class="answer-[answer]" 75%

Success

74.6% on complex expressions

What was hard

Conditionals
if(score > 0, Yes, No)

Especially nested
if(score > 0, Yes, if(score < 0, No, Maybe))

Just seeing those if statements...I did a little bit of Java and I remember those always screwed me over in that class. No surprise that that also tripped me up here.

Post study work Markup-based conditionals


			<div mv-if="score > 0">Yes</div>
			<div mv-if="score = 0">Maybe</div>
			<div mv-if="score < 0">No</div>
		
-->

Success

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

Difficulty ratings

Application Before Mavo After Mavo Difference
Decisions 2.875 1.375 ⬇︎1.5
Foodie log 3.667 1.223 ⬇︎2.445
100% on CRUD tasks
92.8% on basic expressions
74.6% on complex expressions
2⬇︎ in perceived difficulty
on 5-point 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 right now

<-- Our vision

Data Interactions

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

Get involved

Note Mavo is just one answer,
not necessarily the best
What’s important is the question!