Beste JavaScript -Frameworks, Bibliotheken und Tools, die 2019 verwendet werden sollen

Die Anzahl der JavaScript -Frameworks, Bibliotheken und Tools scheint die Anzahl der Entwickler überschritten zu haben. Ende 2018 zeigte eine schnelle Suche in Github 2,3 Millionen JavaScript -Projekte. NPM ist das weltweit größte Modulsystem mit 700.000 verfügbaren Softwarepaketen auf NPMJS.com und Milliarden von Downloads pro Monat.

6. Dezember 2018: Der Artikel wurde aktualisiert, um den aktuellen Status des JavaScript -Ökosystems widerzuspiegeln. Das diesjährige Update wird von Sencha gesponsert. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben!

Dieser Artikel zielt darauf ab, die Grundlagen und grundlegenden Unterschiede zwischen den beliebtesten clientseitigen JavaScript-Frameworks, Bibliotheken und Tools zu erklären. Ob sie für Sie geeignet sind, ist eine andere Frage. Wählen Sie einen und halten Sie sich für eine Weile daran. Beachten Sie, dass Ihre Lieblingsoption, was auch immer Sie wählen, durch etwas Besseres ersetzt wird!

li.toc-h3 { Rand-Links: 20px; } li.toc-h4 { Rand-Links: 40px; } Schlüsselpunkte

• react bleibt die erste Wahl zum Erstellen von Benutzeroberflächen, insbesondere für einseitige Anwendungen, dank der effizienten virtuellen DOM- und Komponenten-basierten Architektur.
• vue.js hat für seine Einfachheit und Flexibilität gelobt und es zu einer hervorragenden Wahl für Entwickler, die nach progressiven Frameworks suchen, die leicht in andere Bibliotheken zu integrieren sind.
• Angular bietet eine umfassende Rahmenlösung, insbesondere in der neuesten Version (2), die stark von Google unterstützt wird und sich auf TypeScript konzentriert, das Entwickler anzieht, die mit statisch typisierten Sprachen vertraut sind.
• jQuery ist trotz des Rückgangs des Hype immer noch relevant und in vielen Projekten weit verbreitet, da es einfach zu bedienen ist und über eine Vielzahl von Webplattformen hinweg über eine umfassende Kompatibilität verfügt.
• Webpack und Eslint werden als wesentliche Tools in der modernen JavaScript -Entwicklung hervorgehoben, die für Modulbündelung bzw. Codequalitätssicherung verwendet werden.
• sencha ext js gilt als leistungsstarke Framework auf Unternehmensebene, das eine breite Palette von UI-Komponenten und -Tools mit leistungsstarken kommerziellen Support- und Schulungsoptionen bietet.

Katalog

• Katalog
• harte Begriffe
• Bibliothek
• Frame
• Tools
• Beschriften Sie mich nicht!
• JavaScript -Frameworks und Bibliotheken
• jQuery
• reagieren
• AngularJS 1.x
• Winkel 2 (jetzt 7.x)
• vue.js
• sencha ext js
• lodash und unterstrich
• backbone.js
• ember.js
• Knockout.js
• Projekte, die es wert sind, auf
zu achten
• Werkzeug: Allgemeiner Task -Läufer
• webpack
• gulp.js
• npm
• grunzen
• Werkzeug: Modul Bundler
• Browserify
• fordertjs
• Tool: Code -Stilprüfung
• Eslint
• jsint
• JSlint
• Werkzeug: Test Suite
• scherze
• Mocha
• Jasmine
• Tools: Andere Tools
• Zusammenfassung und Vorschläge
• Kommentare

Bitte akzeptieren Sie die folgenden Allgemeinen Geschäftsbedingungen, bevor Sie diesen Artikel lesen! ...

• Die JavaScript -Umgebung ändert sich jeden Tag. Dieser Artikel wird veraltet sein, sobald er veröffentlicht wird!
• Mit "Best" meine ich "das beliebteste/gebrauchte/gehypte allgemeine Projekt". Alle Projekte haben kostenlose/Open -Source -Optionen, aber die Liste enthält möglicherweise nicht Ihre bevorzugten Projekte.
• gestoppte Gegenstände (wie Yui) sind nicht enthalten, obwohl sie im Netzwerk immer noch sehr hoch sind.
• beziehen sich nur auf Kundenprojekte. Einige arbeiten auf der Serverseite, aber die Liste enthält keine reinen serverseitigen Frameworks wie Express.js oder HAPI.
Die Informationen zu jedem Projekt sollen kurz sein, um einen Überblick über weitere Forschungen zu geben.
Jedes Projekt bietet einen Indikator für die Popularitätsnutzung, aber es ist bekannt, dass die Statistiken schwer zu erledigen sind und irreführend sein können.
Ich bin voreingenommen. Sie haben auch Voreingenommenheit. Andere haben auch Vorurteile! Ich habe hier nicht jedes Tool ausprobiert und werde mein Lieblingswerkzeug deklarieren, aber Sie sollten Ihre eigene Einschätzung basierend auf Ihren Anforderungen vornehmen.
sitePoint und ich sind weder für katastrophale Entscheidungen verantwortlich!

harte Begriffe

Die Begriffe "Framework", "Bibliothek" und "Tool" können je nach Kontext unterschiedliche Bedeutungen für verschiedene Personen haben. Gemeinsame Definition hier verwendet:

Bibliothek

Bibliothek ist eine organisierte und nützliche Sammlung von Funktionen. Eine typische Bibliothek kann Funktionen enthalten, die Strings, Daten, HTML -DOM -Elemente, Ereignisse, Cookies, Animationen, Netzwerkanfragen und mehr umgehen. Jede Funktion gibt Werte in die aufrufende Anwendung zurück, die Sie entsprechend Ihrer Wahl implementieren können. Stellen Sie sich dies als eine Reihe von Automobilkomponenten vor: Sie können jede Komponente nach Belieben verwenden, um ein Auto zu bauen, das ordnungsgemäß fahren kann, aber Sie müssen den Motor selbst bauen.

Bibliotheken bieten normalerweise ein höheres Abstraktionsniveau, wodurch die Implementierungsdetails und Inkonsistenzen vereinfacht werden. Sie können beispielsweise AJAX mit der XMLHTTPrequest -API implementieren. Dies erfordert jedoch mehrere Codezeilen und es gibt geringfügige Unterschiede zwischen Browsern. Die Bibliothek kann einfachere AJAX () -Funktionen bieten, sodass Sie sich auf höhere Geschäftslogik konzentrieren können.

Bibliothek kann die Entwicklungszeit um 20% verkürzen, da Sie sich keine Sorgen um feinere Details machen müssen. Nachteile:

Fehler in der Bibliothek sind möglicherweise schwer zu finden und zu beheben
Das Entwicklungsteam kann nicht garantieren, dass der Patch schnell veröffentlicht wird
Patches können die API ändern und signifikante Änderungen am Code verursachen.

Frame

Framework ist das Skelett der Anwendung. Sie müssen das Softwaredesign auf eine bestimmte Weise behandeln und Ihre eigene Logik an bestimmten Stellen einfügen. In der Regel bieten Sie Funktionen wie Ereignisse, Speicher und Datenbindung an. Mit der Analogie des Autos bietet der Rahmen ein funktionierendes Chassis, Körper und Motor. Sie können bestimmte Komponenten hinzufügen, entfernen oder anpassen, vorausgesetzt, das Fahrzeug läuft noch.

Frameworks bieten normalerweise ein höheres Abstraktionsniveau als Bibliotheken und können Ihnen dabei helfen, die ersten 80% Ihres Projekts schnell aufzubauen. Nachteile:

• Wenn Ihre Bewerbung für das Framework aus dem Rahmen ist, können die letzten 20% schwierig sein- wenn nicht unmöglich
• Frame -Update oder Migration kann schwierig sein
• Der Kerncode und die Kerncode und Konzepte passen sich selten gut an die Zeit an. Entwickler werden immer einen besseren Weg finden, um dasselbe zu tun.
Tools

Tools können die Entwicklung unterstützen, sind jedoch kein unverzichtbarer Bestandteil des Projekts. Zu den Tools gehören Build -Systeme, Compiler, Übersetzer, Codekompressoren, Bildkompressoren, Bereitstellungsmechanismen usw.

Tools sollten einen einfacheren Entwicklungsprozess liefern. Beispielsweise bevorzugen viele Programmierer SASS gegenüber CSS, da es Code -Trennung, Verschachtelung, Renderzeitvariablen, Schleifen und Funktionen bietet. Der Browser versteht nicht die SASS/SCSS -Syntax, sodass der Code vor dem Testen und Bereitstellen mit den entsprechenden Tools in CSS zusammengestellt werden muss.

Beschriften Sie mich nicht!

Die Unterschiede zwischen Bibliotheken, Frameworks und Tools sind selten klar. Das Framework kann Bibliotheken enthalten. Die Bibliothek kann rahmenähnliche Methoden implementieren. Werkzeuge können für beide von entscheidender Bedeutung sein. Ich habe versucht, jeden Gegenstand zu markieren, aber der Umfang kann variieren.

Wenn dies zu kompliziert klingt, können Sie ein natives JavaScript schreiben. Dies ist großartig, aber am Ende schreiben Sie Ihre eigene Bibliothek und/oder Framework -Code, die beibehalten werden muss. JavaScript selbst ist eine Abstraktion über dem Browser- und Betriebssystemabstraktion!

JavaScript -Frameworks und Bibliotheken

Artikel in ungefährer Reihenfolge der Verwendung/Popularität/Hype ...

jQuery

jQuery Beschreibung Typ -Bibliothekswebsite JQuery.com Repository GitHub. com/jQuery/jQuery Github Stars 50.000 aktuelle Version 3.3.1 Entwickler JQuery Team veröffentlichtes Datum August 2006 Typische Größe 30 KB MIN TYPISCH NUTZEN UNIVERSUGE UNSUGE 73,5% aller Websites JQuery bleibt die am häufigsten verwendete JavaScript -Bibliothek aller Zeiten und verteilt mit WordPress, ASP, ASP, ASP, ASP .NET und einige andere Frameworks. Es revolutioniert die Kundenentwicklung, indem CSS -Selektoren in das Abrufen von DOM -Knoten eingeführt werden und auf Ereignishandler, Animationen und AJAX -Anrufe verknüpft werden. In den letzten Jahren ist JQuery nach und nach mit Entwicklern unbeliebt geworden, aber seine Nutzungsrate ist immer noch hoch. Es ist immer noch eine praktikable Option für Projekte, die eine kleine Menge an JavaScript -Funktionalität erfordern.

Profis:

Verteilungsgröße

• Die Lernkurve ist reibungslos und es gibt viele Online -Hilfe
• einfache Grammatik
• Einfach erweitert
Nachteile:

• Geschwindigkeitsaufwand für native API
hinzufügen
Die Browserkompatibilität hat sich verbessert, daher ist es nicht sehr wichtig
Verwendungsrate neigt dazu,
• zu stabilisieren
Ein gewisser Widerstand der Branche gegen unnötige Verwendung.

reagieren

reagieren Beschreibung Geben Sie die Bibliothekswebsite Facebook.github.io/ Typ ein React/Repository github.com/facebook/React Github Stars 115.000 aktuelle Version 16.6.3 Entwickler Facebook und Mitwirkender Veröffentlichungsdatum März 2013 Typische Größe 21KB Min. behauptet, eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen zu sein. Es konzentriert sich auf den Abschnitt "Ansicht" in der Entwicklung von Modell-View-Controller (MVC) und erleichtert es einfach, staatlich erhaltene UI-Komponenten zu erstellen. Es ist eine der ersten Bibliotheken, die virtuelle DOM implementieren.

React -Nutzung scheint nur geringer Statistiken zu haben, wahrscheinlich weil sie eher für Anwendungen als für Websites verwendet wird. Fast 70% der Entwickler behaupten, sie habe einige Erfahrung mit der Bibliothek.

Profis:

klein, effizient, schnell und flexibel
Einfaches Komponentenmodell
Gute Dokumentation und Online -Ressourcen
serverseitiges Rendering ist möglich
immer noch sehr beliebt und entwickelt sich schnell
Viele der Arbeiten wirken Entwickler von React

Nachteile:

Neue Konzepte und Grammatik müssen gelernt werden
Gebäudewerkzeuge sind essentiell
Andere Bibliotheken oder Frameworks können möglicherweise Modell- und Controller -Aspekte
• bereitstellen
kann mit Code und anderen Bibliotheken unvereinbar sein, die DOM

ändern

AngularJS 1.x

Angularjs Beschreibung Typenwebsite -Website Angularjs.org Repository GitHub Typ . . Die beliebteste Version ist immer noch Version 1.x, die HTML durch bidirektionale Datenbindung erweitert und gleichzeitig DOM -Operationen von der Anwendungslogik getrennt hat.

Obwohl Version 2.0 veröffentlicht wird (jetzt Version 4.0!), Befindet sich Angular 1.x noch in der Entwicklung. Verwirrt? Siehe unten ...

Profis:

• Ein beliebtes Rahmen, das von mehreren großen Unternehmen übernommen wurde
• einzelne Lösung zum Erstellen moderner Webanwendungen
• ist Teil des "Standard" -Senmittelstapels (MongoDB, Express.js, AngularJs, NodeJs), daher gibt es viele Artikel und Tutorials verfügbar

Nachteile:

• Die Lernkurve ist steiler als andere Alternativen
• Die Codebasis ist riesig
• kann nicht auf Angular 2.x
aktualisieren
• Obwohl es sich um ein Google -Projekt handelt, scheint Google es nicht zu verwenden?

Winkel 2 (jetzt 7.x)

Angular Beschreibung Github type Framework -Website Angular.io Repository GitHub . Dies ist ein vollständiges Umschreiben, das ein mit TypeScript erstellter modularer Komponentenmodell (kompiliert als JavaScript) einführt. Um die Verwirrung zu erhöhen, wurde Version 4.0 im März 2017 veröffentlicht (übersprungen V3, um semantische Versionsprobleme zu vermeiden).

Winkel 2 unterscheidet sich völlig von V1. Weder kompatibel - Vielleicht sollte Google dem Projekt einen anderen Namen geben? !

Profis:

• einzelne Lösung zum Erstellen moderner Webanwendungen
• ist immer noch Teil des mittleren Stapels, obwohl weniger Winkel 2 Tutorials erhältlich sind
• Für diejenigen, die mit staatlich getypten Sprachen wie C# und Java vertraut sind, bietet TypeScript einige Vorteile.

Nachteile:

• Die Lernkurve ist steiler als andere Alternativen
• Die Codebasis ist riesig
• kann nicht von Angular 1.x
aktualisieren können
• im Vergleich zu 1.x ist Angular 2.x Adoptionsrate relativ niedrig
• Obwohl es sich um ein Google -Projekt handelt, scheint Google es nicht zu verwenden?

vue.js

vue.js Beschreibung Type -Rahmen -Website Vuejs.org Repository type github.com/vuejs/vue github stars 120.000 aktuelle Version 2.5.17 Entwickler Evan Sie Veröffentlichungsdatum Februar 2014 Typische Größe 19KB MIN Typische Zweckkomponenten und einseitige Anwendung niedriger Nutzung Vue.js ist ein leichtes progressives, progressives Framework für das Erstellen von Benutzeroberflächen. Der Kern liefert eine reagartige virtuelle dom-gesteuerte View-Ebene, die in andere Bibliotheken integriert werden kann, aber auch einzelne Seitenanwendungen vorantreiben kann. Der Rahmen wurde von Evan You erstellt, der zuvor bei AngularJS gearbeitet hatte, aber die Teile extrahieren wollte, die er mochte.

vue.js bindet DOM mithilfe der HTML -Vorlagensyntax an Instanzdaten. Wenn sich die Daten ändert, ist das Modell ein normales JavaScript -Objekt, das die Ansicht aktualisiert. Andere Tools bieten Tools für Gerüste, Routing, Statusverwaltung, Animation und mehr.

Profis:

• schnelle Einführung und zunehmende Popularität
• Einfacher Einstieg, hohe Entwicklerzufriedenheit
• Leichte, niedrige Abhängigkeit, gute Leistung

Nachteile:

• kann durch React
vertuscht werden
• Vertrauen in Aktualisierungen für einzelne Entwickler
• weniger Ressourcen als Alternativen

sencha ext js

ext js Beschreibung Website -Sencha für Framework und Komponentenbibliothek / extJS/ aktuelle Version 6.6.0 Entwickler Sencha Erscheinungsdatum Dezember 2007 Die Typische Größe hängt von den Anforderungen ab: 85-500 KB Typische Verwendungskomponenten und einseitige Anwendungen niedrige Nutzung Die Ext-JS wird aus Yui-text entwickelt, einer der längsten Geschichte in dieser Liste. Es ist zwar am besten für seine breite Palette konfigurierbarer, zugänglicher Cross-Browser-UI-Komponenten und Datenvisualisierungstools bekannt, bietet Ext JS auch ein Framework zum Erstellen kompletter Anwendungen. Alternativ können Sie die Komponentenbibliothek mit React oder Winkel verwenden. ext js ist hier der einzige Rahmen, der Business -Schulungen und -unterstützung bietet. Es gibt auch die Möglichkeit, dass das Sencha -Team bei der Überprüfung Ihres Codes, Automatisierung von Tests und Migration auf andere Plattformen.

Profis:

weit verbreitete Komponenten
enthält alles, was Sie benötigen, um eine Web- und mobile Anwendung zu erstellen
Skriptanpassung, Design -Tools und schnelles Prototyping
Bereitstellung von Tools zum intuitiven Erstellen und Styling -Webanwendungen
Geschäftsunterstützung und ausgezeichnete Dokumentation
30 Tage kostenlose Test- und Community-Version für kleine Bewerbungen (Einnahmen von weniger als 10.000 USD pro Jahr)

Nachteile:

• Ab sofort kann die Integration mit anderen Rahmenbedingungen als React und Angular unpraktisch sein - siehe Ext Js 7's Roadmap -Plan
• tiefe benutzerdefinierte UI -Änderungen können schwierig sein

lodash und unterstrich

lodash Beschreibung Typ Library Website Lodash.com/ Repository GitHub Typ . > Unterstrich Beschreibung Typenbibliothekswebsite unterstrichen Erscheinungsdatum Oktober 2009 Typische Größe 6 KB Min Typischer Gebrauch gemeinsame Verwendung Niedrig Verwendung Dieser Abschnitt kombiniert Lodash und Unterstrich, da sie Hunderte von funktionalen JavaScript -Dienstprogrammen zur Ergänzung nativer Zeichenfolge, Zahlen, Arrays und anderen Rohobjektmethoden bereitstellen. Es gibt einige Überschneidungen, daher ist es unwahrscheinlich, dass Sie beide Bibliotheken in einem Projekt benötigen. Client-Nutzung ist gering, aber jede Bibliothek kann in serverseitigen Node.js-Anwendungen verwendet werden. Profis:

klein und einfach

Einfach zu lernen, gute Dokumentation

kompatibel mit den meisten Bibliotheken und Frameworks
Erweitern Sie keine integrierten Objekte
kann auf der Client- oder Serverseite
• verwendet werden
• Nachteile:
• Einige Methoden finden Sie in ES2015 und später JavaScript.

backbone.js

Backbone.js Beschreibung Typ -Rahmenwebsite Backbonejs.org Repository Typ github.com/jashkenas/backbone/ Github Stars 37.000 aktuelle Version 1.3.3 Entwickler Jeremy Ashkenas Veröffentlichungsdatum Oktober 2010 Typische Größe 8 KB Min. Clientoptionen für die MVC -Struktur. Seine einzige Abhängigkeit ist unterstrichen.js, die vom gleichen Entwickler erstellt wird.

Backbone.js behauptet, eine Bibliothek zu sein, da sie in andere Projekte integriert werden kann. Ich vermute, dass die meisten Entwickler der Meinung sind, dass es sich um einen Rahmen handelt, obwohl es nicht so willkürlich ist wie einige andere.

Profis:

• klein, leicht und nicht zu kompliziert
• fügen Sie HTML
keine Logik hinzu
• Ausgezeichnete Dokumentation
• wurde von vielen Anwendungen übernommen, darunter Trello, Wordpress.com, LinkedIn und Groupon

Nachteile:

• Eine geringere Abstraktionsniveau als Alternativen wie AngularJs (dies kann jedoch als Vorteil angesehen werden)
• Andere Komponenten sind erforderlich, um Funktionen wie die Datenbindung
zu implementieren
• Die jüngsten Frameworks waren weit von der MVC -Architektur
entfernt.
ember.js
ember.js Beschreibung Geben Sie die Website der Framework -Website Emberjs.com ein repository github.com/emberjs/ember.js Github Stars 20.000 aktuelle Version 3.6.0 Entwickler Ember Team veröffentlichtes Datum Dezember 2011 Typische Größe 95 KB Min. Größere willkürliche Frameworks des Modellmodells (MVVM). Es implementiert Vorlagen, Datenbindungen und Bibliotheken in einem Paket. Für diejenigen mit Erfahrung mit Ruby on Rails ist das Konzept der Konvention über die Konfiguration sofort bekannt.
Profis:
Bereitstellung einer einzelnen Lösung für Client -Anwendungen
Entwickler können die Produktivität sofort erhöhen - sie verwendet jQuery
Gute Abwärtskompatibilitäts- und Upgrade -Optionen
verwendete moderne Webentwicklungsstandards
Nachteile:
Große Dateien
• verteilen
Es wird als monolithisch angesehen, im Vergleich zu anderen Frameworks, die zu kleineren Komponentenstrukturen
• bewegt werden.
steile Lernkurve - Dies ist Embers Weg, oder es gibt überhaupt keinen Weg

Knockout.js

Knockout.js Beschreibung

Type -Rahmen -Website Knockoutjs.com Repository github.com/knockout/knockout Github Stars 9.000 aktuelle Version 3.5.0 Der Entwickler Steve Sanderson Veröffentlichungsdatum Juli 2010 Typische Größe 59 KB Min. Die Benutzeroberfläche bleibt mit den zugrunde liegenden Daten synchronisiert. Es verfügt über Vorlagen und Abhängigkeitsverfolgungsfunktionen.

Profis:
• klein und leicht, keine Abhängigkeiten
• Ausgezeichnete Browserunterstützung, zurückführbar zu IE6
Ausgezeichnete Dokumentation
Nachteile:
• Große Projekte können kompliziert werden
• Entwicklungsgeschwindigkeit verlangsamt
• Nutzung scheint
zu sinken

Projekte, die es wert sind, auf

zu achten

hoffen, mehr zu erfahren? Die folgenden Elemente sind nicht sehr beliebt, aber es lohnt sich, nachdenken zu können:

• Polymer - Eine Bibliothek, die die Unterstützung der Cross -Browser -Unterstützung für HTML5 -Webkomponenten
ermöglicht
• Meteor - Eine vollständige Stack -Plattform für Webanwendungen.
• aurelia - ein leichtes plattformübergreifendes Framework
• svelte - Ein ziemlich neues Projekt, das den Framework -Quellcode in native JavaScript
umwandelt.
Conditioner.js - Eine neue Bibliothek, die Module automatisch basierend auf ihrem Status lädt und entlädt.
Werkzeug: Allgemeiner Task -Läufer
Erstellen von Tools Automatisieren Sie verschiedene Webentwicklungsaufgaben wie Vorverarbeitung, Kompilierung, Modulbündelung, Bildoptimierung, Codekomprimierung, Codestil -Überprüfung und Ausführen von Tests. Aufgaben werden normalerweise in einem ausführbaren Paket zusammen verwaltet. Die beliebtesten Optionen:
webpack
webpack Beschreibung Website webpack.js.org Repository Github. COM/WebPack/WebPack Github Stars 45.000 aktuelle Version 4.25.1 4 Millionen Downloads pro Woche unterstützt alle beliebten Moduloptionen und sind zum Synonym für die React -Entwicklung geworden. Obwohl Webpack behauptet, ein Modulbundler zu sein, kann er als Läufer von Allzweck -Aufgaben verwendet werden. Konfigurationen basierend auf JavaScript -Objekten können etwas ungeschickt sein. Der Generator ist verfügbar, aber einige Webpack -Benutzer haben sich zu einer einfacheren Konfiguration und schnelleren Kompilierungszeiten zum Paket verschoben.
gulp.js
gulp.js Beschreibung Website Gulpjs.com Repository GitHub. com/gulpjs/gulp github stars 30.000 aktuelle Version 4.0.0 (3.9.1 ist immer noch aktiv) 750.000 wöchentliche Downloads Obwohl es nicht der erste Task -Läufer ist, wurde Gulp schnell zu einer der beliebtesten Aufgabenläufer, was auch mein persönlicher Favorit ist . Gulp verwendet einen einfach zu lesenden JavaScript-Code, der die Quelldatei in einen Stream lädt, und übergibt die Daten dann über verschiedene Plugins, bevor sie sie in den Build-Ordner ausgeben. Es ist einfach, schnell und lustig, aber die Entwickler sind nach Webpack umgezogen.
npm
npm Beschreibung

Website npmjs.com Repository GitHub . Dies ist eine attraktive Option für einfache Projekte mit weniger Abhängigkeiten. Komplexere Aufgaben können jedoch schnell unpraktisch werden.

grunzen

grunT Beschreibung Website grunntjs.com Repository Github.com// Gruntjs/GrunT Github Stars 17.000 aktuelle Version 1.0.3 Downloads pro Woche 425.000 Grunt war einer der ersten JavaScript-Task-Läufer, die eine umfassende Akzeptanz implementieren, aber seine Geschwindigkeit und seine komplexe JSON-Konfiguration führten zum Anstieg von Gulp. Das schlimmste Problem wurde gelöst und Grunt ist immer noch eine beliebte Wahl.

Werkzeug: Modul Bundler

Verwalten mehrerer JavaScript -Dateien können umständlich werden. Sofern Sie nicht die relativ neue ES6 -Modul -Import -Syntax nativ anwenden können, müssen Sie JavaScript -Abhängigkeiten im Browser in der entsprechenden Reihenfolge laden oder verbinden. Wenn Sie ältere Browser (vor 2018 veröffentlichte Browser) unterstützen müssen, können Sie den Modul -Bundler verwenden, die Nachfrage nach diesen Tools wird jedoch im Laufe der Zeit abnehmen.

Browserify

browserify Beschreibung Website browserify.org repository github.com// Browserify/Browserify Github Stars 12.000 aktuelle Version 16.2.3 Downloads pro Woche 480.000 Browserify unterstützt das von Node.js verwendete CommonJS-Modul und kompiliert alle Module in eine einzelne browserkompatible Datei.

fordertjs

fordertjs Beschreibung Website RequestJs.org Repository Github.com// Requiredjs/R.Js Github Stars 2.500 aktuelle Version 2.3.6 Downloads pro Woche 230.000 Anforderungen war ursprünglich ein Imbrowser-Modulloader, obwohl es auch in Node.js. Es unterstützt die AMD -Syntax.

Tool: Code -Stilprüfung

Code -Stilprüfung Analysieren Sie Ihren Code auf mögliche Fehler oder Abweichungen von den grammatikalischen Standards. Sie werden niemals die enge Klammer oder die nicht deklarierte Variable verpassen!

Eslint

Eslint Beschreibung Website Eslint.org Repository Github.com// Eslint/Eslint Github Stars 12.000 aktuelle Version 5.9.0 Downloads 4 Millionen pro Woche ist das beliebteste Codestil -Check -Tool, das von den meisten IDES, Redakteuren, Bundlern und Task -Läufern unterstützt wird. Jede Regel ist ein Plugin, sodass sie entsprechend Ihren Einstellungen konfiguriert werden kann.

jsint

JSHINT Beschreibung Website jSHINT.com Repository Github.com// JSHINT/JSHINT GITHUB STARS 8.000 aktuelle Version 2.9.6 Downloads pro Woche 390.000 Ein flexibler JavaScript -Code -Style -Checker, der nicht so konfigurierbar ist wie Eslint, sondern ein gutes Gleichgewicht zwischen realen Fehler und starren Syntaxanforderungen.

JSlint

JSlint Beschreibung Website jslint.com repository github.com// Reid/Node-Jslint Github Stars 8.000 aktuelle Version 0.12.0 Downloads pro Woche Eines der frühesten Code-Style-Checkers, die eine strenge Reihe von Standardregeln implementieren. Die Entwicklung hat sich verlangsamt und für einige Entwickler kann sie etwas kompromisslos sein.

Werkzeug: Test Suite

Testgesteuerte Entwicklung erfordert, dass Sie Code schreiben, um Ihren Code zu testen, bevor Sie ihn schreiben. Willkommen im Schreibcode, um Ihren Testcode zu testen!

Es gibt viele Optionen, einschließlich Ava, Band und Jasmine, aber die drei beliebtesten Optionen sind ...

scherze

scherz Beschreibung Website https: // www .php.cn/link/50be28d343081a44df25869ab1e4502f repository github.com/kof/node-qunit github stars 21.000 aktuelle Version 23.6.0 Weekly Downloads 2 Millionen vom Facebook-Testergebiet von Facebook aufgrund seiner engen Verbindung mit React und Webpack und es werden zu Webpacks. immer beliebter.

Mocha

Mocha Beschreibung Website Mochajs.org Repository Github.com// Mochajs/Mocha Github Stars 16.500 aktuelle Version 5.2.0 1,8 Millionen Downloads pro Woche können Mokka -Tests in Node.js und Browsern durchführen. Es unterstützt asynchrone Tests und wird normalerweise mit Chai verwendet, um den Testcode in einem lesbaren Stil ausdrücken zu können. Es ist seit Jahren die beliebteste Wahl.

Jasmine

Jasmine Beschreibung Website jasmine.github.io repository github. Com/Jasmine/Jasmine-NPM Github Stars 300 aktuelle Version 3.3.0 Downloads pro Woche 750.000 Jasmin ist eine verhaltensgetriebene Testsuite, die das Testen Ihrer Benutzeroberfläche und Interaktionen in Ihrem Browser automatisiert.

Tools: Andere Tools

Trotz meiner besten Bemühungen gebe ich zu, dass nicht jeder JavaScript liebt! Compiler wie Typscript, Livescript und Coffeescript können Ihr Entwicklungsleben etwas angenehmer machen. Alternativ können Sie Babel verwenden, um den modernen, prägnanten ES2015-Quellcode in den Cross-Browser-kompatiblen ES5-Code umzuwandeln.

Es gibt viele von JavaScript gesteuerte HTML-Vorlagenmotoren, einschließlich Schnurrbart, Lenker, Mops (Jade) und EJs. Ich bevorzuge leichte Optionen, die die JavaScript -Syntax wie EJS und DOT erhalten.

Warum dann Ihre eigene Dokumentation schreiben, wenn Sie sie automatisieren können? ES2015-kompatible Dokumentgeneratoren umfassen ESDOC, JSDOC, YUIDOC, Dokumentation.js und Transkription.

Zusammenfassung und Vorschläge

Wenn Sie der Weisheit der Massen folgen, liegt der aktuelle Impuls hinter React und andere Bibliotheken bewegen sich auch in Richtung ähnlicher technologischer Richtungen. Dies ist eine sichere Berufswahl, aber Sie sollten auch Vue.js oder reag-kompatible, aber kleinere Vorwirkung in Betracht ziehen.

monographierte Frameworks sind nicht mehr beliebt, aber AngularJS ist immer noch eine beliebte Wahl, wenn Sie eine strenge Struktur für große Projekte bereitstellen müssen. Die meisten Entwickler bleiben bei Version 1.0, aber dies kann aus der Notwendigkeit und nicht der Wahl sein. Version 2 ist auf lange Sicht möglicherweise eine sicherere Option, aber Sie müssen TypeScript lernen.

SENCHA'S EXT JS ist eine großartige Option für Unternehmen (Kleinunternehmen für Unternehmen), die sowohl Rahmenbedingungen als auch vorgefertigte integrierte Komponenten und Tools (einschließlich Zugang zu kommerzieller Unterstützung) haben möchten. Ext JS integriert auch die leistungsstarke Komponentenbibliothek auch in React und Angular, was eine gute Wahl für Entwickler ist, die vorgefertigte Komponenten implementieren möchten, anstatt sie selbst zu bauen.

ignorieren Sie JQuery nicht. Es ist nicht stilvoll und in Tech News selten erwähnt, aber es ist mehr als genug für Websites und Anwendungen. Die Lernkurve von JQuery ist reibungslos und wird von vielen Entwicklern auf der ganzen Welt verstanden.

Neue Übersetzeroptionen wie Svelte und Rawact konvertieren Framework -Code in native JavaScript, wenn Sie Risiken eingehen möchten. Die Framework -Abhängigkeiten wurden entfernt, der Code ist kleiner und läuft schneller.

Die Auswahl der Tools ist weniger wichtig und kann je nach Projekt variieren. Die meisten Webpack-, Gulp- oder NPM -Skripte. Zum Testen können Sie Eslint und Scherz verwenden, aber es gibt viele andere Alternativen zum Versuchen.

Das heißt, jedes Projekt, jedes Team und jedes Fähigkeitssatz sind unterschiedlich. Sie haben nur begrenzte Zeit, um zu bewerten, daher ist es verlockend, das zu verwenden, was Sie wissen. Dieser Beitrag erhält Kommentare, empfohlen Frameworkx , aber wenn Sie einen Hammer haben, sieht alles wie ein Nagel aus.

Vergessen Sie zuletzt nie, dass Bibliotheken, Frameworks und Tools optional sind! JavaScript -Entwicklung hat im letzten Jahrzehnt von mehreren grundlegenden Hilfsbibliotheken zu unglaublichen Entscheidungen revolutioniert. Es ist leicht, alle paar Monate in die Falle der zunehmenden Komplexität zu geraten oder auf das neueste beliebte Framework zu wechseln. Betrachten Sie immer ein natives JavaScript - insbesondere in kleinen und persönlichen Projekten. Das Wissen, das Sie gewinnen, ist nicht veraltet und wird bei der Bewertung von Rahmenbedingungen für andere Projekte von unschätzbarem Wert.

Ich fehlt, entlassen oder versäumte es, die Vorteile Ihrer Lieblings -JavaScript -Bibliotheken, Frameworks und Tools zu loben? Natürlich habe ich es getan! Willkommen zum Kommentieren ...

häufig gestellte Fragen zu Top JavaScript -Frameworks, Bibliothek und Tools

Was ist der Hauptunterschied zwischen Winkel und Reagieren?

Angular und React sind beide beliebte JavaScript -Frameworks, haben jedoch einige wichtige Unterschiede. Angular, entwickelt von Google, ist ein ausgereiftes MVC -Framework, das eine leistungsstarke Reihe von Funktionen zum Erstellen komplexer Anwendungen bietet. Es verwendet Zwei-Wege-Datenbindung und reales DOM. React, entwickelt von Facebook hingegen ist eine Bibliothek zum Erstellen von Benutzeroberflächen. Es verwendet Einweg-Datenbindung und virtuelles DOM, was es beim Rendern großer Listen und Datensätze schneller und effizienter macht.

Wie wähle ich das richtige JavaScript -Framework für mein Projekt aus?

Wählen Sie das richtige JavaScript -Framework abhängig von mehreren Faktoren. Sie sollten die Größe und Komplexität des Projekts, die Lernkurve des Frameworks, die Größe der Community und die verfügbaren Ressourcen sowie die Leistungs- und Skalierbarkeitsanforderungen der Anwendung berücksichtigen. Es ist auch wichtig, die langfristige Lebensfähigkeit des Frameworks zu berücksichtigen, da Sie einen Framework auswählen möchten, der in Zukunft weiterhin unterstützt und aktualisiert wird.

Was sind die Vorteile der Verwendung von Vue.js im Vergleich zu anderen JavaScript -Frameworks?

vue.js ist für seine Einfachheit und Benutzerfreundlichkeit bekannt. Es hat eine sanfte Lernkurve, die es zu einer guten Wahl für Anfänger macht. Es verfügt außerdem über eine flexible Architektur, mit der Sie zwischen leichten, bibliotheksähnlichen Einstellungen oder voll befriedigten Framework-Einstellungen wählen können. VUE.JS verwendet auch virtuelles DOM und bietet effizientes Wiederholungs- und Komponenten-Ebene-Ausschnitt für schnelle Leistung.

Welche Rolle spielen Node.js in der JavaScript -Entwicklung?

node.js ist eine Laufzeitumgebung, mit der JavaScript auf der Serverseite ausgeführt werden kann. Dies bedeutet, dass Sie JavaScript verwenden können, um das Front-End und das Back-End Ihrer Anwendung zu erstellen, die die Entwicklungseffizienz verbessern und die Code-Wartung vereinfachen. Node.js hat auch ein riesiges Ökosystem von Bibliotheken und Tools und ist bekannt für seine hohe Leistung und Skalierbarkeit.

Wie wichtig ist es, bei Verwendung von JavaScript -Framework TypeScript zu lernen?

TypeScript ist ein Superet von JavaScript, das der Sprache statische Typen hinzufügt. Das Lernen von Typenschriften zur Verwendung von JavaScript -Frameworks ist nicht erforderlich, kann jedoch von Vorteil sein. TypeScript kann dazu beitragen, Fehler bei der Kompilierung der Zeit und nicht zur Laufzeit zu erfassen, was zu einem robusteren Code führt. Es ist besonders nützlich, wenn es um große Codebasen und Teams geht.

Was sind die Vorteile der Verwendung von JavaScript -Bibliotheken wie Lodash?

Lodash ist eine Versorgungsbibliothek, die nützliche Möglichkeiten zur Manipulation von Arrays, Objekten und anderen Datentypen in JavaScript bietet. Dies kann dazu beitragen, Ihren Code prägnanter, lesbarer und effizienter zu gestalten. Die Lodash -Methoden sind auch für die Leistung optimiert, sodass sie in einigen Fällen schneller als native JavaScript -Methoden sein können.

Wie vergleichen Ember.js mit anderen JavaScript -Frameworks?

ember.js ist ein voll funktionsfähiges Framework, das viele integrierte Funktionen wie Router und Datenschichten bietet. Dies kann das Erstellen komplexer Anwendungen erleichtern, aber es bedeutet auch, dass mehr Inhalte gelernt werden müssen. Ember.js folgt dem Prinzip der Konventionen über die Konfiguration, die die Entwicklung beschleunigen können, aber möglicherweise nicht so flexibel ist wie andere Frameworks.

Was sind die wichtigsten Merkmale der Polymerbibliothek?

Polymer ist eine Bibliothek, die von Google entwickelt wurde, um Webkomponenten zu erstellen. Es bietet eine Reihe von Funktionen zum Erstellen benutzerdefinierter HTML -Elemente, der Einkapselung von CSS und JavaScript in diesen Elementen sowie die Verwendung von Datenbindung und Ereignisverarbeitung. Polymer unterstützt auch Einweg- und Zwei-Wege-Datenbindung.

Wie funktioniert JQuery in einer modernen JavaScript -Umgebung?

jQuery ist eine Bibliothek, die das HTML -Dokument -Traversal, die Ereignisverarbeitung und die Animation vereinfacht. Es ist zwar nicht so notwendig, wie es früher auf die Verbesserungen des nativen JavaScripts und des Aufstiegs moderner Frameworks zurückzuführen ist, aber JQuery ist immer noch weit verbreitet und ist eine gute Wahl für einfachere Projekte oder die Aufrechterhaltung des Legacy -Code.

Was sind einige aufstrebende JavaScript -Frameworks und Bibliotheken wert?

Einige aufstrebende JavaScript-Frameworks und -Bibliotheken umfassen SVELTE, ein Compiler-basiertes Framework, das eine einfachere und schnellere Entwicklungserfahrung bietet. auf reagieren. Diese Tools werden immer beliebter und können in Zukunft wichtiger werden.

Das obige ist der detaillierte Inhalt vonBeste JavaScript -Frameworks, Bibliotheken und Tools, die 2019 verwendet werden sollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!