07: Frameworks & Libraries

Was sind Frameworks?

Mit den Techniken, die ihr in der letzten Session gelernt habt, könnt ihr theoretisch alle erdenklichen User Interfaces mit HTML, CSS, und JS umsetzen. Was ihr gelernt habt, wird umgangssprachlich als „Vanilla JS“ bezeichnet – also pures JavaScript, ohne Erweiterungen und externen Code.

Je nachdem wen ihr fragt, werdet ihr hören, dass es unmöglich ist, guten Code mit Vanilla JS zu schreiben (was einfach nicht wahr ist), oder dass man wann immer möglich Vanilla JS verwenden sollte und nur dann auf Libraries und Frameworks zugreifen sollte, wenn es wirtschaftlich, zeittechnisch, oder mit dem aktuellen Wissensstand unmöglich ist, etwas in Vanilla JS umzusetzen. Keines dieser Extreme ist das einzig Wahre, aber ich persönlich tendiere immer eher zu Letzterem. Denn: je mehr „fremden“ Code ihr verwendet, desto weniger Kontrolle habt ihr über eure eigene Anwendung. Ihr seid für immer an den fremden Code gebunden und müsst darauf vertrauen, dass niemand etwas Bösartiges in diesen Code einbaut und dass der Code aktuell, sicher und für euch verfügbar bleibt.

Ich halte es also so: ich benutze nur dann externen Code, wenn es mir nicht möglich ist, eine Funktionalität, die ich benötige in einem angemessenen Zeitrahmen selbst zu schreiben. Trotzdem benutze auch ich externen Code, und vor allem ein Framework: Vue.js.

Aber bevor wir uns näher damit befassen können, müssen wir erst einmal wissen, was denn genau ein Framework nun ist – und um das zu verstehen müssen wir uns eigentlich nur den Namen genauer ansehen: Framework, Englisch für „Rahmenstruktur“, oder „Gerüst“.

Ein Framework ist nichts anderes als ein Gerüst für euren Code. Es gibt bestimmte Richtlinien vor an denen ihr euch entlanghangeln könnt und bietet Lösungen für Probleme, die häufig auftreten. Alles was ein Framework macht könntet ihr auch selbst von Hand programmieren, aber ihr müsstet das für jede App, jedes Projekt wieder tun und das würde euch sicherlich schnell ausbrennen.

Stellt euch für einen Augenblick vor ihr würdet ein Haus bauen und keine App. Natürlich könntet ihr alles selbst machen: Ziegel brennen, Holz im Wald schlagen und zu Balken und Brettern sägen, die Grundsätze der Statik entwickeln, die besten Verbindungsmöglichkeiten für Stein- und Holzstrukturen erfinden, Ausprobieren wie man Beton mischt, und so weiter. Aber nicht nur würde das viel mehr Zeit kosten, als einen Architekten und eine Baufirma zu beauftragen, ihr würdet auch viel mehr Fehler machen und am Ende wahrscheinlich ein Ergebnis haben, das bei weitem nicht so professionell ist, wie es hätte sein können.

Natürlich ist so etwas eine wahnsinnige Lernerfahrung und nachdem ihr es einmal gemacht habt, würdet ihr mit jedem weiteren Mal immer besser werden, aus euren Fehlern lernen und die Ergebnisse aus dem letzten Mal wiederverwerten. Kurz: ihr würdet euch euer eigenes Framework aufbauen – und wenn ihr die Zeit dazu habt, könnt ihr es gerne versuchen.

Aber meistens macht es mehr Sinn in diesem Fall auf die Erfahrung Anderer zu bauen und ein Framework zu verwenden, das schon sehr ausgereift ist.

Frameworks wie Vue.js sind also Gerüste und Anleitungen, mit denen ihr schneller und besser eigene Anwendungen schreiben könnt. Sie bieten eine Reihe von Lösungen für Probleme, die in jeder Anwendung gelöst werden müssen (Routing, Nutzereingaben, Animationen, etc.) und einen Prozess, den ihr von Anfang bis Ende durchlaufen könnt, um schließlich eine fertige Anwendung vor euch zu haben.

Sind das nur Libraries oder was?

Amadeus, ich habe schon jQuery benutzt, ist das ein Framework?

Nein jQuery ist eine Library, und wenn man mich fragt, sollte man jQuery heutzutage nicht mehr verwenden. jQuery stammt aus einer Zeit, in der JavaScript noch nicht so standardisiert und robust war, wie es heute ist. Alles, was ihr mit jQuery umsetzen könnt, könnt ihr genauso leicht mit Vanilla JS umsetzen, ohne von einer Library abhängig zu sein.

Einfachstes Beispiel: was jQuery so beliebt machte, war die Tatsache, dass man Elemente einfach mit ihren CSS Selektoren auswählen konnte:

// jQuery code, benötigt jQuery
var wrapper = $('div.wrapper');
// wrapper ist jetzt das erste div mit der Klasse "wrapper"

Wie ihr in der letzten Session gesehen habt, geht das aber inzwischen mit querySelector in Vanilla JS genauso einfach, bzw. sogar noch einfacher, weil ihr nicht jQuery einbinden und darauf müsst, dass es geladen und aktiviert ist.

Für mehr Gründe, warum man jQuery nicht braucht, schaut hier und hier – zugegeben, der zweite Artikel ist etwas…unsubtil, aber was er ausdrückt ist definitiv relevant und richtig. Das hier auf der anderen Seite ist ein guter Artikel, der sich damit befasst, wann man jQuery vielleicht doch benutzen sollte – auch wenn ich vier Jahre nach seiner Veröffentlichung der Meinung bin, dass man jQuery wirklich nicht mehr braucht, vor allem dann wenn man ein Framework wie Vue.js benutzt.

Aber genug zu jQuery: was ist denn nun der Unterschied zwischen einem Framework und einer Library?

Kurzgesagt: eine Library liefert eine Lösung für ein spezifisches Problem, während ein Framework eine meinungsfundierte Struktur und einen Entwicklungsprozess vorgibt.

Nehmen wir das Beispiel eines Bild-Karussells. Es gibt Libraries für Bild- Karussells, die ihr auf eurer HTML-Seite importieren könnt und somit habt ihr einen Bild-Karussell. Ein Framework gibt euch die Werkzeuge an die Hand, mit denen ihr einen Bild-Karussell bauen könnt und zeigt euch einen Weg, wie ihr euer Ziel erreicht, aber den Bild-Karussell müsst ihr noch immer selbst bauen.

Libraries lösen also spezielle Probleme, während Frameworks auf einer allgemeineren Ebene arbeiten. Etwas technischer ausgedrückt bedeutet das, dass ein Entwickler ein Framework nicht „aufruft“, sondern dass das Framework den Code des Entwicklers aufruft und in einer spezifischen Art und Weise verwendet. Bei einer Library ist das genaue Gegenteil der Fall: ein Entwickler ruft Funktionen der Library aktiv auf.

Was sind die Vor- und Nachteile von Frameworks?

Wie wir jetzt wissen, sind Frameworks vor allem dazu da, eurem Prozess und damit auch eurem Code eine Struktur zu geben – das an sich ist schon ein großer Vorteil. Mit einem Framework zu arbeiten kann deutlich effizienter sein, als alles von Hand zu programmieren und es macht auch mehr Spaß, denn ihr könnt euch auf eure Anwendung konzentrieren, ohne euch mit banalen Problemen herumschlagen zu müssen. Gute Frameworks bringen euch mehr Sicherheit und Kompatibilität zu allen möglichen Browsern und Versionen – und nicht zu unterschätzen, viele Frameworks geben euch eine Möglichkeit schnell und leicht an Hilfestellungen und Antworten zu kommen, da sich oftmals hilfsbereite Gemeinschaften um ein bestimmtes Framework herum aufbauen und Foren und andere Kommunikationskanäle existieren.

Auf der anderen Seite schränken Frameworks euch auch ein. Ihr seid unter Umständen gezwungen innerhalb der vorgegebenen Struktur des Frameworks zu arbeiten und müsst teilweise sogar gegen sie ankämpfen, um eure Ideen umzusetzen. Außerdem besteht immer die Gefahr, dass ihr das Framework lernt, und nicht die Programmiersprache dahinter. Idealerweise solltet ihr in der Lage sein, etwas, das ihr in einem Framework umsetzt auch in Vanilla JS umzusetzen, oder von Vue auf React zu wechseln – praktisch ist das selten die Realität, aber versucht dennoch darauf zu achten nicht zu glauben, ihr könntet JavaScript programmieren, nur weil ihr Vue.js beherrscht. Wie schon zuvor erwähnt, seid ihr auch an das Framework gebunden und davon abhängig, es ist also wichtig, dass das Framework regelmäßig gewartet wird und ihr die Updates in eure Anwendungen einspielt auch wenn das bedeutet, dass ihr eventuell eure Anwendungen und ihren Code anpassen müsst, damit sie noch unter der neuen Version des Frameworks läuft. Wenn ihr also ein Framework auswählt, achtet darauf, dass es stabil, open source, und vor allem gut gewartet (auf Englisch „maintained“) ist. Ein guter Indikator dafür ist das Git-Repository des Frameworks, wo ihr sehen könnt, wann das letzte Mal Änderungen committed wurden.

Vue.js erfüllt diese Kriterien und hat zudem noch den Vorteil, dass es ein progressives Framework ist, also nach und nach in eine Website, oder App integriert werden kann, was die Einschränkungen, die durch die Benutzung eines Frameworks entstehen etwas negiert.

Für kleine und einfache Projekte macht es unter Umständen also keinen Sinn, ein Framework zu benutzen, aber sobald ihr an etwas Komplexerem arbeitet, solltet ihr das richtige Framework für die Aufgabe aussuchen und verwenden. Spezielle Libraries für andere spezifische Aufgaben und Probleme könnt ihr dann im Nachhinein noch immer hinzufügen.

Welche Frontend-Frameworks gibt es?

Zunächst einmal unterscheidet man bei Frameworks auch zwischen Backend- und Frontend-Frameworks, da sich die beiden Bereiche oftmals stark voneinander unterscheiden. Da wir uns in diesem Kurs aber wie bereits angemerkt auf das Frontend konzentrieren, werde ich hier auch nur auf Frontend-Frameworks eingehen, sogar noch spezifischer JavaScript-Frameworks, weshalb ich CSS-Frameworks wie Bootstrap auslassen werde.

Frontend-Frameworks gibt es wie Sand am Meer und es vergeht keine Woche, ohne dass ein neues Framework auftaucht. Wie mit Programmiersprachen haben unterschiedliche Entwickler verschiedene Vorstellungen davon, was ein gutes Framework ausmacht und welche Ziele damit erreicht werden sollen. Deshalb entstehen immer neue Frameworks und alte sterben aus.

Aktuell sind die drei größten und bekanntesten Frameworks React, Angular und Vue, aber neue Konzepte wie Svelte stehen schon in den Startlöchern und alte Koryphäen wie Backbone klammern sich noch an den Erfolg vergangener Zeiten.

React ist das aktuell wohl am weitesten Verbreitete Frontend-Framework. Es wurde von Facebook erstellt, ist aber als open-source software für alle frei verfügbar (wenn man von einem kleinen Lizenz-Fettnäpfchen einmal absieht). Es bietet sehr viele Funktionen und Konzepte, ist meiner Meinung nach allerdings auch recht komplex und unübersichtlich.

Angular ist eines der ältesten Frontend-Frameworks, hat aber auch heute noch vor allem im Corporate-Bereich eine weite Verbreitung. Es wurde von Google geschaffen und wird auch heute noch von dem Suchmaschinenriesen weiterentwickelt. Bedingt durch seine Popularität und seinen breiten Funktionsumfang, wurde Angular schwer und unhandlich zu benutzen, was die neue Version Angular2 zur Folge hatte, die allerdings mit Angular vollkommen inkompatibel war und durch Fehlende Upgrade-Anleitungen eine große Mehrheit der Entwickler dazu brachte, sich davon abzuwenden.

Vue.js ist ein vergleichsweise junges Frontend-Framework, das von einem ehemaligen Google-Mitarbeiter, Evan You, eigentlich als eine Art Hilfestellung für seine eigene Arbeit bei Google entwickelt wurde, aber nach seiner Veröffentlichung auch bedingt durch seine Einsteigerfreundlichkeit sehr schnell an Popularität gewann und dadurch heute auch ohne die Unterstützung einer großen Softwarefirma durchaus mit Angular und React mithalten kann. Wenn ihr euch für die Geschichte und den Erfolg von Vue interessiert, kann ich euch diesen Dokumentationsfilm empfehlen.

Vue wird oft nachgesagt, dass es das Beste aus Angular und React in sich vereint und dabei dennoch einfach zu verstehen und zu lernen ist. Ich persönlich habe einige Frontend-Frameworks ausprobiert, bin aber zu dem Schluss gekommen, dass Vue für mich und meine Einsatzzwecke die beste Lösung ist. Besonders die klare und gut verständliche Dokumentation von Vue.js machen es meiner Meinung nach zum idealen Framework für Einsteiger.

Wie verwendet man ein Frontend-Framework?

Wie genau ein Frontend-Framework verwendet wird, unterscheidet sich von Framework zu Framework. Manchmal reicht es schon, einfach das Skript über ein <script>-Element in das HTML zu importieren und man kann anfangen, es zu verwenden. Für größere Projekte und reifere Frameworks gibt es oftmals eigene Programme, die dabei helfen, ein Projekt aufzusetzen und schnell mit der eigentlichen Umsetzungen zu beginnen. Da diese Programme fast immer über das Terminal verwendet werden, nennt man sie auch CLIs, was für „Command Line Interfaces“ steht. Im Falle von Node.js und Frontend-JavaScript- Frameworks können die CLIs für alle großen Frameworks und auch Vue einfach über npm installiert werden – dazu mehr in der nächsten Session.

Vue bietet beide Optionen: ein einfaches Skript zum direkten Import im HTML, und eine umfangreiche CLI für große Projekte. Wir werden in dieser Session das Skript verwenden und uns in der nächsten Session mit der CLI auseinandersetzen.

Das Skript mit der Entwicklungsversion, also einer Version, die euch nützliche Fehlermeldungen und Warnungen ausgibt, könnt ihr folgendermaßen in euer HTML importieren:

<!-- vor dem </body>-Tag und euren eigenen Skripten -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Habt ihr euer Framework mit eurer Seite verknüpft seid ihr bereit, es zu benutzen. Wie genau das passiert kommt wieder auf euer Framework an, aber wie es in Vue geht werden wir uns jetzt genauer ansehen.

Also Vue.js – Los geht’s!

Das Kernprinzip von Vue ist die interaktive Verbindung eurer Darstellung mit euren Daten, was auch „declarative rendering“ genannt wird. Konkret bedeutet das, dass ihr über eine spezielle Template-Syntax Variablen aus eurem JavaScript in euer HTML aufnehmen könnt und Vue diese in Echtzeit mit den aktuellen Werten austauscht, daher auch der Name „Vue“, ausgesprochen wie „view“, Englisch für „Ansicht“.

Content-Bindings

Anstatt also in JavaScript eine Referenz auf euer HTML-Element aufbauen zu müssen und dann den mit innerText den Inhalt zu ändern, könnt ihr einfach folgendes schreiben:

<!-- restliches HTML ist impliziert -->
<div id="app">
  <p>{{message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello world!',
    },
  });
</script>
<!-- restliches HTML ist impliziert -->

Wenn ihr diese Seite in eurem Browser öffnet, werdet ihr einfach den Paragraphen mit „Hello world!“ sehen, da das der Wert der Variablen message ist. Das Besondere ist aber, das Vue im Hintergrund ein sogenanntes „reactive“- Databinding geschaffen hat. Das bedeutet, dass wann immer ihr den Wert von message ändert, diese Änderung automatisch auch im HTML sichtbar sein wird.

Ihr könnt das ausprobieren, indem ihr die Konsole eures Browsers öffnet und app.message auf einen beliebigen anderen Wert setzt. Euer HTML wird sich demensprechend aktualisieren.

Was genau passiert in unserem Beispiel also? Wir erstellen zunächst mit const app = new Vue() eine neue Vue-Instanz und legen diese in der Variablen app ab. Beim Erstellen dieser Instanz übergeben wir ein Objekt mit verschiedenen Optionen:

• el: '#app' bedeutet, dass die Vue-Instanz alles innerhalb des Elements mit der ID „app“ kontrollieren soll, in unserem Fall also das <div>-Element
• data: {…} ist ein spezielles Objekt, das alle Daten enthält, die Vue an das kontrollierte HTML binden soll

WICHTIG: da wir Vue anweisen, dass es alles in der <div id="app"> kontrollieren soll, sollten wir nicht mehr mit dem HTML darin interagieren, sondern alles Vue machen lassen! Solltet ihr versuchen mit querySelector('#app p').innerText zu arbeiten, kann das zu Fehlern führen. Merkt euch also: das HTML innerhalb eines von Vue kontrollierten Elements ist erst einmal tabu, außer ihr wisst, was ihr tut.

Ähnlich wie in einem Template-String, den ihr mit Backticks (`) definiert, ist auch in Vue der Code zwischen den beiden geschweiften Klammern in JavaScript und wird als solches ausgeführt:

<!-- restliches HTML ist impliziert -->
<div id="app">
  <p>{{message}}. Jetzt ist der {{new Date().toLocaleString()}}!</p>
</div>
<!-- restliches HTML und JS ist impliziert -->

In diesem Beispiel erstellt new Date() ein Datums-Objekt und ruft eine Funktion dieses Objektes auf, dass das Datum in ein menschlich-lesbares konvertiert. Vue.js sorgt dafür, dass wir nicht das JavaScript sehen, sondern den return-Wert dieser Funktion.

Attribut-Bindings

Ihr wisst jetzt also, wie ihr den Inhalt eines HTML-Elements mit Vue manipulieren könnt. Aber was ist mit Attributen? Das ist natürlich auch kein Problem. Für Attribute verwendet ihr eine sogenannte „Directive“, die v-bind- Directive:

<!-- restliches HTML ist impliziert -->
<div id="app">
  <p v-bind:title="titleMessage">{{message}}. Hover me!</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello world!',
      titleMessage: `Es ist der ${new Date().toLocaleString()}`,
    },
  });
</script>
<!-- restliches HTML ist impliziert -->

Wenn ihr jetzt mit der Maus den Text berührt und kurz wartet, werdet ihr einen Tooltip mit dem Inhalt von titleMessage sehen, und wie immer gilt: wenn ihr den Wert mit JS ändert, ändert er sich auch im HTML. Da v-bind eine so häufige Directive ist, könnt ihr sie auch einfach mit : abkürzen, also <p :title="…".

Wenn ihr style oder class Attribute mit einem v-bind verseht, könnt ihr zudem mit spezieller Syntax gleich mehrere Klassen und Styles dynamisch binden. Wir werden das in der nächsten Session im Detail besprechen, aber falls ihr neugierig seid, könnt ihr hier schon mehr darüber lesen.

Schleifen und Bedingungen

Eine weitere Besonderheit von Vue ist es, dass ihr durch Vue JavaScript-Konzepte wie Schleifen und Bedingungen auch in euren Templates verwenden könnt. Das geschieht über die Directives v-if, v-else, v-else-if und v-for. Falls ihr zudem nur ein Element verstecken, es aber nicht ganz entfernen wollt, könnt ihr außerdem noch v-show verwenden.

Diese Directives funktionieren prinzipiell wie ihre Gegenstücke in JS: wenn die Bedingung in v-iftrue ist, wird das Element angezeigt, ansonsten werden die Bedingungen in v-else-if-Directives überprüft und wenn keine Zutrifft, wird das Element mit v-else angezeigt, falls es existiert. Dabei sind v-else-if und v-else immer optional. Bei v-show gilt: wenn die Bedingung true ist, wird das Element angezeigt, wenn die Bedingung false ist, dann nicht.

v-for funktioniert etwas anders, nämlich nach dem Prinzip eines for…in-Loops: v-for="todo in todos" würde zum Beispiel das Element für jeden Datensatz innerhalb eines Arrays in der Variablen todos anzeigen und die Inhalte des Datensatzes in der temporären Variable todo abspeichern. Das lässt sich über ein Beispiel besser zeigen, aber zuvor noch ein Hinweis darauf, dass v-for sehr mächtig ist und viele Funktionen bietet, die ihr hier nachlesen könnt.

<!-- restliches HTML ist impliziert -->
<div id="app">
  <ul>
    <li v-for="todo in todos">{{todo}}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      todos: [
        'Vorlesung anhören',
        'Praxis üben',
        'Abgabe rocken'
      ]
    },
  });
</script>
<!-- restliches HTML ist impliziert -->

Auch hier gilt: die Daten sind reactive, das heißt, wenn ihr in der Konsole eures Browsers app.todos.push('neues Todo') eingebt, wird es sofort auch in eurem HTML erscheinen. Später werden wir auch das spezielle <transition>- Element von Vue kennenlernen, das es euch erlaubt Veränderungen, die durch diese Directives hervorgerufen werden zu animieren. 😁

Benutzereingaben

Ein großer Teil, bei dem Vue uns auch behilflich ist, sind Benutzereingaben, sei es Klicks, oder Textfelder und dergleichen. Mit der v-on:eventName- Directive könnt ihr deklarativ Event-Listener an eure Elemente anbringen, die dann mit Funktionen innerhalb der Vue-Instanz verknüpft werden:

<!-- restliches HTML ist impliziert -->
<div id="app">
  <p>Button clicked: {{clicked}}</p>
  <button v-if="!clicked" type="button" v-on:click="handleClick">Click Me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      clicked: false
    },
    methods: {
      handleClick() {
        this.clicked = true;
      },
    },
  });
</script>
<!-- restliches HTML ist impliziert -->

Hier könnt ihr den neuen Block methods sehen, in dem wir Funktionen definieren, die wir dann an anderen Orten, zum Beispiel dem Template aufrufen können. Die Besonderheit hier ist, dass Vue dafür sorgt, dass das Schlüsselwort this in diesen Funktionen immer auf die aktuelle Vue-Instanz zeigt, weshalb wir hier einfach die Daten ändern können. Vue kümmert sich dann darum, dass diese Änderungen auch im HTML reflektiert werden. Also nochmal: ihr Arbeitet nur mit den Daten in der Vue-Instanz und fasst euer HTML nicht mehr an!

Klickt ihr im Beispiel den Button, wird die Funktion handleClick aufgerufen, die den Wert der Variablen clicked auf true setzt. Das hat zwei Auswirkungen im HTML: einerseits wird der Inhalt des Paragraphen aktualisiert und andererseits wird der Button entfernt, denn sein v-if ist jetzt nicht mehr true. (Zur Erinnerung: ! negiert in JavaScript eine Bedingung.)

Event-Handler mit v-on sind eine weitere Funktion, die ihr sehr oft verwenden werdet, weshalb die Directive auch mit einem @ abgekürzt werden kann: @eventName="funktion", in unserem Beispiel: <button … @click="handleClick" …>.

Wenn ihr auf der anderen Seite gerne den Wert eines input-Elements in einer Variablen speichern möchtet, könnt ihr das über die v-model-Directive tun. Diese Directive erstellt ein reaktives Binding zwischen dem Wert eines <input>- Felds und einer Variablen in eurer Vue-Instanz, die sich gegenseitig beeinflussen:

<!-- restliches HTML ist impliziert -->
<div id="app">
  <p>Eingabe: {{input || 'Nichts'}}</p>
  <input v-model="input" type="text">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      input: 'Hier ist Text'
    },
  });
</script>
<!-- restliches HTML ist impliziert -->

Wie ihr seht ist es so deutlich einfacher, mit Nutzereingaben umzugehen und die daraus generierten Daten weiterzuverwenden.

Components

Ich hatte ja zuvor schon einmal angemerkt, dass Vue es einfach macht Components anzulegen, die ihr wie Bausteine immer wieder verwenden könnt. Um Components in eigenen Dateien ablegen zu können, ist etwas mehr Aufwand nötig, deshalb befassen wir uns damit erst in der nächsten Session. Hier nur die Grundzüge zum Verständnis.

Components sind im Endeffekt kleine Vue-Instanzen mit ihren eigenen Daten und Methoden, sowie ihrem eigenen Template, also HTML, das sie kontrollieren. Um mit anderen Vue-Instanzen zu kommunizieren, verwenden Components sogenannte props, die wie HTML-Attribute funktionieren, und Events. Dabei könnt ihr euch merken, dass Props immer Daten in das Component hinein geben und Events immer Daten aus dem Component hinaus führen.

Zusammenfassendes Beispiel

Wenn wir all diese Konzepte jetzt vereinen, können wir eine erste kleine ToDo- App bauen:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My First ToDo App</title>
    <style media="screen">
      ul {
        list-style: circle;
      }

      .done {
        text-decoration: line-through;
        list-style: disc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- Hier verwenden wir unser Component und v-for, was einen key nötig macht -->
        <!-- Wir übergeben das aktuelle todo als Prop dem Component, damit es die Daten hat -->
        <!-- Außerdem sendet unser Component ein "done"-Event, mit dem wir hier umgehen -->
        <!-- Dank Vue können wir hier sogar direkt ein Argument unserer Funktion übergeben -->
        <!-- In diesem Fall ist das der Index des Todos im Array, damit wir immer wissen, welches gemeint ist -->
        <todo-item v-for="(todo, index) in todos" :key="index" :todo="todo" @done="toggleDone(index)" />
      </ul>
      <!-- Dank v-model wissen wir immer, welchen Text der Nutzer gerade eingegeben hat -->
      <!-- Das '.enter' nach unserem keyup-Handler bedeutet, dass das Event nur für die Enter-Taste gilt -->
      <input v-model="newTodo" placeholder="New Todo" type="text" @keyup.enter="addTodo">
      <!-- Hier sehen wir, warum es wichtig ist Funktionen zu schreiben: -->
      <!-- Wäre addTodo keine Funktion, müssten wir den selben Code zwei Mal schreiben -->
      <button v-if="newTodo" type="button" @click="addTodo">Add</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // Hier definieren wir unser Component mit dem Namen 'todo-item'
      // Es akzeptiert eine einzelne Prop: ein todo-Objekt
      // Es hat ein einfaches Template, das mit diesen Daten umgeht
      // und bei einem Klick ein "done"-Event sendet
      Vue.component('todo-item', {
        props: ['todo'],
        // Die Backslashes (\) vor den geschweiften Klammern ({}) sind nicht notwendig und werden nur zur Darstellung auf dieser Website gebraucht
        // Ihr müsst sie in eurem Code ganz normal als {{}} schreiben
        template: '<li :class="{done: todo.done}" @click="$emit(\'done\')">\{{todo.text}\}</li>'
      });

      const app = new Vue({
        el: '#app',
        data: {
          newTodo: '',
          todos: [
            { text: 'Vorlesung anhören', done: true },
            { text: 'Praxis üben', done: false },
            { text: 'Abgabe rocken', done: false },
          ],
        },
        methods: {
          addTodo() {
            this.todos.push({ text: this.newTodo, done: false });
            this.newTodo = '';
          },
          toggleDone(index) {
            // dieser Code kehrt den Wert einer Variable in sein Gegenteil
            // aus true wird false und andersherum
            this.todos[index].done = !this.todos[index].done;
          },
        },
      });
    </script>
  </body>
</html>

So, ToDo-Liste ist geschrieben und funktioniert, damit ist der Kurs dann wohl vorbei. 😉 Wie ihr seht, war es recht einfach, eine schnelle Anwendung zu schreiben – glaubt mir einfach, dass es deutlich schwieriger gewesen wäre das in Vanilla JS umzusetzen, falls ihr es nicht selbst schon erahnen könnt.

Nein, natürlich nicht, aber im Prinzip wisst ihr jetzt schon fast alles, was ihr für eure eigenen Apps wissen müsst. Der Rest sind Spezifika und Möglichkeiten, euren Code besser und dadurch euer Leben leichter zu machen.

Praxis

Macht euch keine Sorgen, wenn ihr bestimmte Konstrukte von Vue noch nicht zu 100% versteht. Das hier war nur eine grobe Einführung, in der nächsten Session werden wir in die Tiefe gehen und hoffentlich wird euch allen dann klar werden, wie die Zusammenhänge sind.

Wie immer ist es aber trotzdem gut, wenn ihr euch die Beispiele noch einmal in Ruhe vor Augen führt und mit ihnen herumprobiert und nachfragt, wenn irgendetwas noch so gar keinen Sinn macht.

Zahlenratespiel 3.0

Wie ihr euch vielleicht denken könnt, ist es heute an der Zeit, euer Zahlenratespiel mit GUI aus der letzten Session in Vue.js umzusetzen.

Schreibt es also bitte noch einmal neu, aber verwendet diesmal Vue.js und manipuliert das DOM nicht von Hand. Components braucht ihr noch keine zu verwenden, aber versucht die heute besprochenen Directives einzusetzen und so wenig Code wie möglich schreiben zu müssen.

Abschluss Gestaltung

Nach dem Ende der heutigen Praxiszeit sollte die Gestaltung eurer Apps abgeschlossen sein, damit ihr euch ab nächster Woche voll und ganz auf die technische Umsetzung konzentrieren könnt.

Falls ihr also Feedback zur Gestaltung möchtet, ist jetzt die letzte Chance dafür! Schickt mir eure Screens oder ladet mich in euer Figma-Dokument ein, falls das noch nicht passiert ist – und vor allem stellt konkrete Fragen, wenn ihr welche habt.

Es ist soweit: die Halbzeit ist um und wir rudern auf das Finale zu. In anderen Worten: jetzt wird’s ernst. 😉 In der nächsten Session werden wir voll und ganz in Vue.js eintauchen und die wichtigsten Konzepte des Frameworks verstehen und anwenden, sowie die Vue CLI benutzen, um die Projektstrukturen für eure Apps zu generieren. 🎉