10 fantastiske JavaScript-biblioteker, du bør prøve i 2020

JavaScript er et af de mest populære sprog på internettet. Selvom det oprindeligt blev udviklet kun til websider, har det været eksponentiel vækst i de sidste to årtier.

Nu er JavaScript i stand til at gøre næsten alt og fungerer på flere platforme og enheder inklusive IoT. Og med den nylige lancering af SpaceX Dragon er JavaScript endda i rummet.

En af grundene til dens popularitet er tilgængeligheden af ​​et stort antal rammer og biblioteker. De gør udviklingen meget lettere sammenlignet med traditionel Vanilla JS-udvikling.

Der er biblioteker til næsten alt, og mere kommer næsten hver dag. Men med så mange biblioteker at vælge imellem, bliver det svært at holde styr på hver enkelt, og hvordan den kan skræddersys specifikt til dine behov.

I denne artikel vil vi diskutere 10 af de mest populære JS-biblioteker, som du kan bruge til at opbygge dit næste projekt.

Indlægsseddel

Jeg synes Leaflet er det bedste open source-bibliotek til at tilføje mobilvenlige interaktive kort til din applikation.

Dens lille størrelse (39 kB) gør det til et godt alternativ at overveje i forhold til andre kortbiblioteker. Med effektivitet på tværs af platforme og en veldokumenteret API har den alt hvad du behøver for at få dig til at blive forelsket.

Her er nogle eksempler på kode, der opretter et folderkort:

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") });

I indlægsseddel skal vi give et fliselag, da der ikke er et som standard. Men det betyder også, at der kan vælges fra en bred vifte af lag, både gratis og premium. Du kan udforske forskellige gratis fliselag her.

Læs Docs eller følg Tutorials for at lære mere.

fullPage.js

Dette open source-bibliotek hjælper dig med at oprette websteder, der ruller i fuld skærm, som du kan se i ovenstående GIF. Det er let at bruge og har mange muligheder at tilpasse, så det er ingen overraskelse, at det bruges af tusindvis af udviklere og har over 30.000 stjerner på GitHub.

Her er en Codepen demo, som du kan spille med:

Du kan endda bruge det med populære rammer som:

  • reagere-fuldside
  • vue-fullpage
  • vinkel-fuld side

Jeg stødte på dette bibliotek for omkring et år siden, og siden da er det blevet en af ​​mine favoritter. Dette er et af de få biblioteker, som du kan bruge i næsten ethvert projekt. Hvis du ikke allerede er begyndt at bruge det, skal du bare prøve det, du bliver ikke skuffet.

anime.js

Et af de bedste animationsbiblioteker derude, Anime.js er fleksibelt og nemt at bruge. Det er det perfekte værktøj til at hjælpe dig med at tilføje nogle rigtig seje animationer til dit projekt.

Anime.js fungerer godt med CSS-egenskaber, SVG, DOM-attributter og JavaScript-objekter og kan let integreres i dine applikationer.

Som udvikler er det vigtigt at have en god portefølje. Det første indtryk, som folk har af din portefølje, hjælper med at afgøre, om de ansætter dig eller ej. Og hvilket bedre værktøj end dette bibliotek til at bringe liv til din portefølje. Det forbedrer ikke kun dit websted, men hjælper med at fremvise faktiske færdigheder.

Tjek dette Codepen for at lære mere:

Du kan også se på alle de andre seje projekter på Codepen eller læse Docs her.

Screenfull.js

Jeg stødte på dette bibliotek, mens jeg søgte efter en måde at implementere en fuldskærmsfunktion på i mit projekt.

Hvis du også vil have en fuldskærmsfunktion, vil jeg anbefale at bruge dette bibliotek i stedet for Fullscreen API på grund af dets effektivitet på tværs af browseren (selvom det er bygget oven på det).

Det er så lille, at du ikke engang vil bemærke det - næsten 0,7 kB gzippet.

Prøv demo eller læs Docs for at lære mere.

Moment.js

At arbejde med dato og tid kan være en enorm smerte, især med API-opkald, forskellige tidszoner, lokale sprog og så videre. Moment.js kan hjælpe dig med at løse alle disse problemer, hvad enten det manipulerer, validerer, parser eller formaterer datoer eller klokkeslæt.

Der er så mange seje metoder, der er virkelig nyttige til dine projekter. For eksempel brugte jeg .fromNow()metoden i et af mine blogprojekter til at vise, hvornår artiklen blev offentliggjort.

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

Selvom jeg ikke bruger det meget ofte, er jeg fan af dets støtte til internationalisering. For eksempel kan vi tilpasse ovenstående resultat ved hjælp af .locale()metoden.

// 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

Læs Docs her.

Opdatering september 2020: Moment.js er gået i vedligeholdelsestilstand. Læs mere om det her. Det kan være en god idé at udforske alternativer såsom Day.js eller date-fns.

Hammer.js

Hammer.js er et let JavaScript-bibliotek, der giver dig mulighed for at tilføje multi-touch-bevægelser til dine webapps.

Jeg vil anbefale dette bibliotek at tilføje noget sjov til dine komponenter. Her er et eksempel at lege med. Kør bare pennen og tryk eller klik på den grå div.

Det kan genkende bevægelser lavet af berøring, mus og pointerEvents. For jQuery-brugere vil jeg anbefale at bruge jQuery-pluginet.

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

Læs Docs her.

Murværk

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.

Dette er 10 JavaScript-biblioteker, som du kan prøve og begynde at bruge i dine projekter i dag. Hvilke andre seje JavaScript-biblioteker bruger du? Vil du have en anden artikel som denne? Tweet og lad mig det vide.