Memilih library atau framework JavaScript

Umar Hansa

Artikel ini memberikan insight tentang cara memilih library atau framework untuk digunakan dalam aplikasi web Anda. Pembahasan di sini akan membantu Anda mempertimbangkan kelebihan dan kekurangan dalam menemukan library atau framework JavaScript yang tepat untuk masalah bisnis yang ingin Anda selesaikan. Memahami kelebihan dan kekurangan yang berlaku dalam berbagai situasi adalah kunci untuk memeriksa sejumlah besar pilihan library JavaScript yang tersedia.

Apa yang dimaksud dengan library dan framework JavaScript

Apa yang dimaksud dengan library JavaScript? Dalam bentuk yang paling sederhana, library JavaScript adalah kode yang telah ditulis sebelumnya yang dapat Anda panggil dalam kode project untuk mencapai tugas tertentu.

Postingan ini terutama menyebutkan "library". Namun, banyak diskusi yang juga berlaku untuk framework. Pada dasarnya, perbedaan antara keduanya dapat diringkas sebagai berikut:

• Untuk library, kode aplikasi Anda memanggil kode library.
• Untuk framework, kode aplikasi Anda dipanggil oleh framework.

Contoh praktis berikut membantu mengilustrasikan perbedaannya.

Contoh panggilan ke library JavaScript

Library JavaScript menjalankan tugas tertentu, lalu mengembalikan kontrol ke aplikasi Anda. Saat menggunakan library, Anda mengontrol alur aplikasi dan memilih kapan harus memanggil library.

Dalam contoh berikut, kode aplikasi mengimpor metode dari library lodash. Setelah fungsi selesai, kontrol akan dikembalikan ke aplikasi Anda.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

Saat dieksekusi, metode lodash.capitalize akan memanggil kode JavaScript yang telah ditulis sebelumnya yang mengubah karakter pertama string menjadi huruf besar.

Contoh penggunaan framework JavaScript

Framework JavaScript adalah template kode yang telah ditentukan sebelumnya, yang Anda gunakan untuk membuat perilaku aplikasi. Artinya, saat Anda menggunakan framework, framework tersebut akan mengontrol alur aplikasi. Untuk menggunakan framework, Anda menulis kode aplikasi kustom, lalu framework akan memanggil kode aplikasi Anda.

Contoh berikut menunjukkan cuplikan kode yang menggunakan framework JavaScript Preact:

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

Dalam contoh ini, perhatikan bahwa framework memiliki kontrol yang jauh lebih besar atas kode yang Anda tulis, dan dalam beberapa kasus, framework bahkan mengontrol kapan harus mengeksekusi kode Anda.

Mengapa menggunakan library?

Menggunakan library JavaScript dapat membantu menghindari pengulangan kode yang tidak perlu. Library dapat mengabstraksi logika yang kompleks, seperti manipulasi tanggal atau penghitungan keuangan. Library juga dapat membantu meluncurkan produk awal Anda, daripada harus menulis semua kode dari awal, yang dapat memakan waktu.

Beberapa library JavaScript sisi klien membantu mengabstraksi keunikan platform web. Library juga dapat berfungsi sebagai alat pembelajaran. Misalnya, jika Anda tidak memahami fungsi easing animasi, kode sumber library dapat mengajari Anda cara kerja easing tersebut.

Beberapa library didukung oleh perusahaan besar yang menginvestasikan waktu dan uang untuk menjaga library tetap terbaru dan aman. Banyak library disertai dengan dokumentasi yang lengkap, yang menawarkan cara cepat bagi Anda dan tim untuk memahami penggunaan library.

Pada akhirnya, penggunaan library JavaScript akan menghemat waktu Anda.

Mengapa Anda harus peduli dengan penggunaan library?

Secara teknis, Anda dapat mengembangkan aplikasi web dari awal, tetapi mengapa harus repot-repot jika Anda dapat menggunakan software gratis (open source), atau membeli solusi yang, dalam jangka panjang, dapat menghemat waktu dan uang? Ada banyak library dan framework JavaScript yang tersedia, masing-masing menawarkan pendekatan unik untuk memecahkan masalah, dan masing-masing memiliki karakteristik yang berbeda. Contoh:

• Library dapat ditulis dan dikelola secara internal, bukan oleh pihak ketiga.
• Library dapat memiliki lisensi hukum tertentu yang membuatnya cocok atau tidak cocok untuk aplikasi web Anda.
• Library dapat menjadi usang atau tidak dikelola.
• Library dapat menyederhanakan serangkaian tugas yang kompleks serta menghemat banyak waktu dan biaya.
• Library dapat digunakan secara luas di komunitas, dan dapat dikenal baik di kalangan developer.

Seperti yang mungkin Anda duga, karakteristik yang berbeda dapat memengaruhi aplikasi web Anda dengan cara yang berbeda. Terkadang, keputusan tersebut tidak terlalu rumit, dan Anda dapat dengan aman mengganti library jika tidak menyukainya. Namun, terkadang library dapat memberikan dampak yang signifikan pada pekerjaan dan aplikasi web Anda, sehingga pendekatan yang lebih tepat mungkin diperlukan.

Poin penting: Banyak poin yang diangkat di bagian performa berikut—dan juga poin yang diangkat di seluruh artikel ini—berlaku untuk lingkungan sisi klien. Kode sisi klien dijalankan di perangkat pengguna akhir, seperti melalui browser web mereka.

Ada beberapa lingkungan JavaScript non-sisi klien, seperti di server (dijalankan di lingkungan cloud) atau di Raspberry Pi, yang mungkin mengharuskan Anda menyesuaikan kriteria yang digunakan untuk memeriksa library dan framework.

Performa

Efek performa library JavaScript pada aplikasi web sisi klien tidak boleh diabaikan. Library JavaScript yang besar dapat mengganggu performa pemuatan halaman Anda; ingat, milidetik menghasilkan jutaan.

Catatan: Banyak library JavaScript bersifat open source, dan upaya pengelola library tidak dapat dilebih-lebihkan—open source tidaklah mudah.

Pertimbangkan skenario saat Anda menggunakan library JavaScript untuk animasi. Beberapa library dapat dengan mudah menambahkan puluhan kilobyte, dan dalam beberapa kasus, bahkan ratusan kilobyte. Resource JavaScript seperti ini dapat menambahkan penundaan yang signifikan pada pemuatan halaman Anda karena browser perlu mendownload, mengurai, mengompilasi, dan mengeksekusi kode.

Semakin besar library JavaScript, semakin besar efek performanya terhadap pengguna Anda.

Saat mengevaluasi atau menggunakan library atau framework JavaScript, pertimbangkan saran berikut untuk meningkatkan performa:

• Jika library JavaScript berukuran besar, pertimbangkan untuk menggunakan alternatif yang lebih kecil. Misalnya, date-fns menawarkan banyak fungsi dengan ukuran yang lebih wajar daripada beberapa opsi lainnya.
• Melanjutkan contoh date-fns sebelumnya, impor hanya fungsi yang Anda perlukan, seperti: import { format } from 'date-fns'. Pastikan untuk menggabungkan pendekatan ini dengan tree shaking, sehingga payload JavaScript minimal dibuat dan dikirim ke pengguna Anda.
• Gunakan alat pengujian performa seperti Lighthouse untuk mengamati efek performa dari penggunaan library JavaScript tertentu. Jika library menambahkan penundaan satu detik ke waktu pemuatan halaman (jangan lupa untuk membatasi jaringan dan CPU selama pengujian), Anda mungkin perlu mengevaluasi ulang library pilihan Anda. Selain memeriksa pemuatan halaman, pastikan untuk membuat profil perilaku halaman web apa pun yang memanggil kode dari library yang dimaksud—performa pemuatan halaman tidak menceritakan keseluruhan cerita.
• Jika komentar diterima oleh pembuat library, kirimkan pengamatan performa, saran, dan bahkan kontribusi Anda ke project. Di sinilah komunitas open source berperan penting. Jika Anda memutuskan untuk memberikan kontribusi, Anda mungkin perlu menghubungi perusahaan Anda terlebih dahulu.
• Gunakan alat pelacakan paket otomatis, seperti bundlesize, untuk memantau update yang sangat besar pada library. Library JavaScript biasanya akan berkembang seiring waktu. Penambahan fitur, perbaikan bug, kasus ekstrem, dan lainnya, semuanya dapat menambah ukuran file library. Setelah Anda/tim Anda setuju untuk menggunakan library, mengupdate library mungkin tidak terlalu menjadi masalah dan mungkin tidak menimbulkan pertanyaan. Di sinilah otomatisasi dapat membantu.
• Lihat persyaratan Anda untuk library dan evaluasi apakah platform web menawarkan fungsi yang sama secara native atau tidak. Misalnya, platform web sudah menawarkan pemilih warna, yang menghilangkan kebutuhan untuk menggunakan library JavaScript pihak ketiga untuk mengimplementasikan fungsi yang sama.

Keamanan

Penggunaan modul pihak ketiga memiliki beberapa risiko keamanan yang melekat. Paket berbahaya dalam codebase aplikasi web Anda dapat membahayakan keamanan tim pengembangan dan pengguna Anda.

Pertimbangkan library yang dipublikasikan ke ekosistem NPM. Paket tersebut mungkin sah. Namun, seiring waktu, paket tersebut dapat disusupi.

Berikut beberapa tips keamanan yang perlu dipertimbangkan saat menggunakan atau mengevaluasi kode pihak ketiga:

• Jika Anda menggunakan GitHub, pertimbangkan penawaran keamanan kode, seperti Dependabot. Atau, pertimbangkan layanan alternatif yang memindai kerentanan dalam kode Anda, seperti snyk.io.
• Pertimbangkan untuk menggunakan layanan audit kode, yaitu tim engineer yang dapat mengaudit kode pihak ketiga yang Anda gunakan secara manual.
• Evaluasi apakah Anda harus mengunci dependensi ke versi tertentu, atau meng-commit kode pihak ketiga dalam kontrol versi Anda. Hal ini dapat membantu mengunci dependensi Anda ke satu versi tertentu—yang mungkin dianggap aman. Ironisnya, hal ini dapat berdampak negatif pada keamanan, karena Anda mungkin melewatkan update penting pada library.
• Pindai halaman beranda project, atau halaman GitHub, jika ada. Teliti apakah ada masalah keamanan yang belum terselesaikan, dan apakah masalah keamanan sebelumnya telah diselesaikan dalam jangka waktu yang wajar.
• Kode pihak ketiga yang menggunakan kode pihak ketiga lainnya dapat menimbulkan risiko yang lebih besar daripada library yang memiliki nol dependensi. Perhatikan risiko ini.

Aksesibilitas

Anda mungkin bertanya-tanya bagaimana library software terkait dengan aksesibilitas web. Meskipun library software dapat digunakan di berbagai lingkungan, dalam konteks library berbasis JavaScript sisi klien, aksesibilitas web sangatlah penting.

Library (atau framework) berbasis JavaScript sisi klien dapat meningkatkan atau menurunkan aksesibilitas situs Anda. Pertimbangkan library JavaScript pihak ketiga yang menambahkan penggeser gambar ke halaman. Jika penggeser gambar tidak memperhitungkan aksesibilitas web, Anda sebagai developer web mungkin mengabaikan fitur penting tersebut, dan merilis produk yang tidak memiliki fitur penting, seperti penggeser yang dapat dioperasikan dengan keyboard.

Catatan: Pada contoh sebelumnya, developer web yang membangun situs bertanggung jawab untuk memastikan bahwa mereka menggunakan library yang sesuai dengan tujuan. Hal ini bukan tanggung jawab penulis library. Penggeser gambar ini adalah salah satu contoh, tetapi pertimbangkan contoh library JavaScript lainnya:

• Apakah plugin tipografi responsif mendukung pengguna yang memperbesar atau memperkecil halaman?
• Apakah plugin uploader file mendukung upload file dari perangkat pendukung?
• Apakah library animasi menawarkan dukungan untuk pengguna yang lebih menyukai gerakan yang dikurangi?
• Apakah plugin peta interaktif mendukung penggunaan khusus keyboard?
• Apakah library pemutar audio menawarkan pengalaman yang sesuai di pembaca layar?

Wajar jika Anda, sebagai developer web, perlu terlibat dalam beberapa hal untuk memenuhi persyaratan aksesibilitas tersebut. Contoh:

• Untuk fitur yang tidak ada, Anda dapat mengimplementasikan fitur tersebut dalam codebase, bahkan saat terus menggunakan library yang dimaksud.
• Dengan dukungan perusahaan, Anda dapat menambahkan fitur yang tidak ada tersebut ke library, jika pembuat library mengizinkan kontribusi semacam itu.
• Anda dapat membuka dialog dengan penulis library. Misalnya, apakah fitur aksesibilitas spesifik ini ada dalam roadmap Anda? Apakah Anda setuju bahwa buku tersebut seharusnya ada di perpustakaan?
• Untuk kasus penggunaan populer, Anda dapat mempelajari opsi library alternatif yang lebih mudah diakses; opsi tersebut mungkin ada, tetapi lebih sulit ditemukan.
• Dalam kasus ekstrem, Anda mungkin perlu mengabaikan library sepenuhnya dan mengimplementasikan fitur Anda dari awal. Hal ini dapat terjadi jika library atau framework memiliki pengalaman aksesibilitas yang menurun pada penggunaan awal, dan Anda harus mengurungkan banyak hal yang seharusnya diberikan library atau framework kepada Anda secara gratis.

Konvensi

Library software yang menggunakan konvensi coding yang sudah ada akan lebih mudah digunakan. Jika sebuah library menggunakan konvensi coding yang tidak umum, Anda dan tim Anda mungkin akan kesulitan menggunakan library tersebut.

Jika library tidak mengikuti konvensi coding umum (misalnya, panduan gaya umum), tidak banyak yang dapat Anda lakukan sebagai perbaikan langsung. Namun, masih ada beberapa opsi:

• Pastikan untuk membedakan antara kode sumber library dan API yang ditampilkan kepada Anda, pengguna library. Meskipun kode sumber internal mungkin menggunakan konvensi yang tidak dikenal, jika API (bagian library yang Anda gunakan untuk berinteraksi) menggunakan konvensi yang sudah dikenal, Anda tidak perlu khawatir.
• Jika API library tidak mengikuti konvensi coding umum, Anda dapat menggunakan pola desain JavaScript, seperti pola proxy, untuk menggabungkan dan memuat semua interaksi dengan library ke dalam satu file di codebase. Kemudian, proxy Anda dapat menawarkan API yang lebih intuitif ke bagian lain kode dalam codebase Anda.

Konvensi memainkan peran besar dalam kemudahan penggunaan. Library yang menyertakan API intuitif dapat menghemat banyak jam, atau bahkan berhari-hari, jika dibandingkan dengan API yang tidak intuitif yang memerlukan banyak eksperimen untuk mengetahuinya.

Update

Sebagai contoh, untuk library yang berfungsi penuh dan melakukan beberapa penghitungan matematika, library tersebut mungkin jarang memerlukan update. Bahkan, library dengan fitur lengkap jarang ditemukan di dunia pengembangan web yang terus berubah. Namun, ada kalanya Anda ingin pembuat library bersikap responsif dan bersedia melakukan update. Penelitian dan temuan baru dapat mengungkapkan cara yang lebih baik dalam melakukan sesuatu, sehingga teknik yang digunakan dalam library dan framework selalu dapat berubah.

Saat Anda memilih library atau framework, perhatikan cara penanganan update, dan ketahuilah bahwa keputusan tersebut dapat memengaruhi Anda:

• Apakah library memiliki jadwal rilis yang masuk akal? Misalnya, update pada repositori kode sumber mungkin sering terjadi, tetapi jika update tersebut tidak "dipublikasikan" atau "dirilis" sebagaimana mestinya, Anda akan kesulitan mendownload update tersebut.
• Apakah library merilis update dengan skema pembuatan versi software yang masuk akal? Library seharusnya menghemat waktu Anda. Jika Anda harus mengubah kode secara tidak terduga setiap kali mengupdate versi library, hal ini dapat menggagalkan tujuan penggunaan library tersebut sejak awal. Perubahan yang dapat menyebabkan gangguan terkadang tidak dapat dihindari, tetapi idealnya, perubahan jarang terjadi dan tidak dipaksakan kepada konsumen library.
• Apakah library berupaya mencapai kompatibilitas mundur? Terkadang, update software dapat disertai dengan perubahan yang dapat menyebabkan gangguan, tetapi juga memberikan lapisan kompatibilitas mundur. Hal ini memungkinkan konsumen library menggunakan versi library terbaru dengan perubahan minimal pada kode mereka.

Catatan: Penulis dan pengelola library menginvestasikan banyak waktu untuk mendukung developer web. Tidak selalu praktis bagi pembuat library untuk memberikan update dengan cara yang telah dibahas sebelumnya. Misalnya, penulis library independen yang mengerjakan project open source mungkin tidak menerima dukungan finansial yang mereka butuhkan untuk memenuhi tuntutan project.

Pemberian Lisensi

Peringatan: Ini bukan merupakan saran hukum.

Pemberian lisensi software adalah aspek penting dalam penggunaan library software pihak ketiga. Pembuat library dapat menetapkan lisensi ke library-nya. Jika Anda mempertimbangkan untuk menggunakan library, pilihan lisensi mereka dapat memengaruhi Anda.

Misalnya, library JavaScript mungkin memiliki lisensi software yang mengizinkan Anda menggunakannya di lingkungan non-komersial. Untuk project hobi pribadi, ini bisa menjadi pilihan yang bagus. Jika project Anda memiliki elemen komersial, Anda mungkin perlu mempertimbangkan lisensi perusahaan.

Jika ragu, pertimbangkan untuk meminta saran hukum profesional atau berkonsultasi dengan tim hukum di perusahaan Anda.

Komunitas

Library atau framework yang memiliki komunitas pengguna/kontributor yang besar dapat bermanfaat, tetapi hal ini bukan jaminan. Secara umum, semakin banyak pengguna yang dimiliki library atau framework, semakin besar kemungkinan library atau framework tersebut mendapatkan manfaat. Pertimbangkan kelebihan dan kekurangan berikut untuk berpartisipasi dalam komunitas pengembangan:

Kelebihan:

• Basis pengguna yang besar dapat berarti peluang yang lebih besar untuk menemukan bug lebih awal dan lebih sering.
• Komunitas aktif yang besar dapat berarti lebih banyak tutorial, panduan, video, dan bahkan kursus, tentang library atau framework yang dimaksud.
• Komunitas aktif yang besar dapat berarti lebih banyak dukungan di forum dan situs tanya jawab, sehingga meningkatkan kemungkinan pertanyaan dukungan dijawab.
• Komunitas yang aktif dapat berarti lebih banyak kontributor eksternal untuk library atau framework. Mereka dapat membantu menghadirkan fitur yang tidak ada dalam roadmap penulis.
• Jika library atau framework populer dalam komunitas, kemungkinan besar rekan dan kolega Anda akan pernah mendengar, atau bahkan sudah familier dengan, library atau framework tersebut.

Kekurangan:

• Project dengan basis pengguna yang besar dan beragam dapat menjadi terlalu besar karena penambahan fitur yang terus-menerus. Library yang terlalu besar dapat membahayakan performa web.
• Project dengan komunitas yang aktif dan terlibat dapat membuat penulis dan pengelola stres, dan mungkin memerlukan moderasi komunitas yang ketat.
• Project yang berkembang pesat, tetapi tidak memiliki dukungan yang sesuai, dapat mulai menunjukkan tanda-tanda memiliki komunitas yang toksik. Misalnya, developer web pemula atau junior dapat dibuat merasa tidak diterima di komunitas tertentu karena adanya gatekeeping.

Catatan: Komunitas pengembangan web, sejauh ini, sangat luar biasa! Setiap komunitas memiliki tantangannya masing-masing, tetapi Anda tidak boleh merasa enggan untuk berinteraksi dengan komunitas tertentu berdasarkan apa yang Anda baca di sini. Developer web baru mungkin akan merasa kesulitan untuk menjadi bagian dari komunitas, terutama komunitas dengan pandangan yang terpolarisasi. Anda harus tahu bahwa ini adalah tantangan umum dalam komunitas web, dan merupakan area yang memerlukan lebih banyak diskusi terbuka.

Dokumentasi

Tidak peduli seberapa sederhana atau kompleksnya library atau framework JavaScript, dokumentasi software selalu dapat membantu. Bahkan developer yang sangat berpengalaman pun menggunakan dokumentasi, daripada mencari tahu kodenya sendiri. Dokumentasi menjelaskan API yang harus Anda gunakan, dan cara menggunakannya.

Dokumentasi bahkan dapat memberikan kode contoh, sehingga memudahkan Anda untuk memulai dengan cepat. Saat mengevaluasi library atau framework, Anda dapat mengajukan beberapa pertanyaan berikut:

• Apakah library menyertakan dokumentasi? Jika tidak, Anda harus merasa nyaman untuk mencari tahu sendiri.
• Apakah dokumentasinya jelas, mudah dipahami, dan tidak ambigu? Banyak developer menghabiskan banyak waktu untuk dokumentasi. Mungkin terlihat sepele, tetapi kejelasan dalam dokumentasi tekstual dapat berdampak besar pada produktivitas Anda.
• Apakah dokumentasi dibuat sepenuhnya secara otomatis? Dokumentasi semacam ini bisa lebih sulit dipahami dan tidak selalu memberikan panduan yang jelas tentang cara menggunakan API.
• Apakah dokumentasinya sudah yang terbaru? Pemeliharaan dokumentasi terkadang dianggap sebagai hal yang tidak terlalu penting. Jika library diupdate, tetapi dokumentasinya tidak, hal ini dapat menyebabkan waktu pengembangan terbuang sia-sia.
• Apakah dokumentasinya komprehensif dan tersedia dalam berbagai format? Panduan pengguna, kode contoh, dokumentasi referensi, demo live, dan tutorial adalah format dokumentasi berharga yang dapat membantu Anda berhasil menggunakan library atau framework.

Dokumentasi tidak selalu lengkap, dan itu tidak masalah. Anda harus menilai kebutuhan organisasi, persyaratan project, dan kompleksitas software, serta menggunakannya untuk menentukan tingkat dokumentasi yang Anda butuhkan.

Kesimpulan

Wajar jika Anda merasa kewalahan saat memilih library atau framework untuk pertama kalinya. Sama seperti hal lainnya, makin banyak Anda mempelajari dan mempraktikkan suatu tugas, makin baik pula kemampuan Anda. Mungkin akan membantu jika Anda merujuk ke postingan ini saat memilih library atau framework yang akan digunakan. Anda dapat menggunakan judul dalam postingan ini sebagai checklist. Misalnya: Apakah library ini berperforma baik? Apakah library ini memenuhi standar bisnis saya untuk aksesibilitas web?

Ada aspek lain dari library dan framework yang mungkin ingin Anda pertimbangkan, dan yang belum banyak dibahas dalam postingan ini:

• Ekstensibilitas: seberapa mudahkah memperluas library dengan logika dan/atau perilaku kustom?
• Alat: jika berlaku, apakah library memiliki alat seperti plugin editor kode, alat proses debug, dan plugin sistem build?
• Arsitektur: kode yang bersih itu penting, tetapi apakah arsitektur library secara keseluruhan masuk akal?
• Pengujian: apakah project memiliki suite pengujian? Apakah situs project menggunakan badge atau indikator yang menunjukkan bahwa suite pengujian lulus terhadap commit terbaru?
• Kompatibilitas: apakah library berfungsi dengan baik dengan library dan/atau framework lain yang saat ini Anda gunakan?
• Biaya: berapa biaya framework? Apakah model ini open source atau tersedia untuk dibeli?
• Metrik kesombongan: ini harus berada di urutan bawah dalam daftar kriteria Anda, atau bahkan diabaikan sepenuhnya, tetapi Anda mungkin ingin mempertimbangkan "suara" project, akun media sosial yang mewakili project, dan/atau jumlah bug/masalah terbuka yang ada di halaman project.