Übersicht über Client-seitige Tools

Überblick über moderne Tools

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

Es gibt einige sehr etablierte Tools, die in der Entwicklergemeinschaft zu bekannten "Markennamen" geworden sind, und jeden Tag werden neue Tools geschrieben und veröffentlicht, um spezifische Probleme zu lösen. Vielleicht finden Sie sich sogar dabei, ein Softwarestück zu schreiben, um Ihren eigenen Entwicklungsprozess zu unterstützen, um ein spezifisches Problem zu lösen, das bestehende Tools nicht zu behandeln scheinen.

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

Von Zeit zu Zeit bleiben selbst die erfahrensten Webentwickler bei einem Tooling-Problem stecken; es ist möglich, Stunden zu verschwenden, um eine Tooling-Pipeline zum Laufen zu bringen, bevor man überhaupt eine einzige Zeile Anwendungs-Code anfasst. Wenn Sie in der Vergangenheit Schwierigkeiten hatten, dann keine Sorge — Sie sind nicht allein.

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

Das moderne Tooling-Ökosystem

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

Obwohl Ihre Wahl des Code-Editors sicherlich eine Tooling-Wahl ist, wird in dieser Artikelsammlung darüber hinausgegangen und sich auf Entwickler-Tools konzentriert, die Ihnen helfen, Web-Code effizienter zu produzieren. Wir werden Ihnen einige bestimmte Tools empfehlen und die folgenden Tutorials zeigen Ihnen, wie man sie verwendet. Diese Tools sind zum Zeitpunkt des Schreibens populär und Standard. Dies schließt nicht aus, dass Sie andere Tools verwenden können, wenn Sie sich ihrer relativen Vorteile bewusst sind.

Aus einer übergeordneten Perspektive können Sie Client-seitige Tools in die folgenden vier Hauptkategorien von zu lösenden Problemen einteilen:

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

Schauen wir uns jede dieser Kategorien genauer an.

Umgebung

Der Editor, das Betriebssystem und der Browser sind allesamt Entwicklungsumgebungen. Wir nehmen an, 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, gibt es noch zwei weitere Entscheidungen zu 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, den Sie von der Kommandozeile aus aufrufen können (nicht der im Browser). Node.js bleibt der Industriestandard und wir werden es verwenden. Bun ist als Drop-in-Ersatz für Node.js vorgesehen, bekannt für seine Geschwindigkeit und leistungsstarke APIs.
• Wie Sie die Tools installieren, mit anderen Worten, der Paketmanager. Node bietet standardmäßig npm an, und wir werden es verwenden. Yarn und pnpm sind andere beliebte Alternativen, jede mit ihren eigenen Vorteilen wie Geschwindigkeit, Projektmanagement etc.

Sicherheitsnetz

Dies sind Tools, die den Code, den Sie schreiben, ein wenig besser machen.

Dieser Teil des Toolings sollte auf Ihre eigene Entwicklungsumgebung zugeschnitten sein, obwohl es nicht ungewöhnlich ist, dass Unternehmen irgendeine Art von Richtlinie oder vorgefertigte Konfiguration zur Verfügung haben, die Sie installieren können, damit alle ihre Entwickler dieselben Prozesse verwenden.

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

Einige sehr gängige Typen von Sicherheitsnetz-Tools, die von Entwicklern verwendet werden, sind die folgenden.

Linter

Linter sind Tools, die Ihren Code prüfen und Ihnen über alle vorhandenen Fehler berichten, welche Fehlertypen sie sind und in welchen Codezeilen sie auftreten. Oft können Linter so konfiguriert werden, dass sie nicht nur Fehler melden, sondern auch Verstöße gegen einen bestimmten Stil-Guide 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-Linter — ein hoch konfigurierbares Tool zum Auffangen 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.

Quellcodekontrolle

Auch bekannt als Versionskontrollsysteme (VCS), ist die Quellcodekontrolle essentiell für das Sichern von Arbeit und die Zusammenarbeit in Teams. Ein typisches VCS beinhaltet eine lokale Version des Codes, die Sie ändern. Diese Änderungen "pushen" Sie dann zu einer "Master"-Version des Codes in einem entfernten Repository, das auf einem Server gespeichert ist. Es gibt normalerweise eine Möglichkeit, zu steuern und zu koordinieren, welche Änderungen an der "Master"-Kopie des Codes vorgenommen werden und wann, damit ein Team von Entwicklern nicht ständig gegenseitig ihre Arbeit überschreibt.

Git ist das Quellcodekontrollsystem, das heutzutage die meisten Menschen verwenden. Es wird hauptsächlich über die Kommandozeile angesprochen, kann aber auch über benutzerfreundliche Oberflächen genutzt werden. Mit Ihrem Code in einem Git-Repository können Sie es auf Ihren eigenen Server pushen oder eine gehostete Quellcodekontrollwebsite 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 mit Lintern insofern verwandt, als sie anstatt auf Fehler in Ihrem Code hinzuweisen, normalerweise sicherstellen, dass Ihr Code korrekt formatiert ist, gemäß Ihren Stilregeln, und idealerweise automatisch Fehler beheben, die sie finden.

Prettier ist ein sehr beliebtes Beispiel für einen Code-Formatierer, den wir später in diesem Modul verwenden werden.

Typ-Prüfer

Typ-Prüfer sind Tools, die Ihnen helfen, zuverlässigeren Code zu schreiben, indem sie überprüfen, ob Ihr Code die richtigen Datentypen zur richtigen Zeit verwendet. Dies verhindert häufige Fehlerklassen wie den Zugriff auf nicht vorhandene Eigenschaften, unerwartetes undefined usw.

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

Transformation

Diese Phase Ihres Web-App-Lebenszyklus ermöglicht es Ihnen typischerweise, entweder in "Zukunftscode" zu programmieren (wie die neuesten CSS- oder JavaScript-Features, die möglicherweise noch nicht native Unterstützung in Browsern haben) oder in einer völlig anderen Sprache zu programmieren, wie TypeScript. Transformationstools erzeugen dann browser-kompatiblen Code für Sie, der in der Produktion verwendet werden kann.

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

1. Die Möglichkeit, Code mit den neuesten Sprachfunktionen zu schreiben und diesen in Code zu transformieren, der auf alltäglichen Geräten funktioniert. Zum Beispiel möchten Sie möglicherweise JavaScript mit den neuesten Sprachfunktionen schreiben, aber trotzdem Ihren Endproduktcode auf älteren Browsern ausführen, die diese Funktionen nicht unterstützen. Gute Beispiele dafür sind:

   • Babel: Ein JavaScript-Compiler, der es Entwicklern ermöglicht, ihren Code mit den neuesten JavaScript-Funktionen zu schreiben, die Babel dann nimmt und 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, aber für moderne CSS-Funktionen. Wenn es keine gleichwertige Möglichkeit gibt, etwas mit älteren CSS-Funktionen zu tun, installiert PostCSS ein JavaScript-Polyfill, um den gewünschten CSS-Effekt zu emulieren.

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

   • Sass/SCSS: Diese CSS-Erweiterung erlaubt die Verwendung von Variablen, verschachtelten Regeln, Mixins, Funktionen und vielen anderen Funktionen, von denen einige in nativem CSS verfügbar sind (wie Variablen) und einige nicht.
   • TypeScript: TypeScript ist eine Erweiterungssprache für JavaScript, die eine Reihe zusätzlicher Funktionen bietet. Der TypeScript-Compiler wandelt TypeScript-Code in JavaScript um, wenn er für die Produktion gebaut wird.
   • Frameworks wie React, Ember und Vue: Frameworks bieten eine Menge Funktionalität kostenlos und ermöglichen es Ihnen, diese über eine benutzerdefinierte Syntax zu nutzen, die auf regulärem JavaScript aufbaut. Im Hintergrund arbeitet der JavaScript-Code des Frameworks hart daran, diese benutzerdefinierte Syntax zu interpretieren und als endgültige Web-App darzustellen.

3. Optimierung. Diese erfolgt durch Bundler, die Ihre Abläufe für die Produktion vorbereiten, zum Beispiel durch "tree-shaking", um sicherzustellen, dass nur die Teile Ihrer Code-Bibliotheken, die Sie tatsächlich verwenden, in Ihren endgültigen Produktionscode gelangen, oder durch "Minifizieren", um alle Leerzeichen 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 populärste Bundler, bekannt für seine große Anzahl von Plugins und ein leistungsfähiges Konfigurationssystem. Es ist jedoch auch dafür bekannt, dass es recht komplex einzurichten ist und im Vergleich zu moderneren Alternativen langsam ist.
   • Vite ist ein moderneres Build-Tool, das für seine Geschwindigkeit, Einfachheit und Funktionsreichweite bekannt ist.

Nachentwicklung

Nachentwicklungstools stellen sicher, dass Ihre Software ins Web gelangt und dort weiterhin läuft. Dazu gehören der Bereitstellungsprozess, Testframeworks, Auditing-Tools und mehr.

Diese Phase des Entwicklungsprozesses ist eine, in der Sie möglichst wenig aktive Interaktion wünschen, damit sie, einmal konfiguriert, weitgehend automatisch abläuft und nur dann auf Sie zukommt, wenn etwas schiefgelaufen ist.

Testwerkzeuge

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

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

Bereitstellungswerkzeuge

Bereitstellungssysteme ermöglichen Ihnen, Ihre Website zu veröffentlichen, sind sowohl für statische als auch dynamische Seiten verfügbar und arbeiten häufig im Zusammenspiel mit Testsystemen. Beispielsweise wartet eine typische Werkzeugkette darauf, dass Sie Änderungen an ein Remote-Repo pushen, führt einige Tests durch, um zu sehen, ob die Änderungen in Ordnung sind, und stellt dann, wenn die Tests erfolgreich sind, automatisch Ihre App auf einer Produktivseite bereit.

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

Andere

Es gibt mehrere andere Werkzeugtypen, die in der Nachentwicklungsphase verwendet werden können, darunter Code Climate zum Sammeln von Code-Qualitätsmetriken, die Webhint Browser-Erweiterung zur Durchführung von Laufzeitanalysen der Browser-Kompatibilität und anderer Prüfungen, GitHub Bots zur Bereitstellung mächtigerer GitHub-Funktionalität, Updown zur Bereitstellung von App-Uptime-Überwachung und viele mehr!

Einige Gedanken zu Tooling-Typen

Es gibt sicherlich eine Reihenfolge, in der die verschiedenen Tooling-Typen im Entwicklungslebenszyklus angewendet werden, aber Sie können beruhigt sein, dass Sie nicht alle diese haben müssen, um eine Website zu veröffentlichen. Tatsächlich benötigen Sie keines davon. Jedoch, wenn Sie einige dieser Tools in Ihren Prozess einbeziehen, verbessert dies die eigene Entwicklungserfahrung und verbessert wahrscheinlich die Gesamtqualität Ihres Codes.

Es dauert oft einige Zeit, bis sich neue Entwickler-Tools in ihrer Komplexität stabilisiert haben. Eines der bekanntesten Tools, webpack, hat einen Ruf, übermäßig kompliziert zu sein, aber in der neuesten Hauptversion gab es einen großen Vorstoß, den allgemeinen Gebrauch zu vereinfachen, so dass die benötigte Konfiguration auf ein absolutes Minimum reduziert wurde.

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

Anleitung zur Auswahl und Unterstützung eines bestimmten Tools

Die meisten Tools werden dazu tendieren, isoliert entwickelt und veröffentlicht zu werden, sodass, obwohl es fast sicher ist, dass Hilfe verfügbar ist, diese nie am selben Ort oder im selben Format vorzufinden ist. Daher kann es schwierig sein, Hilfe bei der Nutzung eines Tools zu finden oder sogar zu entscheiden, welches Tool verwendet werden soll. Das Wissen darüber, welche die besten Tools sind, ist etwas verinnerlicht, was bedeutet, dass es schwierig ist, es herauszufinden, wenn Sie nicht schon in der Web-Gemeinschaft sind! Dies ist einer der Gründe, warum wir diese Serie von Artikeln geschrieben haben, um hoffentlich diesen ersten Schritt zu liefern, der sonst schwer zu finden ist.

Sie werden wahrscheinlich eine Kombination der folgenden Dinge brauchen:

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

• Ein nützlicher spezifischer Suchort. Allgemeine Websuchen für Front-End-Entwickler-Tools sind im Allgemeinen nutzlos, es sei denn, Sie kennen bereits den Namen des Tools, das Sie suchen.

  • Wenn Sie beispielsweise den npm Paketmanager verwenden, um Ihre Abhängigkeiten zu verwalten, sollten Sie zur npm-Startseite gehen und nach der Art von Tool suchen, das Sie benötigen. Versuchen Sie, nach "date" zu suchen, wenn Sie ein Datumsformatierungswerkzeug suchen, oder "formatter" wenn Sie nach einem allgemeinen Code-Formatter suchen. Achten Sie auf die Beliebtheit, Qualität und Wartungspunkte, und wann das Paket zuletzt aktualisiert wurde. Klicken Sie auch auf die Tool-Seiten, um zu erfahren, wie viele monatliche Downloads ein Paket hat und ob es eine gute Dokumentation hat, mit der Sie feststellen können, ob es das ist, was Sie benötigen. Basierend auf diesen Kriterien scheint die date-fns Library ein gutes Datumsformatierungswerkzeug zu sein. Sie werden dieses Tool in Aktion sehen und mehr über Paketmanager im Allgemeinen im Kapitel 3 dieses Moduls erfahren.
  • Wenn Sie nach einem Plugin suchen, um die Tool-Funktionalität in Ihren Code-Editor zu integrieren, schauen Sie auf der Plugin-/Erweiterungsseite des Code-Editors nach — siehe z.B. VS Code-Erweiterungen. Werfen Sie einen Blick auf die vorgestellten Erweiterungen auf der Startseite und versuchen Sie erneut, nach der Art der Erweiterung zu suchen, die Sie möchten (oder dem Toolnamen, z.B. Suche nach "ESLint" auf der VS Code-Erweiterungsseite). Wenn Sie Ergebnisse erhalten, schauen Sie sich Informationen an wie die Anzahl von Sternen oder Downloads der Erweiterung als Indikator für ihre Qualität.

• Entwicklungsbezogene Foren, auf denen Sie Fragen stellen können, welche Tools zu verwenden sind, zum Beispiel MDN Learn Discourse oder Stack Overflow.

Wenn Sie sich für ein Tool entschieden haben, das Sie verwenden möchten, sollte die erste Anlaufstelle die Startseite des Projekts sein. Dies kann eine vollwertige Website oder auch nur ein einzelnes Readme-Dokument in einem Code-Repository sein. Die date-fns-Dokumentation ist beispielsweise ziemlich gut, vollständig und einfach zu folgen. Einige Dokumentationen sind jedoch eher technisch und akademisch und passen möglicherweise nicht gut zu Ihren Lernbedürfnissen.

Stattdessen möchten Sie vielleicht einige spezielle Tutorials zum Einstieg mit bestimmten Arten von Tools finden. Ein guter Startpunkt ist es, Webseiten wie CSS Tricks, Dev, freeCodeCamp und Smashing Magazine zu durchsuchen, da sie auf die Webentwicklungsbranche zugeschnitten sind.

Erneut werden Sie wahrscheinlich mehrere verschiedene Tools ausprobieren, während Sie nach den richtigen für Sie suchen, um herauszufinden, ob sie Sinn machen, gut unterstützt sind und tun, was Sie wollen. Das ist in Ordnung — es ist alles gut fürs Lernen und der Weg wird glatter, je mehr Erfahrung Sie sammeln.

Zusammenfassung

Das schließt unsere sanfte Einführung in das Thema Client-seitiges Web-Tooling aus einer hohen Perspektive ab. Als nächstes werden wir uns Paketmanager ansehen.

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