10 sjajnih JavaScript knjižnica koje biste trebali isprobati 2020. godine

JavaScript je jedan od najpopularnijih jezika na webu. Iako je u početku razvijen samo za web stranice, zabilježio je eksponencijalni rast u posljednja dva desetljeća.

Sada je JavaScript sposoban raditi gotovo sve i radi na nekoliko platformi i uređaja, uključujući IoT. A s nedavnim lansiranjem SpaceX Dragon-a, JavaScript je čak i u svemiru.

Jedan od razloga njegove popularnosti je dostupnost velikog broja okvira i knjižnica. Oni znatno olakšavaju razvoj u usporedbi s tradicionalnim razvojem Vanilla JS.

Postoje knjižnice za gotovo sve, a gotovo svakodnevno izlaze nove. No s toliko biblioteka koje možete birati postaje teško pratiti svaku od njih i kako se ona može posebno prilagoditi vašim potrebama.

U ovom ćemo članku razgovarati o 10 najpopularnijih JS knjižnica koje možete koristiti za izgradnju svog sljedećeg projekta.

Letak

Mislim da je Letak najbolja biblioteka otvorenog koda za dodavanje interaktivnih mapa prilagođenih mobilnim uređajima u vašu aplikaciju.

Njegova mala veličina (39 kB) čini je izvrsnom alternativom za razmatranje u odnosu na druge knjižnice karata. Uz efikasnost više platformi i dobro dokumentirani API, ima sve što vam treba da se zaljubite.

Evo nekoliko primjera koda koji kreira kartu letaka:

var map = new L.Map("map", { center: new L.LatLng(40.7401, -73.9891), zoom: 12, layers: new L.TileLayer("//tile.openstreetmap.org/{z}/{x}/{y}.png") });

U letku moramo pružiti sloj pločice jer ga prema zadanim postavkama nema. Ali to također znači da možete birati između širokog raspona slojeva, besplatnih i premium. Ovdje možete istražiti razne besplatne slojeve pločica.

Pročitajte dokumente ili slijedite upute da biste saznali više.

fullPage.js

Ova biblioteka s otvorenim kodom pomaže vam u izradi web stranica za pomicanje preko cijelog zaslona, ​​kao što možete vidjeti u gornjem GIF-u. Jednostavan je za upotrebu i ima mnogo opcija za prilagodbu, stoga ne čudi da ga koriste tisuće programera i ima preko 30 tisuća zvjezdica na GitHubu.

Evo demonstracije Codepena s kojom se možete igrati:

Možete ga čak koristiti i s popularnim okvirima kao što su:

  • reagirati-puna stranica
  • vue-fullpage
  • kutno-puna stranica

S ovom sam bibliotekom naišao prije otprilike godinu dana i od tada mi je postala jedna od najdražih. Ovo je jedna od rijetkih knjižnica koju možete koristiti u gotovo svakom projektu. Ako ga već niste počeli koristiti, samo pokušajte, nećete biti razočarani.

anime.js

Jedna od najboljih knjižnica animacije, Anime.js je fleksibilna i jednostavna za upotrebu. Savršen je alat koji će vam pomoći da dodate jako cool animaciju u svoj projekt.

Anime.js dobro funkcionira sa CSS svojstvima, SVG, DOM atributima i JavaScript objektima i može se lako integrirati u vaše aplikacije.

Kao programeru važno je imati dobar portfelj. Prvi dojam koji ljudi imaju o vašem portfelju pomaže u odluci hoće li vas zaposliti ili ne. A kakav bolji alat od ove knjižnice može oživjeti vaš portfelj. To ne samo da će poboljšati vaše web mjesto, već će vam pomoći da pokažete stvarne vještine.

Pogledajte ovaj Codepen da biste saznali više:

Također možete pogledati sve ostale cool projekte na Codepenu ili ovdje pročitati dokumente.

Screenfull.js

Naišao sam na ovu knjižnicu dok sam tražio način za implementaciju značajke cijelog zaslona u svoj projekt.

Ako i vi želite imati značajku preko cijelog zaslona, ​​preporučio bih upotrebu ove biblioteke umjesto Fullscreen API-ja zbog njene efikasnosti u različitim preglednicima (iako je izgrađena povrh toga).

Toliko je malen da ga nećete ni primijetiti - gzipirano je oko 0,7 kB.

Isprobajte Demo ili pročitajte Dokumente da biste saznali više.

Moment.js

Rad s datumom i vremenom može biti velika muka, posebno s API pozivima, različitim vremenskim zonama, lokalnim jezicima i tako dalje. Moment.js vam može pomoći da riješite sve te probleme bilo da se radi o manipulaciji, provjeri valjanosti, raščlanjivanju ili oblikovanju datuma ili vremena.

Postoji toliko sjajnih metoda koje su stvarno korisne za vaše projekte. Na primjer, .fromNow()metodu sam koristio u jednom od svojih blogovskih projekata kako bih pokazao vrijeme objavljivanja članka.

const moment = require('moment'); relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); // a year ago 

Iako ga ne koristim često, obožavatelj sam njegove podrške internacionalizaciji. Na primjer, gornji rezultat možemo prilagoditi .locale()metodom.

// French moment.locale('fr'); relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); //il y a un an // Spanish moment.locale('es'); relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); //hace un año

Ovdje pročitajte Dokumente.

Ažuriranje u rujnu 2020: Moment.js je ušao u način održavanja. Više o tome pročitajte ovdje. Možda ćete htjeti istražiti alternative poput Day.js ili date-fns.

Čekić.js

Hammer.js je lagana JavaScript knjižnica koja vam omogućuje dodavanje gesta s više dodira u vaše web aplikacije.

Preporučio bih ovu biblioteku da doda zabavu vašim komponentama. Evo primjera za igranje. Samo pokrenite olovku i dodirnite ili kliknite sivi div.

Može prepoznati geste napravljene dodirom, mišem i pokazivačem. Za korisnike jQueryja preporučio bih upotrebu dodatka jQuery.

$(element).hammer(options).bind("pan", myPanHandler);

Ovdje pročitajte Dokumente.

Zidarstvo

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in onthe web page.

And here is the code for the above:

var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { itemSelector: '.grid-item', columnWidth: 400 }); var msnry = new Masonry( '.grid'); 

Here is a cool demo on Codepen:

Check out these Projects

  • //halcyon-theme.tumblr.com/
  • //tympanus.net/Development/GridLoadingEffects/index.html
  • //www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

Read more about it here.

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });

Check out the demos here.

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.