IF Notes

Konsep Dasar Framework dan Library

5 min read

Back to IF3110 Pengembangan Aplikasi Berbasis Web

Topic

Questions/Cues

  • Apa motivasi di balik framework?

  • Apa beda Framework vs Library?

  • Apa itu Framework?

  • Apa itu Library?

  • Apa alasan (rasional) kita menggunakannya?

  • Apa sisi baik & buruk framework?

  • Apa saja contoh populer?

Reference Points

  • Slides IF3110-10a-Client-Side-Framework.pdf (Slide 1-7)

Motivasi Penggunaan

JavaScript telah menjadi teknologi utama dalam membangun aplikasi web modern, tetapi JavaScript sendiri adalah bahasa yang sangat “aneh” dan fleksibel. Fleksibilitas ini sering menimbulkan masalah dalam:

  • Tipe Data: JavaScript adalah loosely typed, mudah terjadi kesalahan tipe.

  • Gaya Kode: Tanpa panduan, gaya kode antar pengembang bisa sangat berbeda.

  • Arsitektur: Sulit untuk membangun aplikasi skala besar yang terstruktur dan mudah dirawat (maintenance) hanya dengan JavaScript murni (vanilla JS).

Perbedaan Fundamental: Framework vs. Library

Library (Pustaka):

  • Definisi: Sekumpulan fungsi/kode yang bisa kita panggil kapanpun kita membutuhkannya.

  • Analogi: Sebuah toko perkakas (misalnya, IKEA). Anda memiliki masalah (misalnya, perlu merakit lemari), Anda pergi ke toko, memilih alat yang tepat (obeng, kunci L), dan menggunakannya sesuai kebutuhan Anda.

  • Alur Kontrol: Anda yang memegang kendali. Kode Anda memanggil fungsi library.

  • Contoh: jQuery, MooTools, YUI. (Anda memutuskan kapan harus memanggil $ untuk memilih elemen).

Framework (Kerangka Kerja):

  • Definisi: Sebuah kerangka atau struktur yang menentukan “bagaimana” Anda harus menyajikan atau menulis kode Anda. Ia menyediakan template, helpers, dan aturan arsitektur.

  • Analogi: Sebuah cetakan rumah atau blueprint rumah. Anda tidak memulai dari nol; Anda harus membangun di dalam fondasi dan struktur yang telah disediakan oleh kerangka tersebut.

  • Alur Kontrol: Dia (framework) yang memegang kendali. Framework memanggil kode Anda pada waktu yang tepat (misal: memanggil fungsi render Anda). Ini sering disebut Inversion of Control (IoC).

  • Contoh: ReactJS, AngularJS, VueJS. (React memberi tahu Anda cara membuat Komponen dan React-lah yang memutuskan kapan harus memanggil fungsi render komponen Anda).

Rasional (Alasan) Menggunakan Framework/Library

  1. Don’t Reinvent the Wheel: Jangan membuat ulang sesuatu yang sudah ada. Mengapa membuat fungsi AJAX sendiri jika jQuery atau React sudah menyediakannya dengan lebih baik dan teruji?

  2. Do More with Less Code: Mencapai hasil yang lebih kompleks dengan penulisan kode yang lebih sedikit dan sederhana.

  3. Save Time: Mempercepat proses pengembangan secara drastis.

  4. We are not THE EXPERT: Kemungkinan besar, para ahli di komunitas (misal: tim React di Facebook) telah memikirkan edge cases dan optimasi performa yang mungkin tidak kita pikirkan.

  5. Community & Sustainability: Menggunakan alat populer berarti ada komunitas besar untuk dukungan, tutorial, dan keberlanjutan kode (mudah mencari pengembang baru).

  6. Enforce Norms: Memaksa tim untuk mengikuti struktur, arsitektur, dan konvensi yang sama, membuat kode lebih rapi dan konsisten.

Sisi Baik vs. Sisi Buruk Framework

Ini adalah sebuah paradoks:

  • Hal Baik: Framework melakukan banyak hal untuk pengembang (mengurus routing, state management, optimasi DOM).

  • Hal Buruk: Framework melakukan banyak hal untuk pengembang (kita jadi “terkunci” pada cara kerja framework tersebut, dan ada learning curve untuk memahami semua yang dilakukannya di balik layar).

Popularitas (Berdasarkan Stack Overflow Survey 2024)

Statistik menunjukkan teknologi mana yang banyak digunakan secara profesional dan mana yang disukai/diinginkan oleh pengembang.

  • Populer (Banyak Digunakan): Node.js (40.8%), React (39.5%), jQuery (21.4%), Next.js (17.9%), Angular (17.1%), Vue.js (15.4%).

  • Admired/Desired (Disukai/Diinginkan): Banyak pengembang ingin belajar atau menyukai Svelte, Htmx, Astro, dan Solid.js, yang menunjukkan tren teknologi baru yang sedang naik daun.

Summary

Framework dan Library adalah alat penting untuk mengatasi kompleksitas JavaScript modern, namun keduanya berbeda secara fundamental. Library (seperti jQuery) adalah kumpulan alat yang kita panggil saat dibutuhkan, di mana kita memegang kendali penuh. Sebaliknya, Framework (seperti React atau Angular) adalah kerangka kerja yang menentukan arsitektur dan memanggil kode kita (Inversion of Control). Alasan utama menggunakannya adalah untuk menghemat waktu, memanfaatkan keahlian komunitas, dan menerapkan standar kode yang konsisten dalam sebuah tim, meskipun ada trade-off antara kemudahan yang ditawarkan dan keterikatan pada aturan framework tersebut.

Graph View

Backlinks