Kennen Sie HTML und CSS und sind in der Lage, einfache (und nicht so statische) Webseiten zu erstellen, möchten ihnen aber mehr „Leben“ und Interaktivität einhauchen? Sie haben Werke (Gemälde, Fotografien, Verse, eine Sammlung von Briefmarken usw.), die Sie gerne mit der Welt teilen möchten, aber Sie können keine Portfolio-Site oder kein Blog erstellen, auf dem Sie sie ohne zusätzlichen Aufwand veröffentlichen und aktualisieren können. ? Oder träumen Sie davon, ein Reisetagebuch zu führen, ungewöhnliche kulinarische Rezepte zu sammeln oder Ihre Fitnessaktivitäten zu verfolgen und dies alles online auf Ihrer eigenen Website zu tun? Vielleicht haben Sie ein Lieblingshaustier, dessen Pflege spezielle Verfahren erfordert und das nachverfolgt und schnell aufgezeichnet werden muss?

Aber die Erwähnung von JavaScript bringt Sie in ein leichtes (und manchmal nicht so) Zittern, und die Anzahl der Technologien und Konzepte, die Sie beherrschen müssen, um Ihre Ideen zu verwirklichen, führt Sie zu Verwirrung und Verzweiflung? Infolgedessen fragen Sie sich: „Warum sollte Webprogrammierung so schwierig sein? Ist es wirklich unmöglich, sich etwas auszudenken, um es einfacher zu machen? “

Dann waren Sie bei uns genau richtig. Nachdem Sie den Artikel gelesen haben, erhalten Sie ein Tool, mit dessen Hilfe Sie sicher, wenn nicht alle, viele Ihrer Ideen verwirklichen können, ähnlich den oben aufgeführten.

Der Autor der Originalbilder: Mart Virkus (toggl.com)

Erfahrene und kluge Front-End-Entwickler, beeilen Sie sich nicht, den Artikel mit Schreien zu schließen, dass es jetzt etwas gibt, das Neulinge „reiben“ kann, und Sie haben hier nichts zu tun. Ich bin sicher, Sie können auch etwas Nützliches für sich selbst lernen. Die Hauptsache, an die man sich erinnern sollte: Wenn etwas für Anfänger einfach wird, wird es automatisch für alle einfach! Bis zu einem gewissen Grad wird es Ihr Leben vereinfachen. Das ist nicht schlecht, stimme zu?

Also auf den Punkt! Dieser Artikel ist ganz Mavo gewidmet .

Mavo ist ein neuer Ansatz zur Entwicklung interaktiver Webanwendungen, bei dem nur HTML und CSS geschrieben werden, ohne dass JavaScript-Code geschrieben und ein eigener Server bereitgestellt werden muss.

Mavo wird von der Haystack-Gruppe von Wissenschaftlern am Labor für Informatik und künstliche Intelligenz des Massachusetts Institute of Technology ( MIT CSAIL ) unter der Leitung von Leah Veru entwickelt .

Folge dem weißen Kaninchen!

Möchten Sie etwas mehr darüber erfahren, welche Ideen die Grundlage von Mavo waren, welche Merkmale seiner Vorgänger er aufgenommen hat, welche er entwickelt hat und welche er aufgeben musste und warum? Dann empfehle ich dringend, diese beiden Veröffentlichungen zu lesen, die speziell für das jährliche Forum für Innovationen im Bereich der Mensch-Maschine-Interaktion vorbereitet wurden - das ACM-Symposium für Software und Technologie für Benutzeroberflächen (UIST) :

Mavo: Erstellen interaktiver datengesteuerter Webanwendungen durch Erstellen von HTML .
Erweitern einer Sprache für reaktive Ausdrücke mit Datenaktualisierungsaktionen für die Erstellung von Endbenutzeranwendungen .

Ein kleiner Exkurs für Leser aus Russland!

Die Mavo- Site wird auf Netlify- Servern gehostet, deren Adressen infolge des „Krieges“ mit dem Telegramm- Messenger auf die schwarze Liste gesetzt wurden. Dies bedeutet, dass die auf diesen Servern gehosteten Ressourcen sowie alle zugehörigen Dienste in Russland blockiert sind (zumindest zum Zeitpunkt dieses Schreibens).

Es gibt jedoch gute Nachrichten: Lea Verou und ich arbeiten aktiv daran, dieses Problem zu lösen. Ich hoffe, dass wir das auch bald regeln werden. Verwenden Sie bis dahin beispielsweise ein VPN , um mit Mavo zu arbeiten (dies gilt sowohl für den Zugriff auf die Mavo-Website als auch für das Studium von Demos in Codepen sowie für die Erstellung eigener Webanwendungen).

(UPDATE) Wer nicht bereit ist und / oder keine Verbindung zum VPN herstellen möchte, kann mit Mavo auf Stackblitz spielen oder es über cdnjs mit seinem Projekt verbinden .

Ich bin überzeugt (und ich denke, ich bin nicht allein), dass der beste Weg, eine neue Technologie zu „fühlen“ und zu bewerten, wozu sie in der Lage ist, darin besteht, mit ihrer Hilfe etwas Nützliches aufzubauen. Nicht sehr schwierig, sonst sehen wir die Wälder hinter den Bäumen vielleicht nicht, aber notwendig. Es bleibt nur zu wählen, was. Oh! Es gibt eine Idee.

Ich denke, viele von Ihnen lernen eine Fremdsprache (vielleicht ist dies für jemanden eine Programmiersprache). Und höchstwahrscheinlich verwenden Sie eine Anwendung, um sie zu studieren. Neue Wörter in diesen Anwendungen werden normalerweise mithilfe von Lernkarten gelernt. Übrigens funktioniert diese Technik des Lernens einer Fremdsprache auch offline hervorragend. Aber jetzt geht es nicht darum.

Warum entwickeln wir eine solche Anwendung nicht gemeinsam? Nennen wir es ... (Trommelwirbel!) "Karten" . Dies wird eine vollwertige CRUD-Anwendung zum Erlernen einer Fremdsprache mit Hilfe von Karten sein, die Folgendes ermöglicht:

Karten erstellen, löschen, ändern und per Drag & Drop organisieren;
Importieren Sie Karten aus einer Datei in die Anwendung und exportieren Sie sie in eine Datei.
Fortschritt verfolgen (Selbsteinschätzungsfunktion).

Die endgültige Version der Anwendung sieht ungefähr so aus:

Ist es gut Ich hoffe es Dann geh!

Im gesamten Artikel werde ich Sie durch alle Phasen der Anwendungsentwicklung führen. Und während Sie lesen, werden Sie auf Fragmente stoßen, die mit speziellen Tags markiert sind.

Folge dem weißen Kaninchen!

Auf diese Weise markierte Fragmente enthalten wichtige, aber zusätzliche Informationen über Mavo. Bei der ersten Lesung können diese Fragmente übersprungen werden, ohne Angst zu haben, die Hauptidee zu übersehen.

Übung ist der Weg zu Spitzenleistungen!

Am Ende einiger Abschnitte werde ich Ihnen kleine unabhängige Übungen anbieten, mit denen Sie die Fähigkeiten von Mavo ein wenig besser kennenlernen und gleichzeitig die zu entwickelnde Anwendung verbessern können. Solche Übungen passen in solche Fragmente.

Erinnern Sie sich von Hand!

Sind Sie bereit, dem Faden meiner Darstellung zu folgen und sofort neues Wissen in die Praxis umzusetzen? Großartig! Wie Sie wissen, erinnern wir uns besser daran, was unsere Hände tun . Sie können Ihre Anwendung schrittweise weiterentwickeln, indem Sie einen Artikel von Anfang bis Ende lesen, oder Sie können in jeder Phase beginnen, die Sie interessiert.

Solche Fragmente enthalten Links zu den entsprechenden Versionen der Anwendung auf Codepen .

Jetzt ist alles. Fangen wir an!

Statische Webseite

Um zu veranschaulichen, wie Mavo die Leistungsfähigkeit von HTML erweitert, erstellen wir eine statische HTML-Seite, die wir dann mit Mavo in eine voll funktionsfähige Webanwendung verwandeln.

Angenommen, wir haben den folgenden HTML-Code in einem <body> -Element:

<header>  <h1></h1> </header> <main> <article>  <p>  </div>  <p></div> </article> </main>

Im obigen Code-Snippet entspricht das <article> -Element einer Karte.

Wir werden einige Stile hinzufügen, um unsere Seite einer zukünftigen Anwendung ähnlicher zu machen:

Möchten Sie den Quellcode vollständig sehen? Sie können es hier tun.

Wir verbinden Mavo

Bisher haben wir nur ein statisches Layout. Es ist Zeit, daraus eine vollwertige Webanwendung zu machen. Hier kommt Mavo ins Spiel!

Um Mavo verwenden zu können, müssen wir seine JavaScript- und CSS-Dateien mit unserer Seite verbinden. Fügen Sie dazu dem <head> -Element die folgenden zwei Zeilen hinzu:

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

Ein kleiner Exkurs für Leser aus Russland!

Sie können die entsprechenden Dateien aus dem Mavo-Repository herunterladen und auf die gleiche Weise mit Ihrer Seite verbinden.

(UPDATE) Sie können Mavo auch über cdnjs mit Ihrem Projekt verbinden .

Folge dem weißen Kaninchen!

Vielleicht sollte Ihre Anwendung in älteren Browsern korrekt funktionieren? Oder möchten Sie einen Blick in den Mavo-Quellcode werfen und erwarten, dass er lesbar ist? Alles liegt in Ihren Händen. Sie können genau festlegen, mit welchem Build und / oder welcher Version von Mavo Sie arbeiten möchten, indem Sie einige einfache Fragen beantworten.

Nachdem wir Mavo verbunden haben, müssen wir angeben, welches Seitenelement unsere zukünftige Anwendung enthalten soll. Ein solches Element kann ein beliebiges HTML-Element sein, sogar <body> oder <html> ! Wir müssen diesem Element das Attribut mv-app hinzufügen und den Namen unserer Anwendung als Wert angeben - eine eindeutige Kennung auf der gesamten HTML-Seite. Ein Element mit dem Attribut mv-app wird als Stammelement der Anwendung bezeichnet.

Folge dem weißen Kaninchen!

Wenn Sie dem mv-app- Attribut keinen Wert zuweisen und keines der Attribute im selben Element vorhanden ist: id oder name , - Mavo weist der Anwendung automatisch den Namen mavo1 , mavo2 usw. zu.

Ich empfehle jedoch dringend, den Namen der Anwendung explizit anzugeben, da dieser an anderer Stelle in der Anwendung (explizit und implizit) verwendet wird.

Erinnern Sie sich von Hand!

https://codepen.io/dsharabin/pen/PoYxNjN

In unserem Fall enthält das <main> -Element die zukünftige Anwendung. Fügen Sie das Attribut mv-app hinzu und geben Sie den Namen unserer Anwendung an - Karteikarten als Wert:

 <main mv-app="flashcards"> ... </main>

Eigenschaftsattribut

Jetzt ist es an der Zeit, Mavo mitzuteilen, welche Elemente der Anwendung wichtig sind , dh sie werden bearbeitet und / oder gespeichert und können auch in Ausdrücken verwendet werden (aber dazu später mehr - seien Sie geduldig).

In unserer Anwendung gibt es bisher zwei solche Elemente - dies sind <p> -Elemente. Fügen Sie diesen Elementen das Eigenschaftsattribut hinzu und informieren Sie Mavo, dass diese Elemente Daten enthalten, mit denen Sie arbeiten müssen. Elemente mit dem Eigenschaftsattribut werden als Eigenschaften bezeichnet .

Folge dem weißen Kaninchen!

Das Eigenschaftsattribut kann zu jedem HTML5- Element hinzugefügt werden - Mavo weiß, wie es bearbeitet werden kann . Sie können beispielsweise den Inhalt des <span> -Elements manuell über die Tastatur bearbeiten und den Wert des <time> -Elements (Datum oder Uhrzeit) mithilfe des entsprechenden Widgets festlegen.

Das Regelwerk, mit dem Mavo Elemente bearbeitbar macht, kann mithilfe von Plugins problemlos erweitert werden. Ist es erforderlich, dass der Benutzer den Text mithilfe einer Symbolleiste formatieren kann, die der von Programmen wie Microsoft® Wordpad oder Microsoft® Word ähnelt, dh wie in jedem WYSIWYG- Editor mit Text arbeitet? Oder möchten Sie dem Benutzer erlauben, mit Markdown- Sprachbefehlen zu tippen? Es gibt keine Einschränkungen. Aktivieren Sie einfach die entsprechenden Plugins. Kein passendes Plugin? Kein Problem. Schreiben Sie Ihre eigenen. Mavo unterstützt die entsprechenden Funktionen sofort.

Beachten Sie, dass der Wert des Eigenschaftsattributs den Zweck des Elements beschreiben muss, wie dies normalerweise durch die Werte der ID- oder Klassenattribute beschrieben wird.

Verwandeln Sie unsere <p> -Elemente in Eigenschaften:

 ... <p property="source">  </p> <p property="translation"></p> ...

Folge dem weißen Kaninchen!

Wenn ein Element bereits eine ID , eine Klasse oder ein itemprop-Attribut hat , das seinen Zweck genau beschreibt, können Sie das Eigenschaftsattribut unverändert lassen . Beispielsweise könnte eine der Eigenschaften unserer Anwendung wie folgt beschrieben werden: <p property class="source"> .

Haben Sie nach dem Hinzufügen von Eigenschaften Änderungen an unserer Anwendung festgestellt? Ich bin mir sicher, dass ja. Oben in der Anwendung wurde die Mavo-Symbolleiste ( Mavo-Leiste ) mit der Schaltfläche Bearbeiten angezeigt . Mit dieser Schaltfläche können Sie zwischen zwei Anwendungsmodi wechseln: Lesemodus und Bearbeitungsmodus . Jetzt befindet sich unsere Anwendung im Lesemodus. Dies bedeutet, dass wir seine Daten nicht direkt im Browserfenster bearbeiten können.

Folge dem weißen Kaninchen!

Die Mavo-Symbolleiste ist vollständig anpassbar (wie alle von Mavo automatisch zur Anwendung hinzugefügten Oberflächenelemente): Sie können ihre Position und ihr Erscheinungsbild ändern, eine Reihe verfügbarer Schaltflächen angeben oder sogar ein eigenes HTML-Element zuweisen.

Wenig später sehen wir eine der Optionen für eine solche Anpassung der Mavo-Symbolleiste. Wenn Sie sich in der Zwischenzeit ein wenig mit den beschriebenen Funktionen vertraut machen möchten, lesen Sie die Dokumentation auf der offiziellen Website.

Nun, es ist Zeit, in den Bearbeitungsmodus zu wechseln und ihn kennenzulernen. Klicken Sie auf die Schaltfläche Bearbeiten .

Was hat sich geändert? Der Name der Schaltfläche hat sich geändert: Jetzt heißt sie Bearbeiten . Dies ist ein visuelles Signal für uns: Aufmerksamkeit, wir befinden uns im Bearbeitungsmodus. Bewegen Sie den Mauszeiger über einen Absatz mit Text ("Wort oder Satz" oder "Übersetzung"). Mavo sagt uns mit einem gelben Highlight, dass Sie auf dieses Fragment klicken und es bearbeiten können.

Wagen Sie es! Klicken Sie auf den Text und nehmen Sie Änderungen daran vor. Ist das nicht toll ?! Wir können den Inhalt der Seite direkt im Browserfenster bearbeiten!

Übung ist der Weg zu Spitzenleistungen!

Angenommen, zusätzlich zu dem untersuchten Wort (oder Satz) und seiner Übersetzung soll die Karte ein Beispiel für die Verwendung dieses Wortes (Satzes) in einem Satz enthalten. Aber wir wissen, dass so Fremdwörter gelehrt werden sollten - im Kontext, richtig?

Verbessern Sie die Anwendung, indem Sie das fehlende Element hinzufügen und ihr beispielsweise einen Namen geben.

Mv-Mehrfachattribut

Im Moment gibt es nur eine Karte in unserer Anwendung. Ehrlich gesagt ist das nicht sehr nützlich! Für eine vollwertige Anwendung fehlt es uns an der Möglichkeit, neue Karten hinzuzufügen, unnötige Karten zu löschen und Karten in der für uns geeigneten Weise neu anzuordnen. Aber wie können wir das alles realisieren?

Erinnern Sie sich von Hand!

https://codepen.io/dsharabin/pen/PoYxNmN

Als Anwendungsentwickler könnten wir ihm neue Karten hinzufügen, indem wir einfach mehr <article> -Elemente zu seinem HTML-Code hinzufügen. Aber wie kann der Benutzer dann selbst Karten hinzufügen und entfernen?

Glücklicherweise gibt es in Mavo etwas, mit dem wir der Anwendung ein- oder zweimal die entsprechende Funktionalität hinzufügen können - das Attribut mv-multiple . Mit diesem Attribut teilen wir Mavo mit, welche Elemente der Anwendung weitergegeben werden können. Das Attribut mv-multiple verwandelt das Element, dem es hinzugefügt wird, in eine bearbeitbare Sammlung von Elementen ( Sammlung ). Gleichzeitig fügt Mavo den Elementen einer solchen Sammlung Steuerelemente hinzu, mit denen Sie der Sammlung neue Elemente hinzufügen, vorhandene löschen und die Elemente der Sammlung durch Ziehen und Ablegen anordnen können. Und ja, der Stil dieser Steuerelemente ist auch vollständig anpassbar!

Folge dem weißen Kaninchen!

Wenn Sie einem Element ohne das Eigenschaftsattribut das Attribut mv-multiple hinzufügen, korrigiert Mavo diese Situation automatisch: Fügen Sie eine Eigenschaft mit der Wertsammlung hinzu (oder collection2 , collection3 , um die Eindeutigkeit des Namens zu erhalten).

Wie im Fall des Anwendungsnamens empfehle ich jedoch, das Eigenschaftsattribut mit Sammlungen zu verwenden: Dies garantiert die Sicherheit der Anwendungsdaten, wenn Änderungen an der HTML-Struktur vorgenommen werden.

Fügen wir das Attribut mv-multiple zum <article> -Element der Anwendung hinzu, um unsere einsame Karteikarte in eine vollständig bearbeitbare Kartensammlung zu verwandeln (beachten Sie, dass wir auch das Eigenschaftsattribut hinzugefügt haben):

 <article property="flashcard" mv-multiple> ... </article>

Folge dem weißen Kaninchen!

Mit Mavo können Sie den Eigenschaftsnamen als Wert des Attributs mv-multiple angeben. Daher könnten wir die Kartensammlung etwas kürzer beschreiben: <article mv-multiple="flashcard"> .

Beachten Sie, dass das Attribut mv-multiple dem zu propagierenden Element hinzugefügt werden muss und nicht dem Container, in dem sich die Sammlung befindet. Ein sehr häufiger Fehler ist, wenn Entwickler <ul mv-multiple> anstelle von <li mv-multiple> schreiben. Und ein solcher Fehler ist zunächst schwer zu erkennen. Bis zum Beispiel die in der Anwendung verwendeten Stile dies deutlich machen.

Wechseln Sie jetzt in den Bearbeitungsmodus. Haben Sie bemerkt, dass die Schaltfläche Karteikarte hinzufügen unter der Karte angezeigt wurde ? Lassen Sie uns eine Probefahrt für sie arrangieren: Fügen Sie mit ihrer Hilfe ein paar neue Karten hinzu. Es ist einfach etwas Unglaubliches: Wir können der Anwendung dynamisch neue Karten hinzufügen, auch wenn der Quellcode keine entsprechenden Elemente enthält!

Folge dem weißen Kaninchen!

Beachten Sie, dass das Hinzufügen des Eigenschaftsattributs zum <article> -Element den Inhalt nicht bearbeitbar gemacht hat. Mavo betrachtet dieses Element als Gruppe . Dies geschieht, wenn das Eigenschaftsattribut einem Element hinzugefügt wird, das andere Eigenschaften in sich enthält, dh Elemente mit dem Eigenschaftsattribut .

Aber das ist noch nicht alles! Bewegen Sie den Mauszeiger über eine Karte. Sie sehen, dass Mavo in der oberen rechten Ecke der Karte drei neue Schaltflächen hinzugefügt hat (von links nach rechts): Um die Karte zu löschen, fügen Sie eine neue hinzu und verschieben Sie die vorhandene. Wenn Sie mit der Maus über eine dieser Tasten fahren, können Sie anhand der von Mavo erzeugten Hintergrundbeleuchtung leicht erraten, auf welche Karte sie sich beziehen.

Praktisch, richtig?

Folge dem weißen Kaninchen!

Von Mavo generierte Schaltflächen für die Arbeit mit Sammlungsobjekten sind vollständig anpassbar . Sie können beispielsweise eine eigene Schaltfläche zum Verschieben eines Sammlungselements erstellen, indem Sie dem entsprechenden HTML-Element die Klasse mv-drag-handle hinzufügen.

Denken Sie auch daran, dass Sie mit allen Schaltflächen für die Arbeit mit Sammlungselementen über die Tastatur interagieren können. Legen Sie beispielsweise den Eingabefokus auf die Bewegungstaste der Karte und ändern Sie mit den Cursortasten die Position der Karte in der Sammlung.

Mv-Speicherattribut

Erinnern Sie sich von Hand!
https://codepen.io/dsharabin/pen/WNeYwpj

Nachdem die Hauptschnittstelle der zukünftigen Anwendung entwickelt wurde, schlage ich Folgendes vor:

Wechseln Sie in den Bearbeitungsmodus (falls Sie dies noch nicht getan haben).
Fügen Sie ein paar Karten hinzu, auf denen das Wort und seine Übersetzung angegeben sind.
Kehren Sie zum Lesemodus zurück.
Und ... aktualisiere die Seite.

Autsch! Wo sind all die Daten geblieben, die wir gerade eingegeben haben? Sollte Mavo sie nicht retten? Was ist schief gelaufen? Wo sind wir falsch gelaufen?

Nur ruhig! Tatsächlich haben wir Mavo nie gesagt, dass er bearbeitbare Daten speichern soll . Außerdem haben wir nicht angegeben, wo genau er sie retten soll.

Also lass es uns jetzt tun. Dafür hat Mavo ein spezielles Attribut - mv-storage . Es bleibt nur herauszufinden, welche Werte es annehmen kann. Und es stellt sich heraus, dass Mavo uns die breitesten Möglichkeiten bietet. Und Plugins - noch größer öffnen!

Lassen Sie unsere Anwendung Daten im lokalen Speicher des Browsers speichern - localStorage . Dies ist die einfachste Option in Mavo und eignet sich hervorragend für unsere erste App. Alles, was wir tun müssen, ist einfach das mv-storage- Attribut mit dem lokalen Wert zum Stammelement der Anwendung hinzuzufügen (dies ist der Name des Elements mit dem mv-app- Attribut, denken Sie daran?):

 <main mv-app="flashcards" mv-storage="local"> ... </main>

Schauen Sie sich jetzt die Mavo-Symbolleiste an. Haben Sie eine neue Schaltfläche zum Speichern bemerkt? Neben dem direkten Zweck, Änderungen an der Anwendung zu speichern, verfügt es über eine weitere nützliche Funktion. Versuchen Sie erneut, die Daten zu bearbeiten. Beachten Sie, dass die Schaltfläche Speichern jetzt hervorgehoben ist . Bewegen Sie den Mauszeiger darüber und Mavo hebt die Daten hervor, die Sie bearbeitet, aber nicht gespeichert haben!

Großartig, oder?

Klicken Sie auf die Schaltfläche Speichern und aktualisieren Sie die Seite (es ist nicht erforderlich, in den Lesemodus zu wechseln). Nun sind Ihre Daten gespeichert? Großartig! Wir sind einer vollständigen Webanwendung einen Schritt näher gekommen.

Mv-Autosave-Attribut

Jetzt funktioniert unsere Anwendung so, dass der Benutzer auf die Schaltfläche Speichern klicken muss, wenn er Änderungen an der Anwendung speichern muss. Dies ist unter dem Gesichtspunkt des Speicherns wichtiger Informationen richtig, aber häufig vergessen Benutzer, dies zu tun. Wie soll ich sein? Wenn nur unsere Anwendung in bestimmten Abständen automatisch Daten speichern könnte! "Und was, kann das wirklich mit Hilfe von Mavo gemacht werden?" - Du fragst. Und ich werde mit Freude und Stolz antworten, dass es möglich ist!

Um der Anwendung beizubringen, vom Benutzer vorgenommene Änderungen an den Daten automatisch zu speichern, können wir das Attribut mv-autosave verwenden . Sie müssen es dem Stammelement der Anwendung hinzufügen. Der Wert dieses Attributs gibt die Anzahl der Sekunden an , die von dem Moment an vergehen müssen, in dem der Benutzer Änderungen an den Daten vornimmt, bis sie von der Anwendung gespeichert werden. Wir werden die entsprechenden Änderungen an unserer Anwendung vornehmen:

 <main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main>

Folge dem weißen Kaninchen!

Das Attribut mv-autosave="3" weist Mavo an, alle drei Sekunden Änderungen an diesen Daten zu speichern. Das Vorhandensein dieser Art von Verzögerung zwischen den Speichern wird entscheidend, wenn der zum Speichern der Daten ausgewählte Dienst (Backend) den Verlauf ihrer Änderung speichert (z. B. GitHub und Dropbox ). Das Fehlen einer solchen Verzögerung macht die Geschichte der Änderungen einfach unbrauchbar.

Um Mavo zu zwingen, Änderungen sofort zu speichern, können Sie das Attribut mv-autosave="0" oder nur mv-autosave . Gleichzeitig wird die Schaltfläche Speichern (falls nicht erforderlich) aus der Mavo-Symbolleiste entfernt.

Um die an der Anwendung vorgenommenen Änderungen anzuzeigen und auszuwerten, aktualisieren Sie die Daten auf einer der Karten erneut und achten Sie auf die Schaltfläche Speichern . Hast du es bemerkt? Zuerst wurde es hervorgehoben, aber nach drei Sekunden ging es aus, was darauf hinweist, dass die Anwendung keine nicht gespeicherten Daten enthielt. Jetzt werden alle Änderungen automatisch gespeichert!

Der Hauptteil unserer Anwendung sieht nun folgendermaßen aus:

 <main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple>  <p property="source">  </p>  <p property="translation"></p> </article> </main>

Übung ist der Weg zu Spitzenleistungen!

Wir sind fast fertig mit der Alpha-Version unserer Anwendung. Hurra! Jetzt sind Sie an der Reihe, es noch besser zu machen. Keine Sorge! Sie sind mit allen notwendigen Kenntnissen ausgestattet, um die Aufgabe zu erfüllen, die ich Ihnen anbieten werde.

Verbessern Sie die Anwendung, damit Karten, die durch ein gemeinsames Thema vereint sind, gruppiert werden können. Zum Beispiel sind in einer Gruppe alle Wörter, die sich auf Kleidung beziehen, enthalten, in der anderen - die Namen von Berufen, in der dritten - die Namen von Lebensmitteln usw.

Tipps!

Es gibt verschiedene Möglichkeiten, um das Problem zu lösen. Es liegt an Ihnen, zu entscheiden, welchen Weg Sie wählen und welchen Weg Sie gehen. Ich möchte jedoch, dass Sie über Antworten auf einige Fragen nachdenken, die Ihnen bei der Suche nach einer Lösung helfen können.

Welches HTML-Element verwenden Sie als Gruppierungselement (Gruppe) ? Für die Benutzer der Anwendung wäre es praktisch, wenn der Kartengruppe ein Name ( Themenname ) zugewiesen werden könnte und wenn diese Gruppe bei Bedarf auf ihren Titel minimiert werden könnte.
Welche Attribute fügen Sie dem ausgewählten Element hinzu (es sei denn, Sie fügen natürlich etwas hinzu). Wird dieser Gegenstand eine Eigenschaft oder Sammlung sein ?
Haben Benutzer der Anwendung die Möglichkeit, neue Kartengruppen hinzuzufügen , unnötige zu löschen , sowohl die Gruppen selbst als auch Karten zwischen verschiedenen Gruppen zu verschieben?

Übrigens können Sie entscheiden, dass das Kombinieren von Karten zu Gruppen mit separaten Elementen nicht Ihre Methode ist. Und das ist normal. Vielleicht möchten Sie den Karten nur Tags ( Hashtags ) hinzufügen, die dem Thema entsprechen. Und es wird auch eine gute Entscheidung sein!

Implementieren Sie beide Lösungen, um "Ihre Hand zu bekommen" und ein wenig mehr, um sich mit Mavo und seinen Funktionen vertraut zu machen.

Mv-Bar-Attribut

Wir werden die Funktionalität unserer Anwendung weiter ausbauen. Wir haben es so konfiguriert, dass Benutzerdaten im lokalen Speicher des Browsers gespeichert werden. Unsere Anwendung bleibt jedoch Einzelbenutzer: Benutzer können ihre Karten nicht mit anderen Benutzern teilen. Und es wäre toll, eine solche Gelegenheit zu haben! Und das Erlernen einer Fremdsprache in einem Unternehmen macht viel mehr Spaß, nicht wahr?

Gibt es in Mavo eine Möglichkeit, Benutzern das Exportieren ihrer Karten aus der Anwendung und das Importieren der Karten anderer Benutzer zu ermöglichen? Wir haben Glück! Und diese Funktionalität wird in Mavo "out of the box" unterstützt. Natürlich wird dies unsere Anwendung nicht zu einem Mehrbenutzer im kanonischen Sinne des Wortes machen, aber das Vorhandensein einer solchen Funktionalität ist für eine so einfache Anwendung bereits eine Menge, müssen Sie zustimmen.

Erinnern Sie sich von Hand!

https://codepen.io/dsharabin/pen/ZEzmWBr

Für solche Aufgaben verfügt Mavo über das Attribut mv-bar , mit dem Sie festlegen können , welche Schaltflächen in der Mavo-Symbolleiste angezeigt werden (falls überhaupt Schaltflächen benötigt werden). In der Regel wird dieses Attribut dem Stammelement der Anwendung hinzugefügt. Die Schaltflächen selbst haben sehr logische (in Bezug auf ihre Namen in Englisch) Bezeichner. Hier sind nur einige davon: Bearbeiten, Importieren, Exportieren .

Da wir dem Set, das sich bereits in der Mavo-Symbolleiste befindet, nur Schaltflächen hinzufügen möchten, können wir die sogenannte relative Syntax verwenden . Mit dieser Syntax können wir Schaltflächen zum Standardsatz hinzufügen und daraus entfernen, ohne alle darin enthaltenen Schaltflächen explizit auflisten zu müssen. In unserem Fall reicht es aus, den Wert des Attributs mv-bar einfach mit dem Schlüsselwort with zu beginnen und dann die Bezeichner der von uns benötigten Schaltflächen (mit einem Leerzeichen) aufzulisten:

 <main mv-app="flashcards"   mv-storage="local"   mv-autosave="3"   mv-bar="with import export">   ... </main>

— !

- : . , .

. MavoScript

, « », : « ?!» - . ? .

«» , - Mavo.

, (, , ) . , , property . — , .

, , , Mavo ( HTML-). . : [] . . , - , .

!

, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .

Mavo MavoScript , , , : , , , , .

, MavoScript , .

Mavo MavoScript .

!

https://codepen.io/dsharabin/pen/rNBQeMv

. , [source] flashcard . , source translation :

 ... <p property="source">  </p> [source] <p property="translation"></p> ...

? , , source . Also? Also!

. source . , , ? [source] , , source , : , . ?!

, , , — . Warum? [source] , , — source . - .

[source] flashcard , ? So:

 ... [source] <article property="flashcard" mv-multiple>  ... </article> ...

? , . , source (!) . , , . Stimmen Sie zu

. Welches? , , source ? , , source translation . ? : [source] [flashcard] . :

 ... [flashcard] <article property="flashcard" mv-multiple>  ... </article> ...

, ? , — . ( (!)).

, , ( , , ), , . , Mavo . MavoScript count() , .

!

MavoScript — . , .

— . , .

, , , .
.

, count() . , :

 ... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ...

, , — !

— !

, Mavo … . , , - . , .

, , ( ).

!

, , . where filter() .

, , . : , ? , .

( , ) — .

!

https://codepen.io/dsharabin/pen/WNeYwxR

, : . , ? , :

, , (), — ;
, , (), , , .

« , JavaScript?» — . Ja , Mavo — ?!

, , , :

 ... <article property="flashcard" mv-multiple> ... <section>  <h2> </h2>  <button> </button>  <button> </button> </section> </article> ...

mv-action

Mavo , , — ( custom actions ).

, mv-action . , . , — .

!

mv-action <form> , .

mv-action . , MavoScript , : add(), set(), move() delete() .

, , , , .

: Mavo mv-action . , . , mv-action="" , mv-action="[]" . , , , , .

, . : . move() . , — () . , , 0 .

, : , . . . :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ...

, mv-action flashcard . .

, . , , , ?

, : , . , , (). , , , . ?

Leider gibt es keine. : , — flashcard — . flashcard . - :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))">      </button> ... </article> ...

! .

?

. <meta>

, , , [count(flashcard)] , flashcard . , flashcard . , !

, [count(flashcard)] flashcard - , . — flashcard . Mavo , , ( computed properties ).

!

https://codepen.io/dsharabin/pen/NWKENNb

, , HTML-. HTML-, <meta> : <meta property="" content="[]"> . : <meta> , .

!

, , , .

flashcardCount . , flashcard ( ):

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple>  ... </article> ...

: , . :

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)">      </button> </article> ...

! . Glückwunsch!

— !

— $all .

$all , , . , . $all flashcardCount . ? Warum?

, . , , ( ) . .

Schlussfolgerungen

, -. JavaScript. , , -. , « ». .

, — , , , . , , , . , HTML- Mavo, :

( <head> ) JavaScript- CSS- Mavo.
mv-app .
, ( / , / ) , property .
mv-multiple , .
Mavo, , mv-storage .
, . , mv-autosave .

, :
Mavo ( Mavo ). mv-bar , , , .
(expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
(custom actions) . mv-action .
(computed properties) — , . , <meta> .

. ? Natürlich nicht. . , , , (, ). , . Mach es! . - — ! ? 17 — ( « » )!

, Mavo, — , . Mavo . : Mavo -, .

Mavo . -, . Wie? :

Mavo, , — Mavo ;
, , , ;
Mavo, , , , — ;
, Mavo Twitter , , , , «» (, Gitter Mavo);
, Mavo — !

Mavo!

Danksagung

.

, ( Lea Verou ), ( ), : , - . , !

( James Moore ). , « JavaScript » Udemy , , «» . !

Eine interaktive Webanwendung ohne Programmierung? Einfach! Mavo in deinen Armen