Mavo: Web Apps Without Programming, Only With HTML/CSS

Mavo allows you to create web apps for storing and editing of data without requiring any programming skills. It's an expansion for HTML and very easy to learn.

Lea Verou Has Thought Outside the Box Once Again

Designers and developers that don't live under a rock know Lea Verou. In the past, Lea has mainly made a name for herself as an expert for CSS, and as a popular speaker.

She also caught people's attention due to her various side projects, one of which is a list of tools that allows designers to use JavaScript without having to use it. This overview called Markapp.io was not perceived exclusively positively. Hardcore JavaScript gurus felt like their domain was being threatened.

At this point in time, nobody knew that Lea Verou had been involved in a project at the MIT Computer Science Lab (MIT CSAIL) way before Markapp.io, which had the same goal of using JavaScript without having to write it.

Mavo Lets You Create Web Apps Without Programming

This week, Lea officially revealed the project called Mavo. She and the team at the MIT have been working on it for two years. The result is an impressive solution for all HTML exclusives among designers.

To gain an impression of the project's options, I recommend a visit to the demo site. Here, you'll be astonished, as Mavo does not only allow you to edit your homepage and make it editable via the frontend. Mavo allows for much more.

This way, you could quickly build your todo app, or create a solution for invoicing. Mavo also lets you calculate other things, like the development of interest, for instance. You can also create graphic applications, like a visual editor for SVG paths, or a color picker. Of course, you still need your fantasy. It's simply not held back by your limited coding skills.

Apparently, Mavo doesn't come without any effort. You still have to learn it. However, that effort is very limited, as Lea and her team have tried to make the system as legible as possible. From the very beginning, Mavo was designed to be expandable. There are a couple of plugins already, one of them letting you save data in Google Firebase. The TinyMCE is also available as a plugin.

First Steps With Mavo

Let's take a look at how Mavo's systematics work. Once you've understood that, the following steps are really easy to take.

Mavo consists of two files, one JavaScript, and a stylesheet. As we're used to from JS, these files have to be integrated into your document. Once they are embedded, the Mavo functionality is still not available. To change that, define the parameter mv-app. As a name mv-app receives a clear label that should represent your app. The existence of said attribute enables you to use the other Mavo attributes. In itself, mv-app doesn't do anything else.

In the next step, the attribute mv-storage comes into play. We use it to define where your web apps data will be stored. This could be local, but a respective URL is an option as well.

In Mavo, the elements that are saved are called property. If you assign this attribute to HTML elements, the contents of said element will be saved. The attribute property also works outside of forms, making sure that the respective elements become editable.

Now, in order to create a database from the input in the property-fields, each property has the addition mv-multiple assigned to it. This makes sure that data sets can be added. Without this, even a simple app, like a task manager, would not be possible. The attribute property can also be used to group multiple elements to form a data set.

A simple code example could look like this:

<div mv-app="commentform" mv-storage="local">
	<label>
		Email:
		<input type="email" property="email" value="[email protected]" />
	</label>
	<label>
		Message:
		<textarea property="message">
			Edit the form and notice how the values persist after you refresh!
		</textarea>
	</label>
</div>

A list could be saved like this:

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

Once you've played around with Mavo for a bit, you'll notice how simple working with the HTML expansions actually is in practice. Before anyone comments asking why they are not working with data attributes, I want to link you to Lea's answer to this exact question.

Conclusion: A Step in the Right Direction

Mavo makes the creation of potent web apps much easier and allows those that are only experienced in HTML to achieve solutions that would have required them to go to a more or less complex library otherwise. Of course, at its core, Mavo is a JavaScript solution as well. However, it keeps us as far away from the code internals as possible, creating the perfect illusion of app programming without programming.

Sources to Continue Reading:

• Introducing Mavo: Create web apps entirely by writing HTML! | Lea Verou
• Introducing Mavo: Create Web Apps Entirely By Writing HTML! | Smashing Magazine
• A new, approachable way to create Web applications | mavo.io

Photo by Alan Rodriguez on Unsplash