10 fantastiche librerie JavaScript da provare nel 2020

JavaScript è uno dei linguaggi più diffusi sul web. Anche se inizialmente è stato sviluppato solo per le pagine web, ha visto una crescita esponenziale negli ultimi due decenni.

Ora JavaScript è in grado di fare quasi tutto e funziona su diverse piattaforme e dispositivi, incluso l'IoT. E con il recente lancio di SpaceX Dragon, JavaScript è anche nello spazio.

Uno dei motivi della sua popolarità è la disponibilità di un gran numero di framework e librerie. Rendono lo sviluppo molto più semplice rispetto allo sviluppo tradizionale di Vanilla JS.

Ci sono biblioteche per quasi tutto e altre ne escono quasi ogni giorno. Ma con così tante biblioteche tra cui scegliere diventa difficile tenere traccia di ognuna e come potrebbe essere adattata specificamente alle tue esigenze.

In questo articolo, discuteremo 10 delle librerie JS più popolari che puoi utilizzare per creare il tuo prossimo progetto.

Volantino

Penso che Leaflet sia la migliore libreria open source per aggiungere mappe interattive ottimizzate per dispositivi mobili alla tua applicazione.

Le sue piccole dimensioni (39kB) lo rendono un'ottima alternativa da considerare rispetto ad altre librerie di mappe. Con l'efficienza multipiattaforma e un'API ben documentata, ha tutto ciò di cui hai bisogno per farti innamorare.

Ecco un codice di esempio che crea una mappa Leaflet:

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

In Leaflet, dobbiamo fornire un livello di tessere poiché non ce n'è uno per impostazione predefinita. Ma ciò significa anche che puoi scegliere tra una vasta gamma di livelli sia gratuiti che premium. Puoi esplorare vari livelli di tessere gratuiti qui.

Leggi i documenti o segui i tutorial per saperne di più.

fullPage.js

Questa libreria open-source ti aiuta a creare siti Web a scorrimento a schermo intero come puoi vedere nella GIF sopra. È facile da usare e ha molte opzioni da personalizzare, quindi non sorprende che sia utilizzato da migliaia di sviluppatori e abbia oltre 30.000 stelle su GitHub.

Ecco una demo di Codepen con cui puoi giocare:

Puoi persino usarlo con framework popolari come:

  • reagire a pagina intera
  • vue-fullpage
  • angolare a pagina intera

Mi sono imbattuto in questa libreria circa un anno fa e da allora è diventata una delle mie preferite. Questa è una delle poche librerie che puoi usare in quasi tutti i progetti. Se non hai già iniziato a usarlo, provalo, non rimarrai deluso.

anime.js

Una delle migliori librerie di animazioni disponibili, Anime.js è flessibile e semplice da usare. È lo strumento perfetto per aiutarti ad aggiungere un'animazione davvero interessante al tuo progetto.

Anime.js funziona bene con proprietà CSS, SVG, attributi DOM e oggetti JavaScript e può essere facilmente integrato nelle tue applicazioni.

Come sviluppatore è importante avere un buon portafoglio. La prima impressione che le persone hanno del tuo portafoglio aiuta a decidere se ti assumeranno o meno. E quale strumento migliore di questa libreria per dare vita al tuo portfolio. Non solo migliorerà il tuo sito web, ma aiuterà a mostrare le abilità reali.

Dai un'occhiata a questo Codepen per saperne di più:

Puoi anche dare un'occhiata a tutti gli altri fantastici progetti su Codepen o leggere i documenti qui.

Screenfull.js

Mi sono imbattuto in questa libreria mentre cercavo un modo per implementare una funzionalità a schermo intero nel mio progetto.

Se vuoi anche avere una funzionalità a schermo intero, ti consiglio di utilizzare questa libreria invece dell'API Fullscreen a causa della sua efficienza cross-browser (sebbene sia costruita su questo).

È così piccolo che non te ne accorgerai nemmeno - solo circa 0,7 kB compresso con gzip.

Prova la demo o leggi la documentazione per saperne di più.

Moment.js

Lavorare con la data e l'ora può essere un problema enorme, specialmente con chiamate API, diversi fusi orari, lingue locali e così via. Moment.js può aiutarti a risolvere tutti questi problemi che si tratti di manipolare, convalidare, analizzare o formattare date o ora.

Ci sono così tanti metodi interessanti che sono davvero utili per i tuoi progetti. Ad esempio, ho utilizzato il .fromNow()metodo in uno dei miei progetti di blog per mostrare l'ora in cui l'articolo è stato pubblicato.

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

Anche se non lo uso molto spesso, sono un fan del suo sostegno all'internazionalizzazione. Ad esempio, possiamo personalizzare il risultato di cui sopra utilizzando il .locale()metodo.

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

Leggi i documenti qui.

Aggiornamento settembre 2020: Moment.js è entrato in modalità manutenzione. Per saperne di più qui. Potresti voler esplorare alternative come Day.js o date-fns.

Hammer.js

Hammer.js è una libreria JavaScript leggera che ti consente di aggiungere gesti multi-touch alle tue app Web.

Consiglierei questa libreria per aggiungere un po 'di divertimento ai tuoi componenti. Ecco un esempio con cui giocare. Basta eseguire la penna e toccare o fare clic sul div grigio.

È in grado di riconoscere i gesti effettuati tramite tocco, mouse e pointerEvents. Per gli utenti jQuery consiglierei di utilizzare il plugin jQuery.

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

Leggi i documenti qui.

Opere murarie

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.