Met honderden gratis JS-bibliotheken die er zijn, is het moeilijk om te weten waar je je energie kunt steken. Sommigen komen terecht bij nieuwe projecten of worden gevorkt, terwijl andere snel groeien en een wijdverspreide acceptatie krijgen.

De meeste ontwikkelaars kennen de grote namen zoals jQuery en React al. Maar in dit artikel wil ik twaalf alternatieve JS-bibliotheken introduceren die minder bekend zijn maar snel toenemen.

1) D3.js

01-d3js-visualisatie-bibliotheek

Big data is een groeiende industrie en data visualisatie wordt snel net zo belangrijk. Er zijn talloze kaarten en mappen te vinden, maar er zijn er maar weinig die opvallen d3.js . Deze JS-bibliotheek werkt met SVG- en canvaselementen om grafieken, diagrammen en dynamische visualisaties op internet weer te geven.

Het is volledig gratis te gebruiken en het is een van de krachtigste visualisatiehulpmiddelen die op JavaScript is gebouwd. Als u op zoek bent naar een moderne manier om gegevens in de browser weer te geven, raad ik u aan een kijkje te nemen in deze bibliotheek om te zien wat deze biedt.

2) Node.js

02-NodeJS-logo

Ik weet dat veel ontwikkelaars het beu zijn om over te horen Knooppunt altijd. Maar het is echt de snelst groeiende JS-bibliotheek en biedt zo veel meer dan alleen een dev-omgeving. Met NPM kunt u vanaf de opdrachtregel lokale pakketten voor al uw projecten beheren.

Dit maakt Node een volledige ontwikkelingstoolkit die goed werkt met andere hulpmiddelen zoals Gulp. Daarnaast zijn er tientallen gerelateerde open source-projecten op het knooppunt gebouwd, zodat u kunt werken met unit testing Mocha.js of bouw een frontend interface met de Sails.js kader.

Als je nog geen Node hebt geprobeerd, kan het je verbazen hoeveel je mist.

3) Riot.js

03-riotjs-screen

Virtuele DOM-rendering en aangepaste elementen maken een nest in de React-bibliotheek. Het is snel uitgegroeid tot de keuze van alle professionals die een krachtige digitale interfacebibliotheek willen voor de ontwikkeling van frontends.

Maar Riot.js zet een stevig gevecht op met een goed alternatief voor React. Door het Riot-framework te gebruiken heeft u nog steeds toegang tot een virtuele DOM, maar het is veel eenvoudiger te beheren met eenvoudiger syntaxisvereisten. Helaas is deze bibliotheek niet zo groot als React en wordt deze niet aangedreven door Facebook, dus je hebt niet de enorme community. Maar het is een gezond alternatief en het is een behoorlijke concurrent in de frontend-ruimte.

4) Create.js

04-CreateJS-ezel-js-screen

Van webanimatie tot digitale media kunt u met alles werken CreateJS . Dit is niet één bibliotheek, maar een verzameling bibliotheken die is gebouwd voor verschillende doeleinden. Easel.js werkt bijvoorbeeld met HTML5-canvaselementen terwijl Tweet.js u helpt bij het maken van aangepaste tweening en animaties voor internet.

Elke bibliotheek in deze collectie heeft een ander doel en biedt moderne functies voor alle belangrijke browsers. Maar de meeste van deze bibliotheken helpen met gespecialiseerde functies, zodat ze het best kunnen worden gebruikt op speciale websites. Als je nieuwsgierig bent, kijk dan eens naar de Maak een JS-website om te zien wat het biedt.

5) Keystone.js

05-keystone-js-cms

Eerder noemde ik Node.js en hoeveel andere bibliotheken zijn er bovenop gebouwd. Keystone.js is een fantastisch voorbeeld dat verder gaat dan Node door een volledige CMS-engine aan te bieden.

Met Keystone kunt u bouwen MEAN webapps aangedreven door Node / Express en MongoDB op de backend. Keystone.js is helemaal gratis maar nog steeds erg nieuw. Op het moment van dit schrijven is het alleen in v0.3 dus het heeft nog een lange weg te gaan voor professioneel gebruik.

Maar als je wordt beklemd door een pure JavaScript CMS, ga dan eens kijken wat je ervan vindt.

6) Vue.js

06-vuejs-logo

In de wereld van front-end frameworks vind je meestal twee prominente keuzes: Angular en Ember. Maar Vue.js is een andere zeer populaire keuze en het wint snel meer aandacht sinds zijn v2.0 release .

Vue is een MVVM-frontend JavaScript-framework, zodat het zich verwijdert van de typische MVC-architectuur. Het is lastig om te leren, maar de syntaxis is simpel als je begrijpt hoe het allemaal werkt. Het is zeker een haalbare keuze in de oorlog van front-end frameworks, en het is de moeite waard om het de komende jaren nauwlettend in de gaten te houden.

7) Meteor

07-meteoor-js-logo

U kunt elk platform integreren in de Meteoorraamwerk met fantastische resultaten. Dit open source-project helpt ontwikkelaars om door JS-aangedreven applicaties te bouwen, of het nu gaat om real-time chat-apps of sociale communities of aangepaste dashboards.

Er is zelfs een sociaal nieuwsraamwerk Telescoop gebouwd op de top van Meteor. Op deze manier kun je vanuit het niets een website voor sociaal nieuws / sociaal stemmen maken die draait op Meteor en React.

Meteor is een beest van een bibliotheek met veel functies, maar het is niet gemakkelijk om te leren. Het is echter leuk en kundige JS-ontwikkelaars kunnen bijna alles met dit platform bouwen.

8) Chart.js

08-chartjs-canvas-demo

Met Chart.js u kunt staafdiagrammen, lijndiagrammen, ballondiagrammen en vele andere vergelijkbare functies maken met JavaScript en de canvas-API. Dit is een van de eenvoudigste JS-bibliotheken voor datadiagrammen en het wordt geleverd met ingebouwde opties voor animaties.

Dit is een van de weinige bibliotheken die ik aanbeveel voor datagrafieken, omdat het gemakkelijk kan worden ingesteld, gemakkelijk kan worden aangepast en het wordt geleverd met enkele van de beste documentatie van elk open source project.

9) WebVR

09-webvr-logo

Het lijkt erop dat virtual reality de wereld heeft veroverd met nieuwe startups en enthousiaste ontwikkelaars die zich onvermoeibaar inzetten voor VR-projecten. Daarom was ik niet verrast om te vinden WebVR , een nieuwe JavaScript-API gemaakt voor VR in uw browser.

Dit werkt van de meest populaire apparaten zoals de Oculus Rift en de Vive, maar het is momenteel in een ontwikkelingsstadium. De API is open source en wordt voortdurend getest met behulp van moderne browsers om te meten hoe deze werkt op VR-apparaten.

Als je nieuwsgierig bent om meer te leren of mee te doen met het project, bekijk dan de officiële site of bezoek de MozVR-pagina voor meer informatie.

10) Three.js

10-threejs-3d-graphics-WebGL

Het is gek om te zien hoeveel 3D-animaties er tot de jaren tachtig zijn gegroeid tot vandaag. We kennen allemaal 3D-animatiefilms, maar webanimatie is nog steeds een nieuwe grens. En gelukkig hebben we bibliotheken leuk Three.js een pad inslaan voor 3D-animatie op internet.

Op de hoofdsite vindt u tientallen live voorbeelden van Three.js in actie. U kunt bewegingsgevoelige achtergronden, aangepaste 3D-webafbeeldingen en dynamische interface-elementen maken die 3D-animatie-effecten gebruiken. Als je genoeg geduld en rij-eigenschappen hebt, kun je elk 3D-effect met deze bibliotheek opbouwen. Het is de beste bron voor 3D-beweging op het web, en het komt met veel voorbeelden om u op weg te helpen.

11) Omniscient.js

11-omniscient-js-bibliotheek

Functioneel programmeren met JavaScript is niet nieuw. Maar het is vrij nieuw op het internet en het is nu veel gebruikelijker met bibliotheken Omniscient.js . Deze gratis opensource-bibliotheek verwerkt weergaven met een top-down weergaveproces voor alle front-end componenten. U kunt vanuit het niets functionele JS-code schrijven en werken met bestaande UI-bibliotheken zoals React.

Ik zou deze bibliotheek specifiek aanbevelen aan ervaren ontwikkelaars die een soepeler ontwikkelingsproces willen. Het is een gecompliceerd onderwerp voor beginners, maar Omniscient kan uw dev-workflow radicaal veranderen als het wordt gebruikt in combinatie met React-componenten.

12) Ractive.js

12-ractive-js-demo

Als je op zoek bent naar een UI-bibliotheek die anders is dan de rest denk ik Ractive.js past goed in de vorm. Het wordt geleverd met bidirectionele binding voor sjabloonelementen en -gegevens, zodat u sjablonen kunt maken met elementen die binden aan Ractive-functies in JavaScript.

Dit is een vrij dichte bibliotheek, maar het biedt een van de soepelste leercurves voor beginners. Het is niet zo gedetailleerd als React, en het gebruikt enorm verschillende syntaxis in JS en HTML. Bezoek de hoofdsite voor meer informatie, en bekijk de voorbeeldpagina om te zien wat mogelijk is met Ractive.

Alle bibliotheken in dit bericht hebben iets unieks om de JS-gemeenschap aan te bieden. Als je graag aan JavaScript sleutelt, kijk dan nog eens naar elke bibliotheek hier en kijk wat ze jouw web-ontwikkelingsprojecten kunnen bieden.