10 Perpustakaan JavaScript Luar Biasa Yang Harus Anda Coba pada tahun 2020

JavaScript adalah salah satu bahasa paling populer di web. Meskipun awalnya dikembangkan hanya untuk halaman web, ia telah melihat pertumbuhan eksponensial dalam dua dekade terakhir.

Sekarang, JavaScript mampu melakukan hampir semua hal dan berfungsi di beberapa platform dan perangkat termasuk IoT. Dan dengan peluncuran SpaceX Dragon baru-baru ini, JavaScript bahkan ada di luar angkasa.

Salah satu alasan popularitasnya adalah ketersediaan sejumlah besar framework dan pustaka. Mereka membuat pengembangan jauh lebih mudah dibandingkan dengan pengembangan Vanilla JS tradisional.

Ada perpustakaan untuk hampir semua hal dan lebih banyak lagi yang keluar hampir setiap hari. Tetapi dengan begitu banyak perpustakaan untuk dipilih, menjadi sulit untuk melacak masing-masing dan bagaimana itu dapat disesuaikan secara khusus dengan kebutuhan Anda.

Pada artikel ini, kita akan membahas 10 pustaka JS paling populer yang dapat Anda gunakan untuk membangun proyek Anda berikutnya.

Leaflet

Menurut saya, Leaflet adalah pustaka sumber terbuka terbaik untuk menambahkan peta interaktif ramah seluler ke aplikasi Anda.

Ukurannya yang kecil (39kB) menjadikannya alternatif yang bagus untuk dipertimbangkan dibandingkan pustaka peta lainnya. Dengan efisiensi lintas platform dan API yang terdokumentasi dengan baik, ia memiliki semua yang Anda butuhkan untuk membuat Anda jatuh cinta.

Berikut beberapa contoh kode yang membuat peta 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") });

Di Leaflet, kita perlu menyediakan lapisan ubin karena tidak ada satu pun secara default. Tetapi itu juga berarti dapat memilih dari berbagai lapisan baik gratis maupun premium. Anda dapat menjelajahi berbagai lapisan ubin gratis di sini.

Baca Dokumen atau ikuti Tutorial untuk mempelajari lebih lanjut.

fullPage.js

Pustaka sumber terbuka ini membantu Anda membuat situs web pengguliran layar penuh seperti yang Anda lihat di GIF di atas. Ini mudah digunakan dan memiliki banyak opsi untuk disesuaikan, jadi tidak mengherankan jika ini digunakan oleh ribuan pengembang dan memiliki lebih dari 30k bintang di GitHub.

Berikut demo Codepen yang bisa Anda mainkan:

Anda bahkan dapat menggunakannya dengan kerangka kerja populer seperti:

  • react-fullpage
  • vue-fullpage
  • sudut-halaman penuh

Saya menemukan perpustakaan ini sekitar setahun yang lalu dan sejak itu menjadi salah satu favorit saya. Ini adalah salah satu dari sedikit pustaka yang dapat Anda gunakan di hampir setiap proyek. Jika Anda belum mulai menggunakannya maka coba saja, Anda tidak akan kecewa.

anime.js

Salah satu pustaka animasi terbaik yang pernah ada, Anime.js fleksibel dan mudah digunakan. Ini adalah alat yang sempurna untuk membantu Anda menambahkan beberapa animasi yang sangat keren ke proyek Anda.

Anime.js bekerja dengan baik dengan properti CSS, SVG, atribut DOM, dan Objek JavaScript dan dapat dengan mudah diintegrasikan ke dalam aplikasi Anda.

Sebagai pengembang, penting untuk memiliki portofolio yang baik. Kesan pertama orang-orang tentang portofolio Anda membantu memutuskan apakah mereka akan mempekerjakan Anda atau tidak. Dan alat apa yang lebih baik dari perpustakaan ini untuk menghidupkan portofolio Anda. Ini tidak hanya akan meningkatkan situs web Anda tetapi akan membantu menampilkan keterampilan yang sebenarnya.

Lihat Codepen ini untuk mempelajari lebih lanjut:

Anda juga dapat melihat semua proyek keren lainnya di Codepen atau Baca Dokumen di sini.

Screenfull.js

Saya menemukan pustaka ini saat mencari cara untuk mengimplementasikan fitur layar penuh dalam proyek saya.

Jika Anda juga ingin memiliki fitur layar penuh, saya akan merekomendasikan menggunakan pustaka ini daripada API Layar Penuh karena efisiensi lintas-browsernya (meskipun dibuat di atasnya).

Ini sangat kecil sehingga Anda bahkan tidak akan menyadarinya - hanya sekitar 0.7kB gzip.

Coba Demo atau baca Dokumen untuk mempelajari lebih lanjut.

Moment.js

Bekerja dengan tanggal dan waktu bisa sangat merepotkan, terutama dengan panggilan API, Zona Waktu yang berbeda, bahasa lokal, dan sebagainya. Moment.js dapat membantu Anda menyelesaikan semua masalah itu apakah itu memanipulasi, memvalidasi, mengurai, atau memformat tanggal atau waktu.

Ada begitu banyak metode keren yang sangat berguna untuk proyek Anda. Misalnya, saya menggunakan .fromNow()metode di salah satu proyek blog saya untuk menunjukkan waktu artikel itu diterbitkan.

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

Meskipun saya tidak terlalu sering menggunakannya, saya adalah penggemar dukungannya untuk internasionalisasi. Misalnya, kita dapat menyesuaikan hasil di atas menggunakan .locale()metode tersebut.

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

Baca Dokumen di sini.

Pembaruan September 2020: Moment.js telah memasuki mode pemeliharaan. Baca lebih lanjut di sini. Anda mungkin ingin menjelajahi alternatif seperti Day.js atau date-fns.

Hammer.js

Hammer.js adalah pustaka JavaScript ringan yang memungkinkan Anda menambahkan gerakan multi-sentuh ke Aplikasi Web Anda.

Saya akan merekomendasikan pustaka ini untuk menambahkan kesenangan pada komponen Anda. Berikut adalah contoh untuk dimainkan. Jalankan saja pena dan ketuk atau klik pada div abu-abu.

Itu dapat mengenali gerakan yang dibuat dengan sentuhan, mouse dan pointerEvents. Untuk pengguna jQuery, saya akan merekomendasikan menggunakan plugin jQuery.

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

Baca Dokumen di sini.

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.

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.