Perbedaan antara library dan framework JavaScript

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

Diskusi dalam posting ini berfokus pada perbedaan kualitatif daripada perbedaan kuantitatif antara pustaka dan kerangka kerja. Contoh:

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

Mengapa mempelajari library dan framework?

Library JavaScript dan penggunaan framework berkembang pesat di seluruh web. Setiap situs lain tampaknya menggunakan beberapa kode pihak ketiga sebagai bagian dari resource JavaScript-nya. Seiring waktu, bobot halaman web menjadi semakin buruk, dan hal ini memengaruhi pengguna. JavaScript adalah faktor yang berkontribusi besar terhadap bobot halaman secara keseluruhan, dan JavaScript yang sama sering kali terdiri dari library dan framework pihak ketiga.

Tidak cukup baik untuk mengatakan, "Berhenti menggunakan kerangka kerja JavaScript," karena kerangka kerja memberikan manfaat besar bagi developer. Framework dapat membantu Anda membuat kode secara efisien dan menghadirkan fitur dengan cepat, di antara manfaat lainnya. Sebaliknya, Anda harus mendidik diri sendiri sehingga Anda dapat membuat keputusan yang tepat ketika waktunya tiba.

"Haruskah saya menggunakan perpustakaan atau kerangka kerja hari ini?" adalah pertanyaan yang tidak umum ditanyakan pada diri sendiri. Library dan framework adalah dua hal yang sangat berbeda. Namun, library dan framework sering kali digabungkan dan semakin banyak pengetahuan yang Anda miliki tentang keduanya, semakin besar kemungkinan Anda untuk membuat keputusan yang tepat terkait 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 dirangkum 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 fungsionalitas yang sempit. Jika 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, membaca kode ini dan memahami fungsinya menjadi lebih praktis. Sedikit sekali sihir:

1. Pernyataan import mengimpor library lodash ke program JavaScript.
2. Metode capitalize() dipanggil.
3. Satu argumen diteruskan ke metode.
4. Nilai yang ditampilkan ditangkap dalam variabel.

Framework

Framework cenderung lebih besar daripada library dan lebih berkontribusi terhadap bobot halaman secara keseluruhan. Bahkan, framework dapat menyertakan library.

Contoh ini menunjukkan framework biasa tanpa library dan menggunakan Vue, yang merupakan framework JavaScript 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 bagaimana dan kapan operasi terjadi. Misalnya, bagaimana dan kapan Vue menulis string 'Hello, world' ke halaman akan diabstraksikan dari Anda.
• Pembuatan instance class Vue memiliki beberapa efek samping, yang umum digunakan saat Anda menggunakan framework, sedangkan library mungkin menawarkan fungsi murni.
• Kerangka kerja ini menentukan sistem template HTML tertentu, bukan menggunakan sistem Anda sendiri.
• Jika membaca lebih lanjut tentang dokumentasi framework Vue atau sebagian besar dokumentasi framework lainnya, Anda dapat melihat cara framework menentukan pola arsitektur yang dapat Anda gunakan. Kerangka kerja JavaScript menghilangkan beban kognitif karena Anda tidak perlu memecahkannya sendiri.

Kapan menggunakan library versus framework

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

• Framework dapat mengurangi kompleksitas untuk Anda, sebagai developer. Seperti yang telah dibahas, framework dapat memisahkan logika, perilaku, dan bahkan pola arsitektur. Ini terutama berguna ketika Anda memulai sebuah proyek baru. Library dapat membantu mengurangi kompleksitas, tetapi biasanya berfokus pada penggunaan ulang kode.
• Penulis kerangka kerja ingin Anda menjadi produktif dan sering mengembangkan alat tambahan, perangkat lunak {i>debugging<i}, dan panduan komprehensif di antara sumber daya lain untuk membantu Anda menggunakan kerangka kerja secara efektif. Penulis library juga ingin Anda menjadi produktif, tetapi alat khusus jarang ditemukan di library.
• Sebagian besar framework menyediakan titik awal yang fungsional, seperti kerangka atau boilerplate, untuk membantu Anda membangun aplikasi web dengan cepat. Library akan menjadi bagian dari codebase yang sudah ditetapkan.
• Secara umum, framework memperkenalkan beberapa kompleksitas pada codebase Anda. Kompleksitas tidak selalu jelas di awal, tetapi dapat muncul dengan sendirinya seiring waktu.

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

Kemampuan untuk dipertukarkan

Anda tidak akan mengubah perpustakaan atau kerangka kerja Anda setiap minggu. Namun, ada baiknya untuk memahami kekurangan dari paket yang mengunci Anda ke dalam ekosistemnya. Sebaiknya Anda juga memahami bahwa developer yang memutuskan untuk menggunakan paket pihak ketiga agak bertanggung jawab atas pembuatan pengaitan longgar antara paket dan kode sumber aplikasi.

Paket yang terikat dengan kode sumber lebih sulit untuk dihapus dan ditukar dengan paket lain. Anda mungkin perlu menukar paket jika:

• Anda harus melakukan update pada paket yang tidak lagi dikelola.
• Anda menemukan bahwa paket itu terlalu berisi bug untuk dikerjakan.
• Anda belajar tentang paket baru yang memenuhi kebutuhan Anda dengan lebih baik.
• Persyaratan produk Anda berubah dan paket tidak diperlukan lagi.

Perhatikan contoh berikut:

// 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 tersebut 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 diabstraksi. Oleh karena itu, jika Anda harus menukar paket pihak ketiga, Anda hanya akan memperbarui satu file. Selain itu, kode ini sekarang lebih mudah digunakan karena file set-color.js internal menetapkan tema warna default yang akan digunakan.

Mudah digunakan

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

• Framework ini memiliki API yang sangat kompleks.
• Kerangka kerja ini didokumentasikan dengan buruk, dan membutuhkan banyak coba-coba untuk memecahkan masalah.
• Kerangka kerja ini menggunakan teknik yang tidak dikenal oleh Anda dan tim Anda.

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

• Framework ini menawarkan alat diagnostik dan developer untuk mempermudah proses debug.
• Framework ini memiliki komunitas developer aktif yang berkolaborasi dalam membuat dokumentasi, panduan, tutorial, dan video gratis. Setelah mengonsumsi konten ini, Anda menjadi produktif dengan framework.
• Framework ini menawarkan API yang mengikuti konvensi coding umum. Anda produktif dengan kerangka kerja ini karena Anda telah mempelajari konvensi tersebut sebelumnya dan lebih terbiasa dengan gaya pengkodean.

Meskipun titik ini biasanya diatribusikan ke framework, titik 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 resource lainnya, yang semuanya memengaruhi kemudahan penggunaannya.

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

Performa

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

Pohon guncangan

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 memaketkan kode JavaScript, ada langkah bermanfaat yang disebut tree shaking, yaitu pengoptimalan performa yang berharga yang dapat Anda lakukan pada kode, meskipun lebih mudah dilakukan dengan library daripada framework.

Saat mengimpor kode pihak ketiga ke dalam kode sumber, Anda biasanya memaketkan kode menjadi satu atau beberapa file output. Misalnya, file header.js, footer.js, dan sidebar.js semuanya 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 berukuran kecil dibandingkan dengan yang mungkin Anda temukan di dunia nyata, di mana panjang library dapat memiliki ribuan baris.

Proses paket yang 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 dalam aplikasi ini, fungsi tersebut tetap disertakan dalam paket akhir. Kode yang tidak perlu seperti ini meningkatkan ukuran download, waktu penguraian dan kompilasi, serta biaya eksekusi yang harus dibayar pengguna. Pendekatan tree-shaking dasar 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 dunia nyata, dengan library yang panjangnya ribuan baris, efek performa dapat jauh lebih signifikan. Menariknya, alat paket modern, seperti Parcel, Webpack, dan Rollup selangkah lebih maju 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 lain untuk membuat kode yang sangat dioptimalkan.

Pemaketan hanyalah salah satu faset performa web, tetapi memiliki efek performa yang besar, terutama dengan library yang lebih besar. Tree shaking biasanya lebih mudah dilakukan dengan library daripada framework.

Update software

Bagi banyak library dan framework, update software menambahkan fungsionalitas, memperbaiki bug, dan akhirnya bertambah besar seiring waktu. Anda tidak harus selalu mendownload update, tetapi jika update menyertakan perbaikan bug, peningkatan fitur yang diinginkan, atau perbaikan keamanan, sebaiknya Anda mengupdate-nya. Namun, makin banyak data yang Anda kirim melalui kabel, makin rendah performa aplikasi dan makin besar efek performa pada pengalaman pengguna Anda.

Jika library bertambah besar, Anda dapat menggunakan tree shaking untuk mengurangi pertumbuhan. Atau, Anda dapat menggunakan alternatif yang lebih kecil untuk library JavaScript. Untuk informasi selengkapnya, lihat Dapat ditukarkan.

Jika framework semakin besar, maka tidak hanya akan lebih sulit untuk menukar satu framework dengan framework yang lain, tetapi juga akan lebih sulit untuk mengganti satu framework dengan yang lain. Untuk informasi selengkapnya, lihat Dapat ditukarkan.

Ketersediaan

Ini adalah rahasia terbuka bahwa banyak perusahaan memiliki persyaratan sulit bagi developer yang mengetahui framework tertentu. Mereka mungkin mengabaikan pengetahuan dasar-dasar web dan hanya fokus pada pengetahuan spesifik Anda tentang kerangka kerja JavaScript tertentu! Benar atau salah, ini adalah kenyataan di banyak pekerjaan.

Pengetahuan tentang beberapa library JavaScript tidak akan membahayakan lamaran kerja Anda, tetapi tidak ada jaminan bahwa aplikasi tersebut akan membuat Anda lebih menarik perhatian. Jika Anda mengenal beberapa kerangka kerja JavaScript populer dengan sangat baik, ada kemungkinan besar pemberi kerja melihat pengetahuan ini sebagai hal yang berguna di pasar kerja untuk developer web saat ini. Beberapa organisasi perusahaan besar terhambat dengan framework JavaScript yang sudah sangat lama dan bahkan mungkin menginginkan kandidat yang nyaman dengan framework seperti itu.

Anda dapat memanfaatkan rahasia terbuka ini. Namun, lakukan pendekatan ke pasar kerja dengan hati-hati dan dengan memperhatikan pertimbangan berikut:

• Ingatlah bahwa jika Anda menghabiskan banyak waktu dalam berkarier hanya dengan satu kerangka kerja, Anda mungkin akan kehilangan pengalaman belajar dengan kerangka kerja lain yang lebih modern.
• Pertimbangkan seorang developer yang tidak terlalu memahami pengembangan software atau dasar-dasar pengembangan web, tetapi dipekerjakan sebagai developer framework. Developer ini tidak menulis kode yang efektif, dan Anda mungkin merasa kesulitan atau kewalahan dalam mengerjakan codebase semacam itu. Dalam beberapa kasus, skenario ini dapat menyebabkan kejenuhan. Misalnya, Anda mungkin harus memfaktorkan ulang kode atau menyesuaikan performa kode karena lambat.
• Saat Anda mempelajari pengembangan web, jalur terbaik adalah memulai dengan fokus besar pada dasar-dasar pengembangan web, pengembangan software, dan software engineering. Fondasi yang kuat tersebut akan membantu Anda memahami kerangka kerja JavaScript dengan cepat dan efektif.

Kesimpulan

Selamat atas kerja keras Anda dalam memahami perbandingan antara framework dan library JavaScript. Anda tidak akan sering memilih framework atau library, kecuali jika Anda mengerjakan project greenfield atau sebagai konsultan. Namun, ketika keputusan seperti itu 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 dengan performa.