Satoja ilmaisia ​​JS-kirjastoja siellä on vaikea tietää missä laittaa energiaasi. Jotkut päätyvät hylättyihin tai uusiin projekteihin, toiset taas kasvavat nopeasti ja saavuttavat laajan hyväksynnän.

Useimmat kehittäjät tuntevat jo suuret nimet kuten jQuery and React. Mutta tässä artikkelissa haluaisin esitellä kaksitoista vaihtoehtoista JS-kirjastoa, jotka ovat vähemmän tunnettuja mutta jotka nousevat nopeasti.

1) D3.js

01-d3js-visualisointi-kirjasto

Suuria tietoja on kasvava teollisuus ja tietojen visualisointi on nopeasti tulossa yhtä tärkeäksi. On olemassa useita kartoituksia ja kartoituksia kirjastoissa, mutta harva erottuu yhtä paljon kuin d3.js . Tämä JS-kirjasto toimii SVG: n ja kudoselementtien kanssa graafisten kaavojen, kaavioiden ja dynaamisten visualisointien tekemisessä verkossa.

Se on täysin ilmainen, ja se on yksi tehokkaimmista JavaScript-työkaluista. Jos etsit nykyaikaista tietojenkäsittelytapaa selaimessani, suosittelen syventämään tätä kirjastoa nähdäksesi, mitä se tarjoaa.

2) Node.js

02-nodejs-logo

Tiedän, että monet devs ovat kyllästyneet kuulostamaan Solmu koko ajan. Mutta se on todella nopeimmin kasvava JS-kirjasto ja se tarjoaa paljon enemmän kuin dev-ympäristö. Kanssa NPM voit hallita paikallisia paketteja kaikkiin projekteihisi heti komentoriviltä.

Tämä tekee solmusta täydellisen työkalupaketin, joka toimii hyvin muiden työkalujen kuten Gulpin kanssa. Lisäksi solmuun on rakennettu kymmeniä asiaan liittyviä avoimen lähdekoodin projekteja, jotta voit työskennellä yksikkötestauksen kanssa Mocha.js tai rakentaa etupään käyttöliittymän Sails.js puitteissa.

Jos et ole vielä kokeillut solmua, saatat yllättyä siitä, kuinka paljon olet puuttunut.

3) Riot.js

03-riotjs-näytön

Virtuaalinen DOM-mallinnus ja mukautetut elementit hajautuvat React-kirjastoon. Se on nopeasti tullut kaikkien ammattilaisten valinta, jotka haluavat tehokkaan digitaalisen käyttöliittymäkirjaston etupään kehittämiseen.

Mutta Riot.js on vakiintunut taistelu, joka tarjoaa mukavan vaihtoehdon Reactille. Käyttämällä Riot-kehystä sinulla on silti mahdollisuus käyttää virtuaalista DOM-ohjelmaa, mutta se on helpompi hallita yksinkertaisemmilla syntaksivaatimuksilla. Valitettavasti tämä kirjasto ei ole yhtä suuri kuin React ja se ei ole Facebookin ylläpitämä, joten sinulla ei ole valtavaa yhteisöä. Mutta se on terve vaihtoehto ja se on ihmisarvoinen kilpailija etupäässä.

4) Luo.js

04-createjs-Teline-js-näyttö

Web-animaatiosta digitaaliseen mediaan voit työskennellä kaiken kanssa CreateJS . Tämä ei ole yksi ainoa kirjasto, vaan kirjastojen sarja, joka on rakennettu eri tarkoituksiin. Esimerkiksi Easel.js toimii HTML5-kudoselementtien kanssa, kun taas Tweet.js auttaa sinua luomaan mukautettuja tweening- ja animaatioita verkkoon.

Jokainen tämän kokoelman kirjasto palvelee eri tarkoitusta ja tarjoaa moderneja ominaisuuksia kaikille tärkeimmille selaimille. Mutta useimmat näistä kirjastoista auttavat erikoistuneissa ominaisuuksissa, joten niitä käytetään parhaiten erikoisnumeroilla. Jos olet utelias, katsokaa sitten Luo JS-verkkosivusto nähdä, mitä se tarjoaa.

5) Keystone.js

05-Keystone-js-CMS

Aiemmin mainitsin Node.js ja kuinka monta muuta kirjastoa on rakennettu päälle. Keystone.js on loistava esimerkki, joka ylittää solmun tarjoamalla täysimittaisen CMS-moottorin.

Keystonein avulla voit rakentaa MEAN verkkosovellukset powered by Node / Express ja MongoDB on backend. Keystone.js on täysin ilmainen, mutta silti erittäin uusi. Tämän kirjoittamisen aikaan se on vain v0.3, joten se on pitkä matka ammattikäyttöön.

Mutta jos olet puhdas JavaScript CMS, tarkista se ja näet, mitä mieltä olet.

6) Vue.js

06-vuejs-logo

Etupään kehysten maailmassa tyypillisesti löytyy kaksi näkyvää valintaa: Kulma ja Ember. Mutta Vue.js on toinen erittäin suosittu valinta ja se on nopeasti saamassa enemmän huomiota sen jälkeen v2.0-julkaisu .

Vue on MVVM-käyttöliittymän JavaScript-kehys, joten se siirtyy tyypillisen MVC-arkkitehtuurin ulkopuolelle. On hankalaa oppia, mutta syntaksi on yksinkertainen, kun ymmärrät, miten kaikki toimii. Se on varmasti toteuttamiskelpoinen valinta etupään puitteissa, ja kannattaa seurata sitä lähivuosina.

7) Meteori

07-Meteor-js-logo

Voit liittää minkä tahansa alustan sisään Meteor-puitteet upeilla tuloksilla. Tämä avoimen lähdekoodin projekti auttaa kehittäjiä rakentamaan JS-sovelluksia, olivatpa he sitten reaaliaikaisia ​​chat-sovelluksia tai sosiaalisia yhteisöjä tai mukautettuja hallintapaneeleja.

Siellä on jopa sosiaalinen uutiskehys kutsutaan Teleskooppi rakennettu päälle Meteor. Näin voit luoda sosiaalisen uutisten / sosiaalisen äänestyssivuston Meteorilta ja Reactilta.

Meteori on kirjaston peto, jolla on paljon ominaisuuksia, mutta sitä ei ole helppo oppia. Kuitenkin se on hauskaa ja ammattitaitoinen JS-kehittäjä voi rakentaa lähes mitään tämän alustan kanssa.

8) Kaavio.js

08-chartjs-canvas-demo

Kanssa Chart.js voit luoda bar-kaavioita, linjakarttoja, kupla-kaavioita ja monia muita samankaltaisia ​​ominaisuuksia JavaScriptin ja Canvas-sovellusliittymän avulla. Tämä on yksi yksinkertaisimmista JS-kirjastoista datakartoitukseen ja siinä on sisäänrakennetut animaatioasetukset.

Tämä on yksi harvoista kirjastoista, joita suosittelen datakaavioille, koska se on helppo asentaa ja muokata helposti. Siinä on myös joitain parhaita dokumentointi kaikista avoimen lähdekoodin hankkeista.

9) WebVR

09-webvr-logo

Näyttää siltä, ​​että virtuaalitodellisuus on ottanut myrskyn maailman uusilla aloittelijoilla ja innostuneilla kehittäjillä, jotka työskentelevät väsymättä VR-projekteihin. Siksi en ollut yllättynyt löytää WebVR , uusi JavaScript-sovellusliittymä VR: lle selaimessasi.

Tämä toimii suosituimpia laitteita, kuten Oculus Rift ja Vive, mutta se on parhaillaan kehitysvaiheessa. API on avoin lähdekoodi ja sitä testataan jatkuvasti moderneissa selaimissa, jotta se mittaa miten se toimii VR-laitteissa.

Jos olet utelias oppimaan lisää tai osallistumaan hankkeeseen, tutustu virallinen sivusto tai käydä MozVR-sivu lisätietoja.

10) Kolme.js

10-threejs-3d-grafiikka-WebGL

On hullua nähdä, kuinka paljon 3D-animaatio on kasvanut 1980-luvulta asti tähän päivään asti. Me kaikki tunnemme 3D-animoituja elokuvia, mutta web-animaatio on edelleen uusi raja. Ja onneksi meillä on kirjastoja three.js joka polkee 3D-animaation polkua webissä.

Pääsivustossa on kymmeniä eläviä esimerkkejä Three.js: sta toiminnassa. Voit luoda liikkuvaa taustaa, mukautettua 3D-verkkokuvausta ja dynaamisia käyttöliittymän elementtejä, jotka käyttävät 3D-animaatioefektejä. Jos sinulla on tarpeeksi kärsivällisyyttä ja ajaa, voit rakentaa minkä tahansa 3D-efektin tähän kirjastoon. Se on paras resurssi 3D-liikkeelle verkossa, ja siinä on mukana paljon esimerkkejä pääset alkuun.

11) Omniscient.js

11-kaikkitietävä-js-kirjastosta

Toiminnallinen ohjelmointi JavaScriptin avulla ei ole uusi asia. Mutta se on melko uusi verkossa, ja se on nyt paljon tavallisempi kirjastojen kanssa Omniscient.js . Tämä ilmainen avoimen lähdekoodin kirjasto käsittelee näkymiä ylhäältä alas renderointiprosessilla kaikille etupään komponentteille. Voit kirjoittaa toiminnallisia JS-koodeja tyhjästä ja työskennellä olemassa olevien UI-kirjastojen, kuten Reactin kanssa.

Suosittelen erityisesti tätä kirjastoa kokeneille kehittäjille, jotka haluavat sujuvan kehitystyön. Se on monimutkainen aihe aloittelijoille, mutta Omniscient voi muuttaa radikaalisti dev-työnkulujasi yhteensopiviksi React-komponenttien kanssa.

12) Rakt.js

12-ractive-js-demo

Jos etsit käyttöliittymäkirjastoa, joka on erilainen kuin muu, luulen Ractive.js sopii muottiin hyvin. Siinä on kaksisuuntainen sidonta malliselementteihin ja tietoihin, jotta voit luoda malleja elementteineen, jotka sitovat JavaScript-toimintoihin.

Tämä on melko tiheä kirjasto, mutta se tarjoaa yhden tasokkaimmista oppimiskäyristä aloittelijoille. Se ei ole niin yksityiskohtainen kuin React, ja se käyttää huomattavan erilaisia ​​syntaksia JS: ssä ja HTML: ssä. Vieraile tärkein sivusto oppia lisää ja tutustu esimerkkisivu nähdä mitä on mahdollista Raktilla.

Kaikilla tämän postin kirjastoilla on jotain ainutlaatuista tarjota JS-yhteisöä. Jos pidät tinkeringistä JavaScript-ohjelmalla, ota sitten uusi esitys jokaiseen kirjastoon ja näe, mitä ne voivat tarjota web-projekteihisi.