Überblick über Client-seitige Tools

Die Erstellung von Software für das Web ist im Laufe der Zeit ausgefeilter geworden. Obwohl es nach wie vor völlig vernünftig ist, HTML, CSS und JavaScript "von Hand" zu schreiben, gibt es mittlerweile eine Fülle von Tools, die Entwickler nutzen können, um den Prozess des Erstellens einer Website oder App zu beschleunigen.

Es gibt einige extrem etablierte Tools, die unter der Entwicklergemeinschaft als "gängige Namen" bekannt geworden sind, und jeden Tag werden neue Tools geschrieben und veröffentlicht, um spezielle Probleme zu lösen. Vielleicht finden Sie sich sogar in der Situation, selbst eine Software zu schreiben, um Ihren eigenen Entwicklungsprozess zu unterstützen oder ein spezifisches Problem zu lösen, das bestehende Tools scheinbar nicht abdecken.

Es ist leicht, von der schieren Anzahl der Tools, die in ein einziges Projekt integriert werden können, überwältigt zu werden. Ebenso kann eine einzelne Konfigurationsdatei für ein Tool wie webpack Hunderte von Codezeilen lang sein, von denen die meisten magische Beschwörungen sind, die den Job zu machen scheinen, die jedoch nur ein Meisteringenieur vollständig versteht!

Gelegentlich bleiben selbst die erfahrensten Webentwickler an einem Tool-Problem hängen; es ist möglich, Stunden zu verschwenden, um eine Tool-Pipeline zum Laufen zu bringen, bevor man auch nur eine einzige Codezeile der Anwendung anfasst. Wenn Sie sich in der Vergangenheit dabei ertappt haben, dann machen Sie sich keine Sorgen — Sie sind nicht allein.

In diesen Artikeln werden wir nicht jede Frage über Web-Tools beantworten, aber wir werden Ihnen einen nützlichen Ausgangspunkt für das Verständnis der Grundlagen bieten, auf dem Sie dann aufbauen können. Wie bei jedem komplexen Thema ist es gut, klein anzufangen und sich schrittweise zu fortgeschrittenen 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 starten und nach "Front-End-Entwickler-Tools" suchen, werden Sie auf ein riesiges Spektrum von Ergebnissen stoßen, die von Texteditoren über Browser bis hin zu den Arten von Stiften reichen, die Sie zum Notieren verwenden können.

Obwohl die Wahl Ihres Code-Editors sicherlich eine Tooling-Entscheidung ist, wird sich diese Artikelserie darüber hinaus mit Entwickler-Tools beschäftigen, die Ihnen helfen, Web-Code effizienter zu produzieren. Wir werden einige spezielle Tools empfehlen, und die folgenden Tutorials zeigen Ihnen, wie Sie sie verwenden können. Es sind Tools, die zum Zeitpunkt des Schreibens populär und standardmäßig sind. Dies schließt nicht aus, dass Sie andere Tools verwenden, wenn Sie sich ihrer relativen Vorteile bewusst sind.

Aus einer hochrangigen Perspektive können Sie Client-seitige Tools in folgende vier allgemeine Kategorien von zu lösenden Problemen einteilen:

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

Schauen wir uns jedes dieser Tools etwas genauer an.

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 am meisten vertraut sind. 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 von der Kommandozeile aufgerufen werden kann (nicht der in Ihrem Browser). Node.js bleibt der Industriestandard und wir werden es verwenden. Bun ist als direkter Ersatz für Node.js gedacht und bekannt für seine Geschwindigkeit und leistungsfähigen APIs.
• Wie Sie die Tools installieren werden, mit anderen Worten, der Paketmanager. Node bietet standardmäßig npm an, daher werden wir es verwenden. Yarn und pnpm sind weitere beliebte Optionen, die jeweils eigene Vorteile wie Geschwindigkeit, Projektmanagement usw. bieten.

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

Dieser Teil des Toolings sollte spezifisch für Ihre eigene Entwicklungsumgebung sein, obwohl es nicht ungewöhnlich ist, dass Unternehmen eine Art Richtlinie oder vorgefertigte Konfiguration zum Installieren bereitstellen, damit alle Entwickler dieselben Prozesse verwenden.

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

Einige sehr gängige Sicherheitsnetz-Tooltypen, die Sie bei Entwicklern finden werden, sind die folgenden.

Linters

Linters sind Tools, die Ihren Code durchsuchen und Ihnen alle Fehler mitteilen, die vorhanden sind, welche Fehlertypen sie sind und in welchen Codezeilen sie vorhanden sind. Oft können Linters konfiguriert werden, um nicht nur Fehler zu melden, sondern auch Verstöße gegen einen bestimmten Stil-Leitfaden zu melden, den Ihr Team möglicherweise verwendet (zum Beispiel Code, der die falsche Anzahl von Leerzeichen für Einrückungen verwendet oder template literals anstelle von regulären string literals).

ESLint ist der Industriestandard-JavaScript-Linter — ein hoch konfigurierbares Tool zum Auffinden potenzieller Syntaxfehler und Einhaltung von "Best Practices" im gesamten Code. Einige Unternehmen und Projekte haben auch ihre ESLint-Konfigurationen geteilt.

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

Quellcode-Kontrolle

Auch bekannt als Versionskontrollsysteme (VCS), ist die Quellcode-Kontrolle essentiell, um Arbeit zu sichern und im Team zu arbeiten. Ein typisches VCS umfasst eine lokale Version des Codes, die Sie ändern. Sie "pushen" dann Änderungen zu einer "Master"-Version des Codes in einem entfernten Repository, das auf einem Server gespeichert ist. Es gibt in der Regel eine Möglichkeit, zu steuern und zu koordinieren, welche Änderungen am "Master"-Exemplar vorgenommen werden und wann, damit ein Entwicklerteam nicht ständig die Arbeit des anderen überschreibt.

Git ist das Versionskontrollsystem, das die meisten Leute heutzutage verwenden. Es wird hauptsächlich über die Kommandozeile aufgerufen, kann aber auch über benutzerfreundliche Benutzeroberflächen zugänglich gemacht werden. Mit Ihrem Code in einem Git-Repository können Sie ihn auf Ihre eigene Serverinstanz schieben oder eine gehostete Quellkontroll-Website 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 auf gewisse Weise Linters ähnlich, außer dass sie nicht darauf hinweisen, wo Fehler in Ihrem Code liegen, sondern sicherstellen, dass Ihr Code korrekt formatiert ist, gemäß Ihrer Stilregeln, idealerweise automatisch Fehler beheben, die sie finden.

Prettier ist ein sehr populäres Beispiel eines Code-Formatierers, den wir später im Modul nutzen werden.

Typprüfer

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

TypeScript ist der de facto Standard-Typprüfer für JavaScript. Es bietet seine eigene Syntax zur Typenannotation und ist in gewisser Weise eine eigene Sprache, deshalb werden wir es in diesem Modul nicht behandeln.

Diese Phase des Lebenszyklus Ihrer Web-App ermöglicht es Ihnen in der Regel, entweder in "zukünftigen Code" zu programmieren (wie die neuesten CSS- oder JavaScript-Funktionen, die möglicherweise noch keine native Unterstützung in Browsern haben), oder in einer ganz anderen Sprache, wie TypeScript. Transformationstools erzeugen dann browserkompatiblen Code für Sie, der in der Produktion verwendet werden soll.

Generell wird bei der Webentwicklung von drei Sprachen gesprochen: HTML, CSS und JavaScript, und es gibt Transformationstools für alle diese Sprachen. Transformation bietet drei Hauptvorteile (neben anderen):

1. Die Möglichkeit, Code mit den neuesten Sprachfunktionen zu schreiben und diesen in Code umzuwandeln, der auf alltäglichen Geräten funktioniert. Zum Beispiel möchten Sie vielleicht JavaScript mit hochmodernen neuen Sprachfunktionen schreiben, dennoch soll Ihr endgültiger Produktionscode auf älteren Browsern funktionieren, die diese Funktionen nicht unterstützen. Gute Beispiele hierfür sind:

   • Babel: Ein JavaScript-Compiler, der es Entwicklern ermöglicht, ihren Code mit den neuesten JavaScript-Features zu schreiben, die Babel dann auf altes JavaScript umwandelt, das mehr Browser verstehen können. Entwickler können auch Plugins für Babel schreiben und veröffentlichen.
   • PostCSS: Tut dasselbe wie Babel, jedoch für hochmoderne CSS-Funktionen. Sollte es keine gleichwertige Möglichkeit geben, etwas mit älteren CSS-Funktionalitäten zu erreichen, wird PostCSS ein JavaScript-Polyfill installieren, um den gewünschten CSS-Effekt zu emulieren.

2. Die Möglichkeit, Ihren Code in einer völlig anderen Sprache zu schreiben und ihn in eine webkompatible Sprache umwandeln zu lassen. Ein Beispiel hierfür ist:

   • Sass/SCSS: Diese CSS-Erweiterung erlaubt es Ihnen, Variablen, verschachtelte Regeln, Mixins, Funktionen und viele andere Features zu verwenden, von denen einige in nativen CSS verfügbar sind (wie Variablen), andere jedoch nicht.
   • TypeScript: TypeScript ist eine Obermenge von JavaScript, die viele zusätzliche Funktionen bietet. Der TypeScript-Compiler konvertiert TypeScript-Code in JavaScript, wenn er für die Produktion aufgebaut wird.
   • Frameworks wie React, Ember, und Vue: Frameworks stellen viele Funktionen kostenlos zur Verfügung und erlauben Ihnen, sie über benutzerdefinierte Syntax zu verwenden, die auf Vanilla-JavaScript aufbaut. Im Hintergrund arbeitet der JavaScript-Code des Frameworks hart daran, diese benutzerdefinierte Syntax zu interpretieren und es als finale Web-App zu rendern.

3. Optimierung. Dies wird von Bundlern bereitgestellt, die Ihre Code für die Produktion bereitstellen, 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 "Minifizierung" um allen Whitespace in Ihrem Produktionscode zu entfernen, sodass er so klein wie möglich ist, bevor er auf einen Server hochgeladen wird. Beispiele hierfür sind:

   • Webpack war lange Zeit der beliebteste Bundler und bietet eine riesige Anzahl von Plugins und ein leistungsfähiges Konfigurationssystem. Allerdings ist es auch dafür bekannt, dass es recht kompliziert einzurichten ist und im Vergleich zu moderneren Alternativen langsam ist.
   • Vite ist ein moderneres Build-Tool, das für seine Geschwindigkeit, Einfachheit und Funktionsvielfalt bekannt ist.

Nach der Entwicklung sichern Werkzeuge, dass Ihre Software ins Web kommt und weiterhin läuft. Dies umfasst die Bereitstellungsprozesse, Test-Frameworks, Auditing-Tools und mehr.

Diese Phase des Entwicklungsprozesses ist eine, die Sie sich so wenig wie möglich manuell mit befassen sollten, sodass sie, sobald sie konfiguriert ist, weitgehend automatisch läuft und sich nur meldet, wenn etwas schiefgelaufen ist.

Testwerkzeuge

Diese nehmen in der Regel die Form eines Tools an, das automatisch Tests gegen Ihren Code ausführt, um sicherzustellen, dass er korrekt ist, bevor Sie weitermachen (z.B. wenn Sie versuchen, Änderungen in ein GitHub-Repository zu pushen). Dies kann Linting einschließen, aber auch anspruchsvollere Verfahren wie Unit-Tests, bei denen Teile Ihres Codes ausgeführt werden, um sicherzustellen, dass sie sich richtig verhalten.

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

Bereitstellungswerkzeuge

Bereitstellungssysteme ermöglichen die Veröffentlichung Ihrer Website, sind sowohl für statische als auch für dynamische Sites verfügbar und tendieren häufig dazu, Hand in Hand mit Testsystemen zu arbeiten. Beispielsweise wird eine typische Toolchain darauf warten, dass Sie Änderungen an ein Remote-Repository pushen, einige Tests durchführen, um zu prüfen, ob die Änderungen in Ordnung sind, und dann, wenn die Tests bestanden sind, Ihre App automatisch auf einer Produktionsseite bereitstellen.

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

Andere

Es gibt mehrere andere Arten von Tools, die in der Phase nach der Entwicklung verwendet werden können, einschließlich Code Climate zur Erfassung von Codequalität-Metriken, die Webhint-Browsererweiterung zur Durchführung von Laufzeitanalysen der Kompatibilität mit verschiedenen Browsern und anderen Prüfungen, GitHub-Bots zur Bereitstellung erweiterter GitHub-Funktionen, Updown zur Überwachung der Verfügbarkeit von Apps, und viele mehr!

Es gibt sicherlich eine Reihenfolge, in der die verschiedenen Arten von Tools im Entwicklungszyklus Anwendung finden, aber keine Sorge, Sie müssen nicht alle diese Tools installiert haben, um eine Website zu veröffentlichen. Tatsächlich benötigen Sie keines dieser Tools. Wenn Sie jedoch einige davon in Ihren Prozess integrieren, wird dies wahrscheinlich Ihre eigene Entwicklungserfahrung verbessern und die Gesamtqualität Ihres Codes steigern.

Es dauert oft einige Zeit, bis sich neue Entwickler-Tools in ihrer Komplexität eingependelt haben. Eines der bekanntesten Tools, webpack, hat den Ruf, übermäßig kompliziert in der Handhabung zu sein, aber in der neuesten Hauptversion gab es einen großen Vorstoß, die gängigsten Anwendungsfälle zu vereinfachen, sodass die erforderliche Konfiguration auf ein absolutes Minimum reduziert wird.

Es gibt definitiv keine Patentlösung, die den Erfolg mit Tools garantiert, aber mit zunehmender Erfahrung finden Sie Workflows, die für Sie oder für Ihr Team und ihre Projekte funktionieren. Sobald alle Unstimmigkeiten im Prozess ausgebügelt sind, sollte Ihre Toolchain etwas sein, das Sie vergessen können und das einfach arbeiten sollte.

Die meisten Tools werden in der Regel isoliert geschrieben und veröffentlicht. Obwohl sicherlich Hilfe vorhanden ist, befindet sie sich fast nie am selben Ort oder in demselben Format. Es kann daher schwierig sein, Hilfe bei der Verwendung eines Tools zu finden oder sogar auszuwählen, welches Tool man verwenden soll. Das Wissen darüber, welche die besten Werkzeuge sind, ist teilweise tribal, was bedeutet, dass es schwer zu finden ist, wenn man nicht bereits in der Web-Community ist! Dies ist ein Grund, warum wir diese Artikelserie geschrieben haben, um hoffentlich diesen schwer zu findenden ersten Schritt bereitzustellen.

Sie benötigen wahrscheinlich eine Kombination der folgenden Dinge:

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

• Einen nützlichen spezifischen Suchort. Allgemeine Websuchen nach Entwickler-Tools für Front-End sind in der Regel nutzlos, es sei denn, Sie kennen bereits den Namen des Tools, nach dem Sie suchen.

  • Wenn Sie beispielsweise den npm-Paketmanager verwenden, um Ihre Abhängigkeiten zu verwalten, ist es eine gute Idee, zur npm-Homepage zu gehen und nach der Art von Tool zu suchen, die Sie suchen, z.B. nach "date", wenn Sie ein Datumsformatierungs-Utility benötigen, oder nach "formatter", wenn Sie einen allgemeinen Code-Formatierer suchen. Achten Sie auf die Beliebtheit, Qualität und Wartungspunkte und darauf, wann das Paket zuletzt aktualisiert wurde. Klicken Sie auch auf die Toolseiten, um zu sehen, 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 Datumsformatierungs-Tool aus, das man verwenden kann. Sie werden dieses Tool in Aktion sehen und mehr über Paketmanager im Allgemeinen im dritten Kapitel dieses Moduls erfahren.
  • Wenn Sie nach einem Plugin suchen, um die Funktionalität eines Tools in Ihren Code-Editor zu integrieren, schauen Sie auf die Plugins/Erweiterungsseite des Code-Editors — siehe VS Code-Erweiterungen zum Beispiel. Schauen Sie sich die vorgestellten Erweiterungen auf der Startseite an und suchen Sie erneut nach der Art von Erweiterung, die Sie möchten (oder nach dem Toolnamen, z.B. suchen Sie nach "ESLint" auf der VS Code-Erweiterungsseite). Wenn Sie Ergebnisse erhalten, werfen Sie einen Blick auf Informationen wie die Anzahl der Sterne oder Downloads, die die Erweiterung hat, als Indikator für ihre Qualität.

• Entwicklungsbezogene Foren, um Fragen zu stellen, welche Tools verwendet werden sollen, z.B. MDN Learn Discourse oder Stack Overflow.

Wenn Sie sich für ein Werkzeug entschieden haben, sollte die erste Anlaufstelle die Projekt-Homepage des Werkzeugs sein. Dies könnte eine umfassende Website oder ein einfaches Readme-Dokument in einem Code-Repository sein. Die date-fns-Dokumentation zum Beispiel ist ziemlich gut, vollständig und einfach zu folgen. Einige Dokumentationen können jedoch eher technisch und akademisch sein und nicht gut zu Ihren Lernbedürfnissen passen.

Stattdessen möchten Sie vielleicht einige spezialisierte Tutorials finden, um mit bestimmten Arten von Tools zu beginnen. Ein großartiger Ausgangspunkt ist die Suche auf Websites wie CSS Tricks, Dev, freeCodeCamp, und Smashing Magazine, da sie auf die Webentwicklungsbranche ausgerichtet sind.

Wahrscheinlich werden Sie mehrere verschiedene Werkzeuge durchgehen, während Sie nach den richtigen für Sie suchen, um sie auszuprobieren und zu sehen, ob sie Sinn ergeben, gut unterstützt werden und das tun, was Sie möchten. Das ist in Ordnung — es ist alles gut zum Lernen, und die Straße wird glatter, je mehr Erfahrung Sie sammeln.

Damit beschließen wir unsere sanfte Einführung in das Thema der Client-seitigen Web-Tools aus einer hohen Perspektive. Als nächstes werden wir uns Paketmanager ansehen.

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