JavaScript Design Patterns lernen, 2. Auflage

Kapitel 1. Einführung in Design Patterns

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Guter Code ist wie ein Liebesbrief an den nächsten Entwickler, der ihn pflegen wird!

Design Patterns stellen ein gemeinsames Vokabular zur Verfügung, um den Code zu strukturieren, damit er leichter zu verstehen ist. Sie tragen dazu bei, die Qualität der Verbindung zu anderen Entwicklern zu verbessern. Die Kenntnis von Entwurfsmustern hilft uns, wiederkehrende Themen in den Anforderungen zu erkennen und sie auf definitive Lösungen abzubilden. Wir können uns auf die Erfahrungen anderer verlassen, die auf ein ähnliches Problem gestoßen sind und eine optimierte Methode entwickelt haben, um es zu lösen. Dieses Wissen ist von unschätzbarem Wert, denn es ebnet den Weg für das Schreiben oder Refactoring von Code, um ihn wartbar zu machen.

Ob auf dem Server oder dem Client, JavaScript ist ein Eckpfeiler der modernen Webanwendungsentwicklung. Die vorherige Ausgabe dieses Buches konzentrierte sich auf einige beliebte Entwurfsmuster im JavaScript-Kontext. Im Laufe der Jahre hat sich JavaScript als Sprache in Bezug auf Funktionen und Syntax erheblich weiterentwickelt. Sie unterstützt jetzt Module, Klassen, Pfeilfunktionen und Template-Literale, die es früher nicht gab. Außerdem gibt es fortschrittliche JavaScript-Bibliotheken und -Frameworks, die vielen Webentwicklern das Leben leichter machen. Wie relevant sind also Design Patterns im modernen JavaScript-Kontext?

Es ist wichtig zu wissen, dass Entwurfsmuster traditionell weder vorgeschrieben noch sprachspezifisch sind. Du kannst sie anwenden, wenn du meinst, dass sie passen, aber du musst es nicht. Wie Datenstrukturen oder Algorithmen kannst du klassische Entwurfsmuster auch in modernen Programmiersprachen anwenden, z. B. in JavaScript. In modernen Frameworks oder Bibliotheken, in denen sie bereits abstrahiert sind, brauchst du einige dieser Entwurfsmuster vielleicht nicht. Umgekehrt kann die Verwendung bestimmter Muster von einigen Frameworks sogar gefördert werden.

In dieser Ausgabe wählen wir einen pragmatischen Ansatz für Patterns. Wir werden untersuchen, warum bestimmte Muster für die Implementierung bestimmter Funktionen geeignet sind und ob ein Muster im modernen JavaScript-Kontext noch empfehlenswert ist.

Als die Anwendungen immer interaktiver wurden und eine große Menge an JavaScript benötigten, geriet die Sprache wegen ihrer negativen Auswirkungen auf die Leistung ständig in die Kritik. Entwicklerinnen und Entwickler sind ständig auf der Suche nach neuen Mustern, mit denen die Leistung von JavaScript optimiert werden kann. Diese Ausgabe hebt solche Verbesserungen hervor, wo immer sie relevant sind. Außerdem besprechen wir Framework-spezifische Muster wie React Hooks und Higher-Order Components, die im Zeitalter von React.js immer beliebter geworden sind.

Gehen wir einen Schritt zurück und erkunden wir zunächst die Geschichte und Bedeutung von Design Patterns. Wenn du mit dieser Geschichte bereits vertraut bist, kannst du gerne zu "Was ist ein Muster?

Geschichte der Design Patterns

Design Patterns lassen sich zurückverfolgen auf die frühe Arbeit eines Architekten namens Christopher Alexander. Er schrieb oft über seine Erfahrungen bei der Lösung von Designproblemen und wie sie sich auf Gebäude und Städte bezogen. Eines Tages fiel Alexander auf, dass bestimmte Designkonstrukte bei wiederholter Anwendung zu einem gewünschten optimalen Effekt führen.

Alexander hat in Zusammenarbeit mit zwei anderen Architekten, Sara Ishikawa und Murray Silverstein, eine Mustersprache entwickelt . Diese Sprache sollte jedem helfen, der in jeder Größenordnung entwerfen und bauen wollte. Sie veröffentlichten sie 1977 in einem Papier mit dem Titel "A Pattern Language", das später als komplettes Hardcover-Buch herauskam.

Um 1990 begannen Softwareentwickler, die von Alexander beschriebenen Prinzipien in die erste Dokumentation über Entwurfsmuster zu integrieren, um Anfängern die Möglichkeit zu geben, ihre Programmierkenntnisse zu verbessern. Es ist wichtig zu wissen, dass die Konzepte hinter den Entwurfsmustern in der Programmierbranche seit ihren Anfängen bekannt sind, wenn auch in einer weniger formalisierten Form.

Eines der ersten und wohl auch das bekannteste formale Werk, das über Entwurfsmuster in der Softwareentwicklung veröffentlicht wurde, war das Buch " Design Patterns"aus dem Jahr 1995 : Elements of Reusable Object-Oriented Software (Elemente wiederverwendbarer objektorientierter Software), geschriebenvon Erich Gamma, Richard Helm, Ralph Johnson und John Vlissides. Die meisten Ingenieurinnen und Ingenieure kennen diese Gruppe heute als die Gang of Four (GoF).

Die GoF-Publikation hat besonders dazu beigetragen, das Konzept der Entwurfsmuster in unserem Bereich weiter voranzutreiben. Sie beschreibt verschiedene Entwicklungstechniken und Fallstricke und enthält 23 zentrale objektorientierte Entwurfsmuster, die heute weltweit häufig verwendet werden. Wir werden diese Muster in Kapitel 6 ausführlicher behandeln, und sie bilden auch die Grundlage für unsere Diskussion in Kapitel 7.

Was ist ein Muster?

Ein Pattern ist eine wiederverwendbare Lösungsvorlage, die du auf wiederkehrende Probleme und Themen beim Softwaredesign anwenden kannst. Ähnlich wie bei anderen Programmiersprachen kannst du bei der Entwicklung einer JavaScript-Webanwendung die Vorlage verwenden, um deinen JavaScript-Code in verschiedenen Situationen zu strukturieren, in denen du glaubst, dass es hilfreich ist.

Das Erlernen und Anwenden von Entwurfsmustern ist für Entwickler vor allem aus folgenden Gründen von Vorteil:

Muster sind bewährte Lösungen.

Sie sind das Ergebnis der kombinierten Erfahrungen und Erkenntnisse der Entwickler, die an ihrer Definition beteiligt waren. Es sind bewährte Ansätze, die sich bei der Lösung bestimmter Probleme in der Softwareentwicklung bewährt haben.

Muster können leicht wiederverwendet werden.

Ein Muster liefert normalerweise eine fertige Lösung, die du übernehmen und an deine Bedürfnisse anpassen kannst. Diese Eigenschaft macht sie sehr robust.

Muster können ausdrucksstark sein.

Muster können dabei helfen, elegante Lösungen für umfangreiche Probleme mithilfe einer festen Struktur und eines gemeinsamen Vokabulars auszudrücken.

Weitere Vorteile, die Muster bieten, sind unter anderem die folgenden:

Muster helfen dabei, kleine Fehler zu vermeiden, die bei der Anwendungsentwicklung zu großen Problemen führen können.

Wenn du etablierte Muster zum Erstellen von Code verwendest, kannst du dich entspannt zurücklehnen und dich auf die Qualität der Gesamtlösung konzentrieren. Das Muster ermutigt dich dazu, strukturierteren und besser organisierten Code zu schreiben, sodass du ihn in Zukunft nicht mehr überarbeiten musst, um ihn sauber zu halten.

Muster bieten verallgemeinerte Lösungen, die so dokumentiert sind, dass sie nicht an ein bestimmtes Problem gebunden sein müssen.

Dieser verallgemeinerte Ansatz bedeutet, dass du Design Patterns anwenden kannst, um die Codestruktur unabhängig von der Anwendung (und in vielen Fällen auch von der Programmiersprache) zu verbessern.

Einige Muster können die Gesamtgröße der Codedatei verringern, indem sie Wiederholungen vermeiden.

Design Patterns regen Entwickler dazu an, ihre Lösungen genauer auf Bereiche hin zu untersuchen, in denen sie sofort eine Verringerung der Doppelarbeit erreichen können. Du kannst zum Beispiel die Anzahl der Funktionen, die ähnliche Prozesse ausführen, zugunsten einer einzigen verallgemeinerten Funktion reduzieren, um die Größe deiner Codebasis zu verringern. Das nennt man auch "Code trockener machen".

Muster erweitern den Wortschatz eines Entwicklers, was die Kommunikation beschleunigt.

Entwickler können auf das Muster verweisen, wenn sie mit ihrem Team kommunizieren, wenn sie es in der Design Patterns Community diskutieren oder indirekt, wenn ein anderer Entwickler den Code später pflegt.

Beliebte Design Patterns können weiter verbessert werden, indem die kollektiven Erfahrungen von Entwicklern, die diese Patterns verwenden, genutzt und an die Community weitergegeben werden.

In einigen Fällen führt dies zur Entwicklung völlig neuer Entwurfsmuster, in anderen Fällen zu verbesserten Richtlinien für die Verwendung bestimmter Muster. So kann sichergestellt werden, dass musterbasierte Lösungen weiterhin robuster sind als Ad-hoc-Lösungen.

Hinweis

Muster sind keine exakten Lösungen. Die Rolle eines Musters besteht lediglich darin, uns ein Lösungsschema zu liefern. Muster lösen weder alle Designprobleme, noch ersetzen sie gute Softwaredesigner. Du brauchst immer noch gute Designer, um die richtigen Muster auszuwählen, die das Gesamtdesign verbessern können.

Ein alltäglicher Anwendungsfall für Design Patterns

Wenn du React.js benutzt hast, bist du wahrscheinlich auf das Provider-Muster gestoßen. Wenn nicht, hast du vielleicht schon die folgende Situation erlebt.

Der Komponentenbaum in Webanwendungen benötigt oft Zugriff auf gemeinsame Daten wie Benutzerinformationen oder Zugriffsberechtigungen. Die traditionelle Methode, dies in JavaScript zu tun, besteht darin, diese Eigenschaften für die Stammkomponente festzulegen und sie dann von den übergeordneten Komponenten an die untergeordneten Komponenten weiterzugeben. Wenn die Komponentenhierarchie tiefer und verschachtelter wird, bohrst du sie mit deinen Daten auf, was zu der Praxis des Prop Drillings führt. Das führt zu unwartbarem Code, bei dem das Setzen und Weitergeben von Eigenschaften in jeder untergeordneten Komponente, die auf diese Daten angewiesen ist, wiederholt wird.

React und einige andere Frameworks lösen dieses Problem mit dem Provider-Muster. Mit dem Provider-Muster kann die React Context API den Status/die Daten über einen Context-Provider an mehrere Komponenten weitergeben. Untergeordnete Komponenten, die die gemeinsamen Daten benötigen, können diesen Provider als Context Consumer anzapfen oder den useContext Hook verwenden.

Dies ist ein hervorragendes Beispiel für ein Entwurfsmuster, das zur Optimierung der Lösung eines allgemeinen Problems verwendet wird. Wir werden dieses und viele andere Muster in diesem Buch sehr ausführlich behandeln.

Zusammenfassung

Nach dieser Einführung in die Bedeutung von Entwurfsmustern und ihre Relevanz für modernes JavaScript können wir nun in das Erlernen von JavaScript-Entwurfsmustern eintauchen. In den ersten Kapiteln dieses Buches geht es um die Strukturierung und Klassifizierung von Patterns und die Identifizierung von Anti-Patterns, bevor wir uns mit den Besonderheiten von Design Patterns für JavaScript beschäftigen. Aber zuerst wollen wir sehen, was nötig ist, damit ein vorgeschlagenes "Proto-Pattern" im nächsten Kapitel als Pattern anerkannt wird.