Mavo: Web-Apps ohne Programmierung, nur mit HTML/CSS

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Mit Mavo kannst du Web-Apps erstellen, die Daten speichern und verarbeiten, ohne dass du dazu programmieren können müsstest. Mavo ist eine Erweiterung zu HTML und sehr einfach zu erlernen.

Lea Verou hat wieder um die Ecke gedacht

Designer und Developer, die nicht unter einem Stein leben, kennen Lea Verou. Lea hat sich in der Vergangenheit hauptsächlich als Expertin für CSS profiliert und ist eine gefragte Rednerin.

Auffällig geworden ist sie ebenfalls durch ihre diversen Side-Projects, von denen eines eine Auflistung von Tools ist, die es Designern erlauben, JavaScript zu verwenden, ohne es verwenden zu müssen. Für diese Übersicht namens Markapp.io gab es nicht nur Lob. Hardcore-JavaScript-Gurus sahen womöglich ihre Domäne in Gefahr.

Was zu diesem Zeitpunkt keiner wusste, war, dass Lea Verou schon lange vor Markapp.io in ein Projekt am MIT Computer Science Lab (MIT CSAIL) eingebunden war, das letztlich selbst genau das leisten sollte, nämlich das Verwenden von JavaScript ohne JavaScript schreiben zu müssen.

Mit Mavo erstellst du Web-Apps, ohne zu programmieren

In dieser Woche stellte Lea das Projekt namens Mavo offiziell vor. Zwei Jahre arbeiteten sie und ihr Team am MIT daran. Herausgekommen ist eine beeindruckende Lösung für all die HTMLer unter den Designern.

Um einen Eindruck von den Möglichkeiten des Projekts zu bekommen, empfiehlt sich ein Besuch der Demos-Seite. Hier wirst du ins Staunen geraten, denn mit Mavo kannst du nicht bloß deine Homepage über das Frontend editierbar machen und editieren. Mavo erlaubt viel mehr.

Du könntest etwa auf einfache Weise deine eigene Todo-App bauen oder eine Lösung zur Rechnungsschreibung erstellen. Mit Mavo kannst du auch andere Dinge kalkulieren, etwa Zinsverläufe. Mit Mavo lassen sich aber ebenso grafische Anwendungen erstellen, so etwa ein visueller Editor für SVG-Pfade oder ein Color-Picker. Deine Fantasie benötigst du natürlich nach wie vor. Sie wird bloß nicht mehr durch deine begrenzten Coding-Skills limitiert.

Natürlich ist Mavo ebenfalls nicht ohne Aufwand zu haben. Erlernen musst du es schon. Allerdings hält sich der Aufwand in engen Grenzen, denn Lea und ihr Team haben sich bemüht, das System für Menschen lesbar zu gestalten. Dabei ist Mavo von Beginn an auf Erweiterbarkeit ausgelegt. Einige Plugins existieren bereits, darunter eines, mit dem du Daten in Google Firebase speichern kannst. Auch der TinyMCE steht als Plugin zur Verwendung bereit.

Erste Schritte mit Mavo

Lass uns anschauen, wie Mavos Systematik funktioniert. Hast du das erstmal verstanden, sind die weiteren Schritte wirklich einfach zu gehen.

Mavo besteht aus zwei Dateien, nämlich einem JavaScript und einem Stylesheet. Diese Dateien müssen wie von JS gewohnt, in dein Dokument integriert werden. Einmal integriert, steht die Mavo-Funktionalität aber noch nicht zur Verfügung. Hierzu definierst du den Parameter mv-app. mv-app erhält als Namen eine eindeutige Bezeichnung, die deine App repräsentieren sollte. Das Vorhandensein des Attributs erlaubt die Verwendung der anderen Mavo-Attribute. Mehr tut mv-app für sich betrachtet nicht.

Im nächsten Schritt kommt das Attribut mv-storage ins Spiel. Hierüber definieren wir, an welcher Stelle die Daten deiner Web-App gespeichert werden sollen. Das könnte local, aber auch eine entsprechende URL sein.

Die Elemente, die letztlich gespeichert werden, heißen in Mavo property. Stattest du HTML-Elemente mit diesem Attribut aus, werden die Inhalte dieses Elements gespeichert. Das Attribut property funktioniert auch außerhalb von Formularen und sorgt dafür, dass die entsprechenden Elemente editierbar werden.

Um nun etwa eine Datenbank aus den Eingaben in den property-Feldern zu machen, wird jede property mit dem Zusatz mv-multiple ausgestattet. Das sorgt dafür, dass Datensätze hinzugefügt werden können. Nur so ist schließlich sogar eine einfache App, wie eine Aufgabenverwaltung erst möglich. Das Attribut property kann auch zur Gruppierung mehrerer Elemente zu einem Datensatz verwendet werden.

Ein einfaches Codebeispiel könnte demnach wie folgt aussehen:

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

Eine Liste ließe sich wie folgt speichern:

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

Wenn du erstmal ein wenig mit Mavo gespielt hast, stellst du fest, wie einfach der Umgang mit den HTML-Erweiterungen in der Praxis wirklich ist. Bevor hier jemand reflexartig kommentiert, warum denn nicht mit Data-Attributen gearbeitet wird, will ich gleich auf Leas Antwort zu eben dieser Frage verweisen.

Fazit: Ein Schritt in die richtige Richtung

Mavo erleichtert die Erstellung potenter Web-Apps ungemein und erlaubt es dem rein HTML-Versierten zu Lösungen zu gelangen, für die er sonst zu einer mehr oder weniger komplexen sonstigen Bibliothek hätte greifen müssen. Natürlich ist auch Mavo im Kern eine JavaScript-Lösung. Sie hält uns jedoch so weit weg von den Code-Interna wie möglich und erschafft so die perfekte Illusion der App-Programmierung ohne Programmierung.

Quellen zum Weiterlesen:

  • 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

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

2 Kommentare auf "Mavo: Web-Apps ohne Programmierung, nur mit HTML/CSS"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
klawischnigg
Gast

Und was um alles in der Welt ist so schlecht am Programmieren???

wpDiscuz