JavaScript-Frameworks und -Bibliotheken

Sie sollten wirklich zuerst die Grundlagen der Kern-Websprachen lernen, bevor Sie versuchen, clientseitige Frameworks zu erlernen — HTML, CSS und insbesondere JavaScript.

Ihr Code wird dadurch reichhaltiger und professioneller, und Sie werden Probleme sicherer beheben können, wenn Sie die grundlegenden Funktionen der Webplattform verstehen, auf denen die Frameworks aufbauen.

Einführung in clientseitige Frameworks

Wir beginnen unseren Blick auf Frameworks mit einem allgemeinen Überblick, einschließlich einer kurzen Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man damit beginnt, ein Framework zum Lernen auszuwählen, und welche Alternativen es zu clientseitigen Frameworks gibt.

Hauptfeatures von Frameworks

Jedes große JavaScript-Framework hat einen anderen Ansatz zur Aktualisierung des DOM, zum Umgang mit Browserevents und zur Bereitstellung einer angenehmen Entwicklererfahrung. Dieser Artikel untersucht die Hauptfeatures der „großen Vier“-Frameworks, wie Frameworks tendenziell aus einer hohen Ebene arbeiten und die Unterschiede zwischen ihnen.

Erste Schritte mit React

In diesem Artikel begrüßen wir React. Wir werden ein wenig über den Hintergrund und die Anwendungsfälle erfahren, eine grundlegende React-Toolchain auf unserem lokalen Computer einrichten und eine einfache Starter-App erstellen und damit experimentieren, um ein wenig über das Funktionsweise von React zu lernen.

Anfang unserer React ToDo-Liste

Nehmen wir an, uns wurde die Aufgabe übertragen, einen Proof-of-Concept in React zu erstellen – eine App, die es Benutzern ermöglicht, Aufgaben hinzuzufügen, zu bearbeiten und zu löschen, an denen sie arbeiten möchten, und Aufgaben als erledigt zu markieren, ohne sie zu löschen. Dieser Artikel wird Sie durch das Aufstellen der grundlegenden App-Komponentenstruktur und Stilführung führen, bereit für die spätere Definition und Interaktivität einzelner Komponenten.

Komponentisierung unserer React-App

Zu diesem Zeitpunkt ist unsere App ein Monolith. Bevor wir sie funktional machen können, müssen wir sie in handhabbare, beschreibende Komponenten zerlegen. React hat keine strikten Regeln dafür, was als Komponente gilt und was nicht - das liegt bei Ihnen! In diesem Artikel zeigen wir Ihnen einen sinnvollen Weg, um unsere App in Komponenten zu zerlegen.

Reaktivität in React: Events und Zustand

Mit unserem Komponentenschema ausgearbeitet, ist es jetzt an der Zeit, unsere App von einer komplett statischen Benutzeroberfläche zu einer zu aktualisieren, die uns tatsächlich erlaubt, zu interagieren und Dinge zu ändern. In diesem Artikel werden wir dies tun und dabei auf Events und Zustand eingehen.

Reaktive Interaktivität in React: Bearbeiten, Filtern, bedingte Darstellung

Da wir uns dem Ende unserer React-Reise nähern (zumindest vorerst), fügen wir den letzten Schliff an den Hauptbereichen der Funktionalität unserer ToDo-Listen-App hinzu. Dazu gehört das Erlauben, vorhandene Aufgaben zu bearbeiten und die Liste der Aufgaben zwischen allen, abgeschlossenen und unvollständigen Aufgaben zu filtern. Wir werden uns auch die bedingte UI-Darstellung ansehen.

Barrierefreiheit in React

In unserem letzten Tutorial-Artikel konzentrieren wir uns (Wortspiel beabsichtigt) auf Barrierefreiheit, einschließlich der Fokusverwaltung in React, die die Benutzerfreundlichkeit verbessern und Verwirrung sowohl für Benutzer, die nur mit der Tastatur arbeiten, als auch für Bildschirmleser reduzieren kann.

React Ressourcen

Unser letzter Artikel bietet Ihnen eine Liste von React-Ressourcen, die Sie nutzen können, um Ihr Lernen weiter voranzutreiben.

Erste Schritte mit Ember

In unserem ersten Ember-Artikel werden wir uns ansehen, wie Ember funktioniert und wofür es nützlich ist, die Ember-Toolchain lokal installieren, eine Beispiel-App erstellen und dann einige anfängliche Einstellungen vornehmen, um sie für die Entwicklung bereit zu machen.

Struktur und Komponentisierung der Ember-App

In diesem Artikel werden wir sofort mit der Planung der Struktur unserer TodoMVC Ember-App beginnen, indem wir das HTML dafür hinzufügen und diese HTML-Struktur in Komponenten aufteilen.

Reaktivität in Ember: Events, Klassen und Zustand

An diesem Punkt werden wir beginnen, unserem App-Interaktivität hinzuzufügen, indem wir die Möglichkeit bieten, neue To-Do-Elemente hinzuzufügen und anzuzeigen. Unterwegs werden wir uns ansehen, wie Events in Ember verwendet werden, Komponentenklassen erstellen, um JavaScript-Code zu enthalten, der interaktive Funktionen steuert, und einen Service einrichten, um den Datenzustand unserer App zu verfolgen.

Reaktivität in Ember: Footer-Funktionalität, bedingte Darstellung

Jetzt ist es an der Zeit, die Footer-Funktionalität in unserer App in Angriff zu nehmen. Hier werden wir den Zähler für die noch abzuschließenden To-Dos korrekt aktualisieren lassen, und die abgelaufenen To-Dos korrekt gestalten (d.h. wo das Kontrollkästchen aktiviert wurde). Wir werden auch unseren "Abgeschlossene löschen" Button verkabeln. Unterwegs lernen wir, wie wir konditionale Darstellungen in unseren Vorlagen verwenden.

Routing in Ember

In diesem Artikel lernen wir Routing oder URL-basiertes Filtern, wie es manchmal bezeichnet wird, kennen. Wir werden es nutzen, um eine einzigartige URL für jede der drei To-Do-Ansichten – „Alle“, „Aktiv“ und „Abgeschlossen“ – bereitzustellen.

Ember Ressourcen und Fehlerbehebung

Unser letzter Ember-Artikel bietet Ihnen eine Liste von Ressourcen, die Sie nutzen können, um Ihr Wissen zu vertiefen, sowie einige hilfreiche Informationen zur Fehlerbehebung und mehr.

Erste Schritte mit Vue

Lassen Sie uns nun Vue vorstellen, das dritte unserer Frameworks. In diesem Artikel betrachten wir ein wenig den Hintergrund von Vue, lernen, wie man es installiert und ein neues Projekt erstellt, studieren die hochgradige Struktur des gesamten Projekts und einer einzelnen Komponente, sehen, wie man das Projekt lokal ausführt und es bereitmacht, um mit dem Bau unseres Beispiels zu beginnen.

Erstellen unserer ersten Vue-Komponente

Nun ist es an der Zeit, tiefer in Vue einzusteigen und unsere eigene benutzerdefinierte Komponente zu erstellen — wir beginnen damit, eine Komponente zu erstellen, die jeden Punkt auf der To-Do-Liste darstellt. Unterwegs lernen wir einige wichtige Konzepte kennen, wie man Komponenten in anderen Komponenten aufruft, Daten über Props an sie übergibt und den Datenzustand speichert.

Rendern einer Liste von Vue-Komponenten

An diesem Punkt haben wir eine voll funktionsfähige Komponente; wir sind jetzt bereit, unserer App mehrere ToDoItem-Komponenten hinzuzufügen. In diesem Artikel werden wir uns ansehen, wie wir eine Reihe von To-Do-Elementdaten zu unserer App.vue-Komponente hinzufügen, die wir dann durchlaufen und in ToDoItem-Komponenten mithilfe der v-for-Direktive anzeigen.

Hinzufügen eines neuen To-Do-Formulars: Vue-Events, Methoden und Modelle

Wir haben jetzt Beispieldaten eingerichtet und eine Schleife, die jedes Stück Daten nimmt und in einem ToDoItem in unserer App rendert. Was wir wirklich als nächstes brauchen, ist die Fähigkeit, unseren Benutzern die Eingabe ihrer eigenen To-Do-Elemente in die App zu ermöglichen, und dafür benötigen wir ein Text-, ein Event, das beim Übermitteln der Daten ausgelöst wird, eine Methode, die beim Übermitteln der Daten zum Hinzufügen der Daten an die Liste und das erneute Rendern der Liste ausgelöst wird, und ein Modell zur Steuerung der Daten. Das werden wir in diesem Artikel behandeln.

Styling von Vue-Komponenten mit CSS

Es ist endlich an der Zeit, unsere App ein wenig ansprechender aussehen zu lassen. In diesem Artikel werden wir die verschiedenen Möglichkeiten erkunden, Vue-Komponenten mit CSS zu stylen.

Verwendung von Vue-Berechneten Eigenschaften

In diesem Artikel fügen wir einen Zähler hinzu, der die Anzahl der abgeschlossenen To-Do-Elemente anzeigt, unter Verwendung eines Features von Vue, genannt berechneten Eigenschaften. Diese funktionieren ähnlich wie Methoden, werden aber nur erneut ausgeführt, wenn sich eine ihrer Abhängigkeiten ändert.

Bedingtes Rendern in Vue: Bearbeiten vorhandener To-Dos

Jetzt ist es Zeit, eine der Hauptfunktionalitäten hinzuzufügen, die uns noch fehlt - die Möglichkeit, vorhandene To-Do-Elemente zu bearbeiten. Um dies zu tun, werden wir Vuie's bedingte Renderfähigkeiten nutzen – nämlich v-if und v-else, um uns zwischen der vorhandenen To-Do-Elementansicht und einer Bearbeitungsansicht umzuschalten, in der Sie die Bezeichnung der To-Do-Elemente aktualisieren können. Wir werden auch die Funktionalität zum Löschen von To-Do-Elementen hinzufügen.

Vue-Referenzen und Lebenszyklusmethoden zur Fokusverwaltung

Wir sind fast fertig mit Vue. Das letzte Stück Funktionalität, das wir betrachten müssen, ist die Fokusverwaltung oder anders ausgedrückt, wie wir die Tastaturzugänglichkeit unserer App verbessern können. Wir werden uns ansehen, wie wir Vue-Referenzen verwenden können, um dies zu handhaben – ein fortgeschrittenes Feature, das Ihnen den direkten Zugriff auf die zugrunde liegenden DOM-Knoten unter dem virtuellen DOM oder direkten Zugriff von einer Komponente auf die interne DOM-Struktur einer untergeordneten Komponente ermöglicht.

Vue Ressourcen

Nun runden wir unser Studium von Vue ab, indem wir Ihnen eine Liste von Ressourcen zur Verfügung stellen, die Sie nutzen können, um Ihr Lernen fortzusetzen, plus einige andere nützliche Tipps.

Erste Schritte mit Svelte

In diesem Artikel bieten wir eine kurze Einführung in das Svelte-Framework. Wir werden sehen, wie Svelte funktioniert und was es von den bisher gesehenen Frameworks und Tools unterscheidet. Dann lernen wir, wie wir unsere Entwicklungsumgebung einrichten, eine Beispiel-App erstellen, die Struktur des Projekts verstehen und sehen, wie wir sie lokal ausführen und für die Produktion bauen.

Beginn unserer Svelte ToDo-Liste App

Jetzt, da wir ein grundlegendes Verständnis davon haben, wie Svelte funktioniert, können wir beginnen, unsere Beispiel-App: eine To-Do-Liste zu erstellen. In diesem Artikel werfen wir zunächst einen Blick auf die gewünschten Funktionen unserer App, dann erstellen wir eine Todos.svelte Komponente und stellen statisches Markup und Styles ein, damit alles bereit steht, um die Funktionen unserer To-Do-Liste App zu entwickeln, auf die wir in den folgenden Artikeln eingehen werden.

Dynamisches Verhalten in Svelte: Arbeit mit Variablen und Props

Jetzt, da wir unser Markup und unsere Styles bereit haben, können wir beginnen, die erforderlichen Funktionen für unsere Svelte To-Do-Liste App zu entwickeln. In diesem Artikel werden wir Variablen und Props verwenden, um unsere App dynamisch zu gestalten, damit wir To-Dos hinzufügen und löschen, als erledigt markieren und nach Status filtern können.

Komponentisierung unserer Svelte-App

Das Hauptziel dieses Artikels ist es, zu betrachten, wie wir unsere App in handhabbare Komponenten zerlegen und Informationen zwischen ihnen teilen können. Wir werden unsere App in Komponenten unterteilen und dann mehr Funktionalität hinzufügen, damit Benutzer vorhandene Komponenten aktualisieren können.

Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit

In diesem Artikel werden wir die finalen Funktionen der App hinzufügen und unsere App weiter komponentisieren. Wir lernen, wie wir mit reaktiven Problemen im Zusammenhang mit dem Aktualisieren von Objekten und Arrays umgehen. Um häufige Fallstricke zu vermeiden, müssen wir etwas tiefer in das Reaktivitätssystem von Svelte eintauchen. Wir werden auch einige Barrierefreiheitsblendprobleme lösen und mehr.

Arbeiten mit Svelte Stores

In diesem Artikel zeigen wir eine andere Möglichkeit zum Umgang mit der Zustandsverwaltung in Svelte – Stores. Stores sind globale Datenrepositories, die Werte halten. Komponenten können sich auf Stores abonnieren und Benachrichtigungen erhalten, wenn sich ihre Werte ändern.

TypeScript-Unterstützung in Svelte

Wir werden nun lernen, wie man TypeScript in Svelte-Anwendungen verwendet. Zuerst werden wir lernen, was TypeScript ist und welche Vorteile es uns bringen kann. Dann sehen wir, wie wir unser Projekt konfigurieren, um mit TypeScript-Dateien zu arbeiten. Schließlich gehen wir durch unsere App und sehen, welche Änderungen wir vornehmen müssen, um die Vorteile der TypeScript-Funktionen voll auszuschöpfen.

Bereitstellung und nächste Schritte

In diesem letzten Artikel schauen wir uns an, wie Sie Ihre Anwendung bereitstellen und online bringen und teilen auch einige der Ressourcen, die Sie nutzen sollten, um Ihre Svelte-Lernreise fortzusetzen.

Erste Schritte mit Angular

In diesem Artikel betrachten wir, was Angular zu bieten hat, installieren die Voraussetzungen und richten eine Beispiel-App ein, und betrachten die grundlegende Architektur von Angular.

Anfang unserer Angular ToDo-Liste App

An diesem Punkt sind wir bereit, mit der Erstellung unserer To-Do-Listenanwendung mit Angular zu beginnen. Die fertige Anwendung zeigt eine Liste von To-Do-Elementen an und umfasst Editier-, Lösch- und Hinzufügefunktionen. In diesem Artikel lernen Sie die Struktur Ihrer Anwendung kennen und arbeiten daran, eine grundlegende Liste von To-Do-Elementen anzuzeigen.

Styling unserer Angular-App

Jetzt, da wir unsere grundlegende Anwendungsstruktur eingerichtet haben und beginnen, etwas Nützliches anzuzeigen, wechseln wir die Gänge und verbringen einen Artikel damit, zu betrachten, wie Angular das Styling von Anwendungen handhabt.

Erstellen einer Einzelkomponente

Komponenten bieten Ihnen eine Möglichkeit, Ihre Anwendung zu organisieren. Dieser Artikel führt Sie durch die Erstellung einer Komponente zur Verwaltung der einzelnen Elemente in der Liste und das Hinzufügen von Prüf-, Bearbeitungs- und Löschfunktionen. Das Angular-Event-Modell wird hier behandelt.

Filtern unserer To-Do-Elemente

Lassen Sie uns jetzt zur Hinzufügung von Funktionen übergehen, die es Benutzern ermöglichen, ihre To-Do-Elemente zu filtern, damit sie aktive, vollständige oder alle Elemente anzeigen können.

Erstellung von Angular-Anwendungen und weitere Ressourcen

Dieser letzte Angular-Artikel behandelt, wie man eine App bereit für die Produktion baut und bietet weitere Ressourcen, damit Sie Ihre Lernerfahrung fortsetzen können.

Wir decken in unseren Tutorials fünf Frameworks ab — Angular, Ember, React/ReactDOM, Svelte und Vue:

• Sie sind beliebte Optionen, die eine Weile bestehen bleiben werden – wie bei jedem Software-Tool, ist es gut, bei aktiv entwickelten Optionen zu bleiben, die wahrscheinlich nicht nächste Woche eingestellt werden und die wünschenswerte Ergänzungen zu Ihren Fähigkeiten sind, wenn Sie einen Job suchen.
• Sie haben starke Communities und gute Dokumentationen. Es ist sehr wichtig, Hilfe beim Lernen eines komplexen Themas erhalten zu können, besonders wenn Sie gerade erst anfangen.
• Wir haben nicht die Ressourcen, um alle modernen Frameworks abzudecken. Diese Liste auf dem neuesten Stand zu halten wäre sowieso sehr schwierig, da ständig neue auftauchen.
• Als Anfänger ist es ein sehr reales Problem, sich zu entscheiden, worauf man sich bei der gigantischen Anzahl an verfügbaren Optionen konzentrieren sollte. Die Liste kurz zu halten ist daher hilfreich.

Wir möchten dies von vornherein klarstellen — wir haben nicht die Frameworks ausgewählt, auf die wir uns konzentrieren, weil wir sie für die besten halten oder sie in irgendeiner Weise unterstützen. Wir glauben einfach, dass sie in den oben genannten Kriterien hoch punkten.

• Übersicht: Kernlernmodule
• Weiter