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.
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.
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 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@example.com" /> </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
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