Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Web-Apps nur mit HTML erstellen: Mavo in der Kurzvorstellung

(Grafik: mavo.io)

Die Javascript-Bibliothek Mavo erlaubt die Erstellung von Web-Apps durch das Schreiben von HTML. Hier stellen wir euch das Tool kurz vor.

Mavo wurde hauptsächlich von Lea Verou am MIT Computer Science and Artificial Intelligence Laboratory entwickelt und ermöglicht es auf einfache Weise, kleine und auch etwas größere Web-Apps zu erstellen – dafür muss kein Programmier-Code geschrieben und keine Server verwaltet werden, wie es im Vorstellungs-Artikel bei Smashing Magazine heißt. Mavo ist Open Source und der Code liegt auf Github.

Aktives Javascript ist nicht nur für die Verwaltung sondern auch für die Anzeige der aktuellen Daten Voraussetzung.

Mavo: Ein Schnelleinstieg

Benötigte Ressourcen einbinden

Mavo ist quasi eine Erweiterung zu HTML. Um eine HTML-Seite darauf vorzubereiten, dass sie sich per Mavo verwalten lässt, müssen lediglich ein Stylesheet und eine Javascript-Datei eingebunden werden:

<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>

Mavo für eine HTML-Struktur aktivieren

Danach könnt ihr Mavo für eine HTML-Struktur aktivieren, indem ihr dem Element das mv-app-Attribut mitgebt (falls das Element bereits ein id-Attribut hat, könnt ihr den Wert für mv-app auch weglassen):

<div mv-app="mavoTest">
  Meine erste Mavo-App …
</div>

Es kann zwar noch nichts bearbeitet werden, aber Mavo ist schon mal initialisiert. (Screenshot: Codepen)

Speicherung der Daten regeln

Um einen Ort für die Speicherung der Daten zu bestimmen, gibt es das mv-storage-Attribut. Standardmäßig unterstützt werden die Speicherung im localStorage des Browsers, auf Github, in der Dropbox oder einem HTML-Element.

Zur Speicherung bei Github kann der Code wie folgt aussehen:

<div 
    mv-app="mavoTest"
    mv-storage="https://github.com/FlorianBrinkmann/mavo-test">
  Meine erste Mavo-App …
</div>

Mavo zeigt dann einen Login-Link an, um sich bei Github anzumelden. User, die Commit-Rechte in dem Repo haben, können direkt Änderungen vornehmen – bei Änderungen von anderen Github-Nutzern wird ein Pull-Request erstellt.

Die zu speichernden Daten festlegen

Um zu regeln, welche Daten gespeichert werden sollen, gibt es das property-Attribut. Dessen Wert sollte das Element beschreiben, ähnlich wie ein id- oder class-Attribut. Wenn das Attribut bei einem Element genutzt wird, das kein Formular ist, wird es durch Mavo bearbeitbar gemacht und Mavo erzeugt Buttons, mit denen zwischen Bearbeitungs- und Vorschau-Ansicht gewechselt werden kann.

Sagen wir also, wir möchten eine Mini-About-Seite erstellen – das könnte dann so aussehen:

<div mv-app="about" 
    mv-storage="https://github.com/FlorianBrinkmann/mavo-test">
  <h1>About 
    <span property="full-name">Florian Brinkmann</span>
  </h1>
  <p>
    <span property="about-text">Ich bin Webentwickler mit 
      einem Fokus auf WordPress-Themes und schreibe 
      (unter anderem) Artikel für t3n.de.
  </p>
</div>

Eine Liste von gleichen Elementen verwalten

Mavo gibt euch auch die Möglichkeit, Elemente oder HTML-Strukturen festzulegen, bei denen der Nutzer dann selbst neue anlegen oder bestehende entfernen kann – zum Beispiel nützlich für Listen. Möglich gemacht wird das durch das mv-multiple-Attribut.

Wir möchten damit nun eine Liste mit Social-Media-Accounts hinzufügen, bei denen der Nutzer einfach neue hinzufügen oder alte entfernen kann:

<div mv-app="about" 
    mv-storage="https://github.com/FlorianBrinkmann/mavo-test">
  <h1>About 
    <span property="full-name">Florian Brinkmann</span>
  </h1>
  <p>
    <span property="about-text">Ich bin Webentwickler mit 
      einem Fokus auf WordPress-Themes und schreibe 
      (unter anderem) Artikel für t3n.de.
  </p>
  <ul>
    <li property="social-media-account" mv-multiple>
      Twitter
    </li>
  </ul>
</div>

Das lässt sich wie geschrieben auch auf ganze Strukturen anwenden:

<div mv-app="about" 
    mv-storage="https://github.com/FlorianBrinkmann/mavo-test">
  <h1>About 
    <span property="full-name">Florian Brinkmann</span>
  </h1>
  <p>
    <span property="about-text">Ich bin Webentwickler mit 
      einem Fokus auf WordPress-Themes und schreibe 
      (unter anderem) Artikel für t3n.de.
  </p>
  <ul property="social-media-account" mv-multiple>
    <li>
      <strong property="social-media-account-name">
        Twitter
      </strong>:
      <span property="social-media-account-url">
        twitter.com/flobrinkmann
      </span>
    </li>
  </ul>
</div>

Das waren vielleicht nicht die sinnvollsten Beispiele, da die Accounts nicht verlinkt werden können, aber es verdeutlicht hoffentlich das Prinzip.

Bearbeitungsansicht des Beispiels mit TinyMCE-Plugin. (Screenshot: Codepen)

Toolbar verstecken

Meist dürfte es nicht gewollt sein, dass die Mavo-Toolbar für alle Nutzer sichtbar ist, sondern nur im eingeloggten Zustand. Dafür könnt ihr folgenden Code beim Element mit dem mv-app-Attribut einfügen:

mv-bar="status edit save clear logout"

Nun müsst ihr an das Ende der URL ein ?login einfügen, um euch einloggen zu können. Mehr Infos zu Toolbar-Anpassungen gibt es in der Dokumentation.

Demos unseres kleinen Beispiels

Ich habe zwei Pens mit der About-Seite erstellt, damit ihr sie in Aktion sehen könnt:

Weitere Möglichkeiten und Plugins

Das war nur ein kurzer Einstieg in Mavo. Ein paar weitere Möglichkeiten:

  • mv-source lässt euch einen alternativen Ort zum Dateneinlesen definieren
  • Conditional Logik mit mv-if
  • Automatisches Speichern von Änderungen mit mv-autosave

In der Mavo-Dokumentation gibt es eine Liste mit allen Optionen inklusive Links zu weiterführenden Infos. Im Smashing-Magazine-Artikel könnt ihr ebenfalls sehen, was damit noch möglich sein kann – dort wird beispielsweise eine To-do-App gezeigt.

Mavo lässt sich durch Plugins erweitern und ein paar davon gibt es bereits. So könnt ihr zum Beispiel visuelle Bearbeitungsfunktionen über TinyMCE nutzen (habe ich in den Codepen-Demos verwendet) oder in Markdown schreiben.

Auf der Download-Seite von Mavo könnt ihr einige Dinge anpassen. So könnt ihr den Javascript-Code entweder minifiziert oder lesbar nutzen, Unterstützung für etwas ältere Browser aktivieren und einstellen, ob ihr die wirklich neueste Version oder die letzte stabile nutzen möchtet.

Was haltet ihr von Mavo?

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Peter Minz

Auf die Frage des Autors, "Was haltet ihr von mavo?", zu antworten: Nichts. Nettes Gimmick, aber mir ist nach gut einer Stunde kein realistisches Szenario eingefallen, wo man mavo einsetzen könnte oder es eine bessere Alternative ist.

Ich will nicht sagen, dass es nutzlos ist, jedoch es zu kennen ist jetzt auch kein Mehrwert.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.