Vergleich der neuesten Frontend-Frameworks, Klassenbibliotheken und Tools

Im Vergleich zur Anzahl der JavaScript-Entwickler scheint es mehr JavaScript-Frameworks, -Bibliotheken und -Tools zu geben. Mit Stand Mai 2017 zeigt eine schnelle Suche auf GitHub, dass es über 1,1 Millionen JavaScript-Projekte gibt. npmjs.org verfügt über 500.000 verfügbare Pakete und fast 10 Milliarden Downloads pro Monat.

In diesem Artikel werden die beliebtesten clientseitigen JavaScript-Frameworks, -Bibliotheken und -Tools sowie die grundlegenden Unterschiede zwischen ihnen erläutert. Vielleicht kann Ihnen dieser Artikel nicht sagen, welches das Beste ist, aber das, das am besten zu Ihrem Projekt passt, ist das Beste.

Klassenbibliothek

Eine Klassenbibliothek ist eine organisierte Sammlung von Funktionen. Typische Klassenbibliotheken umfassen String-Verarbeitung, Datumsangaben, HTML-DOM-Elemente, Ereignisse, Cookies, Animationen, Netzwerkanfragen und andere Funktionen. Sie können eine Funktion selbst implementieren, um auszuwählen, ob die Funktion beim Aufruf einen Wert zurückgeben muss.

Klassenbibliotheken bieten normalerweise eine Abstraktionsmethode auf hoher Ebene, die dabei helfen kann, die Details des Projekts reibungslos umzusetzen. Beispielsweise verlässt sich Ajax normalerweise auf die XMLHttpRequest-API, die nur wenige Codezeilen zur Implementierung der Funktion erfordert, es gibt jedoch subtile Unterschiede zwischen den Browsern. Die Klassenbibliothek bietet einfachere ajax()-Funktionen, sodass sich Entwickler auf die Geschäftslogik auf höherer Ebene konzentrieren können.

Die Klassenbibliothek kann die Entwicklungszeit um 20 % verkürzen, und Entwickler müssen sich nicht um Implementierungsdetails kümmern.

Aber es gibt auch Nachteile:

• Fehler in der Klassenbibliothek sind schwer zu finden und zu beheben

• Das Entwicklungsteam kann die schnelle Veröffentlichung von Patches nicht garantieren

• Der Patch kann die API ändern, was dazu führt, dass eine große Menge Code geändert werden muss

• Wenn Wenn Sie während des Lernprozesses auf Probleme stoßen oder Lernressourcen erhalten möchten, sind Sie herzlich willkommen, der Lern- und Austauschgruppe beizutreten
  343599877, lasst uns gemeinsam Frontend lernen!

Framework

Ein Frame ist das Grundgerüst einer Anwendung. Es erfordert ein spezifisches Software-Design und die Implementierung einer eigenen Logik auf bestimmten Knoten. Frameworks stellen normalerweise Funktionen wie Ereignisse, Speicherung und Datenbindung bereit.

Frameworks bieten in der Regel ein höheres Abstraktionsniveau als Klassenbibliotheken und helfen so, die ersten 80 % eines Projekts schnell zu erstellen.

Nachteile von Frameworks:

• Wenn Ihre Anwendung außerhalb des Rahmens liegt, können die letzten 20 % schwierig sein

• Framework-Updates sind schwierig

• Kern-Framework-Code und -Konzepte werden selten aktualisiert

Tools

Tools unterstützen die Entwicklungsbemühungen , ist aber nicht Teil des Projekts. Zu den Tools gehören Build-Systeme, Compiler, Transpiler, Code-Splitter, Bildkompressoren, Bereitstellungsmechanismen und mehr.

Tools tragen dazu bei, den Entwicklungsprozess zu vereinfachen. Beispielsweise bevorzugen viele Programmierer Sass gegenüber CSS, weil es Codetrennung, Verschachtelung, Renderzeitvariablen, Schleifen und Funktionen bietet. Browser verstehen die Sass/SCSS-Syntax nicht, daher muss der Code vor dem Testen und der Bereitstellung mit geeigneten Tools in CSS kompiliert werden.

Der Unterschied zwischen Bibliotheken, Frameworks und Tools

Der Unterschied zwischen Bibliotheken, Frameworks und Tools ist sehr gering. Ein Framework kann eine Klassenbibliothek enthalten, und die Klassenbibliothek kann dem Framework ähnliche Methoden implementieren. Jedes Tool im Projekt ist unerlässlich. Es besteht also keine Notwendigkeit, klar zwischen Bibliotheken, Frameworks und Tools zu unterscheiden.

JavaScript Frameworks und Bibliotheken

Hier sind die Rankings in der Reihenfolge ihrer Beliebtheit:

jQuery

jQuery
类型	类库
网站	jquery.com
知识库	github.com/jquery/jquery
当前版本	3.2.1
开发人员	jQuery团队
发布日期	2006年8月
大小	最小30kb
用途	通用
使用度	72.4％的网站

Mit der Veröffentlichung von WordPress, ASP.NET und einigen anderen Frameworks ist jQuery immer noch die am häufigsten verwendete JavaScript-Bibliothek. Es revolutionierte die clientseitige Entwicklung durch die Einführung von CSS-Selektoren zum Abrufen und Verketten von DOM-Knoten, um Ereignishandler, Animationen und Ajax-Aufrufe anzuwenden.

jQuery hat in den letzten Jahren an Popularität gewonnen und ist immer noch eine gute Wahl für Projekte, die eine geringe Menge an JavaScript-Funktionalität erfordern.

Vorteile:

• Kleiner Verbreitungsmaßstab

• Langsame Lernkurve, umfangreiche Online-Hilfe

• Präzise Syntax

• Einfach zu erweitern

Nachteile:

• Geschwindigkeitsaufwand für native API hinzugefügt

• Browserkompatibilität ist schlecht, wurde aber verbessert

• Flache Nutzung

• Einige Branchen sind gegen die Verwendung von

Lodash und Underscore

Lodash
类型	类库
网站	lodash.com/
知识库	github.com/lodash/lodash/
当前版本	4.17.4
开发人员	John-David Dalton
发布日期	2012年4月
大小	最小4kb – 24kb
用途	通用
使用度	低
Underscore
类型	类库
网站	underscorejs.org/
知识库	github.com/jashkenas/underscore
当前版本	1.8.3
开发人员	Jeremy Ashkenas
发布日期	2009年10月
大小	最小6kb
用途	通用
使用度	低

Lodash und Underscore werden in diesem Abschnitt gemeinsam besprochen. Sie bieten Hunderte funktionaler JavaScript-Dienstprogramme zur Ergänzung nativer String-, Zahlen-, Array- und anderer primitiver Objektmethoden. Obwohl es einige Überschneidungen zwischen den beiden Bibliotheken gibt, ist es unwahrscheinlich, dass beide im selben Projekt verwendet werden.

Obwohl die Nutzung dieser beiden Klassenbibliotheken auf der Clientseite sehr gering ist, können diese beiden Klassenbibliotheken in Node.js-Anwendungen auf der Serverseite verwendet werden.

Vorteile:

• Klein und einfach

• Gute Dokumentation, leicht zu erlernen

• Kompatibel mit den meisten Bibliotheken und Frameworks

• Erweitert keine integrierten Objekte

• Kann auf dem Client verwendet werden oder Server Nachteile der Verwendung von

:

• Einige Methoden sind nur in ES2015 und höheren Versionen von JavaScript verfügbar.

AngularJS 1.x

AngularJS
类型	框架
网站	angularjs.org
知识库	github.com/angular/angular.js
当前版本	1.6.4
开发人员	Google
发布日期	2010年10月
大小	144KB
用途	单页应用程序
使用度	低

Angular ist die erste in der Liste der Framework-Klassen (oder MVC-Anwendungs-Framework-Klassen). individuell. Die derzeit beliebteste Version von Angular ist 1.x, die HTML um eine bidirektionale Datenbindung erweitert und gleichzeitig DOM-Operationen und Anwendungslogik entkoppelt.

Obwohl Version 2 (jetzt Version 4!) veröffentlicht wurde, befindet sich Angular 1.x noch in der Entwicklung.

Vorteile:

• Beliebtes Framework, das von einigen großen Unternehmen

• zur Entwicklung moderner Webanwendungen verwendet wird Anwendungen Die Lösung des Programms

• ist Teil des Standard-MEAN-Stacks (MongoDB, Express.JS, AngularJS, NodeJS) und es sind viele Artikel und Tutorials verfügbar

Nachteile:

• Steile Lernkurve

• Große Codebasis

• Upgrade auf Angular 2.x nicht möglich

Angular 2.x (jetzt Angular 4.x)

Angular
类型	框架
网站	angular.io
知识库	github.com/angular/angular.js
当前版本	4.1
开发人员	Google
发布日期	2016年9月
大小	最小450kb
用途	单页面应用
使用度	低

Angular 2.0 wurde im September 2016 veröffentlicht. Dies ist eine vollständige Neufassung, die ein modulares, komponentenbasiertes Modell einführt, das mit TypeScript erstellt wurde. Angular 4.0 wurde im März 2017 veröffentlicht.

Angular 2.x unterscheidet sich völlig von v1 und ist nicht mit anderen Versionen kompatibel – vielleicht sollte Google dem Projekt einen anderen Namen geben!

Vorteile:

• Die Lösung für die Entwicklung moderner Webanwendungen

• ist der Standard-MEAN-Stack Für Entwickler, die mit statisch typisierten Sprachen wie C# und Java vertraut sind, bietet TypeScript mehrere Vorteile.

• Nachteile:

Steile Lernkurve

• Große Codebibliothek

• Kann nicht von Angular 1.x aktualisiert werden

• Angular 2.x ist im Vergleich zu 1.x schwerer zu verstehen

• Wenn Sie während des Lernprozesses auf Probleme stoßen oder Lernressourcen erhalten möchten, können Sie gerne der Lernaustauschgruppe beitreten
343599877, lasst uns gemeinsam Frontend lernen!

• 
  
  React

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen und war letztes Jahr auch die beliebteste Klassenbibliothek. Es konzentriert sich auf den „View“-Teil der Model-View-Controller (MVC)-Entwicklung. Mit ihm können Sie ganz einfach zustandserhaltende UI-Komponenten erstellen. Es ist eine der bevorzugten Klassenbibliotheken für die Implementierung von virtuellem DOM. Dank seiner Speicherstruktur können Unterschiede effizient berechnet werden, und Seitenaktualisierungen sind effizienter.

Statistiken zeigen, dass die Nutzung von React gering zu sein scheint, da es eher in Anwendungen als auf Websites verwendet wird.

React
类型	框架
网站	facebook.github.io/react/
知识库	github.com/facebook/react
当前版本	15.5.4
开发人员	Facebook和贡献者
发布日期	2013年3月
大小	21kb分钟
用途	单页应用程序
使用度	低

Vorteile:

Klein, effizient, schnell und flexibel

• Einfaches Komponentenmodell

• Gute Dokumentation und Online-Ressourcen

• Serverseitiges Rendering möglich

• Derzeit beliebt und erlebt. Schnelles Wachstum

• Nachteile:

Muss neue Konzepte und Syntax erlernen

• Building-Tools sind sehr wichtig

• Benötigen Sie andere Klassenbibliotheken oder Frameworks, um Modell- und Controller-Teile bereitzustellen

• Code, der DOM und andere Bibliotheksinkompatibilitäten ändert

• Erfahren Sie mehr über React the ES6 Way

Vue.js

Vue.js ist ein leichtes progressives Framework zum Erstellen von Benutzeroberflächen. Es bietet eine React-ähnliche virtuelle DOM-gesteuerte Ansichtsebene, die in andere Klassenbibliotheken integriert werden kann, um leistungsstarke Single-Page-Anwendungen zu erstellen. Das Framework wurde von Evan You erstellt, der zuvor an AngularJS gearbeitet und seine Lieblingsteile von AngularJS extrahiert hatte.

Vue.js verwendet HTML-Vorlagensyntax, um das DOM an Instanzdaten zu binden. Modelle sind reine JavaScript-Objekte, die Ansichten aktualisieren, wenn sich Daten ändern.

Vorteile:

• Schnell anzuwenden und immer beliebter

• Einfach zu einem High zu steigern Stufe Entwicklerzufriedenheit

• Geringe Abhängigkeiten, gute Leistung

Nachteile:

• Ein neueres Projekt – das Risiko kann größer sein

• Teilweise abhängig von Entwicklern für Updates

• Im Vergleich zu anderen Frameworks weniger Ressourcen

Backbone.js

Backbone.js
类型	框架
网站	backbonejs.org
知识库	github.com/jashkenas/backbone/
当前版本	1.3.3
开发人员	Jeremy Ashkenas
发布日期	2010年10月
大小	最小8kb
用途	单页面应用
使用度	低

Backbone.js ist ein gängiger MVC, der serverseitige Frameworks bereitstellt. Eines der frühesten clientseitigen Optionen für Strukturen. Seine einzige Abhängigkeit ist Underscore.js.

Backbone.js behauptet, eine Bibliothek zu sein, weil sie in andere Projekte integriert werden kann, aber ich denke, die meisten Entwickler betrachten es als Framework.

Vorteile:

• Geringe Größe, geringes Gewicht, geringe Komplexität

• Keine HTML-Logik hinzugefügt

• File Rich

• Wird von vielen Apps verwendet, darunter Trello, WordPress.com, LinkedIn und Groupon

Nachteile:

• Weniger Abstraktion im Vergleich zu anderen Frameworks wie AngularJS

• Erfordert zusätzliche Komponenten zur Implementierung von Funktionen wie z als Datenbindung

• Das neueste Framework verwendet nicht mehr die MVC-Architektur

Ember.js

Ember.js
类型	框架
网站	emberjs.com
知识库	github.com/emberjs/ember.js
当前版本	2.15.0
开发人员	Ember team
发布日期	2011年12月
大小	最小95kb
用途	单页面应用
使用度	低

Ember.js ist eines der Frameworks, die auf dem Model-View-ViewModel (MVVM)-Muster basieren. Es implementiert Vorlagen, Datenbindung und Klassenbibliotheken in einem einzigen Paket.

Vorteile:

• Bietet eine einzige Lösung für Clientanwendungen

• Entwickler verbessern sofort die Entwicklungseffizienz – es verwendet jQuery

• Gute Abwärtskompatibilität und Upgrade-Optionen

• Übernimmt moderne Webentwicklungsstandards

Nachteile:

• Großer verteilter Typ

• Im Vergleich zu anderen Im Vergleich zum Framework für die Entwicklung der Widget-Struktur, es ist sehr groß

• Die Lernkurve ist steil

Knockout.js

Knockout.js
类型	框架
网站	knockoutjs.com
知识库	github.com/knockout/knockout
当前版本	3.4.2
开发人员	Steve Sanderson
发布日期	2010年7月
大小	最小59kb
用途	单页面应用
使用度	低

Knockout.js ist eines der frühesten MVVM-Frameworks, das mit Vorlagen und Abhängigkeitsverfolgung sicherstellt, dass die Benutzeroberfläche mit den zugrunde liegenden Daten synchron bleibt.

Vorteile:

• Klein und leicht, keine Abhängigkeiten

• Hervorragende Browserunterstützung, Kann unterstützen IE6

• Gute Dokumentationsressourcen

Nachteile:

• Größere Projekte kann komplex werden

• Die Entwicklung hat sich verlangsamt

• Die Nutzung scheint nachzulassen

Mehr Frameworks und Bibliotheken

Die folgenden Projekte sind nicht besonders beliebt, aber eine Überlegung wert:

• Polymer – browserübergreifende Unterstützung für HTML5-Klassenbibliothek für Webkomponenten

• Meteor – eine Full-Stack-Plattform für Webanwendungen

• Aurelia – ein relativ neues, leichtes plattformübergreifendes Framework

• Svelte – ein neues Projekt, das den Framework-Quellcode in sauberes JavaScript umwandelt

• Conditioner.js – eine Klassenbibliothek, die Module basierend auf dem Status automatisch lädt und entlädt

Tools: Führen Sie häufige Aufgaben aus

Erstellen Sie Tools, um verschiedene Webentwicklungsaufgaben automatisch auszuführen, z. B. Vorverarbeitung, Kompilierung, Bildoptimierung, minimierten Code, Codeanalyse, Ausführen von Tests und mehr. Aufgaben können einheitlich in einem ausführbaren Paket verwaltet werden.

Die beliebtesten Tools sind derzeit folgende:

Gulp.js

Gulp.js
网站	gulpjs.com
知识库	github.com/gulpjs/gulp
当前版本	3.9.1
每月下载	300万

Obwohl Gulp nicht die erste Aufgabenausführung ist Werkzeug, es wurde schnell zum beliebtesten. Mit leicht lesbarem JavaScript-Code lädt Gulp Quelldateien in Streams und verwaltet die Daten über verschiedene Plugins, bevor es sie in den Build-Ordner ausgibt. Das Überprüfen von Gulp.js vor allen anderen Optionen ist einfach, schnell und macht Spaß.

NPM

NPM
网站	npmjs.com
知识库	github.com/npm/npm
当前版本	4.5.0
每月下载	300万

npm ist ein Node.js-Paketmanager, seine Skripting-Tools können jedoch zum Ausführen allgemeiner Aufgaben verwendet werden. Dies ist eine gute Wahl für einfache Projekte mit einigen Abhängigkeiten. Für komplexere Aufgaben kann es jedoch sein, dass es weniger anwendbar ist.

Grunt

Grunt
网站	gruntjs.com
知识库	github.com/gruntjs/grunt
当前版本	1.0.1
每月下载	200万

Grunt war eines der ersten massenhaft übernommenen JavaScript-Aufgabenausführungstools, litt jedoch unter der Geschwindigkeit und der komplexen JSON-Konfiguration. Aber es führte zum Aufstieg von Gulp. Nachdem diese Probleme nun gelöst sind, bleibt Grunt eine beliebte Wahl.

Tools: Modulbindung

Die Verwaltung mehrerer JavaScript-Dateien ist zu einer mühsamen Aufgabe geworden. Standardmäßig werden Browserdateien nicht kompiliert, daher müssen ihre Abhängigkeiten in der richtigen Reihenfolge geladen oder verbunden werden. Obwohl es Optionen wie ES6-Module und CommonJS gibt, ist die Browserunterstützung begrenzt, sodass die Modulbindung wichtig ist.

WebPack

WebPack
网站	webpack.js.org
知识库	github.com/webpack/webpack
当前版本	2.5.1
每月下载	600万

Webpack unterstützt alle gängigen Moduloptionen und ist zum Synonym für React-Entwicklung geworden. Obwohl Webpack behauptet, ein Modul-Bundler zu sein, kann es bereits als universeller Task-Runner verwendet werden.

Browserify

Browserify
网站	browserify.org
知识库	github.com/substack/node-browserify
当前版本	14.3.0
每月下载	260万

Browserify unterstützt CommonJS-Module, die von Node.js verwendet werden, es kompiliert alle Module in einer einzigen browserkompatiblen Datei.

RequireJS

RequireJS
网站	requirejs.org
知识库	github.com/jrburke/r.js
当前版本	2.3.3
每月下载	百万

RequireJS ist ein browserinterner Modullader, der auch in Node.js verwendet werden kann.

Tools: Code-Analyse

Code-Analyse-Tools werden verwendet, um Code auf mögliche Fehler oder Abweichungen von Syntaxstandards zu analysieren. Eine nicht geschlossene Klammer oder eine nicht deklarierte Variable wird immer erkannt.

ESLint

ESLint
网站	eslint.org
知识库	github.com/eslint/eslint
当前版本	3.19.0
每月下载	600万

ESLint ist ein steckbares Code-Analysetool. Jede Regel ist ein Plugin und kann daher nach persönlichen Vorlieben konfiguriert werden.

JSHint

JSHint
网站	jshint.com
知识库	github.com/jshint/jshint
当前版本	2.9.4
每月下载	200万

JSHint ist ein flexibles JavaScript-Code-Analysetool, das echte Fehler mit alter Syntax ausgleicht.

JSLint

JSLint
网站	jslint.com
知识库	github.com/reid/node-jslint
当前版本	0.10.3
每月下载	50000

JSLint ist eines der frühesten Code-Analysetools und implementiert einen strengen Satz von Standardregeln.

Tools: Unit Testing

Die Aufgabe der testgetriebenen Entwicklung erfordert das Schreiben von Code, um Ihren eigenen Code zu testen. Es gibt viele Optionen, darunter Ava, Tape und Jest, aber die drei beliebtesten Tools sind derzeit:

Mocha

Mocha
网站	mochajs.org
知识库	github.com/mochajs/mocha
当前版本	3.3.0
每月下载	500万

Mocha is ein JavaScript-Testframework, das Tests in Node.js oder im Browser ausführen kann. Es unterstützt asynchrone Tests und wird häufig mit Chai verwendet, wodurch Testcode auf lesbare Weise ausgedrückt werden kann.

Jasmine

Jasmine
网站	jasmine.github.io
知识库	github.com/jasmine/jasmine-npm
当前版本	2.6.0
每月下载	200万

Jasmine ist ein verhaltensgesteuertes Testtool, das die Benutzeroberfläche und Interaktionen im Browser automatisch testen kann.

QUnit

QUnit
网站
知识库	github.com/kof/node-qunit
当前版本	1.0.0
每月下载	25000

QUnit ist ein Unit-Testing-Framework, das Funktionsergebnisse überprüfen kann, wenn bestimmte Parameter eingegeben werden. Außerdem werden Testergebnisse gemeldet, um sicherzustellen, dass keine bestimmten Codezweige übersehen werden.

Zusammenfassung und Vorschläge

Das derzeit schlankste Framework ist React, und auch andere Frameworks entwickeln sich in Richtung beliebter Trends.

Wenn Sie eine sichere, vielseitige Webanwendung benötigen, sollten Sie die Verwendung von Vue.js in Betracht ziehen.

Monolithische Frameworks sind nicht mehr beliebt. Wenn Sie ein striktes strukturelles Management eines größeren Projekts benötigen, ist AngularJS eine gute Wahl. Derzeit bleiben die meisten Leute bei Angular 1.0, aber auf lange Sicht ist Angular 4.x die bessere Wahl, wenn Sie bereit sind, TypeScript zu lernen.

Obwohl jQuery derzeit nicht sehr beliebt ist und in Technologienachrichten selten erwähnt wird, lässt sich nicht leugnen, dass es aktiv weiterentwickelt wird und ein leistungsstarkes Tool für Websites und Anwendungen ist. jQuery hat eine sanfte Lernkurve und wird von vielen Entwicklern auf der ganzen Welt gut verstanden.

Wenn Sie abenteuerlustig sind, probieren Sie Svelte aus, ein interessantes Client/Server-Framework, das JavaScript zur Build-Zeit vorab rendert und die Art und Weise, wie wir entwickeln, verändern könnte.

Die Werkzeugauswahl variiert je nach Projekt. Obwohl die meisten Entwickler derzeit Gulp verwenden, erfreut sich WebPack immer größerer Beliebtheit. Gleichzeitig dürfen Testtools wie ESLint und Mocha nicht fehlen.

Das obige ist der detaillierte Inhalt vonVergleich der neuesten Frontend-Frameworks, Klassenbibliotheken und Tools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!