Übersicht über clientseitige Werkzeuge

Software für das Web zu schreiben, ist im Laufe der Zeit komplexer geworden. Obwohl es immer noch vollständig vernünftig ist, HTML, CSS und JavaScript "von Hand" zu schreiben, gibt es jetzt eine Vielzahl von Werkzeugen, die Entwickler nutzen können, um den Prozess des Erstellens einer Website oder App zu beschleunigen.

Es gibt einige äußerst etablierte Werkzeuge, die unter der Entwicklergemeinschaft zu bekannten "Haushaltsnamen" geworden sind, und täglich werden neue Werkzeuge entwickelt und veröffentlicht, um spezifische Probleme zu lösen. Möglicherweise finden Sie sich sogar dabei, ein Stück Software zu schreiben, um Ihren eigenen Entwicklungsprozess zu unterstützen, um ein spezifisches Problem zu lösen, das bestehende Werkzeuge nicht zu bewältigen scheinen.

Es ist leicht, von der schieren Anzahl der Werkzeuge, die in ein einzelnes Projekt einbezogen werden können, überwältigt zu werden. Ebenso kann eine einzige Konfigurationsdatei für ein Werkzeug wie webpack Hunderte von Zeilen lang sein, von denen die meisten magische Beschwörungen sind, die scheinbar die Aufgabe erledigen, aber die nur ein Meisteringenieur vollständig verstehen wird!

Von Zeit zu Zeit stoßen selbst die erfahrensten Webentwickler auf ein Werkzeugproblem; es ist möglich, stundenlang zu verschwenden, um eine Tool-Pipeline zum Laufen zu bringen, bevor auch nur eine einzige Zeile Anwendungs-Code angefasst wird. Wenn Sie in der Vergangenheit damit gekämpft haben, machen Sie sich keine Sorgen — Sie sind nicht allein.

In diesen Artikeln werden wir nicht jede Frage zu Webwerkzeugen beantworten, aber wir werden Ihnen einen nützlichen Ausgangspunkt geben, 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 hochzuarbeiten.

Das heutige moderne Entwickler-Werkzeug-Ökosystem ist riesig, daher ist es nützlich, eine breite Vorstellung davon zu haben, welche Hauptprobleme die Werkzeuge lösen. Wenn Sie Ihre bevorzugte Suchmaschine nutzen und nach "Front-End-Entwickler-Werkzeugen" suchen, werden Sie auf ein großes Spektrum von Ergebnissen stoßen, die von Textbearbeitern über Browser bis hin zu Stiften reichen, die Sie zum Notizenmachen verwenden können.

Obwohl die Wahl des Code-Editors sicherlich eine Werkzeugwahl ist, wird diese Artikelreihe darüber hinausgehen und sich auf Entwicklerwerkzeuge konzentrieren, die Ihnen helfen, Webcode effizienter zu produzieren. Wir empfehlen einige bestimmte Werkzeuge und die folgenden Tutorials zeigen Ihnen, wie sie benutzt werden. Sie sind Werkzeuge, die zum Zeitpunkt des Schreibens populär und standardisiert sind. Dies schließt nicht aus, dass Sie andere Werkzeuge verwenden, wenn Sie sich ihrer relativen Vorteile bewusst sind.

Aus einer hohen Perspektive können Sie clientseitige Werkzeuge in die folgenden vier großen Kategorien von zu lösenden Problemen einteilen:

• Umgebung — Werkzeuge, die helfen, Ihre Entwicklungsumgebung einzurichten, z. B. das Installieren und Ausführen anderer Werkzeuge.
• Sicherheitsnetz — Werkzeuge, die während der Code-Entwicklung nützlich sind.
• Transformation — Werkzeuge, die Code auf irgendeine Weise transformieren, z. B. das Umwandeln einer Zwischensprache in JavaScript, das ein Browser verstehen kann.
• Nach der Entwicklung — Werkzeuge, die nach dem Schreiben Ihres Codes nützlich sind, wie Test- und Bereitstellungswerkzeuge.

Lassen Sie uns jeden dieser Punkte genauer betrachten.

Der Editor, das Betriebssystem und der Browser sind alle 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 Werkzeuge installieren und ausführen, müssen noch zwei Entscheidungen getroffen werden:

• Wo Sie die Werkzeuge ausführen werden. Die meisten lokal ausgeführten Werkzeuge sind in JavaScript geschrieben, sodass Sie einen JavaScript-Interpreter auf Ihrem Computer benötigen, der von der Befehlszeile aus aufgerufen werden kann (nicht derjenige in Ihrem Browser). Node.js bleibt der Industriestandard, und wir werden es verwenden. Bun ist als Drop-in-Ersatz für Node.js gedacht, bekannt für seine Geschwindigkeit und leistungsstarken APIs.
• Wie Sie die Werkzeuge installieren, mit anderen Worten, der Paketmanager. Node bietet standardmäßig npm an, daher werden wir es verwenden. Yarn und pnpm sind andere beliebte Alternativen, jeweils mit ihren eigenen Vorteilen wie Geschwindigkeit, Projektverwaltung usw.

Dies sind Werkzeuge, die den von Ihnen geschriebenen Code ein wenig besser machen.

Dieser Teil der Werkzeuge sollte spezifisch für Ihre eigene Entwicklungsumgebung sein, obwohl es nicht ungewöhnlich ist, dass Unternehmen irgendeine Art von Richtlinie oder vordefinierte Konfiguration zur Verfügung haben, um sicherzustellen, dass alle ihre Entwickler dieselben Prozesse verwenden.

Dazu gehört alles, was Ihren Entwicklungsprozess erleichtert, um stabilen und zuverlässigen Code zu erzeugen. Sicherheitsnetzwerkzeuge sollten Ihnen auch helfen, entweder Fehler zu verhindern oder Fehler automatisch zu korrigieren, ohne dass Sie Ihren Code jedes Mal von Grund auf neu erstellen müssen.

Einige sehr übliche Arten von Sicherheitsnetzwerkzeugen, die von Entwicklern verwendet werden, sind wie folgt.

Linters

Linters sind Werkzeuge, die Ihren Code überprüfen und Ihnen über alle Fehler informieren, die vorhanden sind, welche Fehlertypen es sind und in welchen Codezeilen sie auftreten. Oftmals können Linters so konfiguriert werden, dass sie nicht nur Fehler, sondern auch Verstöße gegen einen bestimmten Stil-Leitfaden melden, den Ihr Team möglicherweise verwendet (zum Beispiel Code, der die falsche Anzahl von Leerzeichen für die Einrückung verwendet oder Template Literals anstelle von regulären String-Literalen).

ESLint ist der Industriestandard für JavaScript-Linters — ein hoch konfigurierbares Werkzeug, um potenzielle Syntaxfehler zu erfassen und "Best Practices" in Ihrem Code zu fördern. Einige Unternehmen und Projekte haben auch ihre ESLint-Konfigurationen geteilt.

Es gibt auch Linter-Tools für andere Sprachen, wie stylelint.

Quellcodeverwaltung

Auch bekannt als Versionskontrollsysteme (VCS), ist die Quellcodeverwaltung unerlässlich, um Arbeit zu sichern und in Teams zu arbeiten. Ein typisches VCS beinhaltet eine lokale Version des Codes, die Sie ändern. Sie "pushen" dann Änderungen zu einer "Master"-Version des Codes innerhalb eines entfernten Repositorys auf einem Server. Üblicherweise gibt es eine Möglichkeit, zu kontrollieren und zu koordinieren, welche Änderungen am "Master"-Exemplar des Codes vorgenommen werden und wann, damit ein Entwicklerteam nicht ständig die Arbeiten der anderen überschreibt.

Git ist das Versionskontrollsystem, das heutzutage von den meisten Menschen genutzt wird. Es wird hauptsächlich über die Befehlszeile aufgerufen, kann aber auch über benutzerfreundliche Schnittstellen genutzt werden. Mit Ihrem Code in einem Git-Repository können Sie es zu Ihrer eigenen Serverinstanz pushen oder einen gehosteten Quellkontrollwebsite-Dienst wie GitHub, GitLab oder Bitbucket nutzen.

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

Code Formatter

Code Formatter sind mit Linters verwandt, weisen jedoch nicht auf Fehler in Ihrem Code hin, sondern stellen normalerweise sicher, dass Ihr Code nach Ihren Stilregeln korrekt formatiert ist, idealerweise durch automatisches Beheben gefundener Fehler.

Prettier ist ein sehr populäres Beispiel für einen Code Formatter, den wir später in diesem Modul verwenden werden.

Typüberprüfer

Typüberprüfer sind Werkzeuge, die Ihnen helfen, zuverlässigere Codes zu schreiben, indem sie überprüfen, ob Ihr Code die richtigen Datentypen an den richtigen Stellen verwendet. Dies verhindert häufige Klassen von Fehlern wie den Zugriff auf nicht vorhandene Eigenschaften, unerwartete undefined usw.

TypeScript ist der de-facto Standard-Typüberprüfer für JavaScript. Es bietet seine eigene Syntax für Typannotationen und ist gewissermaßen eine eigene Sprache, weshalb wir es in diesem Modul nicht abdecken werden.

Diese Phase des Lebenszyklus Ihrer Webanwendung ermöglicht es Ihnen in der Regel, entweder "zukünftigen Code" (wie die neuesten CSS- oder JavaScript-Features, die möglicherweise noch nicht nativ in Browsern unterstützt werden) zu schreiben oder eine andere Sprache vollständig zu verwenden, wie z. B. TypeScript. Transformationswerkzeuge generieren dann browserkompatiblen Code für Sie, der in der Produktion verwendet werden kann.

Im Allgemeinen wird Webentwicklung als drei Sprachen gesehen: HTML, CSS und JavaScript, und es gibt Transformationswerkzeuge für all diese Sprachen. Transformation bietet drei Hauptvorteile (unter anderem):

1. Die Fähigkeit, Code mit den neuesten Sprachfeatures zu schreiben und diesen in Code zu transformieren, der auf Geräten des täglichen Gebrauchs funktioniert. Zum Beispiel möchten Sie JavaScript mit den neuesten Spracheigenschaften schreiben, aber dennoch, dass Ihr endgültiger Produktcode in älteren Browsern funktioniert, die diese Eigenschaften nicht unterstützen. Gute Beispiele hierfür sind:

   • Babel: Ein JavaScript-Compiler, der Entwicklern erlaubt, ihren Code mit neuesten JavaScript-Features zu schreiben, die Babel dann in altmodisches JavaScript umwandelt, das mehr Browser verstehen können. Entwickler können auch Plugins für Babel schreiben und veröffentlichen.
   • PostCSS: Macht das gleiche wie Babel, jedoch für modernste CSS-Features. Wenn es keine äquivalente Möglichkeit gibt, etwas mit älteren CSS-Features zu tun, wird PostCSS ein JavaScript-Polyfill installieren, um den gewünschten CSS-Effekt zu emulieren.

2. Die Option, Ihren Code in einer völlig anderen Sprache zu schreiben und ihn in eine webkompatible Sprache zu transformieren. Zum Beispiel:

   • Sass/SCSS: Diese CSS-Erweiterung ermöglicht es Ihnen, Variablen, verschachtelte Regeln, Mixins, Funktionen und viele andere Features zu verwenden, von denen einige in nativen CSS verfügbar sind (wie Variablen) und einige nicht.
   • TypeScript: TypeScript ist eine JavaScript-Obermenge, die eine Reihe zusätzlicher Features bietet. Der TypeScript-Compiler wandelt TypeScript-Code in JavaScript um, wenn er für die Produktion aufgebaut wird.
   • Frameworks wie React, Ember und Vue: Frameworks bieten eine Menge Funktionalitäten kostenlos und ermöglichen es Ihnen, sie über benutzerdefinierte Syntaxen auf Basis von Vanilla JavaScript zu nutzen. Im Hintergrund arbeitet der JavaScript-Code des Frameworks hart daran, diese benutzerdefinierte Syntax zu interpretieren und sie als endgültige Webanwendung darzustellen.

3. Optimierung. Diese wird von Bundlern bereitgestellt, die Werkzeuge sind, die Ihren Code für die Produktion bereit machen, zum Beispiel durch "Tree Shaking", um sicherzustellen, dass nur die Teile Ihrer Code-Bibliotheken, die Sie tatsächlich verwenden, in Ihren endgültigen Produktionscode aufgenommen werden, oder durch "Minifikation", um allen Leerraum in Ihrem Produktionscode zu entfernen und ihn so klein wie möglich zu machen, bevor er auf einen Server hochgeladen wird. Zum Beispiel:

   • Webpack war lange Zeit der beliebteste Bundler mit einer riesigen Anzahl an Plugins und einem leistungsstarken Konfigurationssystem. Er ist jedoch auch dafür bekannt, recht kompliziert einzurichten zu sein und ist im Vergleich zu moderneren Alternativen langsam.
   • Vite ist ein moderneres Build-Tool, das für seine Schnelligkeit, Einfachheit und Funktionsreichtum bekannt ist.

Tools nach der Entwicklung sorgen dafür, dass Ihre Software ins Web gelangt und weiterhin läuft. Dazu gehören Bereitstellungsprozesse, Test-Frameworks, Prüfungswerkzeuge und mehr.

Diese Stufe des Entwicklungsprozesses ist eine, bei der Sie die geringste Menge an aktiver Interaktion wünschen, damit sie, einmal konfiguriert, größtenteils automatisch läuft und nur dann erscheint, um Hallo zu sagen, wenn etwas schiefgelaufen ist.

Testwerkzeuge

Diese nehmen in der Regel die Form eines Werkzeugs an, das automatisch Tests gegen Ihren Code ausführt, um sicherzustellen, dass er korrekt ist, bevor Sie weitermachen (zum Beispiel, wenn Sie versuchen, Änderungen zu einem GitHub-Repo zu pushen). Dies kann Linting einschließen, aber auch komplexere Verfahren wie Unittests, bei denen Sie Ihre Codeabschnitte ausführen, um sicherzustellen, dass sie sich wie erwartet verhalten.

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

Bereitstellungswerkzeuge

Bereitstellungssysteme ermöglichen es Ihnen, Ihre Website zu veröffentlichen. Sie sind für sowohl statische als auch dynamische Sites verfügbar und arbeiten häufig zusammen mit Testsystemen. Zum Beispiel wartet eine typische Toolchain darauf, dass Sie Änderungen zu einem entfernten Repo pushen, führt einige Tests durch, um zu überprüfen, ob die Änderungen in Ordnung sind, und wenn die Tests bestehen, wird Ihre App automatisch auf eine Produktseite bereitgestellt.

GitHub Pages ist schön in GitHub selbst integriert und ist für alle öffentlichen Repos kostenlos. Andere Dienste, wie Netlify und Vercel, sind ebenfalls sehr beliebt, bieten großzügige kostenlose Tarifquoten, reibungslose Bereitstellungsabläufe und GitHub-Integration.

Andere

Es gibt mehrere andere Tool-Typen, die in der Post-Entwicklung verfügbar sind, einschließlich Code Climate zur Erfassung von Codequalitätsmetriken, der Webhint-Browsererweiterung zur Durchführung von Laufzeitanalysen der plattformübergreifenden Kompatibilität und anderer Überprüfungen, GitHub Bots zur Bereitstellung leistungsstärkerer GitHub-Funktionalitäten, Updown zur Überwachung der Anwendungsverfügbarkeit und vieles mehr!

Es gibt sicherlich eine Reihenfolge, in der die verschiedenen Werkzeugtypen im Entwicklungslebenszyklus angewendet werden, aber seien Sie versichert, dass Sie nicht alle dieser Tools haben müssen, um eine Website zu veröffentlichen. Tatsächlich benötigen Sie keines dieser Tools. Wenn Sie jedoch einige dieser Werkzeuge in Ihren Prozess integrieren, wird Ihre eigene Entwicklungserfahrung verbessert und wahrscheinlich die Gesamtqualität Ihres Codes verbessert.

Es braucht oft einige Zeit, bis sich neue Entwicklerwerkzeuge in ihrer Komplexität legen. Ein bekanntes Werkzeug, webpack, ist dafür bekannt, dass es sehr kompliziert zu arbeiten ist, aber in der letzten großen Veröffentlichung gab es einen großen Vorstoß, die allgemeine Nutzung zu vereinfachen, sodass die erforderliche Konfiguration auf ein absolutes Minimum reduziert wird.

Es gibt definitiv keine Wunderwaffe, die Erfolg mit Werkzeugen garantiert, aber mit zunehmender Erfahrung werden Sie Workflows finden, die für Sie oder für Ihr Team und ihre Projekte funktionieren. Sobald alle Schwächen im Prozess geglättet sind, sollte Ihre Toolchain etwas sein, das Sie vergessen können und einfach funktioniert.

Die meisten Werkzeuge werden in Isolation geschrieben und veröffentlicht, sodass zwar fast sicher Hilfe verfügbar ist, diese jedoch nie am gleichen Ort oder im gleichen Format ist. Es kann daher schwierig sein, Hilfe für die Verwendung eines Werkzeugs zu finden oder sogar zu entscheiden, welches Werkzeug zu verwenden ist. Das Wissen darüber, welche die besten Werkzeuge sind, ist etwas stammensmäßig, was bedeutet, dass es schwierig ist, genau herauszufinden, welche man wählen soll, wenn man nicht bereits in der Web-Community ist! Dies ist einer der Gründe, warum wir diese Artikelreihe geschrieben haben, in der Hoffnung, diesen ersten Schritt zu erleichtern, der ansonsten schwer zu finden ist.

Sie benötigen wahrscheinlich eine Kombination aus folgenden Dingen:

• Erfahrene Lehrer, Mentoren, Mitstudierende oder Kollegen, die über einige Erfahrungen verfügen, bereits solche Probleme gelöst haben und Ratschläge geben können.

• Einen nützlichen, spezifischen Ort, um zu suchen. Allgemeine Websuchen nach Front-End-Entwickler-Werkzeugen sind im Allgemeinen nutzlos, es sei denn, Sie kennen bereits den Namen des Werkzeugs, nach dem Sie suchen.

  • Wenn Sie den npm-Paketmanager verwenden, um Ihre Abhängigkeiten zu verwalten, sollten Sie beispielsweise zur npm-Homepage gehen und nach dem Typ des Werkzeugs suchen, das Sie suchen, beispielsweise "date", wenn Sie ein Datumsformatierungsdienstprogramm benötigen, oder "formatter", wenn Sie nach einem allgemeinen Code Formatter suchen. Achten Sie auf die Popularität, Qualität und Pflegebewertungen und wie kürzlich das Paket das letzte Mal aktualisiert wurde. Klicken Sie auch auf die Tool-Seiten, um herauszufinden, wie viele monatliche Downloads ein Paket hat und ob es gute Dokumentation gibt, die Sie verwenden können, um herauszufinden, ob es das tut, was Sie benötigen. Basierend auf diesen Kriterien sieht die date-fns Bibliothek wie ein gutes Datumsformatierungswerkzeug aus, das verwendet werden kann. Sie werden dieses Werkzeug in Aktion sehen und mehr über Paketmanager im Allgemeinen in Kapitel 3 dieses Moduls erfahren.
  • Wenn Sie nach einem Plugin suchen, um die Funktionalität eines Werkzeugs in Ihren Code-Editor zu integrieren, schauen Sie sich die Plugin-/Erweiterungsseite des Code-Editors an — siehe zum Beispiel VS Code-Erweiterungen. Werfen Sie einen Blick auf die empfohlenen Erweiterungen auf der Startseite und versuchen Sie erneut, nach der Art der Erweiterung zu suchen, die Sie wünschen (oder 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 hat, als Indikator für ihre Qualität.

• Entwicklungsspezifische Foren, um Fragen zu stellen, welche Werkzeuge zu verwenden sind, wie z. B. MDN Lern Discourse oder Stack Overflow.

Wenn Sie sich entschieden haben, ein Werkzeug zu verwenden, sollte der erste Anlaufpunkt die Projekt-Homepage des Werkzeugs sein. Dies kann eine vollwertige Website sein oder ein einzelnes README-Dokument in einem Code-Repository. Die date-fns-Dokumentation zum Beispiel ist ziemlich gut, vollständig und leicht nachvollziehbar. Einige Dokumentationen können jedoch recht technisch und akademisch sein und nicht gut für Ihre Lernanforderungen geeignet.

Stattdessen möchten Sie vielleicht einige spezielle Tutorials finden, die Ihnen den Einstieg in bestimmte Arten von Werkzeugen erleichtern. Ein guter Ausgangspunkt ist es, auf Websites wie CSS Tricks, Dev, freeCodeCamp und Smashing Magazine zu suchen, da sie auf die Webentwicklungs-Industrie ausgerichtet sind.

Höchstwahrscheinlich werden Sie mehrere verschiedene Werkzeuge durchprobieren, während Sie auf der Suche nach den richtigen für Sie sind, um sie auszuprobieren, zu sehen, ob sie Sinn machen, gut unterstützt sind und das tun, was Sie möchten. Das ist in Ordnung — es ist alles gut zum Lernen, und der Weg wird glatter, wenn Sie mehr Erfahrung sammeln.

Damit endet unsere sanfte Einführung in das Thema clientseitige Web-Tools aus einer hohen Perspektive. Als Nächstes bieten wir Ihnen einen Crashkurs zur Befehlszeile, auf der viele der Werkzeuge aufgerufen werden. Wir werden uns ansehen, was die Befehlszeile leisten kann und dann versuchen, unser erstes Werkzeug zu installieren und zu verwenden.

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