10 bibliothèques JavaScript impressionnantes que vous devriez essayer en 2020

JavaScript est l'un des langages les plus populaires sur le Web. Même s'il a été initialement développé uniquement pour les pages Web, il a connu une croissance exponentielle au cours des deux dernières décennies.

Désormais, JavaScript est capable de faire presque tout et fonctionne sur plusieurs plates-formes et appareils, y compris l'IoT. Et avec le récent lancement de SpaceX Dragon, JavaScript est même dans l'espace.

L'une des raisons de sa popularité est la disponibilité d'un grand nombre de frameworks et de bibliothèques. Ils rendent le développement beaucoup plus facile par rapport au développement traditionnel de Vanilla JS.

Il existe des bibliothèques pour presque tout et d'autres en sortent presque tous les jours. Mais avec autant de bibliothèques parmi lesquelles choisir, il devient difficile de garder une trace de chacune d'elles et de la manière dont elle pourrait être adaptée spécifiquement à vos besoins.

Dans cet article, nous allons discuter de 10 des bibliothèques JS les plus populaires que vous pouvez utiliser pour créer votre prochain projet.

Brochure

Je pense que Leaflet est la meilleure bibliothèque open source pour ajouter des cartes interactives adaptées aux mobiles à votre application.

Sa petite taille (39 Ko) en fait une excellente alternative à considérer par rapport aux autres bibliothèques de cartes. Avec une efficacité multiplateforme et une API bien documentée, il a tout ce dont vous avez besoin pour vous faire tomber amoureux.

Voici un exemple de code qui crée une carte de dépliant:

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

Dans Leaflet, nous devons fournir une couche de tuiles car il n'y en a pas par défaut. Mais cela signifie également que vous pouvez choisir parmi une large gamme de couches gratuites et premium. Vous pouvez explorer différentes couches de tuiles gratuites ici.

Lisez les documents ou suivez les didacticiels pour en savoir plus.

fullPage.js

Cette bibliothèque open-source vous aide à créer des sites Web à défilement plein écran, comme vous pouvez le voir dans le GIF ci-dessus. Il est facile à utiliser et propose de nombreuses options à personnaliser, il n'est donc pas surprenant qu'il soit utilisé par des milliers de développeurs et compte plus de 30 000 étoiles sur GitHub.

Voici une démo Codepen avec laquelle vous pouvez jouer:

Vous pouvez même l'utiliser avec des frameworks populaires tels que:

  • réagir-fullpage
  • vue-fullpage
  • angulaire-pleine page

Je suis tombé sur cette bibliothèque il y a environ un an et depuis, elle est devenue l'une de mes préférées. C'est l'une des rares bibliothèques que vous pouvez utiliser dans presque tous les projets. Si vous n'avez pas encore commencé à l'utiliser, essayez-le, vous ne serez pas déçu.

anime.js

L'une des meilleures bibliothèques d'animation sur le marché, Anime.js est flexible et simple à utiliser. C'est l'outil parfait pour vous aider à ajouter une animation vraiment cool à votre projet.

Anime.js fonctionne bien avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript et peut être facilement intégré dans vos applications.

En tant que développeur, il est important d'avoir un bon portefeuille. La première impression que les gens ont de votre portefeuille aide à décider s'ils vous embaucheront ou non. Et quel meilleur outil que cette bibliothèque pour donner vie à votre portfolio. Cela améliorera non seulement votre site Web, mais aidera également à mettre en valeur les compétences réelles.

Consultez ce Codepen pour en savoir plus:

Vous pouvez également jeter un œil à tous les autres projets sympas sur Codepen ou lire les documents ici.

Screenfull.js

Je suis tombé sur cette bibliothèque en cherchant un moyen d'implémenter une fonctionnalité plein écran dans mon projet.

Si vous souhaitez également disposer d'une fonctionnalité plein écran, je vous recommande d'utiliser cette bibliothèque au lieu de l'API Plein écran en raison de son efficacité inter-navigateurs (bien qu'elle soit construite en plus de cela).

Il est si petit que vous ne le remarquerez même pas - environ 0,7 Ko gzippé.

Essayez la démo ou lisez la documentation pour en savoir plus.

Moment.js

Travailler avec la date et l'heure peut être très pénible, en particulier avec les appels d'API, différents fuseaux horaires, les langues locales, etc. Moment.js peut vous aider à résoudre tous ces problèmes, qu'il s'agisse de manipuler, de valider, d'analyser ou de formater des dates ou des heures.

Il existe tellement de méthodes intéressantes qui sont vraiment utiles pour vos projets. Par exemple, j'ai utilisé la .fromNow()méthode dans l'un de mes projets de blog pour afficher l'heure à laquelle l'article a été publié.

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

Bien que je ne l'utilise pas très souvent, je suis fan de son soutien à l'internationalisation. Par exemple, nous pouvons personnaliser le résultat ci-dessus en utilisant la .locale()méthode.

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

Lisez les documents ici.

Mise à jour de septembre 2020: Moment.js est entré en mode maintenance. En savoir plus ici. Vous voudrez peut-être explorer des alternatives telles que Day.js ou date-fns.

Hammer.js

Hammer.js est une bibliothèque JavaScript légère qui vous permet d'ajouter des gestes multi-touch à vos applications Web.

Je recommanderais cette bibliothèque pour ajouter du plaisir à vos composants. Voici un exemple avec lequel jouer. Exécutez simplement le stylo et appuyez ou cliquez sur le div gris.

Il peut reconnaître les gestes effectués par le toucher, la souris et les événements du pointeur. Pour les utilisateurs de jQuery, je recommanderais d'utiliser le plugin jQuery.

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

Lisez les documents ici.

Maçonnerie

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.