Akhir – akhir ini Javascript begitu tumbuh subur. Saking suburnya, kita kadang dibuat bingung dengan munculnya berbagai macam librari, framework, task runner, module bundler, transpiler dan lain sebagainya. Javascript rupanya semakin matang sampai – sampai merambah ke domain server seperti NodeJS. NodeJS membantah teori bahwa Javascript hanya bisa berjalan di client. Sekarang Javascript sudah bisa dikategorikan sebagai bahasa scripting client-server.

Kita mungkin sudah mengenal beberapa framework seperti jQuery, dojo, ExtJS, Angular, Backbone, Ember, React. Untuk membahas pemilihan framework penulis rasa bukan kendala, karena pilihan tersebut lebih banyak menitikberatkan pada kebutuhan dan selera.

Sebagian dari kita mungkin sudah paham dan sudah menggunakan apa itu npm, bower, grunt, gulp, browserify, webpack, jspm. Namun, sebagian lagi belum bahkan masih bingung untuk apa tools itu. Di artikel ini penulis mencoba mengenalkan mereka dalam bentuk cerita. Jadi, di artikel ini tidak akan ada potongan – potongan script, tips atau trik. Yang ada, kita akan bercerita tentang sebuah kronologi. Dari kronologi tersebut, kita akan dapat menyimpulkan dan memahami penggunaan tools yang penulis sebutkan di atas.

Dulu, kita menggunakan Javascript di dalam aplikasi hanya seperlunya misal hanya untuk memunculkan pesan alert dan itupun javascript disisipkan langsung bersama – sama dengan HTML (inlining). Penggunaan Javascript pada saat itu masih jarang, bahkan programmer terkesan skeptis jika harus berhadapan dengan Javascript. Entah, mungkin karena dialek – dialek Javascript yang kurang familiar dan kurang user friendly.

Selang beberapa waktu, muncul berbagai macam framework dan yang paling terkenal ada namanya jQuery. Munculnya jQuery membawa perubahan cukup drastis dalam penggunaan Javascript. Kita dimudahkan untuk melakukan manipulasi DOM, animasi, ajax dan fitur lain yang sebenernya sudah ada native-nya. Pada saat itu, Javascript bukan lagi sebaris atau dua baris lagi bahkan dituliskan khusus dalam sebuah file sendiri berekstensi *.js. Penulisan HTML ataupun bahasa server-side berkurang drastis. Dalam hal ini, Javascript mencapai checkpoint pertamanya bangun dari keterpurukan.

Kemudian, muncul masalah klasik ketika sebuah aplikasi dibangun dalam skala besar maka tidak efisien jika aplikasi hanya dituliskan dalam satu file dengan jumlah baris yang begitu banyak (^10.000 baris). Aplikasi sebaiknya dipecah menjadi beberapa module (file) sehingga dapat dikerjakan oleh beberapa tim (orang). Namun, bagaimana untuk menyatukan module – module yang saling terkait (ketergantungan) dan memastikan bahwa hanya module yang dibutuhkan saja yang di-load sehingga dapat meningkatkan performa loading time-nya? Lalu, munculah teknologi Asynchronous Module Definition (AMD). Dengan teknologi ini, kita dapat me-load module yang dibutuhkan saja secara asynchronous (lazyload) sehingga mengurangi proses blocking user-interface dan memastikan tidak ada redudancy. Di level ini, kita ada librari seperti RequireJS yang dapat digunakan secara independen (tidak terpaku pada framework yang digunakan). Untuk fullstack framework seperti dojo atau ExtJS mereka juga memiliki AMD Loader bawaan seperti Ext.require() untuk ExtJS dan require() untuk dojo.

Dengan adanya AMD ini proses development aplikasi berjalan cukup efisien. Namun, muncul masalah lagi di sisi client ketika aplikasi menuju production stage. Tipikal dari AMD Loader adalah akan melakukan loading module dependencies via HTTP Request yang tentu saja akan menjadi boros di sisi bandwidth dan bahkan memperlambat proses rendering. Selain itu, untuk meningkatkan performa diperlukan juga adanya kompresi file (minify). Seperti dua sisi mata uang bukan? Kita memerlukan tools yang dapat menyatukan beberapa module sekaligus meng-kompresinya sehingga meminimalisir request HTTP. Untuk fullstack framework seperti ExtJS, dojo dan lain sebagainya mereka sudah menyediakan semacam module bundler sendiri. Namun, bagaimana dengan nasib pengguna non-fullstack framework seperti jQuery yang hanya memanfaatkan RequireJS?.

Bersamaan dengan itu, munculah NodeJS di ranah server yang juga menggunakan dialek require yang mengadopsi CommonJS untuk AMD Loader-nya. Kemunculan NodeJS merubah mindset kita dalam memandang Javascript. Banyak aplikasi maupun tools kemudian dikembangkan berbasis NodeJS. Hal ini karena kemampuanya diluar batasan Javascript client seperti akses ke file-system, socket/port, dll. Ini merupakan checkpoint kedua kebangkitan Javascript.

Munculnya NodeJS ini rupanya mampu menjawab masalah kita di atas dan bahkan lebih dari itu. Banyak tools kemudian dikembangkan berbasis NodeJS untuk menjawab permasalahan tersebut. Apa saja?

Package Manager

Tools ini bekerja di hanya dilingkungan NodeJS. Digunakan untuk meng-install module/paket/librari yang dibutuhkan dalam aplikasi, namun tidak ada hubungannya dalam menentukan struktur aplikasi. Pakcage Manager hanya memastikan bahwa librari-librari yang dibutuhkan sesuai dengan kebutuhan dan kompatibel. Dengan adanya package manager ini kemudian banyak aplikasi dikembangkan di lingkungan NodeJS. Di level ini ada npm dan bower.

Task Runner

Task Runner merupakan tool yang dapat digunakan untuk melakukan otomasi pekerjaan seperti menggabungkan (concat) beberapa file, kemudian mengkompresinya menjadi satu file bundler yang siap untuk production. Kita juga dapat menambahkan pekerjaan – pekerjaan lain seperti profiling dan lain sebagainya. Di level ini ada grunt dan gulp.

Module Bundler

Perkembangan selanjutnya, banyak kemudian aplikasi dibangun di dalam lingkungan NodeJS. Teknik – teknik AMD yang dulu menggunakan RequireJS kemudian di-porting ke lingkungan NodeJS menggunakan Webpack, SystemJS atau Browserify. Librari tersebut menyediakan fasilitas development dalam format AMD, browser dan NodeJS sekaligus. Selain itu, librari tersebut juga memiliki kemampuan melakukan bundler yang dapat menjadikan aplikasi yang dibangun di lingkungan NodeJS dapat dijalankan di lingkungan browser. Ingat, fungsi – fungsi seperti require() atau import tidak bisa serta merta langsung digunakan di browser, makanya perlu di-bundler.

Kesimpulan

Banyaknya pilihan tools baiknya tidak menjadi kita bingung jika kita mengetahui kronologi kebutuhannya.

Advertisements