10 υπέροχες βιβλιοθήκες JavaScript που πρέπει να δοκιμάσετε το 2020

Το JavaScript είναι μια από τις πιο δημοφιλείς γλώσσες στον Ιστό. Παρόλο που αναπτύχθηκε αρχικά μόνο για ιστοσελίδες, έχει σημειώσει εκθετική ανάπτυξη τις τελευταίες δύο δεκαετίες.

Τώρα, η JavaScript είναι ικανή να κάνει σχεδόν οτιδήποτε και λειτουργεί σε διάφορες πλατφόρμες και συσκευές, συμπεριλαμβανομένου του IoT. Και με την πρόσφατη εκκίνηση του SpaceX Dragon, η JavaScript είναι ακόμη στο διάστημα.

Ένας από τους λόγους για τη δημοτικότητά του είναι η διαθεσιμότητα μεγάλου αριθμού πλαισίων και βιβλιοθηκών. Κάνουν την ανάπτυξη πολύ πιο εύκολη σε σύγκριση με την παραδοσιακή ανάπτυξη Vanilla JS.

Υπάρχουν βιβλιοθήκες για σχεδόν οτιδήποτε και περισσότερα βγαίνουν σχεδόν κάθε μέρα. Αλλά με τόσες πολλές βιβλιοθήκες να διαλέξετε, είναι δύσκολο να παρακολουθείτε κάθε μία και πώς μπορεί να προσαρμοστεί ειδικά στις ανάγκες σας.

Σε αυτό το άρθρο, θα συζητήσουμε 10 από τις πιο δημοφιλείς βιβλιοθήκες JS τις οποίες μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε το επόμενο έργο σας.

Φυλλάδιο

Νομίζω ότι το Leaflet είναι η καλύτερη βιβλιοθήκη ανοιχτού κώδικα για την προσθήκη διαδραστικών χαρτών φιλικών προς κινητά στην εφαρμογή σας.

Το μικρό του μέγεθος (39kB) το καθιστά μια εξαιρετική εναλλακτική λύση για να σκεφτείτε άλλες βιβλιοθήκες χαρτών. Με αποτελεσματικότητα μεταξύ πλατφορμών και ένα καλά τεκμηριωμένο API, διαθέτει όλα όσα χρειάζεστε για να σας κάνει να ερωτευτείτε.

Ακολουθεί ένα δείγμα κώδικα που δημιουργεί έναν χάρτη φυλλαδίων:

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

Στο φυλλάδιο, πρέπει να παρέχουμε ένα στρώμα πλακιδίων, καθώς δεν υπάρχει από προεπιλογή. Αλλά αυτό σημαίνει επίσης ότι μπορεί να επιλέξει από ένα ευρύ φάσμα επιπέδων τόσο δωρεάν όσο και premium. Μπορείτε να εξερευνήσετε διάφορα δωρεάν στρώματα πλακιδίων εδώ.

Διαβάστε τα Έγγραφα ή ακολουθήστε τα Tutorials για να μάθετε περισσότερα.

fullPage.js

Αυτή η βιβλιοθήκη ανοιχτού κώδικα σάς βοηθά να δημιουργήσετε ιστότοπους κύλισης πλήρους οθόνης, όπως μπορείτε να δείτε στο παραπάνω GIF. Είναι εύκολο στη χρήση και έχει πολλές επιλογές για προσαρμογή, οπότε δεν αποτελεί έκπληξη ότι χρησιμοποιείται από χιλιάδες προγραμματιστές και έχει πάνω από 30 χιλιάδες αστέρια στο GitHub.

Εδώ είναι ένα demo Codepen με το οποίο μπορείτε να παίξετε:

Μπορείτε ακόμη να το χρησιμοποιήσετε με δημοφιλή πλαίσια όπως:

  • αντιδράστε σε πλήρη σελίδα
  • vue-fullpage
  • γωνιακή-πλήρης σελίδα

Συνάντησα αυτήν τη βιβλιοθήκη πριν από ένα χρόνο και από τότε έχει γίνει ένα από τα αγαπημένα μου. Αυτή είναι μια από τις λίγες βιβλιοθήκες που μπορείτε να χρησιμοποιήσετε σε σχεδόν κάθε έργο. Εάν δεν έχετε ήδη ξεκινήσει να το χρησιμοποιείτε, απλώς δοκιμάστε το, δεν θα απογοητευτείτε.

anime.js

Μία από τις καλύτερες βιβλιοθήκες κινουμένων σχεδίων εκεί έξω, το Anime.js είναι ευέλικτο και εύχρηστο. Είναι το τέλειο εργαλείο για να σας βοηθήσει να προσθέσετε κάποια πραγματικά κινούμενα σχέδια στο έργο σας.

Το Anime.js λειτουργεί καλά με ιδιότητες CSS, SVG, χαρακτηριστικά DOM και αντικείμενα JavaScript και μπορεί εύκολα να ενσωματωθεί στις εφαρμογές σας.

Ως προγραμματιστής είναι σημαντικό να έχετε ένα καλό χαρτοφυλάκιο. Η πρώτη εντύπωση που έχουν οι άνθρωποι στο χαρτοφυλάκιό σας βοηθά να αποφασίσετε αν θα σας προσλάβουν ή όχι. Και ποιο καλύτερο εργαλείο από αυτήν τη βιβλιοθήκη για να φέρει ζωή στο χαρτοφυλάκιό σας. Δεν θα βελτιώσει μόνο τον ιστότοπό σας, αλλά θα βοηθήσει στην προβολή πραγματικών δεξιοτήτων

Ρίξτε μια ματιά σε αυτό το Codepen για να μάθετε περισσότερα:

Μπορείτε επίσης να ρίξετε μια ματιά σε όλα τα άλλα δροσερά έργα στο Codepen ή να διαβάσετε τα Έγγραφα εδώ.

Screenfull.js

Βρήκα αυτήν τη βιβλιοθήκη αναζητώντας έναν τρόπο εφαρμογής μιας δυνατότητας πλήρους οθόνης στο έργο μου.

Εάν θέλετε επίσης να έχετε μια λειτουργία πλήρους οθόνης, θα συνιστούσα να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη αντί για το Fullscreen API λόγω της αποτελεσματικότητας μεταξύ προγραμμάτων περιήγησης (αν και είναι ενσωματωμένη πάνω από αυτήν).

Είναι τόσο μικρό που δεν θα το παρατηρήσετε - περίπου 0,7kB με φερμουάρ

Δοκιμάστε το Demo ή διαβάστε τα Έγγραφα για να μάθετε περισσότερα.

Στιγμή.js

Η εργασία με ημερομηνία και ώρα μπορεί να είναι τεράστιος πόνος, ειδικά με κλήσεις API, διαφορετικές ζώνες ώρας, τοπικές γλώσσες και ούτω καθεξής. Το Moment.js μπορεί να σας βοηθήσει να λύσετε όλα αυτά τα ζητήματα, είτε πρόκειται για χειρισμό, επικύρωση, ανάλυση ή μορφοποίηση ημερομηνιών ή ώρας.

Υπάρχουν τόσες πολλές δροσερές μέθοδοι που είναι πραγματικά χρήσιμες για τα έργα σας. Για παράδειγμα, χρησιμοποίησα τη .fromNow()μέθοδο σε ένα από τα έργα του ιστολογίου μου για να δείξω την ώρα δημοσίευσης του άρθρου.

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

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

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

Read the Docs here.

Update September 2020: Moment.js has entered maintenance mode. Read more about it here. You may want to explore alternatives such as Day.js or date-fns.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

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

Read the Docs here.

Masonry

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.

Αυτές είναι 10 βιβλιοθήκες JavaScript που μπορείτε να δοκιμάσετε και να αρχίσετε να χρησιμοποιείτε στα έργα σας σήμερα. Ποιες άλλες εντυπωσιακές βιβλιοθήκες JavaScript χρησιμοποιείτε; Θα θέλατε ένα άλλο άρθρο σαν αυτό; Tweet και ενημερώστε με.