Framework Javascript

Pada bagian ini kita akan melihat apa yang dimaksud dengan Framework secara umum, serta berbagai contoh framework yang ada pada Javascript. Tujuan utama kita mempelajari ini adalah karena pada pengembangan aplikasi yang berukuran signifikan (katakanlah, lebih dari 1.000 baris), umumnya kita akan menemui banyak kode-kode yang serupa dengan beberapa parameter atau nilai berbeda. Ketika hal ini terjadi, kita perlu mengembangkan apa yang dikenal dengan abstraksi. Mengutip Wikipedia:

Pada ilmu komputer, abstraksi merupakan proses memisahkan inti pemikiran (ide; gagasan) dari contoh (kejadian) spesifik ketika gagasan tersebut diimplementasikan.
Struktur komputasi dari gagasan didefinisikan melalui makna (semantik) mereka, dengan menyembunyikan detil dari cara kerja gagasan tersebut.

Ketika mengembangkan aplikasi yang relatif besar, pada umumnya kita akan menemukan bagian dari aplikasi yang berulang. Misalnya, sebuah aplikasi yang perlu mengakses basis data akan memiliki kode untuk melakukan koneksi dan pengiriman perintah ke basis data. Meskipun perintah-perintah yang dikirimkan berbeda, umumnya langkah untuk mengirimkan perintah tidak jauh berbeda:

  1. Koneksi ke basis data
  2. Kirimkan perintah
  3. Proses respon

Ketiga langkah di atas dapat kita anggap sebagai implementasi dari sebuah gagasan (inti pemikiran) umum. Inti pemikiran yang ada pada langkah di atas adalah berhubungan dengan basis data. Karena hal ini akan dilakukan berulang kali dalam sebuah aplikasi, akan sangat baik jika kita memiliki sebuah gagasan umum yang membungkus ketiga langkah di atas menjadi hanya “kirim perintah ke basis data” tanpa perlu memikirkan detil langkahnya. Dengan begitu, makna semantik dari apa yang kita lakukan (“kirim perintah ke basis data”) tidak perlu terganggu oleh detil implementasi. Hal inilah yang kita kenal sebagai abstraksi dalam ilmu komputer.

Abstraksi memiliki banyak kelebihan:

  1. Karena gagasan inti telah terpisah dari detil implementasi, secara teori kita dapat mengganti detil implementasi tanpa perlu mengganti gagasan inti. Pada contoh di atas misalnya, kita dapat mengganti basis data (misal: dari MySQL ke Postgres) tanpa perlu mengganti kode-kode lain yang menggunakan abstraksi kita. Kode yang diganti hanya kode abstraksi yang menangani detil implementasi hubungan ke basis data.
  2. Abstraksi umumnya membuka peluang untuk mengembangkan sebuah antarmuka pemrograman yang sangat ekspresif dan kuat. Misalnya, dengan abstraksi kita dapat memperluas sebuah gagasan (dari “kirim perintah ke basis data” menjadi “akses data”) sehingga aplikasi yang dikembangkan di atas abstraksi ini dapat memiliki interaksi dengan data yang berbeda tanpa perlu tahu apa saja data tersebut. Sebagian data dapat datang dari basis data, dan lainnya datang dari XML, tetapi aplikasi kita cukup tahu bahwa data tersebut ada dan dapat diakses, tanpa perlu tau cara membaca XML atau basis data.
  3. Karena poin kedua, kompleksitas kode dari aplikasi akan otomatis menurun. Ketika kita membangun di atas abstraksi, sebagai pengguna abstraksi terdapat banyak detil implementasi yang tidak perlu kita pikirkan, menyebabkan implementasi aplikasi menjadi lebih sederhana. Hal ini secara otomatis akan mempermudah kita dalam mengembangkan aplikasi.

Meskipun dapat sangat membantu kita dalam mengembangkan aplikasi, abstraksi yang tidak diimplementasikan dengan hati-hati juga dapat menyebabkan hal buruk. Ketika kita menggunakan sebuah abstraksi yang dikembangkan oleh orang lain, tentunya kita harus mempelajari detil abstraksi tersebut sebelum dapat menggunakannya dengan efektif. Hal ini seringkali menjadi sandungan dan memperpanjang waktu pengembangan. Sebuah abstraksi yang tidak tepat juga bahkan dapat mempersulit pengembangan aplikasi kita. Detil mengenai abstraksi yang baik dan buruk sulit dijelaskan tanpa berpengalaman langsung bekerja dengan abstraksi terlebih dahulu. Karena hal ini, kita akan membahas kelebihan dan kekurangan abstraksi ini sembari mempelajari berbagai abstraksi yang ada pada bagian-bagian selanjutnya.

Sebelum mulai masuk dan mencoba berbagai abstraksi yang ada, kita akan melihat jenis-jenis abstraksi yang ditawarkan oleh lingkungan Javascript terlebih dahulu. Secara umum, di lingkungan Javascript terdapat beberapa jenis abstraksi yang dapat kita temui:

  1. Library
  2. Widget Toolkit
  3. Framework

Mari kita lihat perbedaan dari masing-masing abstraksi ini.

Library

Sebuah library, atau pustaka kode, didefinisikan sebagai berikut pada tulisan ini:

Kumpulan implementasi fungsi-fungsi umum dari perangkat lunak yang memiliki perilaku spesifik

Fungsi yang dimaksudkan pada “kumpulan implementasi fungsi-fungsi umum” di atas adalah fungsi dalam arti fungsionalitas, bukan fitur function pada sebuah bahasa pemrograman. Sebuah library dapat menyediakan kumpulan implementasi fungsionalitas untuk membaca file PDF atau melakukan kalkulasi Fast Fourier Transform. Fitur bahasa yang digunakan oleh library untuk mendapatkan sebuah fungsionalitas tertentu mungkin saja function, class, atau yang lain. Cara library mengimplementasikan sesuatu tidak terlalu penting, selama fungsionalitas yang diinginkan dapat tercapai.

Fungsi-fungsi umum yang ada di dalam sebuah library umumnya memiliki perilaku spesifik. Perilaku spesifik ini diartikan sebagai sebuah spesifikasi masukan dan keluaran dari fungsi tersebut. Spesifikasi ini dapat mencakup tipe data (masukan maupun keluaran), efek samping, paramter fungsi, nilai kembalian, dan banyak hal lain. Tingkat kelengkapan spesifikasi dari sebuah library sendiri berbeda-beda, dan tentunya semakin lengkap (spesifik) detil spesifikasinya semakin baik pula library tersebut.

Untuk memperjelas lagi, mari kita lihat contoh penggunaan sebuah library pada aplikasi. Diagram berikut menunjukkan alur arus data sebuah aplikasi yang menggunakan library:

_images/library.png

Pada diagram di atas, kita ingin mengembangkan sebuah aplikasi yang dapat memainkan file musik ogg vorbis. Terdapat dua buah library yang digunakan oleh aplikasi kita, yaitu libvorbisfile dan libalsa. Alur kerja dari aplikasi adalah kira-kira seperti berikut:

  1. Pengguna memberikan file ogg kepada aplikasi.
  2. Aplikasi memberikan file ogg kepada libvorbisfile.
  3. libvorbisfile memproses file ogg dan memberikan kembali hasil proses berupa stream audio ke aplikasi.
  4. Aplikasi memberikan stream audio dari libvorbisfile ke libalsa.
  5. libalsa memainkan stream audio tersebut dan mengeluarkan suaranya ke perangkat audio seperti speaker.

Perhatikan bagaimana dengan menggunakan libvorbisfile dan libalsa aplikasi kita tidak perlu lagi mengetahui cara mengubah file ogg menjadi stream audio dan cara mengubah stream audio menjadi suara. Kita hanya mengirimkan data yang dibutuhkan libvorbisfile maupun libalsa sesuai dengan spesifikasi mereka, dan mendapatkan keluaran yang kita inginkan.

libvorbisfile sendiri, seperti yang dapat dilihat pada diagram di atas, menggunakan dua buah library lain lagi, yaitu libogg dan libvorbis. libogg digunakan untuk mengubah file ogg menjadi vorbis stream, yang merupakan format stream spesifik untuk vorbis. Keluaran dari libogg ini kemudian diberikan kepada libvorbis untuk diubah menjadi stream audio standar. Penggunaan library lain di dalam sebuah library ini merupakan hal yang sangat umum terjadi, dan pada akhirnya tidak mengherankan jika aplikasi yang kita kembangkan akan memerlukan banyak library.

Berdasarkan penuturan di atas, kita dapat menyimpulkan beberapa hal tentang library:

  1. Library merupakan kumpulan fungsi, yang kemudian dapat digunakan untuk membangun aplikasi. Dari sudut pandang lain, kita dapat menganggap library sebagai sebuah blok fungsi seperti lego yang dapat digabungkan untuk menjadi sebuah bentuk (dalam kasus kita: apikasi atau library yang lebih kompleks).
  2. Sebuah library dapat digunakan dengan bebas, sesuai dengan kebutuhan. Jika tidak ingin menggunakan sebuah library, kita tetap dapat mengimplementasikan fungsi yang diinginkan. Ketika ingin menggunakan library pun, kita tidak perlu harus menggunakan semua fungsionaltias yang disedikaan library tersebut.
  3. Sebuah library yang baik biasanya menyediakan fungsi-fungsi yang sejenis dan saling berhubungan. Prinsip ini kita kenal dengan istilah *cohesion*. Semakin terfokus fungsi-fungsi yang ada di dalam sebuah library semakin baik. Memiliki fungsi untuk menghitung luas lingkaran di dalam library untuk memainkan file mp3 misalnya, tidak akan menambahkan manfaat apapun selain beban pengujian dan perawatan kode.
  4. Sebuah library relatif mudah digunakan bersamaan dengan library lain karenanya kita dapat dengan mudah menggunakan beberapa library dalam satu aplikasi. Kendatipun terdapat library yang bergantung kepada library lain (i.e. kita tidak dapat menggunakan library A tanpa juga menggunakan library B), hal ini umumnya dihindari. Tingkat ketergantungan antar library kita kenal dengan istilah coupling, dan semakin rendah tingkat ketergantungan (coupling) semakin baik.

Contoh dari sebuah library pada lingkungan Javascript adalah jQuery. jQuery menawarkan berbagai fungsionalitas umum yang biasanya digunakan pengguna Javascript di dalam sebuah abstraksi sederhana yang mudah digunakan. Misalnya, jika kita ingin menggunakan XHR, alih-alih menuliskan kode panjang agar XHR dapat berjalan di semua browser, jQuery menawarkan fungsi .ajax yang sederhana:

1
2
3
4
5
6
7
8
9
$.ajax({
        url: "/api/getWeather",
        data: {
            zipcode: 97201
        },
        success: function(data) {
            $("#weather-temp").html("<b>" + data + "</b> degrees");
        }
    });

Widget Toolkit

Setingkat di atas library, kita memiliki Widget Toolkit dalam dunia Javascript. Definisi sederhananya adalah:

(Kumpulan) library untuk membuat elemen-elemen tertentu untuk mengembangkan antarmuka (UI)

Widget Toolkit merupakan kumpulan library, atau terkadang sebuah library besar yang dibangun di atas banyak library kecil lainnya. Karena merupakan kumpulan library, Widget Toolkit biasanya menspesifikasikan bagaimana seluruh library yang digunakan saling berinteraksi. Hal ini berarti terdapat coupling antara semua library yang digunakan oleh Widget Toolkit.

Sebuah Widget Toolkit seringkali juga bukan hanya menggunakan library sebagai alat untuk membangun antarmuka pengguna, tetapi juga untuk membantu fitur-fitur tertentu. Misalnya, sebuah Widget Toolkit dapat menggunakan jQuery untuk berinteraksi dengan elemen-elemen antarmuka pengguna yang disediakannya.

Karena sebuah antarmuka biasanya disertai dengan berbagai komponen pendukung seperti ikon atau gambar latar, sebuah Widget Toolkit seringkali dipaketkan bersamaan dengan komponen-komponen pendukung tersebut. Dalam lingkungan Javascript, komponen-komponen pendukung ini dapat berupa CSS, gambar, font, suara, dst.

Sebagai suatu abstraksi yang mencampurkan berbagai library dan komponen antarmuka, sebuah Widget Toolkit biasanya memiliki cara kerja dan interaksi antar komponen yang cukup spesifik. Hal ini menyebabkan Widget Toolkit sulit digunakan bersamaan dengan Widget Toolkit atau bahkan library lain. Ketika memutuskan untuk menggunakan sebuah Widget Toolkit, biasanya evaluasi akan dilakukan dengan lebih hati-hati, karena pergantian Widget Toolkit biasanya akan diikuti oleh pergantian seluruh komponen antarmuka beserta dengan library yang digunakan.

Untuk memperjelas perbedaan antar Widget Toolkit ini, mari kita lihat sekilas bagaimana tiga buah Widget Toolkit yang cukup populer (jQuery UI, Dojo Toolkit, YUI) menampilkan sebuah widget untuk memilih tanggal (datepicker):

Kode (jQuery UI) Tampilan
jQueryUIDatePickerCode jQueryUIDatePicker
Kode (Dojo) Tampilan
DojoDatePickerCode DojoDatePicker
Kode (YUI) Tampilan
YUIDatePickerCode YUIDatePicker

Dari ketiga Widget Toolkit yang ada di atas, kita dapat melihat bagaimana baik tampilan hasil antarmuka maupun kode yang digunakan untuk menghasilkan elemen tersebut sangat berbeda. Perbedaan paling mencolok tampak pada tampilan yang dihasilkan. Karena kita tidak menambahkan CSS sendiri di sini, tampilan yang dihasilkan didapatkan dari masing-masing CSS yang telah dipaketkan oleh Widget Toolkit. Cara pembuatan elemen juga berbeda-beda. Pada jQuery UI, kita dapat melihat bagaimana elemen dibuat dari pengembangan elemen DOM hasil pengambilan melalui $("#datepicker"), sementara pada Dojo kita langsung mengubah elemen HTML-nya.

Karena perbedaan cara kerja seperti ini, kita tidak dapat dengan mudah langsung saling menggabungkan ketiga Widget Toolkit ini. Belum lagi jika pada CSS yang dipaketkan terdapat styling terhadap elemen yang sama. Hal ini lah yang terutama membedakan antara Widget Toolkit dengan library.

Framework

Framework dalam konteks perangkat lunak dapat kita definisikan sebagai berikut:

Lingkungan pengembangan perangkat lunak yang menyediakan fasilitas spesifik untuk membuat sistem baru

Sebuah framework biasanya menyediakan abstraksi yang memberikan berbagai fungsi generik. Fungsi-fungsi generik ini kemudian dapat kita ubah atau kita lengkapi untuk mengembangkan sebuah sistem baru. Dengan melengkapi dan mengubah sistem ini dengan kode kita sendiri, idealnya kita dapat menghasilkan sebuah aplikasi baru sesuai dengan kebutuhan.

Sebuah framework bukan hanya menyediakan fungsi seperti library, tetapi juga sebuah lingkungan pegnembangan. Sebuah lingkungan pengembangan biasanya disediakan framework untuk memfasilitasi kita dalam mengembangkan apliaksi. Lingkungan pengembangan dapat saja mengikut sertakan compiler, sekumpulan aplikasi pendukung, library, dan berbagai perangkat lainnya yang dapat saling bekerja sama untuk membangun sebuah solusi.

Karena banyaknya komponen dalam sebuah framework ini, sebuah framework biasanya lebih dogmatis dalam memandang cara pengembangan perangkat lunak. Dari metode interaksi sampai dengan penamaan file tidak jarang ditentukan oleh framework. Sebagai pengguna framework, biasanya kita hanya mengikuti aturan yang telah ditentukan oleh frameork, dan bekerja di dalam lingkup framework tersebut. Hal ini juga menyebabkan kita sulit menggunakan sebuah framework dengan framework lainnya secara bersamaan.

Sebuah framework memiliki beberapa ciri khas yang membedakannya dengan library pada umumnya:

  1. Inversion of Control, yaitu keadaan di mana alur kerja dari aplikasi kita dikontrol oleh framework, bukan pengguna frameowrk.
  2. Standard, di mana sebuah framework memiliki berbagai perilaku dan alur standar, dari nama file sampai alur program. Hal ini menyebabkan pengguna framework yang tidak mengikuti perkembangan awal aplikasi dapat dengan mudah terjun ke dalam pengembangan kapanpun.
  3. Extensibility, yaitu framework dapat dikembangkan atau diubah melalui mekanisme yang telah disediakan, biasnya plugin.

Spesifik terhadap dunia pengembangan web, terdapat beberapa jenis framework yang umum kita temui, yaitu:

  1. MVC (Model-View-Controller), merupakan framework yang membagi arsitektur aplikasi ke dalam 3 bagian: Model (data), View (antarmuka), dan Controller (aturan bisnis, penghubung Model dan View).
  2. Pull (Component) Based Framework, merupakan framework yang berbasis antarmuka, di mana terdapat komponen antarmuka dari framework yang kemudian menarik data dari server (kontras dengan framework umum yang mengirimkan antarmuka bersamaan dengan data).
  3. n-tier Framework, framework yang membagi-bagi aplikasi ke dalam banyak lapisan. Ukuran dan kegunaan dari lapisan sendiri tidak dibatasi.

Meskipun terdapat banyak jenis framework, pada dasarnya tujuan utama dari framework adalah untuk memfasilitasi pengembang (pengguna framework) fokus dalam mengembangkan aplikasi. Dengan menyediakan lingkungan pengembangan dan berbagai komponen, sebuah fraemwork melepaskan kita dari berbagai detil implementasi pendukung, sehingga kita dapat berfokus pada aturan bisnis dan kebutuhan perangkat lunak yang ada.

Contohnya pada sebuah framework pengembangan web, umumnya akan terdapat komponen dan mekanisme khusus untuk manajemen pengguna. Hal ini dapat membebaskan pengembang dari kode untuk menyimpan dan mengambil state pengguna, yang pada kebanyakan aplikasi adalah sama. Dengan menghindari repetisi seperti ini kita dapat berfokus kepada fitur-fitur yang ada pada kebutuhan perangkat lunak kita.

comments powered by Disqus
Kembali ke bertzzie.com