Verspotten eines Monorepo

(22. November 2020)

Dies ist ein aktuelles Bild unserer Entwicklungsumgebung, nachdem wir einen Mock-Server für unser Repo

With erstellt haben Da eine zunehmende Anzahl von Diensten in unserem Backend erstellt wurde, wurde unsere Frontend-Entwicklung von der Anzahl der benötigten Repos und Server beeinflusst lokal zu installieren, um das Frontend zum Laufen zu bringen. Und wenn wir auch unsere ( Überarbeitung der Frontend-Architektur ) berücksichtigen, wussten wir, dass wir Maßnahmen ergreifen mussten, um eine zu haben schnelle und reibungslose Entwicklungserfahrung. Hier kommt unser Monorepo-Mock-Server ins Spiel.

Ein bisschen über LumApps

Wenn Sie nicht über LumApps Bescheid wissen, sind wir a globales Technologieunternehmen mit R & D-Teams in Frankreich, das unseren Kunden einen SaaS Digital Workplace -Lösung, die einen ganzheitlichen Arbeitsbereich erstellt und in mehrere Suiten und Tools für die Zusammenarbeit integriert ist. Möchten Sie ein bisschen mehr über uns erfahren? Gehen Sie zu LumApps.com und werfen Sie einen Blick darauf!

Was wir brauchten

Bis zu ein paar Jahren Vor einiger Zeit war es ziemlich einfach, unsere Frontend-Anwendung in Ihrer eigenen Entwicklungsumgebung zu starten, um mit dem Codieren zu beginnen. Sie haben das Frontend und das Backend ausgeführt, und das wars! Aber seitdem das Unternehmen und die Anwendung in den letzten Jahren exponentiell gewachsen sind mit Neue Dienste erstellt und neue Entwickler, die zur Entwicklung kommen Das Produkt, bei dem die Anwendung lokal gestartet wurde, war nicht mehr so ​​einfach wie früher.

Diese neuen Dienste bedeuteten, dass Sie sie auf Ihrem Computer konfigurieren mussten, was nicht nur einige Zeit in Anspruch nahm, sondern auch eine viel CPU, wodurch eine wirklich harte Kombination für unsere Entwicklungsumgebungen erstellt wird. Wir brauchten ein System, mit dem wir:

  • diese Dienstabhängigkeiten für die lokale Entwicklung entfernen konnten und einen Einzelserver haben, der die Daten bereitstellt, die das Frontend für die lokale Entwicklung benötigt, und somit die lokale Entwicklungszeit erhöht 🚀
  • Erstellen Sie einen Datensatz, den alle Teams wiederverwenden können, um ihre Funktionen zu entwickeln. Dies bedeutete, dass diese Daten zwischen Teams teilt und diesen Teams ermöglicht, ihre eigenen Datensätze zu erstellen, um die Konfiguration für jeden zu entfernen / hinzuzufügen Spezifische Teamkonfiguration 🛠
  • Haben Sie einen konsistenten Datensatz , der für Einheiten- und Integrationstests ✅

Wie wir es gemacht haben

Nach einigen Recherchen Wir haben ein geschicktes npm-Modul namens json-server , mit dem wir eine vollständige gefälschte REST-API mit erstellen konnten wirklich überhaupt keine Konfiguration. Es ist wirklich ein erstaunliches Tool , da es nicht nur das Verspotten von Daten und das Erstellen eines Servers ermöglicht, sondern auch eine Menge bietet Die sofort einsatzbereiten Kern-API-Funktionen machen dieses Tool wirklich zur nächsten Stufe , wenn es um das Verspotten geht. Damit könnten wir zum Beispiel einen POST ausführen, um eine Ressource zu erstellen, und das nächste Mal ein GET zum Abrufen der Liste durchführen Die kürzlich erstellte Ressource wäre dort! Es ermöglicht auch das Erstellen von Express js Middlewares , die zum Optimieren verwendet werden können Anfragen und Antworten, die uns vollen Zugriff geben, um zu ändern, was wir wollen!

json-server

Holen Sie sich eine vollständige gefälschte REST-API mit Nullcodierung in weniger als 30 Sekunden

www.npmjs.com

Darüber hinaus haben wir eine kleine Knoten-JS-Datei erstellt, mit der wir diese Mock einfach verwalten können Dateien auf einem Monorepo.Grundsätzlich benötigt json-server einen json-Einstiegspunkt, an dem sich die Scheindaten befinden. Da wir jedoch eine Monorepo-Architektur verwenden, wollten wir dies Jedes Paket hat seine eigenen Scheindaten. Sie sind also Eigentümer dieser Daten und können darüber hinaus die Daten klar erkennen Endpunkte, die ein Paket verbraucht. Diese Knoten-JS-Datei ist ein Skript, das vor json-server ausgeführt wird, und es:

  • Durchläuft jedes der Pakete in unserem Arbeitsbereich und sucht nach Dateien mit dem Namen api.json auf dem _mocks Ordner und kombiniert alle in einer einzigen Datei mit allen Daten aus jedem Paket. Es werden auch die anderen json-server -Konfigurationen wie leitet oder Middleware und setzt sie alles zusammen an einem einzigen Ort
Ein Benutzerordner mit einem Unterordner namens _mocks und 3 Dateien: api.json, route.json und user.middleware.js
So sieht unser Benutzerpaket mit eigenen Mocks aus, die
    Schreibt diese kombinierten Dateien in einen vordefinierten Ordner und führt json-server mit diesen Dateien als Eingabe aus
  • Dies alles wird in einem einzigen Befehl ausgeführt Garn verspottet Erstellt die Dateien und startet dann json-server .
  • Wir haben jedem Modul auch erlaubt, verschiedene Szenarien für seine API-Antworten zu erstellen, die wir overrides . Jedes Paket kann so viele Überschreibungen erstellen, wie es möchte. Dies ist eine Teilmenge der Daten, die von der API zurückgegeben werden. Dabei werden unterschiedliche Werte überschrieben und geändert, sodass die API ein anderes Szenario zurückgibt. So sieht beispielsweise unsere API-Antwort für unseren Benachrichtigungsdienst folgendermaßen aus:
Eine API-Antwort für unseren Benachrichtigungsdienst Mit den Schlüsselelementen ungelesene Benachrichtigungen mit einem Wert von 5 und mehr in true
Unser Benachrichtigungsdienst gibt eine Liste der anzuzeigenden Benachrichtigungen zurück, wie viele davon vom Benutzer nicht gelesen wurden und ob weitere Benachrichtigungen vorhanden sind

abrufen Aber was wäre, wenn wir einfach ein Frontend starten wollten, bei dem der Benutzer überhaupt keine Benachrichtigungen hat? In diesem Fall erstellen wir die Überschreibung no-notifications.api.json , die diese Datei überschreibt:

Eine API-Antwort für unseren Benachrichtigungsdienst mit ungelesenen Benachrichtigungen mit dem Wert 0 und mehr in false
Überschreiben Sie für ein Szenario, in dem keine Benachrichtigungen für den aktuellen Benutzer vorhanden sind.

Auf Ordnerebene sieht unser Benachrichtigungspaket folgendermaßen aus:

Wir haben viele verschiedene Szenarien für unser Benachrichtigungscenter 😅

Und um diese Überschreibungen anzuwenden, starten wir einfach Garn verspottet -override no-notifications und unsere Knoten-js-Datei suchen nach den verschiedenen Überschreibungen, die auf jedem Paket mit dem Namen no-notifications

und führen tiefe ihre Werte mit den ursprünglichen Werten jeder API-Antwort zusammen. Dies bedeutete auch, dass andere Pakete, die eine Überschreibung für das Szenario keine Benachrichtigungen erstellen möchten, dies ebenfalls tun können ! Sie müssen lediglich eine Datei mit dem Namen no-notifications.api.json in ihrer _mocks Ordner.

Schließlich können Sie auch mehrere Überschreibungen gleichzeitig anwenden, indem Sie yarn mocks -override no-notifications, admin, no-posts. Dadurch werden diese Überschreibungen nacheinander angewendet, wobei jeder Schlüssel in den API-Antworten in der angegebenen Reihenfolge überschrieben wird.

Wie geht es weiter?

Wir müssen noch einige weitere Szenarien durchgehen, die wir angehen möchten, damit unsere Entwickler eine flüssigere Entwicklungserfahrung haben:

  • Erstellen Sie automatisch Mocks von einem Remote-Backend-Dienst.
  • Überprüfen Sie diese Mocks regelmäßig gegen einen Remote-Backend-Dienst, um zu überprüfen, ob die API-Antwort nicht funktioniert ändern.
  • Open Source dieser kleine Knoten js Skript, damit diejenigen von Ihnen da draußen, die Monorepos verwenden und möchte diesen Code wiederverwenden kann es tun! Seien Sie gespannt auf zukünftige Entwicklungen zu diesem Thema!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.