What Data Science Could Learn From Mavo

Yesterday, Lea Verou, author of the fabulous book CSS Secrets, announced the launch of Mavo.

Mavo helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.

Although Mavo is a tool for creating websites and web apps, I think it’s also got a lot to teach data science.

Just as there are a bunch of data science tools that let you quickly take care of business via an easy to use UI, there are hundreds of drag and drop tools for easily designing websites & web apps. And just like easy to use data science tools, these web building tools are “easy to use” right up until you want make something that’s even a little different from what the tool’s creators originally envisioned. As a Mavo research paper puts it,

research indicates that there are high levels of dissatisfaction with [Content Management Systems (CMSs) for building websites]. One reason is that CMSs impose narrow constraints on authors in terms of possible presentation – far narrower than when editing a standalone HTML and CSS document.

What happens when you need to move beyond these narrow constraints? The same thing that happens with data science: a heck of a lot of blood, sweat, and tears.

It is indicative that even implementing a simple to-do application similar to the one in Figure 1 needs 294 lines of JavaScript (not including comments) with AngularJS, 246 with Polymer, 297 with Backbone.js, and 421 with React. Other JavaScript frameworks are in the same ballpark.


Mavo overcomes this problem by extending HMTL so you can do an awful lot with just a few lines of simple code. For example, Mavo has a wonderful system for letting you store data in the browser, in GitHub, or on Dropbox just by adding a little HTML, and you can easily edit that data with an auto-generated, customizable UI.

Similarly, you can create a slider, store its value in a variable, and display the result with just two simple lines of HTML:

Slider value: [strength]/100

Want to display the slider value as a percentage? It’s easy to add a calculation:

Slider value: [strength/100]

At the same time, because it’s built in HTML, you’ve got a lot of control over how it looks; just change the HTML and CSS and you’re good to go.

What’s particularly nice about Mavo is that if you outstrip what’s built into it, you can switch to full blown Javascript.

MavoScript is based on a subset of JavaScript, with a few simplifications to make it easy to use even by people with no JavaScript knowledge. If a Mavo expression is more advanced than MavoScript, it is automatically parsed as JavaScript, allowing experienced web developers to do more with Mavo expressions.

Similarly, Mavo was “designed for extensibility from the ground up,” allowing you to add plug-ins to extend what users can do using HTML.

OK, you say, but still, you’re working in HTML. That’s going to turn off a lot of folks, right?

Mavo says no — and they have peer-reviewed research to back up that claim. They did a usability study with 20 users, and they discovered that

Even users with no programming experience were able to quickly craft Mavo applications.

It’s worth pausing for a moment to acknowledge what the Mavo crew did. Rather than just assuming that because they and the people who decided to check out their work like Mavo, it’s easy for beginners, they ran a study to find out. Considering that research has demonstrated that most programming languages are no easier for beginners to understand than a coding language that was randomly generated, that’s a really big step.

Obviously, if all you ever want to do is build really simple websites, a drag and drop tool is going to be hard to beat. But what Mavo has shown is that it’s possible to create a tool that gives ordinary users an awful lot of room to grow without getting clobbered by a very steep learning curve.  Pandas, R, D3, and the rest of data science could learn a lot from this accomplishment.

For more info on Mavo, which is currently in beta, check out https://mavo.io/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.