Der Schlüssel zum Erstellen großer JavaScript-Apps: Der Modlet-Workflow

Sie sind Entwickler und arbeiten an einer „großen JavaScript-Anwendung“ und haben Probleme in Ihrem Projekt festgestellt. Neue Teammitglieder haben Schwierigkeiten, alles zu finden. Das Debuggen von Problemen ist schwierig, wenn Sie die gesamte App laden müssen, um eine Komponente zu testen. Es gibt keine klaren API-Grenzen zwischen Ihren Komponenten, sodass die Implementierungsdetails ineinander übergehen. Das Aktualisieren Ihrer Abhängigkeiten scheint eine beängstigende Aufgabe zu sein, sodass Ihre App die neuesten verfügbaren Upgrades nicht nutzt.

Eine der wichtigsten Erkenntnisse, die wir bei Bitovi gewonnen haben, war, dass „das Geheimnis beim Erstellen großer Apps darin besteht, niemals große Apps zu erstellen“. Wenn Sie Ihre App in kleinere Komponenten aufteilen, können Sie diese leichter testen und zu Ihrer größeren App zusammenfügen. Wir folgen dem sogenannten „Modlet“-Workflow, der das Erstellen jeder Ihrer Komponenten als eigene Mini-App mit eigenen Demos, Dokumentationen und Tests fördert.

Dieses Muster zu befolgen wird

• Erleichtern Sie den Einarbeitungsprozess für neue Entwickler
• Helfen Sie, die Dokumentation und Tests Ihrer Komponenten aktuell zu halten
• Verbessern Sie Ihren Debugging- und Test-Workflow
• Erzwingen Sie ein gutes API-Design und eine Trennung der Anliegen
• Erleichtern Sie Upgrades und Migrationen

Lassen Sie uns jeden dieser Vorteile einzeln besprechen, um zu sehen, wie der Modlet-Workflow Ihr Entwicklungsteam effektiver machen kann.

Erleichtern Sie den Einarbeitungsprozess für neue Entwickler

Wenn ein neuer Entwickler mit Ihrem Projekt beginnt, könnte er von der Menge an Dateien im Repository Ihrer App eingeschüchtert sein. Wenn die Dateien nach Typ organisiert sind (z. B. ein CSS-Ordner, ein JS-Ordner usw.), müssen sie mehrere Ordner durchsuchen, um alle Dateien zu finden, die zu einer einzelnen Komponente gehören.

Der erste Schritt zur Befolgung des Modlet-Workflows ist die Erstellung von Ordnern für jede Ihrer Komponenten. Jeder Ordner oder Modlet sollte alle Dateien für diese Komponente enthalten, sodass jeder in Ihrem Team die Dateien finden kann, die er benötigt, um die Komponente zu verstehen und zu entwickeln, ohne das gesamte Projekt durchsuchen zu müssen.

Zusätzlich bauen wir Modlets als eigene Mini-Apps, indem wir mindestens die folgenden Dateien in ihren Ordnern einschließen

• Die Hauptquellendateien (JavaScript, Stylesheets, Vorlagen usw.)
• Eine JavaScript-Testdatei
• Eine Markdown- oder Textdatei für Dokumentationen (wenn sie nicht im Code integriert sind)
• Eine Test-HTML-Seite
• Eine Demo-HTML-Seite

Die letzten beiden Dateien sind entscheidend für die Befolgung des Modlet-Workflows. Erstens dient die Test-HTML-Seite zum Laden nur der Tests der Komponente in Ihrem Browser; zweitens können Sie mit der Demo-HTML-Seite diese Komponente allein in Ihrem Browser sehen, ohne die gesamte App zu laden.

Verbessern Sie Ihren Debugging- und Test-Workflow

Das Erstellen von Demo- und Test-HTML-Seiten für jede Komponente mag wie Overkill erscheinen, aber sie werden einige großartige Verbesserungen für Ihren Entwicklungs-Workflow bringen.

Die Demo-HTML-Seite

• Ermöglicht es Ihnen, schnell nur diese Komponente zu sehen, ohne die gesamte App zu laden
• Bietet einen Ausgangspunkt für die Reproduktion von Fehlern (und reduziert die Angriffsfläche)
• Bietet Ihnen die Möglichkeit, die Komponente in mehreren Szenarien zu demonstrieren

Der letzte Punkt kann auf verschiedene Weise genutzt werden. Ich habe an Projekten gearbeitet, bei denen wir

• Mehrere Instanzen derselben Komponente auf einer einzigen Seite hatten, um zu sehen, wie sie in einigen Schlüsselszenarien reagiert
• Die Demoseite dynamisch gestaltet haben, um mit Dutzenden von Variablen zum Testen einer Komponente spielen zu können

Nicht zuletzt wird das Debuggen von Problemen einfacher, da die Komponente vom Rest der App isoliert ist. Wenn Sie das Problem auf der Demoseite der Komponente reproduzieren können, können Sie Ihre Aufmerksamkeit darauf richten und müssen keine unrelated Teile Ihrer App berücksichtigen.

Die Test-HTML-Seite bietet Ihnen ähnliche Vorteile wie die Demo-HTML-Seite. Wenn Sie nur die Tests einer einzelnen Komponente ausführen können,

• Müssen Sie Ihren Testcode nicht mit .only-Anweisungen überladen, die unweigerlich vergessen und bei der Code-Überprüfung übersehen werden
• Können Sie Änderungen an der Komponente vornehmen und sich auf nur die Tests dieser Komponente konzentrieren, bevor Sie die gesamte Testsuite der App ausführen

Erzwingen Sie ein gutes API-Design und eine Trennung der Anliegen

Der Modlet-Workflow fördert auch ein gutes API-Design. Indem Sie jede Komponente an mindestens zwei Stellen verwenden (in Ihrer App und auf der Demoseite), werden Sie

1. Genau überlegen, was die API Ihrer Komponente erfordert
2. Klare Grenzen zwischen Ihren Komponenten und dem Rest Ihrer App setzen

Wenn die API Ihrer Komponente intuitiv und reibungslos ist, ist es einfach, eine Demoseite für Ihre Komponente zu erstellen. Wenn zu viel „Bootstrapping“ erforderlich ist, um die Komponente zu verwenden, oder wenn keine klare Trennung zwischen der Komponente und ihrer Verwendung besteht, sollten Sie überdenken, wie sie architektonisch gestaltet ist.

Mit einer klar definierten API Ihrer Komponente legen Sie den Grundstein dafür, Ihre Komponente aus ihrem ursprünglichen Repository herauszunehmen und sie in anderen Anwendungen verfügbar zu machen. Wenn Sie in einem großen Unternehmen arbeiten, ist eine gemeinsame Komponentenbibliothek sehr hilfreich, um Projekte schnell entwickeln zu können. Der Modlet-Workflow ermutigt Sie dazu, da jede Ihrer Komponenten bereits über eigene Demos, Dokumentationen und Tests verfügt!

Helfen Sie, die Dokumentation und Tests Ihrer Komponenten aktuell zu halten

Ein häufiges Problem, das ich bei Projekten festgestellt habe, die den Modlet-Workflow nicht befolgen, ist, dass die Dokumentation und die Tests nicht aktualisiert werden, wenn sich die Hauptquelldateien ändern. Wenn ein Team den Modlet-Workflow befolgt, weiß jeder, wo er nach der Dokumentation und den Tests jeder Komponente suchen muss: Sie befinden sich im selben Ordner wie der Quellcode der Komponente!

Dies erleichtert die Identifizierung fehlender Dokumentationen und Tests. Darüber hinaus dient die Tatsache, dass sich die Dateien im selben Ordner befinden, als Erinnerung für jeden Entwickler im Team, sie bei Änderungen an dieser Komponente zu aktualisieren.

Dies ist auch während der Code-Überprüfung hilfreich. Die meisten Tools listen Dateien nach ihrem Namen auf, sodass Sie bei der Überprüfung von Änderungen an einer Komponente daran erinnert werden, sicherzustellen, dass auch die Dokumentation und die Tests aktualisiert wurden. Darüber hinaus ist das Wechseln zwischen Implementierung und Tests viel einfacher, da sie nah beieinander liegen.

Erleichtern Sie Upgrades und Migrationen

Last but not least, das Befolgen des Modlet-Workflows kann Ihnen helfen, Ihre App auf neue Versionen Ihrer Abhängigkeiten zu aktualisieren. Betrachten wir ein Beispiel!

Eine neue Hauptversion Ihres bevorzugten JavaScript-Frameworks wird veröffentlicht und Sie haben die Aufgabe, Ihre App auf die neue Version zu migrieren. Wenn Sie dem Modlet-Workflow folgen, können Sie mit der Migration beginnen, indem Sie die Komponenten aktualisieren, die keine Ihrer anderen Komponenten verwenden

Die einzelnen Demo- und Testseiten sind entscheidend für die Durchführung dieses Upgrades. Sie können damit beginnen, die Tests für Ihre Komponente zu bestehen zu lassen und sie dann visuell auf Ihrer Demoseite zu überprüfen.

Sobald diese Komponenten funktionieren, können Sie mit der Aktualisierung der Komponenten beginnen, die von diesen abhängen

Sie können diesem Prozess folgen, bis alle Komponenten Ihrer App funktionieren. Dann müssen Sie nur noch die eigentliche App testen, was weitaus weniger entmutigend sein wird, da Sie wissen, dass die einzelnen Komponenten funktionieren.

Groß angelegte Migrationen sind einfacher, wenn Komponenten eigenständig und gut definiert sind. Wie wir in einem früheren Abschnitt besprochen haben, fördert der Modlet-Workflow klare API-Grenzen und die Trennung von Anliegen, was es einfacher macht, Ihre Komponenten isoliert zu testen und ein vollständiges App-Upgrade weniger einschüchternd macht.

Beginnen Sie noch heute mit dem Modlet-Workflow in Ihrer App

Sie können noch heute mit dem Modlet-Workflow beginnen – wenn Ihr Team Dateien noch nach Typ organisiert, beginnen Sie damit, sie stattdessen nach Komponenten zu gruppieren. Verschieben Sie die Testdateien in Ihre Komponentenordner und fügen Sie einige HTML-Seiten zum Demonstrieren und Testen Ihrer Komponente hinzu. Es mag Ihrem Team ein wenig Mühe kosten, umzustellen, aber es wird sich langfristig lohnen.

Einige der in diesem Artikel vorgeschlagenen Vorschläge mögen aufgrund von Einschränkungen in Ihrer Toolchain einschüchternd erscheinen. Wenn Sie beispielsweise einen Modul-Loader & Bundler verwenden, der Sie zwingt, für jede einzelne Seite ein separates Bundle zu erstellen, würde das Hinzufügen von zwei HTML-Seiten pro Komponente eine einschüchternde Menge an Build-Konfiguration erfordern.

Im nächsten Artikel dieser Reihe besprechen wir, wie Sie einen Modul-Loader und Bundler namens StealJS verwenden können, um die Abhängigkeiten für jede Ihrer Komponenten zu laden, ohne einen separaten Build für jede HTML-Seite.

Teilen Sie mir Ihre Meinung in den Kommentaren mit! Wenn Sie eine ähnliche Organisationstechnik befolgen, lassen Sie mich wissen, was gut funktioniert hat und was für Sie nicht funktioniert hat.