15 wichtige JavaScript-Tools, die Sie verwenden sollten
JavaScript ist ein wichtiges Werkzeug für jeden Webentwickler. Um Ihnen zu helfen, das Beste aus dieser leistungsstarken Programmiersprache herauszuholen, sollten Sie die Hilfe einiger dedizierter Tools in Anspruch nehmen (und Ihre Web-Hosting richtig). Die gute Nachricht ist, dass Ihnen hier nicht die Optionen fehlen: Es stehen zahlreiche JavaScript-Tools zur Auswahl. Der schwierige Teil besteht darin, diejenigen auszuwählen, die für Sie und Ihren Workflow geeignet sind.
In diesem Artikel haben wir zusammengefasst, was unserer Meinung nach die derzeit besten JavaScript-Tools sind. Wenn Sie kein Entwickler sind oder einfach nur schnell und ohne Code eine Site erstellen möchten, sollten Sie a verwenden Webseitenersteller .
01. Webkomponenten
Das Konzept einer Komponente wird in JavaScript-Frameworks häufig verwendet. Sie werden verwendet, um ein Projekt in mehrere wiederverwendbare Teile aufzuteilen, die unabhängig voneinander verschoben werden können. Aber was passiert, wenn es Zeit ist, das Framework zu ändern? Zuvor geschriebene Komponenten funktionieren nicht mehr. Entweder wird eine zusätzliche Arbeitslast zum Konvertieren der Komponenten hinzugefügt, oder das Projekt bleibt an dieses Framework gebunden.
Webkomponenten sind eine Lösung für dieses Problem. Sie werden mit nativen Webtechnologien geschrieben, sind in sich geschlossen und legen Werte und Verhaltensweisen durch Attribute wie jedes andere HTML-Element offen.
Sie bestehen aus drei separaten Spezifikationen: HTML-Vorlagen, Schatten-DOM und benutzerdefinierte Elemente.
HTML-Vorlagen
Diese definieren das visuelle Erscheinungsbild einer Komponente. Sie enthalten die Struktur des Inhalts, der dann für jede Komponente auf der Seite kopiert und wiederverwendet werden kann.
Schatten DOM
Das Konzept, das interne Markup der Komponente vom Rest des Dokuments fernzuhalten. Dies verhindert, dass Stile und andere Logik ausbrechen und andere Komponenten beeinflussen.
Benutzerdefinierte Elemente
Dies ist der Klebstoff, der alles zusammenhält. Sie sind für den Lebenszyklus der Komponente verantwortlich, der zusätzliche Logik für das Hinzufügen oder Entfernen einer Komponente zur Seite enthalten kann.
Webkomponenten können neben ihren Framework-Gegenstücken verwendet werden. Da sie sich wie native Elemente verhalten sollen, funktionieren die meisten Frameworks problemlos mit ihnen. Einige Frameworks, wie Angular, müssen möglicherweise vorab über ihre Existenz informiert werden, um ordnungsgemäß zu funktionieren.
Da sie leicht zusammengesetzt werden können, können Komponenten aus vielen Quellen importiert werden. Websites wie webcomponents.org Stellen Sie mehrere vorgefertigte Elemente bereit, die sofort eingefügt und verwendet werden können.
Während es das Konzept einer Webkomponente seit 2011 gibt, haben sich die Spezifikationen ständig geändert. Im Jahr 2018 beruhigten sich die Dinge, und Firefox implementierte im Oktober die neuesten Versionen von Shadow DOM und benutzerdefinierten Elementspezifikationen. Da Edge seine Implementierungen im Jahr 2019 ausliefern wird, werden sie von allen gängigen Browsern nativ unterstützt.
02. WebAssembly
Eine Beschwerde über die Verwendung des Browsers zum Hosten von Anwendungen ist, dass JavaScript bei prozessorintensiven Aufgaben wie Game Engines oder Videobearbeitung zu langsam ausgeführt wird.
WebAssembly - oder 'WASM' - ist ein Kompilierungsziel für Code, der in anderen Sprachen geschrieben wurde und besser für schweres Heben geeignet ist. Dadurch können vorhandene Programme, die in Sprachen wie C ++, Rust oder Go geschrieben sind, ins Web gelangen. Indem diese in ein Binärformat kompiliert werden, können sie in Blöcke aufgeteilt und effizient heruntergeladen werden.
Diese Binärdateien werden dann im Speicher kompiliert und mithilfe des neuen WebAssembly-Objekts instanziiert. Es gibt einen Drang, diese wie alle anderen JavaScript-Module importierbar zu machen, aber die Arbeit in diesem Bereich ist noch nicht abgeschlossen.
WASM ist zwar eine neue Sprache, mit der im Browser gearbeitet werden kann, macht es jedoch nicht zu einem Konkurrenten von JavaScript. Beide Sprachen haben ihre Vorteile, da sich JavaScript immer noch besser für den täglichen Betrieb im Browser eignet. Sie können zusammenarbeiten und Autonomie über einzelne Teile einer Anwendung haben.
WASM bietet browserübergreifende Unterstützung, jetzt auch für Mobilgeräte. Dies öffnet die Tür zu vielen Möglichkeiten, die bisher auf native Anwendungen beschränkt waren. Im Laufe des nächsten Jahres werden möglicherweise mehr Spiele und Anwendungsentwickler diese Technologie nutzen.
03. Anzeigen
Aussicht hat im vergangenen Jahr stetig zugenommen. Die jüngsten Updates haben sich mehr auf Entwicklererfahrung und Qualitätsverbesserungen konzentriert. Vue 2.5 wurde bereits 2017 veröffentlicht und enthielt Aktualisierungen der Fehlerbehandlung, des Server-Renderings und der TypeScript-Definitionen. Einzelne Funktionskomponenten - eine der beliebtesten Funktionen von Vue - wurden aktualisiert, um CSS mit Gültigkeitsbereich zu unterstützen und die Vorlagenerstellung zu verbessern.
Seitdem konzentrierten sich die Aktualisierungen der zentralen Vue-Erfahrung hauptsächlich auf Fehlerkorrekturen und Leistungsverbesserungen. Der Fokus hat sich nun auf ergänzende Entwicklungsprodukte verlagert.
Version 3 des CLI-Tools von Vue wird konfigurierbarer. Funktionen wie Routing, Flusen und Datenverwaltung werden während der Initialisierung ausgewählt. Diese Funktionen können nach Bedarf hinzugefügt und entfernt werden, ohne den Erstellungsprozess auseinanderzunehmen.
Neben der CLI steht eine Weboberfläche zur Verfügung, mit der die verschiedenen Teile einer Anwendung visualisiert werden können. Dies dient als Dashboard zur Analyse von Ladezeiten, -größen und -schmerzpunkten innerhalb des Builds während der Ausführung.
Mit Blick auf die Zukunft wird 2019 Vue 3.0 veröffentlicht. Während wichtige Änderungen auf ein Minimum beschränkt werden, konzentriert sich diese Version auf die Verwendung von ES2015-Klassen-basierten Komponenten. Es werden auch Fragmente und Portale unterstützt, ähnlich wie bei den Funktionen in React.
- Mehr erfahren: Beschleunigen Sie die Leistung mit Vue.js.
04. TypeScript
Bringen Sie Typensicherheit in JavaScript mit Typoskript . Mit diesem Tool können Sie erwartete Typen für Variablen definieren und Build-Tools und IDEs vor Problemen warnen lassen. Version 3 bietet eine bessere Unterstützung für neuere Konzepte wie Rest- und Spread-Operatoren.
- Mehr erfahren: Erste Schritte mit TypeScript
05. Reagieren
Reagieren 16.6 brachte die Funktion 'Spannung' mit, mit der die Arbeit mit dynamischen Inhalten einfacher wurde. Kombiniert mit React.lazy () Es wird ein Punkt erstellt, an dem Code in kleinere Blöcke aufgeteilt werden kann. Die Spannung kann eine Fallback-Komponente wie einen Ladespinner rendern, während die Komponente geladen wird. Im Jahr 2019 wird die Spannung zu einem flexibleren Werkzeug. Durch das Auslösen des Datenabrufs als Teil des Datenflusses erhalten Benutzer eine nahtlose, native Erfahrung.
Eine der einfachsten Möglichkeiten, um mit React zu beginnen, ist die Verwendung des Tools 'React App erstellen', um ein Projekt zu stempeln. Ein kürzlich veröffentlichtes Update hat seine Abhängigkeiten aktualisiert und seine Funktionen verbessert. Create React App 2.0 verwendet Babel 7 und Webpack 4 zum Erstellen von Projekten. Dies beschleunigt das Erstellen und öffnet die Tür zu neueren Funktionen wie der Kurzfragment-Syntax.
Projekte, die mit der vorherigen Version erstellt wurden, können durch Aktualisieren der Abhängigkeit von 'Reaktionsskripten' aktualisiert werden. Das Aktualisieren ausgeworfener Anwendungen ist ein manueller Vorgang, der jedoch Stück für Stück aktualisiert werden kann.
Die Reaktion zeigt keine Anzeichen einer Verlangsamung in diesem Jahr. Mithilfe von Hooks können Funktionskomponenten Verhalten und Lebenszyklusverhalten anzeigen. Der gleichzeitige Modus verbessert die Leistung von Komponenten mit langsamer Wiedergabe. Beide Funktionen sollen im ersten Halbjahr 2019 veröffentlicht werden.
- Mehr erfahren: Entwickeln Sie wiederverwendbare React-Komponenten
06. Winkel
Winkelig ist ein Framework, das an allen Teilen einer Anwendung beteiligt ist, einschließlich Datenverarbeitung und Schnittstellenaktualisierungen. Während es die Bündelgrößen aufblasen kann, arbeiten alle Teile der Anwendung nahtlos zusammen.
Version 7 von Angular erweitert jeden Teil des Frameworks um Verbesserungen. Während es nur wenige Änderungen gibt, mit denen Entwickler herumspielen können, gibt es viele Änderungen, die die Geschwindigkeit und Zuverlässigkeit hinter den Kulissen verbessern. Es ist jetzt möglich, Leistungsbudgets für Bundle-Größen hinzuzufügen. Dadurch wird sichergestellt, dass ein Build niemals übermäßig groß wird, ohne dass dies beachtet wird.
Im Rahmen eines Gesamtupdates für Material Design wurden auch die jeweiligen Angular CDK-Komponenten aktualisiert. Das Bildlaufmodul ermöglicht beispielsweise die Unterstützung des virtuellen Bildlaufs, wodurch lange Listen reibungslos gescrollt werden können.
Bei einem Upgrade auf Version 7 wird in den meisten Fällen eine Zeile über die CLI ausgeführt.
ng update @angular/cli @angular/coreZukünftige Updates werden sich auf die neue Ivy-Rendering-Engine konzentrieren. Dies verbessert die Möglichkeit, nicht verwendeten Code aus dem Bundle zu entfernen, was zu einer drastischen Reduzierung der Dateigröße führt. Aufgrund der Struktur von Angular-Anwendungen kann die Rendering-Engine ersetzt werden, ohne dass Änderungen an der internen Logik erforderlich sind.
07. Polymer
In seiner ersten Iteration hat die Polymer Bibliothek war das Tor zu einer Zukunft der benutzerdefinierten Elemente. Durch die Berücksichtigung der damals anstehenden Spezifikationen für Webkomponenten konnten Entwickler Websites aus vorgefertigten Bausteinen zusammensetzen.
Im Laufe der Zeit haben sich diese Spezifikationen weiterentwickelt, und einer der Bausteine - HTML-Importe - war nicht mehr Teil des Plans. Die jüngste Version von Polymer 3.0 behebt dieses Problem und konzentriert sich mehr auf die Verwendung zugänglicher ES-Module, um ein ähnliches Ziel zu erreichen.
Das ursprüngliche Ziel der Polymer-Bibliothek war es, leichter zu werden, wenn die Unterstützung für diese Spezifikationen zunahm, aber sie wuchs stattdessen. Um sich wieder auf dieses Ziel zu konzentrieren, ist 3.0 die letzte Version der Bibliothek, die veröffentlicht wird. In Zukunft wird empfohlen, Komponenten mit herzustellen LitElement und lit-html .
class MyElement extends LitElement { render(){ return html` This is a LitElement `; } } LitElement ist eine leichte Hülle für Webkomponenten, mit der sie einfacher zu bearbeiten sind. Das html getaggtes Vorlagenliteral ist lit-html Dies ist eine Vorlagenbibliothek mit unterschiedlichem DOM, um die Seitenaktualisierungen so klein wie möglich zu halten.
Beide LitElement und lit-html befinden sich derzeit in einem Pre-Release-Zustand, aber das Polymer-Team ist bestrebt, sie irgendwann Anfang dieses Jahres freizugeben.
08. Schöner
Dieses JavaScript-Tool soll sicherstellen, dass die Codeformatierung pro Projekt konsistent bleibt. Haben Schöner Dateien durchkämmen und Formatierung automatisch aktualisieren. Einige Editoren unterstützen auch die Formatierung bei jedem Speichern.
Wenn Sie an einem Teamprojekt arbeiten, stellen Sie sicher, dass Ihr Prozess vollständig mit dem Perfekten übereinstimmt Cloud-Speicher Möglichkeit.
09. Servicemitarbeiter
Servicemitarbeiter Aktivieren Sie eine Anwendung, um einen Hintergrundprozess auszuführen, der einige Funktionen auf niedrigerer Ebene verwaltet. Dies kann Push-Benachrichtigungen, das Synchronisieren von Daten im Hintergrund und sogar das Bereitstellen einer Erfahrung für den Fall umfassen, dass das Gerät offline ist. Die Kontrolle liegt beim Entwickler.
Servicemitarbeiter gibt es schon seit einiger Zeit auf Android, aber sie haben kürzlich auch den Sprung zu iOS geschafft. Während der Schwerpunkt auf mobilen Geräten liegt, funktionieren sie auch auf dem Desktop. Jetzt, da die Mehrheit der Besucher Zugriff auf die Funktionen hat, gibt es keinen besseren Zeitpunkt, um die Benutzererfahrung zu verbessern.
10. OffscreenCanvas
Es gibt Zeiten, in denen ein Canvas-Element das beste Werkzeug für den Job ist. Beispielsweise können Online-Spiele sie zum Generieren von Sprites verwenden, oder auf Videos können Verarbeitungseffekte angewendet werden.
Das Problem ist, dass alle Interaktionen mit dem Element immer auf dem Hauptthread funktionieren, was die Dinge für den Benutzer verlangsamt. Bei wiederholten Animationen oder starker Verarbeitung kann dies zu einem Problem werden.
OffscreenCanvas entkoppelt die Canvas-Logik vom Element. Ohne den Link zum DOM kann es in einem Worker verwendet werden, um den Hauptthread freizugeben. Derzeit unterstützt nur Chrome diese Funktion, wobei Firefox sie hinter einer Flagge einfügt.
11. Elektron
Verwenden Sie HTML, CSS und JavaScript, um native Anwendungen für Windows, MacOS und Linux zu erstellen. Elektron unterstützt viele beliebte Anwendungen wie Visual Studio Code, Slack und Skype für den Desktop.
12. Svelte
Während Svelte ist ein relativ unbekanntes Framework, das seit seiner Veröffentlichung vor einigen Jahren stetig an Bedeutung gewonnen hat. Die jüngste Umfrage zum Status von JavaScript hat es letztes Jahr als beliebter eingestuft als die historischen Titanen von Backbone und jQuery.
Das Ziel von Svelte ist es, die Dateigröße niedrig zu halten, indem überhaupt kein Framework ausgeliefert wird. Im Rahmen des Erstellungsprozesses werden die Komponenten analysiert und optimiert, bevor sie mit Vanilla JavaScript kompiliert werden. Das Ergebnis ist eine Anwendung mit der kleinstmöglichen Größe.
Mit Version 2 wurden Verbesserungen an der Syntax vorgenommen, um Komponenten so lesbar und vorhersehbar wie möglich zu machen. Aktualisierungen von Lifecycle-Hooks und berechneten Werten erleichtern dem Compiler das Erkennen von Optimierungsmöglichkeiten.
Die Funktionen sind bewusst leicht, um jede Anwendung schnell zu halten. Viele Updates seit Version 2 haben sich darauf konzentriert, Situationen zu vermeiden, die zu einer schlechten Leistung der kompilierten Ausgabe führen.
Es werden Diskussionen über eine Neufassung der Komponentenlogik in Svelte geführt, um sie mit anderen Frameworks in Einklang zu bringen. Als Compiler kann er seine eigenen Änderungen vornehmen, um die Funktionsweise zu verbessern und gleichzeitig eine saubere Umgebung für Entwickler zu schaffen.
13. Ändern Sie die Größe des Beobachters
Ein wirklich komponentenbasierter Ansatz für die Webentwicklung ist näher als je zuvor. Während CSS und JavaScript in einem Paket gebündelt werden können, ist es schwierig, diese Komponente über Seiten hinweg zuverlässig wiederzuverwenden.
Beim Hinzufügen von Elementen zu a Größe des Beobachters ändern wird benachrichtigt, wenn sich die Grenzen des Elements ändern. Die Grafiken können dann basierend auf dem verfügbaren Speicherplatz aktualisiert werden. Beispielsweise kann dieselbe Kartenkomponente entweder in einer Seitenleiste oder im Hauptteil unterschiedlich aussehen.
Dieser Beobachter ist derzeit nur in Chrome verfügbar, während er in Firefox entwickelt wird. Andere Browser können auf die Überwachung von Ereignissen zur Größenänderung des Browsers zurückgreifen, dies beeinträchtigt jedoch die Leistung.
14. Cordova
Erstellen Sie mehrere verschiedene mobile und Desktop-Anwendungen mithilfe von Webtechnologien und einer Codebasis mit Cordova . PhoneGap - die Cordova-Distribution von Adobe - bietet zusätzliche Tools wie die iOS-Entwicklung unter Windows.
15. Märchenbuch
Märchenbuch Mit dieser Option können Sie eine Galerie mit UI-Elementen in einer anpassbaren Umgebung erstellen, die von jeder Anwendung getrennt ist. Es funktioniert mit gängigen Frameworks wie React und Vue sowie mit Unterstützung für HTML-Snippets.
Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 283 kaufen oder Abonnieren Sie hier .
Weiterlesen:
- So codieren Sie schneller und leichter JavaScript
- Entdecken Sie hier weitere großartige JavaScript-Tools
- Tolle JavaScript-APIs
