Halaman ini diterjemahkan oleh Cloud Translation API.

Perbedaan antara library dan framework JavaScript

Umar Hansa

Artikel ini mengajarkan Anda tentang perbedaan antara framework dan library dalam konteks lingkungan JavaScript sisi klien, yang merupakan kode yang berjalan di browser web Anda. Namun, beberapa poin yang diangkat dalam artikel ini juga berlaku untuk lingkungan lain karena library dan framework merupakan bagian dari banyak bidang software engineering, seperti pengembangan aplikasi seluler native.

Diskusi dalam postingan ini berfokus pada perbedaan kualitatif, bukan perbedaan kuantitatif antara library dan framework. Contoh:

Kuantitatif: Framework biasanya mematuhi prinsip inversi kontrol.
Kualitatif: Pengalaman framework dapat lebih menarik bagi calon pemberi kerja saat Anda mencari pekerjaan.

Mengapa harus mempelajari library dan framework?

Penggunaan library dan framework JavaScript sangat produktif di seluruh web. Setiap situs lain tampaknya menggunakan beberapa kode pihak ketiga sebagai bagian dari resource JavaScript-nya. Beban halaman web semakin buruk seiring waktu, yang memengaruhi pengguna. JavaScript adalah faktor yang berkontribusi besar terhadap bobot halaman secara keseluruhan, dan JavaScript yang sama inilah yang sering kali terdiri dari library dan framework pihak ketiga.

Sebaiknya jangan mengatakan, "Berhenti menggunakan framework JavaScript", karena framework memberikan manfaat besar bagi developer. Framework dapat membantu Anda membuat kode secara efisien dan menghadirkan fitur dengan cepat, di antara manfaat lainnya. Sebagai gantinya, Anda harus mengedukasi diri sendiri agar dapat membuat keputusan yang tepat saat tiba waktunya.

"Haruskah saya menggunakan {i>library<i} atau {i>framework<i} hari ini?" adalah pertanyaan yang tidak umum untuk ditanyakan pada diri Anda sendiri. Library dan framework adalah dua hal yang sangat berbeda. Namun, library dan framework sering kali disamakan dan semakin banyak pengetahuan yang Anda miliki tentang keduanya, semakin besar kemungkinan Anda membuat keputusan yang tepat tentang penggunaannya.

Contoh library dan framework

Anda mungkin melihat kode pihak ketiga dengan nama lain, seperti widget, plugin, polyfill, atau paket. Namun, semuanya biasanya termasuk dalam kategori library atau 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.

Koleksi

Library cenderung lebih sederhana daripada framework dan menawarkan cakupan fungsi yang sempit. Jika Anda meneruskan input ke metode dan menerima output, Anda mungkin menggunakan library.

Lihat contoh library lodash ini:

import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello

Seperti halnya dengan banyak library, praktis untuk membaca kode ini dan memahami fungsinya. Tidak ada keajaiban yang terlibat:

Pernyataan import mengimpor library lodash ke dalam program JavaScript.
Metode capitalize() dipanggil.
Satu argumen diteruskan ke metode.
Nilai yang ditampilkan diambil dalam variabel.

Framework

Framework cenderung lebih besar daripada library dan berkontribusi lebih besar pada keseluruhan ukuran halaman. Bahkan, framework dapat menyertakan library.

Contoh ini menunjukkan framework biasa tanpa library dan menggunakan Vue, yang merupakan framework JavaScript yang populer:

<!-- index.html -->
<div id="main">
  {{ message }}
</div>

<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';

new Vue({
  el: '#main',
  data: {
    message: 'Hello, world'
  }
});
</script>

Jika membandingkan contoh framework ini dengan contoh library sebelumnya, Anda mungkin melihat perbedaan berikut:

Kode framework mencakup beberapa teknik dan memisahkannya ke dalam API opininya sendiri.
Developer tidak memiliki kontrol penuh atas cara dan waktu operasi terjadi. Misalnya, cara dan waktu Vue menulis string 'Hello, world' ke halaman akan diabstraksi dari Anda.
Pembuatan instance class Vue membawa beberapa efek samping, yang biasa terjadi saat Anda menggunakan framework, sedangkan library mungkin menawarkan fungsi murni.
Framework ini menetapkan sistem template HTML tertentu, bukan menggunakan template Anda sendiri.
Jika membaca lebih lanjut dokumentasi framework Vue atau sebagian besar dokumentasi framework lainnya, Anda dapat melihat bagaimana framework menentukan pola arsitektur yang dapat Anda gunakan. Framework JavaScript mengurangi beban kognitif Anda karena Anda tidak perlu mencari tahu sendiri.

Kapan harus menggunakan library versus framework

Setelah membaca perbandingan antara library dan framework, Anda mungkin mulai memahami kapan harus menggunakan salah satunya:

Framework dapat mengurangi kompleksitas bagi Anda, developer. Seperti yang telah dibahas, framework dapat memisahkan logika, perilaku, dan bahkan pola arsitektur. Hal ini sangat berguna ketika Anda memulai proyek baru. Library dapat membantu mengatasi kompleksitas, tetapi biasanya berfokus pada penggunaan kembali kode.
Penulis framework ingin Anda menjadi produktif dan sering kali mengembangkan alat tambahan, software proses debug, dan panduan komprehensif di antara referensi lainnya untuk membantu Anda menggunakan framework secara efektif. Penulis library juga ingin Anda menjadi produktif, tetapi alat khusus jarang ditemukan di library.
Sebagian besar framework menyediakan titik awal fungsional, seperti kerangka atau boilerplate, untuk membantu Anda mem-build aplikasi web dengan cepat. Library menjadi bagian dari codebase yang sudah Anda buat.
Secara umum, framework menghadirkan beberapa kompleksitas ke codebase Anda. Kompleksitasnya tidak selalu terlihat di awal, tetapi dapat terlihat seiring waktu.

Sebagai pengingat, Anda biasanya tidak membandingkan library dengan framework karena mereka adalah hal yang berbeda yang mencapai tugas berbeda. Namun, semakin banyak pengetahuan yang Anda miliki tentang keduanya, semakin Anda dapat memutuskan mana yang terbaik untuk Anda. Keputusan untuk menggunakan framework atau library pada akhirnya bergantung pada persyaratan Anda.

Dapat diganti

Anda tidak akan mengubah library atau framework setiap minggu. Namun, sangat baik untuk memahami kelemahan paket yang mengunci Anda ke dalam ekosistemnya. Sebaiknya Anda juga memahami bahwa developer yang memutuskan untuk menggunakan paket pihak ketiga bertanggung jawab atas pembuatan pengaitan longgar antara paket dan kode sumber aplikasi.

Paket yang terikat dengan kode sumber lebih sulit dihapus dan diganti dengan paket lain. Anda mungkin perlu menukar paket saat:

Anda harus melakukan update pada paket yang tidak lagi dikelola.
Anda menemukan bahwa paket tersebut terlalu banyak bug untuk digunakan.
Anda mempelajari paket baru yang lebih memenuhi kebutuhan Anda.
Persyaratan produk Anda berubah dan paket tidak diperlukan lagi.

Perhatikan contoh ini:

// header.js file
import color from '@package/set-color';
color('header', 'dark');

// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');

// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');

Contoh sebelumnya menggunakan paket @package/set-color pihak ketiga di tiga file terpisah. Jika Anda mengerjakan kode ini dan perlu mengganti paket pihak ketiga, Anda harus memperbarui kode di tiga tempat.

Atau, Anda dapat menyederhanakan pemeliharaan dan memisahkan penggunaan library ke satu tempat, yang dapat Anda lihat dalam contoh ini:

// lib/set-color.js file
import color from '@package/set-color';

export default function color(element, theme = 'dark') {
  color(element, theme);
}

// header.js file
import color from './lib/set-color.js';
color('header');

// article.js file
import color from './lib/set-color.js';
color('.article-post');

// footer.js file
import color from './lib/set-color.js';
color('.footer-container');

Pada contoh sebelumnya, penggunaan library langsung dihapus. Jadi, jika Anda harus mengganti paket pihak ketiga, Anda hanya perlu mengupdate satu file. Selain itu, kode kini lebih mudah digunakan karena file set-color.js internal menetapkan tema warna default yang akan digunakan.

Kemudahan penggunaan

Framework mungkin memiliki API yang kompleks, tetapi framework dapat menawarkan alat developer yang mempermudah penggunaan secara keseluruhan. Kemudahan penggunaan didasarkan pada banyak faktor dan dapat sangat subjektif. Framework dapat sulit digunakan karena:

Framework ini memiliki API yang sangat kompleks.
Framework ini tidak didokumentasikan dengan baik, dan memerlukan banyak percobaan untuk menyelesaikan masalah.
Framework ini menggunakan teknik yang tidak Anda dan tim Anda pahami.

Framework dapat mengurangi tantangan ini melalui praktik terbaik umum, seperti berikut:

Framework ini menawarkan alat developer dan diagnostik untuk mempermudah proses debug.
Framework ini memiliki komunitas developer aktif yang berkolaborasi dalam dokumentasi, panduan, tutorial, dan video gratis. Setelah melihat konten ini, Anda akan lebih produktif dengan framework tersebut.
Framework ini menawarkan API yang mengikuti konvensi coding umum. Anda produktif dengan framework karena telah mempelajari konvensi tersebut sebelumnya dan memiliki pemahaman yang lebih baik tentang gaya coding.

Meskipun poin ini biasanya diatribusikan ke framework, poin ini juga dapat diatribusikan ke library. Misalnya, library JavaScript D3.js sangat canggih dan memiliki ekosistem besar yang menawarkan workshop, panduan, dan dokumentasi di antara referensi lainnya, yang semuanya memengaruhi kemudahan penggunaannya.

Selain itu, framework biasanya menentukan arsitektur untuk aplikasi web Anda, sedangkan library biasanya kompatibel dengan arsitektur yang ada, apa pun arsitektur tersebut.

Performa

Secara umum, framework dapat memengaruhi performa lebih dari library, meskipun ada pengecualian untuk kasus ini. Performa web adalah area yang luas dengan banyak topik, sehingga bagian ini membahas dua topik penting: tree shaking dan update software.

Guncangan pohon

Pemaketan hanyalah salah satu faset performa web, tetapi memiliki efek performa yang besar, terutama dengan library yang lebih besar. Penggunaan tree shaking selama impor dan ekspor membantu performa karena menemukan dan memangkas kode yang tidak diperlukan aplikasi.

Saat Anda memaketkan kode JavaScript, ada langkah berguna yang dikenal sebagai tree shaking yang merupakan pengoptimalan performa yang berharga yang dapat Anda lakukan pada kode, meskipun lebih mudah dilakukan dengan library daripada framework.

Saat Anda mengimpor kode pihak ketiga ke dalam kode sumber, Anda biasanya menggabungkan kode menjadi satu atau beberapa file output. Misalnya, file header.js, footer.js, dan sidebar.js digabungkan ke dalam file output.js, yang merupakan file output yang Anda muat di aplikasi web.

Untuk lebih memahami tree shaking, pertimbangkan contoh kode berikut:

// library.js file
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js file
import {add} from './library.js';

console.log(add(7, 10));

Untuk tujuan demonstrasi, contoh kode library.js sengaja dibuat kecil dibandingkan dengan yang mungkin Anda temukan di dunia nyata, dengan library yang panjangnya bisa ribuan baris.

Proses paket naif dapat mengekspor kode dengan output ini:

// output.js file
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(add(7, 10));

Meskipun fungsi subtract() tidak diperlukan di aplikasi ini, fungsi tersebut masih disertakan dalam paket akhir. Kode yang tidak perlu seperti ini akan meningkatkan ukuran download, waktu penguraian dan kompilasi, serta biaya eksekusi yang harus dibayar pengguna Anda. Pendekatan tree-shaking dasar akan menghapus kode mati dan menghasilkan output ini:

// output.js file
function add(a, b) {
  return a + b;
}

console.log(add(7, 10));

Perhatikan bahwa kodenya lebih pendek dan lebih ringkas. Dalam contoh ini, peningkatan performa dapat diabaikan, tetapi dalam aplikasi di dunia nyata dengan library yang panjangnya ribuan baris, efek performa dapat jauh lebih signifikan. Menariknya, alat paket modern, seperti Parcel, Webpack, dan Rollup, melangkah lebih jauh karena menggabungkan minifikasi dan tree shaking untuk membuat paket yang sangat dioptimalkan. Untuk menunjukkan efektivitas alat paket, kami menggunakan Parcel untuk membuat file paket dengan contoh kode sebelumnya. Parcel menghapus semua kode yang tidak digunakan dan mengekspor satu modul ini:

console.log(7+10);

Parcel cukup cerdas untuk menghapus pernyataan impor, definisi fungsi, dan perilaku di antara item lainnya untuk membuat kode yang sangat dioptimalkan.

Penggabungan hanyalah salah satu aspek performa web, tetapi memiliki efek performa yang besar, terutama dengan library yang lebih besar. Pembersihan pohon biasanya lebih mudah dilakukan dengan library daripada dengan framework.

Update software

Untuk banyak library dan framework, update software menambahkan fungsi, memperbaiki bug, dan pada akhirnya bertambah besar dari waktu ke waktu. Anda tidak selalu perlu mendownload update, tetapi jika update menyertakan perbaikan bug, peningkatan fitur yang diinginkan, atau perbaikan keamanan, sebaiknya Anda mengupdate. Namun, semakin banyak data yang Anda kirim melalui kabel, semakin rendah performa aplikasi Anda dan semakin besar efek performa pada pengalaman pengguna Anda.

Jika ukuran library bertambah, Anda dapat menggunakan tree shaking untuk mengurangi pertumbuhannya. Atau, Anda dapat menggunakan alternatif yang lebih kecil untuk library JavaScript. Untuk mengetahui informasi selengkapnya, lihat Kemampuan untuk ditukar.

Jika ukuran framework bertambah, tree shaking tidak hanya menjadi lebih menantang, tetapi juga lebih sulit untuk mengganti satu framework dengan framework lainnya. Untuk informasi selengkapnya, lihat Kemampuan untuk ditukar.

Lowongan kerja

Sudah menjadi rahasia umum bahwa banyak perusahaan memiliki persyaratan ketat bagi developer yang mengetahui framework tertentu. Mereka mungkin mengabaikan pengetahuan Anda tentang dasar-dasar web dan hanya berfokus pada pengetahuan spesifik Anda tentang framework JavaScript tertentu. Benar atau salah, ini adalah kenyataan untuk banyak pekerjaan.

Pengetahuan tentang beberapa library JavaScript tidak akan membahayakan lamaran kerja Anda, tetapi tidak ada jaminan bahwa hal itu akan membuat Anda tampil beda. Jika Anda mengetahui beberapa kerangka kerja JavaScript populer dengan sangat baik, ada kemungkinan besar bahwa pemberi kerja melihat pengetahuan ini sebagai hal yang menguntungkan di pasar kerja saat ini untuk pengembang web. Beberapa organisasi perusahaan besar terjebak dengan framework JavaScript yang sangat lama dan bahkan mungkin sangat membutuhkan kandidat yang nyaman dengan framework tersebut.

Anda dapat menggunakan rahasia terbuka ini untuk keuntungan Anda. Namun, perhatikan pasar kerja dengan hati-hati dan pertimbangkan hal-hal berikut:

Ingatlah bahwa jika Anda menghabiskan banyak waktu dalam karier Anda hanya dengan satu kerangka kerja, Anda mungkin melewatkan pengalaman belajar dengan kerangka kerja lain yang lebih modern.
Pertimbangkan developer yang tidak sepenuhnya memahami dasar-dasar pengembangan software atau pengembangan web, tetapi dipekerjakan sebagai developer framework. Developer ini tidak menulis kode yang efektif, dan Anda mungkin merasa kewalahan atau kerepotan untuk mengerjakan codebase semacam itu. Dalam beberapa kasus, skenario ini dapat menyebabkan kejenuhan. Misalnya, Anda mungkin harus memfaktorkan ulang kode atau menyesuaikan performa kode karena kode ini lambat.
Saat Anda mempelajari pengembangan web, jalur terbaiknya adalah dengan memulai dengan fokus yang kuat pada dasar-dasar pengembangan web, pengembangan software, dan rekayasa software. Dasar yang kuat tersebut membantu Anda mempelajari framework JavaScript dengan cepat dan efektif.

Kesimpulan

Selamat atas kerja keras Anda dalam memahami perbandingan framework dan library JavaScript. Anda tidak akan sering memilih framework atau library kecuali jika Anda mengerjakan project greenfield atau sebagai konsultan. Namun, saat keputusan tersebut muncul, semakin banyak pengetahuan yang Anda miliki tentang subjek tersebut, semakin baik keputusan Anda.

Seperti yang telah Anda pelajari, pilihan framework yang Anda buat—dan dalam beberapa kasus, pilihan library—dapat secara signifikan memengaruhi pengalaman pengembangan dan pengguna akhir Anda, seperti performa.