Verständnis von clientseitigen JavaScript-Frameworks

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

Ihr Code wird dadurch reicher und professioneller, und Sie werden in der Lage sein, Probleme mit mehr Selbstbewusstsein zu beheben, wenn Sie die grundlegenden Funktionen der Webplattform verstehen, auf denen die Frameworks aufbauen.

1. Einführung in clientseitige Frameworks

Wir beginnen unseren Blick auf Frameworks mit einer allgemeinen Übersicht über das Gebiet, schauen auf eine kurze Geschichte von JavaScript und Frameworks, warum Frameworks existieren und was sie uns bieten, wie man beginnt, die Wahl eines zu erlernenden Frameworks zu überdenken, und welche Alternativen es zu clientseitigen Frameworks gibt.

2. Hauptfunktionen von Frameworks

Jedes große JavaScript-Framework verfolgt einen anderen Ansatz zur Aktualisierung des DOM, zum Umgang mit Browserereignissen und zur Bereitstellung einer angenehmen Entwicklererfahrung. Dieser Artikel untersucht die Hauptfunktionen der „großen 4“-Frameworks und betrachtet, wie Frameworks im Allgemeinen funktionieren und die Unterschiede zwischen ihnen.

1. Einstieg in React

In diesem Artikel begrüßen wir React. Wir entdecken ein wenig über den Hintergrund und die Anwendungsfälle, richten eine grundlegende React-Toolchain auf unserem lokalen Computer ein und erstellen eine einfache Starter-App, mit der wir uns mit der Funktionsweise von React vertraut machen können.

2. Beginn unserer React-to-do-Liste

Angenommen, wir haben die Aufgabe, ein 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 auch Aufgaben als erledigt zu markieren, ohne sie zu löschen. Dieser Artikel führt Sie durch die Erstellung der grundlegenden App-Komponentenstruktur und -Stil, bereit für die spätere Definition und Interaktivität einzelner Komponenten.

3. Komponentenisieren unserer React-App

An diesem Punkt ist unsere App ein Monolith. Bevor wir sie funktional machen, müssen wir sie in handhabbare, beschreibende Komponenten unterteilen. In diesem Artikel zeigen wir Ihnen eine sinnvolle Möglichkeit, unsere App in Komponenten aufzuteilen.

4. React-Interaktivität: Ereignisse und Zustand

Mit unserem Komponentenplan ist es nun an der Zeit, unsere App von einer komplett statischen Benutzeroberfläche hin zu einer, die uns tatsächlich erlaubt, zu interagieren und Dinge zu ändern, zu aktualisieren. In diesem Artikel werden wir dies tun und uns dabei in Ereignisse und Zustände einarbeiten.

5. React-Interaktivität: Bearbeiten, Filtern, bedingte Darstellung

Da wir gegen Ende unserer React-Reise sind (vorerst zumindest), fügen wir die letzten Schliffe an den Hauptfunktionen unserer To-do-Listen-App hinzu. Dies schließt die Möglichkeit ein, bestehende Aufgaben zu bearbeiten und die Liste der Aufgaben zwischen allen, erledigten und unerledigten Aufgaben zu filtern. Wir werden uns auf dem Weg die bedingte Darstellung von Benutzeroberflächen ansehen.

6. Barrierefreiheit in React

In unserem letzten Tutorial-Artikel konzentrieren wir uns auf (Wortspiel beabsichtigt) Barrierefreiheit, einschließlich des Fokus-Managements in React, das die Benutzerfreundlichkeit verbessern und Verwirrung sowohl bei Tastatur-only- als auch bei Screenreader-Nutzern reduzieren kann.

7. React-Ressourcen

Unser letzter Artikel bietet Ihnen eine Liste von React-Ressourcen, die Sie zur Vertiefung Ihres Lernerlebnisses nutzen können.

1. Einstieg in Ember

In unserem ersten Ember-Artikel betrachten wir, wie Ember funktioniert und wofür es nützlich ist, installieren die Ember-Toolchain lokal, erstellen eine Beispiel-App, und führen dann einige anfängliche Setups durch, um es für die Entwicklung vorzubereiten.

2. Ember-App-Struktur und Komponentenbildung

In diesem Artikel legen wir direkt mit der Planung der Struktur unserer TodoMVC Ember-App los, fügen das HTML dafür hinzu und zerlegen dann diese HTML-Struktur in Komponenten.

3. Ember-Interaktivität: Ereignisse, Klassen und Zustand

An diesem Punkt beginnen wir, unserer App Interaktivität hinzuzufügen, indem wir die Möglichkeit schaffen, neue To-dos hinzuzufügen und anzuzeigen. Dabei werden wir uns ansehen, wie man Ereignisse in Ember verwendet, Komponentenklassen erstellt, um JavaScript-Code zur Steuerung interaktiver Funktionen zu enthalten, und einen Dienst einrichtet, um den Datenzustand unserer App zu verfolgen.

4. Ember Interaktivität: Fußzeilenfunktionalität, bedingte Darstellung

Nun ist es an der Zeit, die Fußzeilenfunktionalität in unserer App anzugehen. Hier werden wir den To-do-Zähler aktualisieren, sodass er die korrekte Anzahl der noch zu erledigenden To-dos anzeigt und das Styling korrekt auf erledigte To-dos (d. h. bei denen das Kontrollkästchen aktiviert wurde) anwendet. Wir werden auch unseren „Abgeschlossen löschen“-Knopf anschließen. Dabei lernen wir, wie man in unseren Templates eine bedingte Darstellung verwendet.

5. Routing in Ember

In diesem Artikel lernen wir über Routing oder URL-basiertes Filtern, wie es manchmal genannt wird. Wir werden es verwenden, um eine eindeutige URL für jede der drei To-do-Ansichten - „Alle“, „Aktiv“ und „Abgeschlossen“ - bereitzustellen.

6. Ember-Ressourcen und Problemlösungen

Unser letzter Ember-Artikel bietet Ihnen eine Liste von Ressourcen, die Sie zur Vertiefung Ihres Lernens nutzen können, sowie einige nützliche Problemlösungen und weitere Informationen.

1. Einstieg in Vue

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

2. Erstellen unserer ersten Vue-Komponente

Nun ist es an der Zeit, tiefer in Vue einzutauchen und unsere eigene benutzerdefinierte Komponente zu erstellen – wir beginnen damit, eine Komponente zu erstellen, die jedes Element in der To-do-Liste darstellt. Unterwegs lernen wir einige wichtige Konzepte kennen, wie z. B. Komponenten in anderen Komponenten aufzurufen, ihnen Daten über Props zu übergeben und Datenbestände zu speichern.

3. Rendern einer Liste von Vue-Komponenten

Zu diesem Zeitpunkt haben wir eine voll funktionsfähige Komponente; jetzt sind wir bereit, mehrere ToDoItem-Komponenten zu unserer App hinzuzufügen. In diesem Artikel sehen wir uns an, wie man eine Menge To-do-Elementdaten zu unserer App.vue-Komponente hinzufügt, die wir dann durchlaufen und innerhalb von ToDoItem-Komponenten mit der v-for-Direktive anzeigen werden.

4. Hinzufügen eines neuen To-do-Formulars: Vue-Ereignisse, Methoden und Modelle

Wir haben jetzt Beispieldaten und eine Schleife, die jedes Datenbit nimmt und es in einem ToDoItem in unserer App rendert. Was wir wirklich als Nächstes benötigen, ist die Möglichkeit, unseren Benutzern das Hinzufügen ihrer eigenen To-do-Elemente in die App zu ermöglichen, und dafür benötigen wir ein Text-<input>, ein Ereignis, um bei der Dateneingabe ausgelöst zu werden, eine Methode, die beim Übermitteln ausgelöst wird, um die Daten hinzuzufügen und die Liste neu zu rendern, und ein Modell, um die Daten zu steuern. Auf diese Aspekte werden wir in diesem Artikel eingehen.

5. Styling von Vue-Komponenten mit CSS

Es ist endlich an der Zeit, unser App optisch etwas ansprechender zu gestalten. In diesem Artikel werden wir die verschiedenen Möglichkeiten zum Stylen von Vue-Komponenten mit CSS erkunden.

6. Verwendung von Vue-berechneten Eigenschaften

In diesem Artikel fügen wir einen Zähler hinzu, der die Anzahl der abgeschlossenen To-do-Elemente anzeigt, indem wir eine Funktion von Vue namens berechnete Eigenschaften verwenden. Diese funktionieren ähnlich wie Methoden, werden jedoch nur dann erneut ausgeführt, wenn sich eine ihrer Abhängigkeiten ändert.

7. Vue bedingte Darstellung: Bearbeiten bestehender To-dos

Jetzt ist es an der Zeit, eine der Hauptfunktionen, die uns noch fehlen, hinzuzufügen - die Möglichkeit, bestehende To-do-Elemente zu bearbeiten. Dazu werden wir die bedingten Darstellungsfunktionen von Vue - nämlich v-if und v-else - nutzen, um zwischen der vorhandenen To-do-Elementansicht und einer Bearbeitungsansicht zu wechseln, in der Sie die Bezeichnungen der To-do-Elemente aktualisieren können. Wir werden uns auch ansehen, wie man die Funktionalität zum Löschen von To-do-Elementen hinzufügt.

8. Vue-Referenzen und Lebenszyklusmethoden für das Fokus-Management

Wir sind fast fertig mit Vue. Das letzte Stück Funktionalität, das wir betrachten, ist das Fokus-Management oder mit anderen Worten, wie wir die Tastatur-Benutzerfreundlichkeit unserer App verbessern können. Wir werden uns ansehen, wie man Vue-Referenzen dafür verwendet – eine fortgeschrittene Funktion, die Ihnen direkten Zugriff auf die darunterliegenden DOM-Knoten unterhalb des virtuellen DOMs oder direkten Zugriff von einer Komponente auf die interne DOM-Struktur einer untergeordneten Komponente ermöglicht.

9. Vue-Ressourcen

Nun schließen wir unsere Studie von Vue ab, indem wir Ihnen eine Liste von Ressourcen zur Verfügung stellen, die Sie verwenden können, um Ihre Lernerfahrung zu vertiefen, und einige weitere nützliche Tipps.

1. Einstieg in Svelte

In diesem Artikel bieten wir eine schnelle Einführung in das Svelte-Framework. Wir werden sehen, wie Svelte funktioniert und was es von den anderen Frameworks und Tools unterscheidet, die wir bisher gesehen haben. Dann erfahren wir, wie man unsere Entwicklungsumgebung einrichtet, eine Beispiel-App erstellt, die Struktur des Projekts versteht und sieht, wie man sie lokal ausführt und für die Produktion baut.

2. Beginn unserer Svelte-To-do-Liste-App

Da wir nun ein grundlegendes Verständnis davon haben, wie die Dinge in Svelte funktionieren, können wir beginnen, unsere Beispiel-App zu erstellen: eine To-do-Liste. In diesem Artikel schauen wir uns zunächst die gewünschte Funktionalität unserer App an, dann erstellen wir eine Todos.svelte-Komponente und fügen statisches Markup und Stile hinzu, um alles bereit zu halten, um mit der Entwicklung der Funktionen unserer To-do-Listen-App zu starten, auf die wir in den folgenden Artikeln eingehen werden.

3. Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props

Nun, da wir unser Markup und unsere Stile bereit haben, können wir damit 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 machen, sodass wir To-dos hinzufügen und löschen, sie als erledigt markieren und sie nach Status filtern können.

4. Komponentenisierung unserer Svelte-App

Das zentrale Ziel dieses Artikels ist es, zu untersuchen, wie unsere App in handhabbare Komponenten aufgeteilt und Informationen zwischen ihnen geteilt werden können. Wir werden unsere App in Komponenten unterteilen und dann mehr Funktionalitäten hinzufügen, um den Benutzern zu ermöglichen, bestehende Komponenten zu aktualisieren.

5. Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit

In diesem Artikel werden wir die letzten Funktionen der App hinzufügen und unsere App weiter in Komponenten unterteilen. Wir werden lernen, wie man mit Reaktivitätsproblemen im Zusammenhang mit dem Aktualisieren von Objekten und Arrays umgeht. Um häufige Fallstricke zu vermeiden, werden wir etwas tiefer in das Reaktivitätssystem von Svelte eintauchen müssen. Wir werden uns auch mit der Lösung einiger Probleme im Zusammenhang mit der Fokus-Barrierefreiheit beschäftigen und mehr.

6. Arbeiten mit Svelte-Stores

In diesem Artikel zeigen wir eine weitere Möglichkeit, das Zustandsmanagement in Svelte zu handhaben – Stores. Stores sind globale Daten-Repositorien, die Werte speichern. Komponenten können sich auf Stores abonnieren und Benachrichtigungen erhalten, wenn sich deren Werte ändern.

7. TypeScript-Unterstützung in Svelte

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

8. Bereitstellung und nächste Schritte

In diesem letzten Artikel schauen wir uns an, wie man Ihre Anwendung bereitstellt und online stellt und teilen auch einige der Ressourcen, zu denen Sie weitergehen sollten, um Ihre Svelte-Lernreise fortzusetzen.

1. Einstieg in Angular

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

2. Beginn unserer Angular-To-do-Listen-App

An diesem Punkt sind wir bereit, unsere To-do-Liste-Anwendung mit Angular zu erstellen. Die fertige Anwendung wird eine Liste von To-do-Elementen anzeigen und enthält Funktionen zum Bearbeiten, Löschen und Hinzufügen. In diesem Artikel lernen Sie Ihre Anwendungsstruktur kennen und arbeiten daran, eine grundlegende Liste von To-do-Elementen anzuzeigen.

3. Styling unserer Angular-App

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

4. Erstellen einer Elementkomponente

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

5. Filtern unserer To-do-Elemente

Gehen wir nun weiter zur Hinzufügung von Funktionalität, die es Benutzern ermöglicht, ihre To-do-Elemente zu filtern, sodass sie aktive, erledigte oder alle Elemente anzeigen können.

6. Angular-Anwendungen erstellen und weitere Ressourcen

Dieser letzte Angular-Artikel behandelt, wie man eine App bereit für die Produktion erstellt und bietet Ihnen weitere Ressourcen, um Ihre Lernreise fortzusetzen.

Wir veröffentlichen unser anfängliches Set von Artikeln mit Leitfäden, die sich auf fünf Frameworks konzentrieren. Vier von ihnen sind sehr beliebt und etabliert – React/ReactDOM, Ember, Vue und Angular – während Svelte ein vergleichsweise neuer Mitspieler ist, der viel Potenzial zeigt und in letzter Zeit stark an Popularität gewonnen hat.

Es gibt eine Vielzahl von Gründen dafür:

• Sie sind beliebte Wahlmöglichkeiten, die noch eine Weile bestehen werden – wie bei jedem Software-Tool ist es gut, an aktiv entwickelten Optionen festzuhalten, die wahrscheinlich nicht nächste Woche eingestellt werden, und die wünschenswerte Ergänzungen zu Ihrem Fähigkeiten-Set darstellen, wenn Sie auf Jobsuche sind.
• Sie haben starke Communitys und gute Dokumentation. Es ist sehr wichtig, in der Lage zu sein, Hilfe beim Erlernen eines komplexen Themas zu bekommen, insbesondere wenn man gerade erst anfängt.
• Wir haben nicht die Ressourcen, alle modernen Frameworks abzudecken. Diese Liste wäre sowieso sehr schwierig auf dem neuesten Stand zu halten, da ständig neue erscheinen.
• Als Anfänger ist es ein sehr reales Problem, zu versuchen, aus der großen Anzahl an vorhandenen Optionen zu wählen, worauf man sich konzentrieren sollte. Daher ist es hilfreich, die Liste kurz zu halten.

Wir möchten dies im Voraus sagen — wir haben die Frameworks, auf die wir uns konzentrieren, nicht ausgewählt, weil wir denken, dass sie die besten sind oder weil wir sie in irgendeiner Weise unterstützen. Wir glauben nur, dass sie in den oben genannten Kriterien gut abschneiden.

Beachten Sie, dass wir hofften, beim ersten Erscheinen mehr Frameworks einzuschließen, uns aber dann entschieden haben, die Inhalte zu veröffentlichen und später mehr Framework-Leitfäden hinzuzufügen, anstatt sie länger zu verzögern. Wenn Ihr bevorzugtes Framework in diesen Inhalten nicht vertreten ist und Sie daran helfen möchten, dies zu ändern, zögern Sie nicht, es mit uns zu besprechen!