Tools für die Überwachung der kontinuierlichen Frontend-Integration

Als Entwickler können Sie Ihren Prozess durch kontinuierliche Integration erheblich verbessern. Sie möchten kleine Änderungen, die Sie vornehmen, kontinuierlich versenden und sie dem Benutzer so schnell wie möglich zur Verfügung stellen. Sie möchten auch jede Bereitstellung überwachen, um sicherzustellen, dass zu Hause alles in Ordnung ist.

Kontinuierliche Integration (CI) ist die Lösung. Es gibt verschiedene Tools, die uns dies ermöglichen, darunter Travis, Codeship, Jenkins und mehr. Mit diesen Tools können wir unsere Bereitstellung verwalten und den gesamten Prozess von Anfang bis Ende überwachen. Alles, was Sie tun müssen, ist, in ein Repository zu pushen, und alles andere wird erledigt.

Warum sich Gedanken über kontinuierliche Integration machen?

JavaScript hat in den letzten Jahren an Arbeit in der Anwendungsentwicklung zugenommen. Wenn Sie ein altes Webdesign-Buch zur Hand nehmen, sehen Sie Dinge wie „JavaScript wird auf der Präsentationsebene verwendet“. Das ist im Moment völlig falsch, da JavaScript die vollen 9 Yards der Anwendungsentwicklung abdecken kann. Das bedeutet, was wir im Moment mit unserem JavaScript machen, ist unternehmenskritisch.

Dasselbe gilt für Ihr CSS. Es geht fast über das Beibehalten des Aussehens Ihrer Anwendung hinaus, es kann auch aktiv für die Funktionsweise Ihrer Anwendung verwendet werden (Übergänge und so weiter). Defektes JavaScript führt zu einer defekten App. Kaputtes CSS führt zu einem völlig unorganisierten Anwendungslayout. Wie stark würde sich dies auf die Leistung oder Benutzerfreundlichkeit Ihrer Anwendung auswirken? Was ist mit der Benutzererfahrung?

In Anbetracht dessen möchten Sie eine automatisierte Möglichkeit, die Veröffentlichung neuer Versionen Ihrer Anwendung zu handhaben. Sie möchten sicherstellen, dass Ihre Abhängigkeiten funktionieren und leicht verfügbar sind. Wenn Ihre Anwendung wächst, wird es immer schwieriger, dies manuell zu verwalten. Ich meine, wie sehr vertrauen Sie Ihrem müden Selbst an einem Dienstagabend, um zu überprüfen, ob über 100 Seiten Ihrer Website einwandfrei funktionieren und alle Pakete, die Ihre App zum Ausführen benötigt, installiert sind?

Beginnend mit dem Build-Prozess:Verabschieden Sie sich von npm, verwenden Sie Garn

Der erste und wahrscheinlich am meisten ignorierte Schritt in CI-Diskussionen ist der Build-Prozess. Für viele ist dies normalerweise kein Problem. Sobald Sie Ihre Anwendung eingerichtet haben, wird Ihr node_modules Der Ordner enthält alle Ihre Abhängigkeiten und Sie können loslegen.

In jedem Build werden Sie jedoch häufig die alten Knotenmodule nicht los. Sie verwenden sie einfach für die neue Anwendung wieder (und kommen vielleicht damit durch).

Die Herausforderung besteht darin, dass Ihre Knotenmodule nicht auf dem neuesten Stand sind oder wenn Sie Module installiert haben, die sich nicht in Ihrem package.json befinden , funktioniert Ihre Anwendung möglicherweise jetzt, wenn sie normalerweise nicht funktionieren sollte, sodass Sie die Verwendung einer Abhängigkeit in Ihrem Projekt entfernen können. Dies liegt daran, dass beim Ausführen von npm install , es putzt nicht das Haus. Es sucht einfach nach Neuigkeiten und installiert sie.

Yarn reinigt das Haus, wenn Sie den Einrichtungsprozess für Ihr Projekt ausführen. Yarn speichert alle seine Installationen im Cache und muss sie nicht jedes Mal herunterladen, wenn Sie yarn install ausführen . Das ist ein großer Gewinn gegenüber npm das wird immer alles neu installieren. Yarn prüft und bestätigt, dass nur Abhängigkeiten in Ihrem package.json aufgeführt sind Datei installiert sind. Das macht aus jedem yarn install Ihnen eine Kopie der Anwendung zu geben, ähnlich wie jemand, der Ihre Anwendung zum ersten Mal klont.

Ersetzen Sie also npm mit yarn im Erstellungsprozess für Ihre Anwendung.

Testen

Automatisierte Tests sind wichtig, wenn Sie eine kontinuierliche Integration und Bereitstellung verwenden würden. Sie möchten sicherstellen, dass Ihre Anwendung wie erwartet funktioniert, bevor sie auf den Live-Server gelangt. Ihr Bereitstellungsprozess kann so eingerichtet werden, dass eine Bereitstellung fehlschlägt, wenn alle Testfälle nicht bestanden werden. Dadurch wird Ihre Anwendung in der Produktion geschützt und sichergestellt, dass Ihr Dienst nicht unterbrochen wird.

Hier sind einige Tools, die Sie für Ihre automatisierten Tests verwenden können:

  1. Mokka
  2. Scherz
  3. Chai
  4. Jasmin
  5. Karma
  6. Winkelmesser

Weitere Informationen finden Sie unter Überblick über JavaScript-Tests

Überwachung

Aus diesem Grund sind wir hier. Die Überwachung Ihrer Anwendungsbereitstellung ist wichtig, da Sie Fehler erkennen und sehr schnell beheben können. Außerdem können Sie sich mehr auf die Entwicklung konzentrieren und weniger darauf, Ihre Anwendung zu verfolgen und Fehler zu beheben. Außerdem kann es die Produktivität Ihrer Entwickler erheblich steigern und gleichzeitig Ihre allgemeine Codequalität verbessern. Wir werden uns nun einige Tools ansehen, die Sie für kontinuierliche Integration und Überwachung verwenden können.

Travis CI ist ein gehosteter, verteilter kontinuierlicher Integrationsdienst, der zum Erstellen und Testen von Softwareprojekten verwendet wird. Es ist sehr beliebt, weit verbreitet und kostenlos für Open-Source-Projekte (über 900.000 Open-Source-Projekte). Wie in der Dokumentation von Travis CI zu sehen ist, unterstützt Travis Ihren Entwicklungsprozess durch automatisches Erstellen und Testen von Codeänderungen und liefert sofortige Rückmeldung über den Erfolg der Änderung. Es kann auch andere Teile Ihres Entwicklungsprozesses automatisieren, indem Bereitstellungen und Benachrichtigungen verwaltet werden.

Sie sollten die Website von Travis CI besuchen, um mehr über ihren Build-Flow zu erfahren.

Jenkins ist ein weiteres wirklich gutes CI/CD-Tool, das auf einem Server gehostet wird. Es automatisiert den Bereitstellungsablauf Ihrer Anwendung, zeigt die Phasen jeder Bereitstellung sowie den Status an, sodass Sie feststellen können, ob die Bereitstellung erfolgreich war oder nicht.

Weitere großartige Artikel von LogRocket:

  • Verpassen Sie keinen Moment mit The Replay, einem kuratierten Newsletter von LogRocket
  • Verwenden Sie useEffect von React, um die Leistung Ihrer Anwendung zu optimieren
  • Zwischen mehreren Versionen von Node wechseln
  • Erfahre, wie du deine React-App mit AnimXYZ animierst
  • Entdecken Sie Tauri, ein neues Framework zum Erstellen von Binärdateien
  • NestJS mit Express.js vergleichen
  • Entdecken Sie beliebte ORMs, die in der TypeScript-Landschaft verwendet werden

Jenkins kann mit Ihrem Repository verbunden werden und ein Commit kann einen Build auslösen. Sie können auch einen geplanten Build mithilfe eines Cron- oder Jenkins-Dashboards einrichten und einen Build-Prozess jederzeit erneut ausführen. Sie können Jenkins-Funktionen mithilfe von Plugins erweitern.

Gemäß Codeship in der Dokumentation „Codeship macht es einfach und unkompliziert, einen funktionierenden CI/CD-Prozess durch eine einfach zu konfigurierende Web-Benutzeroberfläche und schlüsselfertige Bereitstellungen zum Laufen zu bringen“. Codeship gibt es in zwei Varianten — Basic und Pro. Anhand des Namens haben Sie bereits eine Vorstellung davon, wie jeder aussehen würde. Basic verfügt über eine Webschnittstelle zur Anpassung, wird mit vorkonfigurierten Maschinen geliefert und unterstützt keine Container. Pro unterstützt Container und ermöglicht es Ihnen, Container für Ihre Build-Umgebung zu definieren. Es läuft auch mit Konfigurationsdateien, die in Ihrem Code-Repository angegeben sind.

Codeship ist ein CI/CD-Tool, das in der Cloud funktioniert, im Gegensatz zu vielen anderen, die lokal mit Ihrer Anwendung gehostet werden. Es garantiert eine einfache Skalierung Ihrer CI/CD-Infrastruktur und gibt Ihnen gleichzeitig eine Sorge weniger. Es verfügt auch über eine anpassbare CI/CD-Automatisierung, die Ihre Bereitstellungen beschleunigen kann.

Raygun ist ein Anwendungsüberwachungstool, das Ihre Anwendungsleistung jederzeit verfolgt und Fehler in Echtzeit meldet. Raygun überwacht den CI/CD-Prozess und kann Ihnen ermöglichen, Bereitstellungen mit einem Klick automatisch rückgängig zu machen. Es bietet Absturzanalysen und detaillierte Analysen, damit Sie Probleme mit Ihrer Anwendung angehen können.

Airbrake ist ein Anwendungsüberwachungstool, das Ihren Code sowie betroffene Kunden auf Fehler überprüft und Sie benachrichtigt. Es verbessert Ihre QA-Prozesse und hilft Ihnen, Probleme in Ihrem Code schneller an der Wurzel zu packen. Da es Ihnen Umfang und Kontext von Fehlern gibt, können Sie Korrekturen, die Sie an Ihrem Code vornehmen müssen, effizient priorisieren.

Airbrake lässt sich gut in andere Tools wie JIRA, Slack und sogar Ihre Repositories integrieren, sodass Sie es so einrichten können, dass es den gesamten Stack Ihrer Anwendung überwacht.

Schlussfolgerung

Bei der Einrichtung eines CI/CD-Prozesses für Ihr Projekt gibt es so viel zu beachten. Am wichtigsten ist, dass Sie sicherstellen möchten, dass Sie jederzeit eine qualitativ hochwertige Codebasis pflegen. CI/CD kann Ihnen dabei helfen, wenn es richtig eingerichtet ist.

Erwähnenswert ist, dass Sie Docker in Ihrem CI/CD-Setup verwenden können, um neue Container bereitzustellen, in denen Tests ausgeführt werden können, bevor Sie den Code auf den vorgesehenen Server verschieben. Docker ist großartig, da es leicht ist und viele Leute Container zum Hub schieben.

Ich freue mich darauf, Geschichten über Ihre spannenden CI/CD-Exploits zu hören. Bitte teilen Sie sie später.