Patterns.dev

 (patterns.dev)
2 Punkte von GN⁺ 2025-12-12 | 1 Kommentare | Auf WhatsApp teilen
  • Muster für Webanwendungs-Design und Performance-Optimierung als kostenlose Online-Ressource, die Lerninhalte rund um JavaScript und moderne Frameworks bereitstellt
  • Vanilla JavaScript, React, Vue sind jeweils mit speziellen Designmustern sowie Rendering-, Ladevorgangs- und Performance-Verbesserungstechniken systematisch aufbereitet
  • Code-Wiederverwendung, State Management, Rendering-Strategien, Bundle-Optimierung usw. werden mit praxisnahen Beispielen und einer CodeSandbox-Umgebung für Übungen unterstützt
  • Design-Muster werden als Referenzwerkzeuge statt als Vorschriften vorgestellt, um wiederkehrende Problemstellungen zu lösen und Gemeinsamkeiten in Code zu erkennen
  • Inklusive moderner ES2017+-Syntax und React-Hooks-basierter Implementierungen mit Fokus auf strukturelle Skalierbarkeit und Performance-Verbesserung großer Web-Apps

Überblick

  • Patterns.dev ist eine kostenlose Online-Ressource zur Verbesserung der Architektur von Web-Apps und gliedert sich rund um Design-, Rendering- und Performance-Muster
  • Mit Implementierungsbeispielen für Vanilla JavaScript, React, Vue.js werden Zweck und Einsatz jedes Musters erklärt
  • Es gibt eine eBook- oder PDF-Download-Option sowie die Möglichkeit des Online-Lesens

JavaScript-Muster

  • Grundlegendes JavaScript und Node.js stehen im Mittelpunkt einer Mustersammlung
    • Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight, Factory und weitere klassische Designmuster
  • Performance- und Ladeoptimierungs-Muster sind umfangreich dokumentiert
    • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, Third-party-Optimierung usw.
  • Einsatz von View Transitions API für Seitenübergangsanimationen, List-Virtualisierung, Code-Minimierung und weitere moderne Browser-Funktionen

React-Muster

  • Strukturelle Muster und Rendering-Strategien auf Basis von React und Next.js
    • Container/Presentational, HOC, Render Props, Hooks, Compound usw.
  • Vergleich von Rendering-Ansätzen
    • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR
  • Leitfäden zu React Server Components und Next.js Core Web Vitals-Optimierung
  • Das Dokument React Stack Patterns (2025/2026) behandelt moderne Stacks wie Frameworks, Build-Tools, Routing, State Management und KI-Integration

Vue-Muster

  • Vue.js-spezifische Muster mit Fokus auf Komponentenstruktur und State Management
    • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components
  • Bereitstellung einer modernen Code-Struktur mit Composition API und <script setup>
  • Enthält fortgeschrittene Muster wie Provide/Inject, Renderless Components, Render Functions

Muster-Anwendung und Philosophie

  • Patterns.dev stellt Muster als Referenzwerkzeuge statt als sture Normen dar
    • Es liefert gemeinsame Lösungen für wiederkehrende Probleme, erzwingt diese aber nicht für jeden Anwendungsfall
  • Der Zweck von Design-Mustern besteht darin, Gemeinsamkeiten von Codeproblemen verständlich zu kommunizieren
  • Es wird die Bedeutung von sprach- und framework-spezifischen Mustern betont und ein moderner Ansatz jenseits klassischer GoF-Muster angeboten

Lern- und Praxisunterstützung

  • Mit CodeSandbox-Übungsbeispielen lässt sich die tatsächliche Umsetzung jedes Musters direkt ansehen
  • Ein visuell animierter Lernansatz unterstützt das Verständnis der Konzepte
  • Über Web-Performance-Muster werden Methoden zur Optimierung der Ladeeffizienz und zur Verbesserung der User Experience gezeigt

Kernmerkmale auf einen Blick

  • ES2017+-Syntax-basierte Implementierungen für eine Optimierung auf moderne JavaScript-Umgebungen
  • Auf React-Entwickler zugeschnittene Optimierung und Web-Performance-Verbesserung im Fokus
  • Moderne Interpretation von Design-Mustern mit klarer Betonung auf Praxis statt Komplexität
  • Praxisleitfäden für Skalierbarkeit und Performance-Steigerung großer Web-Apps

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-12-12
Hacker-News-Kommentare

  • Als ich früher in meinem alten Job .NET-Enterprise-Apps entwickelt habe, waren Design Patterns wirklich nützlich
    Da mehrere Teams dieselben Patterns verwendeten, war der Code vertraut, und neue Projekte hatten eine konsistente Struktur
    Jetzt arbeite ich aber an einer über 10 Jahre alten JS-App, und dort sind der Java-EE-artige Missbrauch von Gettern/Settern und komplexe Factory-Strukturen eher schädlich
    Wenn man Patterns exzessiv einsetzt, ohne zu verstehen, warum man sie verwendet, führt das zu weit schlechteren Ergebnissen als einfach gut lesbarer Code (erinnert an das YAGNI-Prinzip)

    • Ich denke, Patterns werden nicht „erfunden“, sondern „entdeckt“
      Als Entwickler kommt man irgendwann ganz natürlich auf Strukturen wie Adapter, Builder, Iterator
      Der eigentliche Wert von Design Patterns liegt darin, diesen entdeckten Mustern eine gemeinsame Sprache zu geben, damit man leichter miteinander kommunizieren kann
    • Viele Patterns sind nur in stark eingeschränkten Sprachen wie C# oder Java sinnvoll
      In einfachen Sprachen wie C, Go oder JavaScript lässt sich vieles deutlich einfacher lösen
    • Ich sehe oft Entwickler aus Enterprise-Umgebungen, die versuchen, dieselben OOP-Patterns mit Gewalt auch in JS anzuwenden
      Das passt nicht zur Philosophie der Sprache
    • Ich habe selbst früher einmal in guter Absicht Patterns eingesetzt und damit einen Wartungsalbtraum geschaffen
      Anfangs wirkt es sauber, aber mit der Zeit verteilt sich die Logik, und bei neuen Anforderungen brechen die Patterns leicht auseinander
      Am Ende sehnt man sich nach einem einfachen switch-Statement zurück
    • Unter den Leuten, die sagen, Patterns seien nutzlos, sind oft Menschen ohne Erfahrung mit großen Systemen
      Das ist wie der Perspektivunterschied zwischen jemandem, der nur kleine Apps baut, und jemandem, der Wolkenkratzer errichtet

  • Früher gab es die Yahoo Design Pattern Library
    Sie war auf UX-Patterns fokussiert und hatte verschiedene Beispiele gut aufbereitet, wie man Nutzerverhalten steuern kann (z. B. Bewertungen abgeben)
    Original-Link / Webarchiv

    • Ein ähnliches Open-Source-Projekt ist The Component Gallery
      Ein Archiv mit UI-Komponenten aus über 90 Design-Systemen, das sich auch gut eignet, um a11y/ARIA-Richtlinien zu lernen
      component.gallery
    • Begriffe wie „accordion“ oder „carousel“ wurden dank dieser Bibliothek standardisiert
      Eine gemeinsame Sprache hat die Produktivität erhöht
    • Sie vermittelt dieses Gefühl des alten Webs und weckt Nostalgie
    • YUI war damals ebenfalls seiner Zeit voraus
    • Yahoo Engineering war wirklich hervorragend, und es ist schade, dass es durch Managementversagen zerfallen ist

  • Das ist eine gute Sammlung von Ressourcen, ich habe sie zu meinen Lesezeichen hinzugefügt
    Ich teile noch ähnliche Seiten

  • Je mehr Erfahrung man sammelt, desto geringer wird die Abhängigkeit von Design Patterns
    Juniors denken oft, das Lernen von Patterns sei eine Abkürzung in der Karriere, aber häufig erhöht es eher die Komplexität
    Wirklich wichtig ist, das Wesen des Problems und die Datenstrukturen zu verstehen
    Wenn man zum Beispiel gemeinsame Elemente zweier Arrays finden will, ist ein einfaches Pattern, das mit einer HashMap auf O(n) reduziert, viel nützlicher
    So etwas hat nicht einmal einen Namen, ist in der Praxis aber ein Kernmuster, das man täglich verwendet
    Letztlich zählen Prinzipien und Kontext, nicht die lehrbuchhafte Form

    • Patterns haben als gemeinsame Sprache einen Wert
      Wenn jemand sagt: „Ich habe ein Singleton gebaut“, versteht man sofort, was gemeint ist
      Problematisch wird es erst, wenn man Werkzeuge blind glorifiziert
    • Die oben erwähnte Nutzung einer HashMap heißt in der DB-Welt Hash Join
      Das kann man auch im Query Planner von Postgres sehen
    • Es ist nicht peinlich, Begriffe wie „Factory“ zu verwenden
      Beim Benennen von Code sollte man aber lieber beschreibend sein
    • Die Optimierung mit einer HashMap kann man auch als eine Form von dynamischer Programmierung betrachten
      Es lohnt sich, das beim Üben auf Leetcode zu lernen
    • Wichtiger als Design Patterns selbst sind die Patterns dafür, wie man Patterns anwendet
      Als Buch, das nicht nur technische, sondern auch organisatorische Patterns behandelt,
      wird Organisational Patterns (James Coplien, Neil Harrison) empfohlen
      Zusammenfassungslink

  • Während meiner Studienzeit habe ich zufällig einen Pattern-Kurs besucht, den Ralph Johnson persönlich unterrichtet hat,
    und das war einer der nützlichsten Kurse meines Lebens
    Ralph-Johnson-Wiki

  • Es gibt den Satz: „Design Patterns are a sign of missing language features“
    Das heißt: Wäre eine Sprache ausreichend ausdrucksstark, bräuchte man Patterns vielleicht gar nicht
    Verwandte Materialien: C2 Wiki, Norvig-Paper, Medium-Artikel

  • Diese Seite ist eine gut strukturierte Sammlung von Tutorials, aber im Gegensatz zu Christopher Alexanders „A Pattern Language“
    zeigt sie nicht die hierarchische Verknüpfungsstruktur zwischen den Patterns, was schade ist
    Ursprünglich bekommen Patterns ihre Bedeutung gerade durch diese Beziehungen von oben nach unten, aber in Technikbüchern fehlt dieser Kontext oft
    Es wäre auch gut, wenn klarer dargestellt würde, welches Problem jedes Pattern eigentlich löst

    • In den Beispielen aus „A Pattern Language“ sieht man, dass jedes Pattern organisch mit anderen Patterns verbunden ist
      Zum Beispiel ist „Short Passages“ mit „Flow Through Rooms“, „Building Thoroughfare“ usw. verknüpft
      Genau diese Struktur ist die eigentliche Stärke einer Pattern Language

  • Wenn man Patterns überstrapaziert, entsteht langsamer und schwer wartbarer Code

    • Patterns sind am wirkungsvollsten, wenn sie im Lösungsprozess natürlich entdeckt werden
      Wenn man Probleme vorab lösen will, die es noch gar nicht gibt, erzeugt man nur Komplexität
    • Letztlich entfalten sie nur dann ihren Wert, wenn man sie passend einsetzt

  • Aus der POSD-Perspektive (Principles of Software Design) sind folgende Patterns nützlich

    • Module Pattern
    • Factory Pattern (factory functions)
    • Mediator/Middleware Pattern (in Form einer Function Pipeline)
    • Hooks Pattern
    • Container/Presentational Pattern
      Dagegen sollte man bei Singleton, Mixin, Observer usw. vorsichtig sein, weil sie die Komplexität erhöhen oder globale Zustandsabhängigkeiten verursachen können
    • Es gab einen Kommentar, der fragte, was POSD überhaupt sei

  • Diese Seite setzt eher auf Breite statt Tiefe und wirkt deshalb nach 2017
    Wirklich wichtig ist, die Grundlagen im Umgang mit immutable data zu beherrschen
    Es hilft enorm, einmal bewusst zu üben, Code nur mit Array-Methoden und ohne for-Schleifen zu schreiben

    • Ich habe früher einmal ClojureScript verwendet, und das war gut für den Umgang mit unveränderlichen Daten
      In JS stößt man mit Object.freeze schnell an Grenzen, und ein Ansatz wie bei ramdajs, bei dem neue Objekte zurückgegeben werden, ist realistischer
      Dank moderner JS-Syntax sind heute nur noch einige Funktionen von ramdajs wirklich nützlich
    • Dieser Artikel bringt mich auf die Idee, meine eigenen Patterns zu dokumentieren