Übersicht über Client-seitige Werkzeuge

Überblick über moderne Tools

Die Softwareentwicklung für das Web ist im Laufe der Zeit anspruchsvoller geworden. Obwohl es nach wie vor völlig vernünftig 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 extrem gut etablierte Tools, die unter der Entwicklergemeinschaft als "Haushaltsnamen" bekannt geworden sind, und jeden Tag werden neue Tools geschrieben und veröffentlicht, um spezifische Probleme zu lösen. Möglicherweise schreiben Sie sogar ein eigenes Stück Software, um Ihren Entwicklungsprozess zu unterstützen und ein spezifisches Problem zu lösen, das bestehende Tools scheinbar nicht bereits abdecken.

Es ist leicht, sich von der Vielzahl von 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 wie magische Beschwörungen erscheinen, die den Job erledigen, aber die nur ein Meisteringenieur vollständig verstehen wird!

Von Zeit zu Zeit geraten selbst die erfahrensten Webentwickler bei einem Werkzeugproblem ins Stocken; es ist möglich, Stunden damit zu verschwenden, zu versuchen, eine Werkzeugpipeline zum Laufen zu bringen, bevor überhaupt eine einzige Zeile Anwendungscode angefasst wurde. Wenn Sie sich in der Vergangenheit damit schwergetan haben, machen Sie sich keine Sorgen — Sie sind nicht allein.

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

Das moderne Tool-Ökosystem

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

Auch wenn die Wahl Ihres Code-Editors sicherlich eine Werkzeugwahl ist, gehen wir in dieser Artikelreihe darüber hinaus und konzentrieren uns auf Entwickler-Tools, die Ihnen helfen, Webcode effizienter zu erstellen. Wir empfehlen einige spezifische Tools und die folgenden Tutorials zeigen Ihnen, wie Sie sie verwenden. Diese Tools sind zum Zeitpunkt des Schreibens populär und standardisiert. Dies schließt nicht aus, dass Sie andere Tools verwenden, wenn Ihnen deren relative Vorteile bewusst sind.

Aus einer höheren Perspektive können Sie Client-seitige Tools in die folgenden vier breiten Kategorien von zu lösenden Problemen einteilen:

• Umgebung — Tools, die Ihnen helfen, Ihre Entwicklungsumgebung einzurichten, z.B. beim Installieren und Ausführen anderer Tools.
• Sicherheitsnetz — Tools, die während Ihrer Codeentwicklung nützlich sind.
• Transformation — Tools, die den Code auf irgendeine Weise transformieren, z.B. indem sie eine Zwischensprache in JavaScript umwandeln, das ein Browser verstehen kann.
• Nach der Entwicklung — Tools, die nützlich sind, nachdem Sie Ihren Code geschrieben haben, wie z.B. Test- und Bereitstellungstools.

Schauen wir uns jede dieser Kategorien im Detail an.

Umgebung

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 komfortabelsten sind. Bevor Sie jedoch andere Tools installieren und ausführen, gibt es noch zwei 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, der über die Befehlszeile aufgerufen werden kann (nicht der im Browser). Node.js bleibt der Industriestandard und wir werden es verwenden. Bun ist als Ersatz für Node.js gedacht, bekannt für seine Geschwindigkeit und leistungsstarken APIs.
• Wie Sie die Tools installieren werden, mit anderen Worten, der Package Manager. Node bietet standardmäßig npm, daher werden wir es verwenden. Yarn und pnpm sind weitere beliebte Optionen, jede mit ihren eigenen Vorteilen wie Geschwindigkeit, Projektmanagement usw.

Sicherheitsnetz

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

Dieser Teil der Tools sollte spezifisch für Ihre eigene Entwicklungsumgebung sein, obwohl es nicht ungewöhnlich ist, dass Unternehmen eine Art Richtlinie oder vorkonfigurierte Installation anbieten, damit alle ihre Entwickler dieselben Prozesse verwenden.

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

Einige sehr verbreitete Sicherheitsnetz-Tool-Typen, die Sie bei Entwicklern finden werden, sind die folgenden.

Linters

Linters sind Tools, die Ihren Code durchsehen und Ihnen über alle vorhandenen Fehler informieren, welche Fehlertypen es sind und in welchen Codezeilen sie auftreten. Oft können Linters so konfiguriert werden, dass sie nicht nur Fehler melden, sondern auch Verstöße gegen einen bestimmten Styleguide melden, den Ihr Team möglicherweise verwendet (beispielsweise Code, der die falsche Anzahl von Leerzeichen für Einrückungen verwendet oder Template Literals anstelle von regulären String-Literalen).

ESLint ist der Industriestandard-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 z.B. stylelint.

Quellcode-Verwaltung

Auch bekannt als Version Control Systems (VCS), ist die Quellcode-Verwaltung unentbehrlich zum Sichern der Arbeit und Arbeiten im Team. Ein typisches VCS beinhaltet eine lokale Version des Codes, in die Sie Änderungen vornehmen. Sie "pushen" dann Änderungen an eine "Master"-Version des Codes in einem entfernten Repository, das auf einem Server gespeichert ist. Es gibt normalerweise eine Möglichkeit, zu kontrollieren und zu koordinieren, welche Änderungen wann an der "Master"-Kopie des Codes vorgenommen werden, damit ein Entwicklerteam nicht ständig die Arbeit des anderen überschreibt.

Git ist das Quellcode-Verwaltungssystem, das heutzutage die meisten verwenden. Es wird hauptsächlich über die Befehlszeile angesprochen, kann aber über benutzerfreundliche Oberflächen genutzt werden. Mit Ihrem Code in einem Git-Repository können Sie ihn auf Ihre eigene Serverinstanz pushen oder eine gehostete Quellcode-Verwaltungs-Website wie GitHub, GitLab oder Bitbucket verwenden.

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

Code-Formatter

Code-Formatter sind etwas artverwandt mit Linters, abgesehen davon, dass sie nicht auf Fehler in Ihrem Code hinweisen, sondern üblicherweise sicherstellen, dass Ihr Code korrekt formatiert ist, gemäß Ihren Stilregeln, idealerweise automatisch Fehler beheben, die sie finden.

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

Typprüfer

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

TypeScript ist der De-facto-Standard-Typprüfer für JavaScript. Er bietet seine eigene Typanmerkungssyntax und ist ein Stück weit eine eigene Sprache, daher werden wir es in diesem Modul nicht behandeln.

Transformation

Diese Phase des Lebenszyklus Ihrer Web-App ermöglicht es Ihnen typischerweise, entweder im "Zukunftscode" zu programmieren (z. B. die neuesten CSS- oder JavaScript-Funktionen, die möglicherweise noch nicht nativ in Browsern unterstützt werden) oder eine andere Sprache völlig zu verwenden, wie beispielsweise TypeScript. Transformationstools generieren dann für Sie browserkompatiblen Code, der in der Produktion verwendet wird.

Im Allgemeinen wird die Webentwicklung als drei Sprachen betrachtet: HTML, CSS und JavaScript, und es gibt Transformationstools für all 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. Beispielsweise möchten Sie möglicherweise JavaScript mit hochmodernen neuen Sprachfunktionen schreiben, aber trotzdem, dass Ihr finaler Produktionscode auf älteren Browsern funktioniert, die diese Funktionen nicht unterstützen. Gute Beispiele hierfür sind:

   • Babel: Ein JavaScript-Compiler, der es Entwicklern ermöglicht, ihren Code mit hochmodernem JavaScript zu schreiben, das 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 dasselbe wie Babel, jedoch für hochmoderne CSS-Funktionen. Wenn es keine äquivalente Möglichkeit gibt, etwas mit älteren CSS-Funktionen zu tun, wird PostCSS ein JavaScript-Polyfill installieren, um den CSS-Effekt zu emulieren, den Sie möchten.

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

   • Sass/SCSS: Diese CSS-Erweiterung ermöglicht es Ihnen, Variablen, verschachtelte Regeln, Mixins, Funktionen und viele andere Funktionen zu verwenden, von denen einige in nativem CSS verfügbar sind (z. B. Variablen) und einige nicht.
   • TypeScript: TypeScript ist eine Obermenge von JavaScript, die eine Vielzahl zusätzlicher Funktionen bietet. Der TypeScript-Compiler wandelt TypeScript-Code beim Erstellen für die Produktion in JavaScript um.
   • Frameworks wie React, Ember und Vue: Frameworks bieten eine Menge Funktionalität kostenfrei an und ermöglichen Ihnen die Nutzung über benutzerdefinierte Syntax, 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. Diese wird durch Bundler bereitgestellt, die Ihre 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 Ihrem finalen Produktionscode enthalten sind, oder "Minimierung", um alle Leerzeichen in Ihrem Produktionscode zu entfernen, damit er so klein wie möglich wird, bevor er auf einen Server hochgeladen wird. Zum Beispiel:

   • webpack war lange Zeit der beliebteste Bundler, mit einer Vielzahl von Plugins und einem leistungsstarken Konfigurationssystem. Allerdings ist es auch dafür bekannt, recht komplex einzurichten zu sein und ist langsamer im Vergleich zu modernere Alternativen.
   • Vite ist ein moderneres Build-Tool, das für seine Geschwindigkeit, Einfachheit und Funktionsvielfalt beliebt ist.

Nach der Entwicklung

Tools nach der Entwicklung stellen sicher, dass Ihre Software es ins Web schafft und weiterhin funktioniert. Dazu gehören die Bereitstellungsprozesse, Test-Frameworks, Prüf-Tools und mehr.

Diese Phase des Entwicklungsprozesses ist eine, mit der Sie so wenig aktive Interaktion wie möglich wollen, so dass, wenn es einmal konfiguriert ist, es größtenteils automatisch läuft und nur "Hallo" sagt, wenn etwas schief gelaufen ist.

Testwerkzeuge

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 weitergehen (beispielsweise wenn Sie versuchen, Änderungen in ein GitHub-Repo zu pushen). Dies kann Linting umfassen, aber auch komplexere Verfahren wie Unit-Tests, bei denen ein Teil Ihres Codes ausgeführt wird, um sicherzustellen, dass er sich wie erwartet verhält.

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

Bereitstellungstools

Bereitstellungssysteme ermöglichen es Ihnen, Ihre Website zu veröffentlichen, stehen sowohl für statische als auch dynamische Sites zur Verfügung und arbeiten häufig neben Testsystemen. Beispielsweise wartet eine typische Toolchain darauf, dass Sie Änderungen in ein entferntes Repo pushen, führt einige Tests durch, um zu sehen, ob die Änderungen in Ordnung sind, und stellt Ihre App dann automatisch auf einer Produktionsseite bereit, wenn die Tests bestehen.

GitHub Pages ist schön mit GitHub selbst integriert und für alle öffentlichen Repos kostenlos. Andere Dienste wie Netlify und Vercel sind ebenfalls sehr beliebt und bieten großzügige Quoten für kostenlose Tarife, reibungslose Bereitstellungs-Workflows und GitHub-Integration.

Andere

Es gibt mehrere andere Arten von Tools, die in der Phase nach der Entwicklung eingesetzt werden können, darunter Code Climate für das Sammeln von Code-Qualitätsmetriken, die Webhint-Browsererweiterung zur Durchführung von Laufzeitanalysen der plattformübergreifenden Kompatibilität und anderer Überprüfungen, GitHub Bots zur Bereitstellung mächtigerer GitHub-Funktionalitäten, Updown zur Bereitstellung von App-Verfügbarkeitsüberwachung und viele mehr!

Einige Gedanken zu Tool-Typen

Es gibt definitiv eine Reihenfolge, in der die verschiedenen Tool-Typen im Entwicklungslebenszyklus angewendet werden. Aber seien Sie versichert, dass Sie keines dieser Tools benötigen, um eine Website zu veröffentlichen. Tatsächlich brauchen Sie keines dieser Tools. Das Einbeziehen einiger dieser Werkzeuge in Ihren Prozess wird jedoch Ihre eigene Entwicklungserfahrung verbessern und wahrscheinlich die Gesamtqualität Ihres Codes erhöhen.

Es dauert oft einige Zeit, bis sich neue Entwickler-Tools hinsichtlich ihrer Komplexität beruhigen. Eines der bekanntesten Tools, webpack, hat den Ruf, übermäßig kompliziert zu sein, aber in der neuesten Hauptveröffentlichung gab es einen starken Push, die häufige Nutzung zu vereinfachen, sodass die benötigte Konfiguration auf ein absolutes Minimum reduziert ist.

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

Wie man ein bestimmtes Tool auswählt und Hilfe bekommt

Die meisten Tools werden in der Regel isoliert entwickelt und veröffentlicht, daher gibt es fast immer Hilfe, aber sie ist nie am selben Ort oder in demselben Format. Es kann daher schwierig sein, Hilfe beim Verwenden eines Tools zu finden oder sogar zu entscheiden, welches Tool zu verwenden ist. Das Wissen darüber, welche die besten Tools zu verwenden sind, ist ein wenig "stammesartig", was bedeutet, dass es schwer zu finden ist, wenn man noch nicht Teil der Web-Community ist! Dies ist einer der Gründe, warum wir diese Reihe von Artikeln geschrieben haben, um hoffentlich den ersten Schritt zu bieten, den man sonst nur schwer findet.

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

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

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

  • Wenn Sie zum Beispiel den npm-Paketmanager verwenden, um Ihre Abhängigkeiten zu verwalten, ist es eine gute Idee, auf der npm-Homepage nach der Art des Tools zu suchen, das Sie benötigen, zum Beispiel versuchen Sie, nach "date" zu suchen, wenn Sie ein Datumformatierungsdienstprogramm benötigen, oder "formatter", wenn Sie nach einem allgemeinen Codeformatierer suchen. Achten Sie auf die Beliebtheit, Qualität und Wartungspunkte und wie kürzlich das Paket zuletzt 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 nutzen können, um herauszufinden, ob es das tut, was Sie benötigen. Basierend auf diesen Kriterien sieht die date-fns-Bibliothek für ein gutes Datumformatierungstool gut aus. Sie werden dieses Tool in Aktion sehen und mehr über Paketmanager im Allgemeinen in Kapitel 3 dieses Moduls erfahren.
  • Wenn Sie nach einem Plugin suchen, um die Tool-Funktionalität in Ihren Code-Editor zu integrieren, schauen Sie sich die Plugin-/Erweiterungsseite Ihres Code-Editors an — sehen Sie sich beispielsweise VS Code Erweiterungen an. Schauen Sie sich die vorgestellten Erweiterungen auf der Startseite an und versuchen Sie erneut, nach der Art der Erweiterung zu suchen, die Sie möchten (oder dem Toolnamen, z.B. suchen Sie nach "ESLint" auf der VS Code-Erweiterungsseite). Wenn Sie Ergebnisse erhalten, schauen Sie sich Informationen wie die Anzahl der Sterne oder Downloads der Erweiterung als Qualitätsanzeige an.

• Entwicklungsbezogene Foren, um Fragen dazu zu stellen, welche Tools zu verwenden sind, wie zum Beispiel MDN Learn Discourse oder Stack Overflow.

Wenn Sie ein Tool ausgewählt haben, sollte der erste Anlaufpunkt die Projekt-Homepage des Tools sein. Dies könnte eine vollständige Website sein oder ein einzelnes Readme-Dokument in einem Code-Repository. Die date-fns-Dokumentation zum Beispiel ist ziemlich gut, vollständig und leicht zu folgen. Einige Dokumentationen können jedoch recht technisch und akademisch sein und möglicherweise nicht Ihren Lernbedürfnissen entsprechen.

Stattdessen möchten Sie vielleicht einige dedizierte Tutorials zu bestimmten Arten von Tools finden. Ein großartiger Ausgangspunkt ist es, Websites wie CSS Tricks, Dev, freeCodeCamp und Smashing Magazine zu durchsuchen, da sie auf die Belange der Webentwicklungsindustrie zugeschnitten sind.

Erneut werden Sie wahrscheinlich 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 sind und tun, was Sie möchten. Das ist in Ordnung — es ist alles gut fürs Lernen und der Weg wird reibungsloser, je mehr Erfahrung Sie sammeln.

Zusammenfassung

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

• Übersicht: Verständnis der Tools für die clientseitige Webentwicklung
• Weiter