Übersicht über clientseitige Tools

Das Schreiben von Software für das Web ist im Laufe der Zeit anspruchsvoller geworden. Obwohl es immer noch völlig legitim ist, HTML, CSS und JavaScript "von Hand" zu schreiben, gibt es inzwischen eine Fülle von Tools, die Entwickler verwenden können, um den Prozess der Erstellung einer Website oder App zu beschleunigen.

Es gibt einige äußerst etablierte Tools, die innerhalb der Entwicklergemeinschaft zu bekannten "Hausnamen" geworden sind. Täglich werden neue Tools entwickelt und veröffentlicht, um spezifische Probleme zu lösen. Vielleicht schreiben Sie sogar selbst ein Stück Software, um Ihren eigenen Entwicklungsprozess zu unterstützen, um ein spezifisches Problem zu lösen, das bestehende Tools nicht zu bewältigen scheinen.

Es ist leicht, sich von der schieren Anzahl an Tools überwältigt zu fühlen, die in ein einziges Projekt integriert werden können. Ebenso kann eine einzige Konfigurationsdatei für ein Tool wie webpack Hunderte von Zeilen lang sein, von denen die meisten magische Beschwörungsformeln sind, die ihre Aufgabe zu erledigen scheinen, die aber nur ein erfahrener Ingenieur vollständig versteht!

Von Zeit zu Zeit geraten sogar die erfahrensten Webentwickler in eine Sackgasse bei einem Toolproblem; es ist möglich, Stunden damit zu verschwenden, eine Werkzeugkette zum Laufen zu bringen, bevor überhaupt eine einzige Zeile Anwendungs-Code berührt wird. Wenn Sie sich in der Vergangenheit damit gequält haben, machen Sie sich keine Sorgen – Sie sind nicht allein.

In diesen Artikeln werden wir nicht jede Frage zu Web-Tools beantworten, aber wir werden Ihnen einen nützlichen Ausgangspunkt bieten, um die Grundlagen zu verstehen, auf denen Sie aufbauen können. Wie bei jedem komplexen Thema ist es gut, klein anzufangen und sich allmählich zu fortgeschritteneren Anwendungen vorzuarbeiten.

Das heutige moderne Entwickler-Tooling-Ökosystem ist riesig, daher ist es nützlich, eine grobe Vorstellung davon zu haben, welche Hauptprobleme die Tools lösen. Wenn Sie Ihre bevorzugte Suchmaschine nutzen und nach "Front-End-Entwickler-Tools" suchen, werden Sie auf eine riesige Bandbreite an Ergebnissen stoßen, von Texteditoren über Browser bis hin zu den Arten von Stiften, die Sie zum Notizen machen verwenden können.

Auch wenn die Wahl eines Code-Editors sicherlich eine Entscheidung für ein Werkzeug ist, wird diese Artikelserie darüber hinausgehen und sich auf Entwickler-Tools konzentrieren, die Ihnen helfen, Web-Code effizienter zu erstellen. Wir werden einige spezifische Tools empfehlen und die folgenden Tutorials zeigen Ihnen, wie man sie benutzt. Es handelt sich um Tools, die zum Zeitpunkt des Schreibens beliebt und standardmäßig sind. Dies schließt nicht aus, dass Sie andere Tools verwenden, sofern Sie sich ihrer relativen Vorteile bewusst sind.

Aus einer hohen Perspektive können Sie clientseitige Tools in die folgenden vier breiten Kategorien von Problemen unterteilen:

• Umgebung — Tools, die Ihnen helfen, Ihre Entwicklungsumgebung einzurichten, z.B. durch die Installation und Ausführung anderer Tools.
• Sicherheitsnetz — Tools, die während Ihrer Code-Entwicklung nützlich sind.
• Transformation — Tools, die Code auf irgendeine Weise transformieren, z.B. eine Zwischenprogrammiersprache in JavaScript umwandeln, die ein Browser verstehen kann.
• Nach der Entwicklung — Tools, die nützlich sind, nachdem Sie Ihren Code geschrieben haben, z.B. Test- und Bereitstellungstools.

Schauen wir uns jede dieser Kategorien genauer an.

Editor, Betriebssystem und Browser sind alles Entwicklungsumgebungen. Wir gehen davon aus, dass Sie sich bereits für eine Wahl entschieden haben, mit der Sie sich am wohlsten fühlen. Bevor Sie jedoch andere Tools installieren und ausführen, müssen Sie noch zwei Entscheidungen treffen:

• Wo Sie die Tools ausführen werden. Die meisten lokal ausgeführten Tools sind in JavaScript geschrieben, daher benötigen Sie einen JavaScript-Interpreter auf Ihrem Computer, der über die Befehlszeile aufgerufen werden kann (nicht den im Browser). Node.js bleibt der Branchenstandard und wir werden es verwenden. Bun ist als drop-in Ersatz für Node.js gedacht und bekannt für seine Geschwindigkeit und leistungsstarken APIs.
• Wie Sie die Tools installieren, mit anderen Worten, das Paketverwaltungssystem. Node liefert standardmäßig npm, daher werden wir es verwenden. Yarn und pnpm sind weitere beliebte Optionen, jeweils mit eigenen Vorteilen wie Geschwindigkeit, Projektmanagement, etc.

Dies sind Tools, die den von Ihnen geschriebenen Code ein wenig verbessern.

Dieser Teil der Tool-Pipeline sollte spezifisch für Ihre eigene Entwicklungsumgebung sein, obwohl es nicht ungewöhnlich ist, dass Unternehmen eine Art Richtlinie oder vorgefertigte Konfiguration zur Verfügung haben, die installiert werden kann, damit alle Entwickler dieselben Prozesse verwenden.

Dazu gehört alles, was Ihren Entwicklungsprozess erleichtert, um stabilen und zuverlässigen Code zu generieren. Sicherheitsnetz-Tools sollten Ihnen auch helfen, entweder Fehler zu vermeiden oder Fehler automatisch zu korrigieren, ohne Ihren Code bei jedem Auftreten von Grund auf neu erstellen zu müssen.

Einige sehr gängige Arten von Sicherheitsnetz-Tools, die von Entwicklern verwendet werden, sind:

Linters

Linters sind Werkzeuge, die Ihren Code durchgehen und Ihnen über vorhandene Fehler und deren Art sowie die Zeilen, in denen sie sich befinden, berichten. Oft können Linters so konfiguriert werden, dass sie nicht nur Fehler melden, sondern auch Verstöße gegen einen bestimmten Stil-Guide, den Ihr Team möglicherweise verwendet (z.B. Code, der eine falsche Anzahl von Leerzeichen für Einrückungen verwendet oder Template-Literale anstelle von normalen String-Literalen).

ESLint ist der Industriestandard für JavaScript-Linters – ein hochgradig konfigurierbares Tool zum Erkennen potenzieller Syntaxfehler und zur Förderung von "Best Practices" in Ihrem Code. Einige Unternehmen und Projekte haben auch ihre ESLint-Konfigurationen geteilt.

Sie können auch Linting-Tools für andere Sprachen finden, wie stylelint.

Quellcode-Kontrolle

Auch bekannt als Versionskontrollsysteme (VCS), ist die Quellcode-Kontrolle wesentlich für das Sichern der Arbeit und die Teamarbeit. Ein typisches VCS besteht darin, dass man eine lokale Version des Codes hat, in der man Änderungen vornimmt. Man "pushed" dann Änderungen in eine "Master"-Version des Codes, die in einem entfernten Repository auf einem Server gespeichert ist. Es gibt in der Regel eine Möglichkeit, zu kontrollieren und zu koordinieren, welche Änderungen an der "Master"-Kopie des Codes vorgenommen werden und wann, damit ein Team von Entwicklern nicht ständig die Arbeit des anderen überschreibt.

Git ist das Quellcode-Kontrollsystem, das die meisten heutzutage verwenden. Es wird hauptsächlich über die Befehlszeile aufgerufen, kann aber auch über benutzerfreundliche Benutzeroberflächen zugänglich gemacht werden. Mit Ihrem Code in einem Git-Repository können Sie ihn auf Ihren eigenen Serverinstanz pushen oder einen gehosteten Quellcode-Kontrolldienst wie GitHub, GitLab oder Bitbucket verwenden.

Wir werden GitHub in diesem Modul verwenden. Weitere Informationen finden Sie unter Git und GitHub.

Code-Formatierer

Code-Formatierer sind gewissermaßen mit Lintern verwandt, außer dass sie anstelle von Fehlerhinweisen in Ihrem Code in der Regel sicherstellen, dass Ihr Code korrekt formatiert ist, gemäß Ihren Stilregeln, idealerweise automatisch Fehler korrigierend, die sie finden.

Prettier ist ein sehr populäres Beispiel eines Code-Formatierers, das wir später in diesem Modul verwenden werden.

Typprüfer

Typprüfer sind Tools, die Ihnen helfen, zuverlässigeren Code zu schreiben, indem sie überprüfen, dass Ihr Code die richtigen Datentypen an den richtigen Stellen verwendet. Dies verhindert häufige Fehlerklassen, wie das Zugreifen auf nicht vorhandene Eigenschaften, unerwartete undefined, etc.

TypeScript ist der De-facto-Standardtypprüfer für JavaScript. Es bietet seine eigene Typ-Anmerkungssyntax und ist in gewisser Weise eine eigenständige Sprache, daher werden wir es in diesem Modul nicht behandeln.

Diese Phase des Lebenszyklus Ihrer Web-App ermöglicht es Ihnen in der Regel, entweder in "Zukunftscode" (wie die neuesten CSS- oder JavaScript-Features, die möglicherweise noch keine native Unterstützung in Browsern haben) zu programmieren oder eine völlig andere Sprache zu verwenden, wie TypeScript. Transformations-Tools generieren dann browserkompatiblen Code für Sie, der in der Produktion verwendet werden kann.

Im Allgemeinen wird Webentwicklung als drei Sprachen verstanden: HTML, CSS und JavaScript. Es gibt Transformations-Tools für all diese Sprachen. Transformation bietet drei Hauptvorteile (neben anderen):

1. Die Fähigkeit, mit den neuesten Sprachfeatures zu programmieren und diese in Code zu transformieren, der auf alltäglichen Geräten funktioniert. Zum Beispiel möchten Sie möglicherweise JavaScript mit modernen Sprachfeatures programmieren und dennoch sicherstellen, dass Ihr finaler Produktionscode auf älteren Browsern funktioniert, die diese Features nicht unterstützen. Gute Beispiele sind:

   • Babel: Ein JavaScript-Compiler, der es Entwicklern erlaubt, ihren Code mit modernem JavaScript zu schreiben, den Babel dann in althergebrachtes JavaScript umwandelt, das von mehr Browsern verstanden wird. Entwickler können auch Plugins für Babel schreiben und veröffentlichen.
   • PostCSS: Macht dasselbe wie Babel, jedoch für moderne CSS-Features. Wenn es keine gleichwertige Methode gibt, etwas mit älteren CSS-Features zu machen, installiert PostCSS ein JavaScript-Polyfill, um den gewünschten CSS-Effekt zu simulieren.

2. Die Option, den Code in einer völlig anderen Sprache zu schreiben und diesen in eine webkompatible Sprache zu transformieren. Beispielsweise:

   • Sass/SCSS: Diese CSS-Erweiterung ermöglicht es, Variablen, geschachtelte Regeln, Mixins, Funktionen und viele andere Features zu verwenden, von denen einige in nativem CSS verfügbar sind (wie Variablen) und einige nicht.
   • TypeScript: TypeScript ist eine Obermenge von JavaScript, die eine Reihe zusätzlicher Features bietet. Der TypeScript-Compiler konvertiert TypeScript-Code zu JavaScript, wenn er für die Produktion gebaut wird.
   • Frameworks wie React, Ember und Vue: Frameworks bieten eine Menge Funktionalität kostenlos und erlauben es Ihnen, sie über benutzerdefinierte Syntax zu nutzen, die auf Vanilla-JavaScript aufbaut. Im Hintergrund arbeitet der JavaScript-Code des Frameworks hart daran, diese benutzerdefinierte Syntax zu interpretieren und sie als finale Web-App zu rendern.

3. Optimierung. Dies wird von Bundlern bereitgestellt, die Ihre Code für die Produktion vorbereiten, etwa durch "tree-shaking", um sicherzustellen, dass nur die Teile Ihrer Code-Bibliotheken, die Sie tatsächlich verwenden, in Ihren finalen Produktionscode gelangen, oder "minifying", um all die Leerzeichen in Ihrem Produktionscode zu entfernen, ihn so klein wie möglich zu machen, bevor er auf einen Server geladen wird. Beispiele sind:

   • Webpack war lange Zeit der beliebteste Bundler und bietet eine riesige Anzahl von Plugins und ein leistungsfähiges Konfigurationssystem. Es ist jedoch auch bekannt für seine recht komplexe Einrichtung und ist im Vergleich zu moderneren Alternativen langsam.
   • Vite ist ein moderneres Build-Tool, das für seine Geschwindigkeit, Einfachheit und seinen Funktionsreichtum beliebt ist.

Das Post-Development-Tooling sorgt dafür, dass Ihre Software ins Web gelangt und weiterhin läuft. Dazu gehören die Deployment-Prozesse, Test-Frameworks, Überprüfungstools und mehr.

Diese Phase des Entwicklungsprozesses ist eine, die Sie mit möglichst wenig aktiver Interaktion einrichten möchten, sodass sie, einmal konfiguriert, überwiegend automatisch abläuft und sich nur meldet, wenn etwas schiefgelaufen ist.

Testtools

Diese nehmen im Allgemeinen die Form eines Tools an, das automatisch Tests gegen Ihren Code ausführt, um sicherzustellen, dass er korrekt ist, bevor Sie weiter gehen (z.B. wenn Sie versuchen, Änderungen in ein GitHub-Repo zu pushen). Dies kann Linters umfassen, aber auch anspruchsvollere Verfahren wie Unit-Tests, bei denen Sie Teile Ihres Codes ausführen und überprüfen, ob sie wie erwartet funktionieren.

• Frameworks zum Schreiben von Tests umfassen Jest, Mocha und Jasmine.
• Automatisierte Testrunner- und Benachrichtigungssysteme umfassen Travis CI, Jenkins, Circle CI und andere.

Deployment-Tools

Deployment-Systeme ermöglichen es Ihnen, Ihre Website zu veröffentlichen, sind sowohl für statische als auch für dynamische Seiten verfügbar und arbeiten oft mit Testsystemen zusammen. Zum Beispiel wird eine typische Toolchain warten, bis Sie Änderungen an ein entferntes Repo gepusht haben, einige Tests durchführen, um zu sehen, ob die Änderungen in Ordnung sind, und dann, wenn die Tests bestehen, Ihre App automatisch auf einer Produktionsseite bereitstellen.

GitHub Pages ist eng in GitHub integriert und kostenlos für alle öffentlichen Repos. Andere Dienste, wie Netlify und Vercel, sind ebenfalls sehr beliebt und bieten großzügige kostenlose Kontingente, reibungslose Deployment-Workflows und GitHub-Integration.

Andere

Es gibt mehrere andere Tooltypen, die im Post-Development-Stadium verwendet werden können, einschließlich Code Climate zum Sammeln von Code-Qualitätsmetriken, der Webhint-Browser-Erweiterung zur Durchführung einer Laufzeitanalyse der Browser-Kompatibilität und anderer Überprüfungen, GitHub-Bots zur Bereitstellung leistungsfähigerer GitHub-Funktionalität, Updown zur Bereitstellung der App-Verfügbarkeitsüberwachung und viele mehr!

Es gibt sicherlich eine Reihenfolge, in der die verschiedenen Tooltypen im Entwicklungslebenszyklus angewendet werden, aber seien Sie unbesorgt, dass Sie all diese nicht haben müssen, um eine Website zu veröffentlichen. Tatsächlich benötigen Sie keines dieser Tools. Die Einbeziehung einiger dieser Tools in Ihren Prozess wird jedoch wahrscheinlich Ihre eigene Entwicklererfahrung verbessern und die Gesamtqualität Ihres Codes verbessern.

Neue Entwickler-Tools benötigen oft Zeit, um sich in ihrer Komplexität zu etablieren. Eines der bekanntesten Tools, webpack, hat den Ruf, übermäßig kompliziert in der Handhabung zu sein, aber in der letzten Hauptversion gab es einen großen Vorstoß, die gängigsten Anwendungen zu vereinfachen, sodass die erforderliche Konfiguration auf ein absolutes Minimum reduziert ist.

Es gibt definitiv keine Wunderwaffe, die einen Erfolg mit Tools garantiert, aber mit wachsender Erfahrung werden Sie Arbeitsabläufe finden, die für Sie oder für Ihr Team und ihre Projekte funktionieren. Sobald alle Probleme im Prozess geglättet sind, sollte Ihre Toolchain etwas sein, das Sie vergessen können und es sollte einfach funktionieren.

Die meisten Tools werden in Isolation geschrieben und veröffentlicht, daher ist zwar fast sicher Hilfe verfügbar, sie ist jedoch nie am gleichen Ort oder im gleichen Format. Daher kann es schwierig sein, Hilfe zur Verwendung eines Tools zu finden oder gar zu entscheiden, welches Tool verwendet werden soll. Das Wissen darüber, welche Tools die besten sind, ist ein wenig stammesmäßig, was bedeutet, dass es schwierig ist herauszufinden, welche man verwenden sollte, wenn man nicht bereits in der Web-Community ist. Deshalb haben wir diese Serie von Artikeln geschrieben, um hoffentlich diesen ersten Schritt zu bieten, der schwer zu finden ist.

Sie werden wahrscheinlich eine Kombination der folgenden Dinge benötigen:

• Erfahrene Lehrer, Mentoren, Mitstudenten oder Kollegen, die Erfahrung haben, solche Probleme bereits gelöst haben und Rat geben können.

• Ein nützlich-spezifischer Ort zum Suchen. Allgemeine Websuchen nach Frontend-Entwicklungs-Tools sind in der Regel nutzlos, es sei denn, Sie kennen bereits den Namen des Tools, das Sie suchen.

  • Wenn Sie z.B. den npm-Paketmanager zur Verwaltung Ihrer Abhängigkeiten verwenden, ist es eine gute Idee, zur npm-Startseite zu gehen und nach der Art von Tool zu suchen, das Sie suchen. Suchen Sie z.B. nach "date", wenn Sie ein Datumsformatierungs-Utility suchen, oder "formatter", wenn Sie nach einem allgemeinen Code-Formatierer suchen. Achten Sie auf die Popularitäts-, Qualitäts- und Wartungsscores und darauf, wann das Paket zuletzt aktualisiert wurde. Klicken Sie auch auf die Tool-Seiten, um zu sehen, wie viele monatliche Downloads ein Paket hat und ob es gute Dokumentation gibt, die Ihnen helfen kann herauszufinden, ob es das tut, was Sie benötigen. Basierend auf diesen Kriterien sieht die date-fns-Bibliothek wie ein gutes Datumsformatierungs-Tool aus. Sie werden dieses Tool im Einsatz sehen und mehr über Paketmanager im Allgemeinen in Kapitel 3 dieses Moduls erfahren.
  • Wenn Sie ein Plugin suchen, um die Tool-Funktionalität in Ihren Code-Editor zu integrieren, schauen Sie sich die Plugins/Erweiterungsseite des Code-Editors an – siehe z.B. die VS Code-Erweiterungen. Schauen Sie sich die vorgestellten Erweiterungen auf der Startseite an und suchen Sie erneut nach der Art der Erweiterung, die Sie möchten (oder nach dem Toolnamen, zum Beispiel suchen Sie nach "ESLint" auf der VS Code-Erweiterungsseite). Wenn Sie Ergebnisse erhalten, schauen Sie sich Informationen wie die Anzahl der Sterne oder Downloads an, die die Erweiterung als Indikator ihrer Qualität hat.

• Entwicklungsbezogene Foren, um Fragen zu stellen, welche Tools zu verwenden sind, z.B. MDN Learn Discourse, oder Stack Overflow.

Wenn Sie sich für ein Tool entscheiden, um zu verwenden, sollte der erste Anlaufpunkt die Projekt-Homepage des Tools sein. Dies könnte eine vollwertige Website oder ein einzelnes Readme-Dokument in einem Code-Repository sein. Die date-fns-Dokumentation zum Beispiel ist recht gut, vollständig und leicht verständlich. Manchmal jedoch kann die Dokumentation recht technisch und akademisch und nicht ideal für Ihre Lernbedürfnisse sein.

Stattdessen könnten Sie einige dedizierte Tutorials suchen, um mit bestimmten Arten von Tools zu beginnen. Ein großartiger Startpunkt ist, auf Websites wie CSS Tricks, Dev, freeCodeCamp und Smashing Magazine zu suchen, da sie auf die Webentwicklungsbranche ausgerichtet sind.

Wahrscheinlich werden Sie durch mehrere verschiedene Tools gehen, während Sie nach den richtigen für Sie suchen, sie ausprobieren, um zu sehen, ob sie Sinn machen, gut unterstützt werden und das tun, was Sie wollen. Das ist in Ordnung – es ist alles gut fürs Lernen und der Weg wird reibungsloser, je mehr Erfahrung Sie sammeln.

Damit schließen wir unsere sanfte Einführung in das Thema clientseitige Web-Tools ab, aus einer hohen Perspektive. Als nächstes werden wir uns mit Paketmanagern beschäftigen.

• Übersicht: Verständnis von Client-seitigen Webentwicklungstools
• Weiter