Mit Hunderten von freien JS-Bibliotheken ist es schwer zu wissen, wo Sie Ihre Energie einsetzen können. Einige werden verworfen oder in neue Projekte gespalten, während andere schnell wachsen und eine breite Akzeptanz finden.

Die meisten Entwickler kennen bereits die großen Namen wie jQuery und React. Aber in diesem Beitrag möchte ich zwölf alternative JS-Bibliotheken vorstellen, die weniger bekannt sind, aber schnell ansteigen.

1) D3.js

01-d3js-Visualisierung-Bibliothek

Big Data ist eine wachsende Industrie und Datenvisualisierung wird schnell genauso wichtig. Es gibt Tonnen von Charting & Mapping-Bibliotheken, aber wenige stehen so viel wie D3.js . Diese JS-Bibliothek arbeitet mit SVG- und Canvas-Elementen zum Rendern von Grafiken, Diagrammen und dynamischen Visualisierungen im Web.

Es ist völlig kostenlos zu verwenden und es ist eines der leistungsfähigsten Visualisierungstools, die auf JavaScript basieren. Wenn Sie nach einer modernen Möglichkeit suchen, Daten im Browser zu rendern, würde ich sehr empfehlen, einen Blick auf diese Bibliothek zu werfen, um zu sehen, was sie bietet.

2) Node.js

02-nodejs-logo

Ich weiß, dass viele Entwickler es satt haben, davon zu hören Knoten die ganze Zeit. Aber es ist wirklich die am schnellsten wachsende JS-Bibliothek und es bietet so viel mehr als nur eine Entwicklungsumgebung. Mit NPM können Sie lokale Pakete für alle Ihre Projekte direkt über die Befehlszeile verwalten.

Dies macht Node zu einem vollständigen Entwicklungs-Toolkit, das gut mit anderen Tools wie Gulp funktioniert. Außerdem wurden Dutzende von verwandten Open-Source-Projekten auf Knoten erstellt, sodass Sie mit Unit-Tests arbeiten können Mocha.js oder baue eine Frontend-Schnittstelle mit dem Sails.js Rahmen.

Wenn Sie Node noch nicht ausprobiert haben, werden Sie vielleicht überrascht sein, wie viel Sie vermissen.

3) Riot.js

03-Riotjs-Bildschirm

Virtuelles DOM-Rendering und benutzerdefinierte Elemente werfen die React-Bibliothek um. Es wurde schnell zur Wahl aller Profis, die eine leistungsstarke digitale Interface-Bibliothek für die Frontend-Entwicklung benötigen.

Aber Riot.js ist ein solider Kampf, der eine gute Alternative zu React bietet. Mit dem Riot-Framework haben Sie immer noch Zugriff auf ein virtuelles DOM, aber es ist viel einfacher, es mit einfacheren Syntaxanforderungen zu steuern. Leider ist diese Bibliothek nicht so groß wie React und wird nicht von Facebook betrieben, so dass du nicht die riesige Community haben wirst. Aber es ist eine gesunde Alternative und es ist ein anständiger Konkurrent im Frontend-Bereich.

4) Erstellen.js

04-createjs-Staffel-js-Bildschirm

Von der Webanimation bis zu digitalen Medien können Sie mit allem arbeiten ErstellenJS . Dies ist keine einzelne Bibliothek, sondern eine Sammlung von Bibliotheken, die für verschiedene Zwecke erstellt wurden. Zum Beispiel arbeitet Easel.js mit HTML5-Canvas-Elementen, während Tweet.js Ihnen beim Erstellen von benutzerdefinierten Tweens und Animationen für das Web hilft.

Jede Bibliothek in dieser Sammlung dient einem anderen Zweck und bietet moderne Funktionen für alle gängigen Browser. Die meisten dieser Bibliotheken unterstützen jedoch spezielle Funktionen, so dass sie am besten auf speziellen Websites verwendet werden können. Wenn Sie neugierig sind, werfen Sie einen Blick auf die Erstellen Sie die JS-Website um zu sehen, was es bietet.

5) Keystone.js

05-Keystone-js-cms

Vorhin habe ich Node.js erwähnt und wie viele andere Bibliotheken darauf gebaut sind. Keystone.js ist ein fantastisches Beispiel, das über Node hinausgeht, indem es eine vollständige CMS-Engine anbietet.

Mit Keystone können Sie bauen MEINE Webapps powered by Node / Express und MongoDB im Backend. Keystone.js ist komplett kostenlos, aber immer noch sehr neu. Zum Zeitpunkt dieses Schreibens ist es nur in v0.3, so dass es einen langen Weg für den professionellen Einsatz hat.

Aber wenn Sie von einem reinen JavaScript-CMS gekitzelt werden, dann schauen Sie, was Sie denken.

6) Vue.js

06-vuejs-Logo

In der Welt der Front-End-Frameworks finden Sie typischerweise zwei prominente Möglichkeiten: Angular und Ember. Aber Vue.js ist eine weitere sehr beliebte Wahl und es gewinnt schnell mehr Aufmerksamkeit seit seiner Version 2.0 .

Vue ist ein MVVM-Frontend-JavaScript-Framework, sodass es sich von der typischen MVC-Architektur entfernt. Es ist schwierig zu lernen, aber die Syntax ist einfach, sobald Sie verstehen, wie alles funktioniert. Es ist sicherlich eine gangbare Wahl im Kampf um Front-End-Frameworks, und es lohnt sich, es in den nächsten Jahren genau im Auge zu behalten.

7) Meteor

07-Meteor-js-Logo

Sie können jede Plattform in die. Integrieren Meteor-Rahmen mit fantastischen Ergebnissen. Dieses Open Source-Projekt unterstützt Entwickler beim Erstellen von JS-basierten Anwendungen, unabhängig davon, ob es sich um Echtzeit-Chat-Apps oder soziale Communities oder benutzerdefinierte Dashboards handelt.

Es gibt sogar ein Social News Framework namens Fernrohr gebaut auf Meteor. Damit können Sie eine Social News / Social Voting-Website von Grund auf mit Meteor und React erstellen.

Meteor ist ein Biest einer Bibliothek mit vielen Funktionen, aber es ist nicht einfach zu lernen. Es macht jedoch Spaß und erfahrene JS-Entwickler können mit dieser Plattform fast alles bauen.

8) Chart.js

08-Chartjs-Leinwand-Demo

Mit Chart.js Mit JavaScript und der Canvas-API können Sie Balkendiagramme, Liniendiagramme, Blasendiagramme und viele andere ähnliche Funktionen erstellen. Dies ist eine der einfachsten JS-Bibliotheken für die Daten-Chart-Erstellung. Sie enthält integrierte Optionen für Animationen.

Dies ist eine der wenigen Bibliotheken, die ich für Datendiagramme empfehle, da sie einfach zu konfigurieren und anzupassen ist und mit einigen der besten Bibliotheken geliefert wird Dokumentation eines Open-Source-Projekts.

9) WebVR

09-webvr-logo

Es scheint, als ob die virtuelle Realität die Welt im Sturm erobert hat, mit neuen Startups und aufgeregten Entwicklern, die unermüdlich an VR-Projekten arbeiten. Deshalb war ich nicht überrascht zu finden WebVR , eine neue JavaScript-API für VR in Ihrem Browser.

Dies funktioniert von den beliebtesten Geräten wie dem Oculus Rift und dem Vive, aber es befindet sich gerade in einer Entwicklungsphase. Die API ist Open Source und wird ständig mit modernen Browsern getestet, um zu beurteilen, wie sie auf VR-Geräten funktioniert.

Wenn Sie neugierig sind, mehr zu erfahren oder sich an dem Projekt zu beteiligen, schauen Sie sich die offizielle Seite oder besuche die MozVR Seite Für mehr Information.

10) Drei .js

10-threejs-3d-grafik-webgl

Es ist verrückt zu sehen, wie stark die 3D-Animation seit den 80er Jahren bis heute gewachsen ist. Wir sind alle mit 3D-animierten Filmen vertraut, aber die Web-Animation ist immer noch eine neue Grenze. Und zum Glück haben wir Bibliotheken wie Drei .js bahnt sich den Weg für 3D-Animationen im Internet.

Auf der Hauptseite finden Sie Dutzende Live-Beispiele von Three.js in Aktion. Sie können bewegungsempfindliche Hintergründe, benutzerdefinierte 3D-Webgrafiken und dynamische Oberflächenelemente erstellen, die 3D-Animationseffekte verwenden. Wenn Sie genug Geduld und Antrieb haben, können Sie mit dieser Bibliothek einen 3D-Effekt erstellen. Es ist die beste Ressource für 3D-Bewegung im Web, und es kommt mit viele Beispiele um dich zu fangen.

11) Allwissend.js

11-allwissend-js-Bibliothek

Funktionale Programmierung mit JavaScript ist keine neue Sache. Aber es ist ziemlich neu im Internet und es ist jetzt viel häufiger bei Bibliotheken wie Allwissend.js . Diese kostenlose Open-Source-Bibliothek verarbeitet Ansichten mit einem Top-Down-Rendering-Prozess für alle Front-End-Komponenten. Sie können funktionalen JS-Code von Grund auf schreiben und mit vorhandenen UI-Bibliotheken wie React arbeiten.

Ich empfehle diese Bibliothek speziell jedem erfahrenen Entwickler, der einen reibungsloseren Entwicklungsprozess wünscht. Es ist ein schwieriges Thema für Anfänger, aber Omniscient kann Ihren Entwicklungsablauf radikal ändern, wenn es in Abstimmung mit React-Komponenten verwendet wird.

12) Ractive.js

12-ractive-js-demo

Wenn Sie nach einer UI-Bibliothek suchen, die sich von den anderen unterscheidet, denke ich Ractive.js Passt gut in die Form. Es kommt mit einer Zwei-Wege-Bindung für Vorlagenelemente und Daten, so dass Sie Vorlagen mit Elementen erstellen können, die in JavaScript an die RACE-Funktionen binden.

Dies ist eine ziemlich dichte Bibliothek, aber es bietet eine der glattesten Lernkurven für Anfänger. Es ist nicht so detailliert wie React und es verwendet eine sehr unterschiedliche Syntax in JS und HTML. Besuche den Hauptseite um mehr zu erfahren und die Beispielseite um zu sehen, was mit Ractive möglich ist.

Alle Bibliotheken in diesem Post haben etwas Einzigartiges, um die JS-Community zu bieten. Wenn Sie Spaß daran haben, an JavaScript zu basteln, dann schauen Sie sich hier noch einmal die einzelnen Bibliotheken an und sehen Sie, was sie Ihren Web-Entwickler-Projekten bieten können.