10 großartige JavaScript-Bibliotheken, die Sie 2020 ausprobieren sollten

JavaScript ist eine der beliebtesten Sprachen im Web. Obwohl es ursprünglich nur für Webseiten entwickelt wurde, ist es in den letzten zwei Jahrzehnten exponentiell gewachsen.

Jetzt kann JavaScript fast alles und funktioniert auf mehreren Plattformen und Geräten, einschließlich IoT. Und mit dem jüngsten Start von SpaceX Dragon ist JavaScript sogar im Weltraum.

Einer der Gründe für seine Beliebtheit ist die Verfügbarkeit einer großen Anzahl von Frameworks und Bibliotheken. Sie erleichtern die Entwicklung im Vergleich zur herkömmlichen Vanilla JS-Entwicklung erheblich.

Es gibt Bibliotheken für fast alles und fast jeden Tag kommen mehr heraus. Bei so vielen Bibliotheken wird es jedoch schwierig, die einzelnen Bibliotheken im Auge zu behalten und zu ermitteln, wie sie speziell auf Ihre Bedürfnisse zugeschnitten werden können.

In diesem Artikel werden 10 der beliebtesten JS-Bibliotheken erläutert, mit denen Sie Ihr nächstes Projekt erstellen können.

Flugblatt

Ich denke, Leaflet ist die beste Open-Source-Bibliothek, um Ihrer Anwendung mobilfreundliche interaktive Karten hinzuzufügen.

Aufgrund seiner geringen Größe (39 KB) ist es eine hervorragende Alternative zu anderen Kartenbibliotheken. Mit plattformübergreifender Effizienz und einer gut dokumentierten API bietet es alles, was Sie brauchen, um sich zu verlieben.

Hier ist ein Beispielcode, mit dem eine Merkblattkarte erstellt wird:

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 der Broschüre müssen wir eine Kachelebene bereitstellen, da standardmäßig keine vorhanden ist. Das bedeutet aber auch, dass Sie aus einer Vielzahl von Schichten wählen können, sowohl kostenlos als auch Premium. Hier können Sie verschiedene freie Kachelebenen erkunden.

Lesen Sie die Dokumente oder folgen Sie den Tutorials, um mehr zu erfahren.

fullPage.js

Mit dieser Open-Source-Bibliothek können Sie Bildlauf-Websites im Vollbildmodus erstellen, wie Sie im obigen GIF sehen können. Es ist einfach zu bedienen und bietet viele Optionen zum Anpassen. Kein Wunder, dass es von Tausenden von Entwicklern verwendet wird und über 30.000 Sterne auf GitHub hat.

Hier ist eine Codepen-Demo, mit der Sie spielen können:

Sie können es sogar mit gängigen Frameworks verwenden, wie z.

  • React-Fullpage
  • vue-fullpage
  • eckige Ganzseite

Ich bin vor ungefähr einem Jahr auf diese Bibliothek gestoßen und seitdem ist sie einer meiner Favoriten geworden. Dies ist eine der wenigen Bibliotheken, die Sie in fast jedem Projekt verwenden können. Wenn Sie es noch nicht verwendet haben, probieren Sie es einfach aus, Sie werden nicht enttäuscht sein.

anime.js

Anime.js ist eine der besten Animationsbibliotheken überhaupt und flexibel und einfach zu bedienen. Es ist das perfekte Werkzeug, um Ihrem Projekt eine wirklich coole Animation hinzuzufügen.

Anime.js funktioniert gut mit CSS-Eigenschaften, SVG-, DOM-Attributen und JavaScript-Objekten und kann problemlos in Ihre Anwendungen integriert werden.

Als Entwickler ist es wichtig, ein gutes Portfolio zu haben. Der erste Eindruck, den die Leute von Ihrem Portfolio haben, hilft bei der Entscheidung, ob sie Sie einstellen oder nicht. Und welches bessere Tool als diese Bibliothek bringt Leben in Ihr Portfolio. Es wird nicht nur Ihre Website verbessern, sondern auch dazu beitragen, die tatsächlichen Fähigkeiten zu demonstrieren.

Schauen Sie sich diesen Codepen an, um mehr zu erfahren:

Sie können sich auch alle anderen coolen Projekte auf Codepen ansehen oder die Dokumente hier lesen.

Screenfull.js

Ich bin auf diese Bibliothek gestoßen, als ich nach einer Möglichkeit gesucht habe, eine Vollbildfunktion in meinem Projekt zu implementieren.

Wenn Sie auch eine Vollbildfunktion wünschen, würde ich empfehlen, diese Bibliothek anstelle der Vollbild-API zu verwenden, da sie browserübergreifend effizient ist (obwohl sie darauf aufbaut).

Es ist so klein, dass Sie es nicht einmal bemerken werden - nur etwa 0,7 kB gezippt.

Probieren Sie die Demo aus oder lesen Sie die Dokumentation, um mehr zu erfahren.

Moment.js

Das Arbeiten mit Datum und Uhrzeit kann sehr schmerzhaft sein, insbesondere bei API-Aufrufen, verschiedenen Zeitzonen, lokalen Sprachen usw. Moment.js kann Ihnen bei der Lösung all dieser Probleme helfen, unabhängig davon, ob Datums- oder Uhrzeitangaben bearbeitet, validiert, analysiert oder formatiert werden.

Es gibt so viele coole Methoden, die für Ihre Projekte wirklich nützlich sind. Zum Beispiel habe ich die .fromNow()Methode in einem meiner Blog-Projekte verwendet, um die Zeit anzuzeigen, zu der der Artikel veröffentlicht wurde.

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

Obwohl ich es nicht sehr oft benutze, bin ich ein Fan seiner Unterstützung für die Internationalisierung. Zum Beispiel können wir das obige Ergebnis mit der .locale()Methode anpassen .

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

Lesen Sie hier die Dokumente.

Update September 2020: Moment.js ist in den Wartungsmodus eingetreten. Lesen Sie hier mehr darüber. Möglicherweise möchten Sie Alternativen wie Day.js oder date-fns untersuchen.

Hammer.js

Hammer.js ist eine kompakte JavaScript-Bibliothek, mit der Sie Ihren Web-Apps Multi-Touch-Gesten hinzufügen können.

Ich würde diese Bibliothek empfehlen, um Ihren Komponenten Spaß zu machen. Hier ist ein Beispiel zum Spielen. Führen Sie einfach den Stift aus und tippen oder klicken Sie auf das graue Div.

Es kann Gesten erkennen, die durch Berühren, Maus und Zeigerereignisse gemacht wurden. Für jQuery-Benutzer würde ich die Verwendung des jQuery-Plugins empfehlen.

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

Lesen Sie hier die Dokumente.

Mauerwerk

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.