Pengenalan

Pengembangan web modern melibatkan sangat banyak bahasa pemrograman dan sistem. Pada sisi klien (front end) saja misalnya, secara standar kita memerlukan tiga bahasa pemrograman untuk membangun antarmuka aplikasi: HTML, CSS, dan Javascript. Masalah yang biasanya muncul ketika mengembangkan aplikasi seperti ini adalah manajemen file. Ketika mengembangkan aplikasi besar, ledakan jumlah file HTML, CSS, dan Javascript tidak dapat dihindari. Tidak cukup sampai di sana, berdasarkan best practice yang dikenal luas [1], idealnya kita harus meminimalkan ukuran file dan menggabungkan masing-masing jenis file (Javascript dan CSS) menjadi 1 file saja. Kalau pada bahasa pemrograman lain terdapat compiler atau build tools yang membantu kita melakukan hal ini, Javascript (maupun CSS dan HTML) tidak memiliki dukungan tools serupa secara standar.

Untungnya, para pengembang Javascript sendiri menyadari hal ini dan telah mengembangkan berbagai tools untuk membantu kita dalam melakukan manajemen file maupun hal-hal lainnya yang mempercepat pengembangan. Bagian ini akan membahas beberapa tools yang dapat digunakan untuk hal ini, beserta cara instalasi dan penggunaannya.

NodeJS

Sebelum mulai menggunakan tools yang diberikan, kita akan terlebih dahulu melakukan instalasi NodeJS. NodeJS adalah sebuah platform pengembangan perangkat lunak Javascript yang berjalan di luar browser. Sepintas NodeJS memiliki manfaat yang sama seperti Java Runtime Environment (JRE), yang merupakan tempat berjalannya aplikasi yang dibangun dengan bahasa pemrograman Java. Jika JRE dibutuhkan untuk menjalankan aplikasi Java, maka NodeJS dibutuhkan untuk menjalankan aplikasi Javascript yang dibangun untuk NodeJS.

Langsung saja, berikut adalah langkah demi langkah instalasi NodeJS pada sistem operasi Windows:

  1. Ambil perangkat lunak NodeJS dari website resminya di http://nodejs.org/, melalui tombol install yang disediakan.
_images/0-Web.PNG
  1. Jalankan installer yang baru didapatkan, untuk melihat tampilan seperti gambar di bawah, dan tekan tombol “Next”.
_images/1-WizardStart.PNG
  1. Pastikan checkbox “I accept the terms in the Lincense Agreement” telah di cek, kemudian tekan “Next”.
_images/2-EULA.PNG
  1. Tentukan lokasi instalasi (disarankan untuk tidak mengubah apa yang disediakan sistem di sini), kemudian tekan “Next”.
_images/3-InstallPath.PNG
  1. Pada langkah selanjutnya, kita tidak perlu melakukan apa-apa, tetapi pastikan bagian “Add to PATH” terpilih dengan benar (lihat bagian yang diberi warna merah pada gambar). Tekan “Next”.
_images/4-CustomSetup(PATH).PNG
  1. Tunggu proses instalasi hingga selsai.
_images/5-Installing.PNG
  1. Setelah proses selesai, tekan “Finish”.
_images/6-Finish.PNG
  1. Jalankan perintah node --version pada CMD. Jika NodeJS terpasang dengan benar, sistem akan mengembalikan nomor versi.
_images/7-Test.PNG

Instalasi NodeJS juga menyertakan sebuah perangkat lunak lain, yaitu npm. npm merupakan perangkat lunak manajemen paket, yang membantu kita dalam melakukan instalasi library maupun perangkat lunak lain yang berjalan di atas NodeJS. Berbagai perangkat lunak pendukung yang akan kita gunakan nanti akan diinstalasi dengan menggunakan npm.

Build Tools

Build tools merupakan perangkat lunak yang membantu kita dalam melakukan otomasi manajemen file. Biasanya kita hanya perlu memberitahukan kepada build tools file mana yang ingin dikompilasi, dipindahkan, dan sejenisnya. Setelah memberitahukan bagaimana manajemen file yang kita inginkan, kita cukup memanggil build tools untuk menjalankan tugas-tugas tersebut secara otomatis.

Terdapat sangat banyak build tools pada platform NodeJS, contohnya: GruntJS, Mimosa, Gulp, dan lainnya. Pada tulisan ini kita hanya akan menggunakan Gulp saja, karena pembahasan akan keseluruhan build tools tidak akan memungkinkan.

Instalasi Gulp dapat dilakukan dengan menjalankan perintah npm install gulp:

_images/0-NPM.PNG

Untuk mempermudah dalam mempelajari penggunaan Gulp, kita akan melakukan studi kasus. Misalkan kita sedang mengembangkan sebuah website sederhana dengan struktur file seperti berikut:

_images/1-FileTree.PNG

Asumsikan kita ingin menggabungkan semua file Javascript yang ada dalam direktori scripts serta file CSS yang ada dalam direktori styles menjadi satu. File Javascript akan kita gabungkan menjadi file scripts.js dan disimpan dalam direktori js. File CSS akan digabung menjadi file styles.css dan disimpan dalam direktori css.

Untuk memberitahukan Gulp apa yang akan kita lakukan, kita harus membuat sebuah file khusus yang dikenali Gulp terlebih dahulu. File ini harus bernama gulpfile.js, dan harus diletakkan di direktori utama proyek. Dalam kasus ini, kita harus membuat gulpfile.js di dalam direktori tempat index.html berada. Isi dari gulpfile.js sangat sederhana, hanya melakukan inisialisasi data:

1
2
3
4
5
var gulp = require('gulp');

gulp.task('default', function () {
    // masukkan perintah gulp di sini
});

Terdapat lima perintah utama yang dapat kita berikan kepada Gulp, yaitu:

  1. gulp.task(name, fn): yang telah kita gunakan pada kode di atas. Membuat perintah baru untuk Gulp ketika dipanggil melalui command line nantinya. Parameter name merupakan nama dari task yang dibuat, sementara fn adalah fungsi yang dijalankan ketika task dipanggil.
  2. gulp.run(tasks...): menjalankan satu atau lebih task yang dibuat menggunakan gulp.task melalui kode (programmatically).
  3. gulp.watch(glob, fn): melakukan eksekusi fungsi fn ketika file yang dispesifikasikan oleh glob berubah isinya.
  4. gulp.src(glob): membaca file yang memenuhi syarat sesuai spesifikasi glob dan kemudian mengembalikan file tersebut satu per satu untuk kemudian diproses.
  5. gulp.dest(folder): file yang dikirimkan ke perintah ini akan disimpan di dalam folder.

Selain kelima perintah di atas, Gulp menyediakan satu perintah pendukung lagi, yaitu pipe(fn). Perintah pipe merupakan saluran penghubung antar dua perintah, yang pada dasarnya memberikan fasilitas untuk menjalankan satu perintah setelah perintah sebelumnya dijalankan.

Agar lebih mudah pahami, kita akan langsung melihat contoh penggunaan beberapa perintah di atas. Sebagai langkah pertama, katakan lah kita akan melakukan kopi seluruh file Javascript dari scripts ke js. Ganti isi file glupfile.js menjadi seperti berikut:

1
2
3
4
5
6
7
8
var gulp = require('gulp');

var scriptFiles = './scripts/**/*.js';

gulp.task('default', function () {
    gulp.src(scriptFiles)
        .pipe(gulp.dest('./js/'));
});

Pada kode di atas, kita menggunakan perintah gulp.src dan gulp.dest secara berurutan. Kedua perintah ini dihubungkan oleh pipe. Untuk melakukan eksekusi task di atas, jalankan perintah glup dari command line.

_images/2-GulpExecute.PNG

Bagaimana jika kita ingin menggabungkan file atau meminimalkan file? Untuk berbagai tugas tambahan seperti itu, kita dapat menggunakan tambahan perintah dari pihak ketiga. Jalankan perintah berikut untuk memasang perintah baru dari pihak ketiga:

1
$ npm install gulp-concat gulp-uglify

Perintah di atas melakukan instalasi terhadap dua perintah dari pihak ketiga: gulp-concat untuk menggabungkan file, dan gulp-uglify untuk meminimalkan kode. Cara penggunaannya juga sangat sederhana:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var gulp   = require('gulp');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');

    var scriptFiles = './scripts/**/*.js';

    gulp.task('default', function () {
        gulp.src(scriptFiles)
            .pipe(concat('scripts.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./js/'));
    });

Cukup gamblang dan sederhana. Kita hanya melakukan impor modul, dan kemudian menggunakan modul tersebut (fungsi concat() dan uglify()) melalui pipe. Kesederhanaan ini merupakan daya tarik utama dari Gulp, sebagai sebuah build tools yang sederhana sekaligus sangat bermanfaat. Penggabungan dan minifikasi file CSS diserahkan kepada pembaca sebagai latihan.

Penguji HTTP Request

Ketika kita mengembangkan aplikasi web dinamis, seringkali kita akan berhubungan dengan server. Hubungan dengan server ini biasanya dilakukan secara dinamis, dengan menggunakan teknologi seperti XMLHttpRequest atau WebSocket. Untuk memudahkan kita dalam menguji apakah server memberikan data yang tepat atau sesuai dengan yang kita inginkan, kita dapat menggunakan tools yang dapat mengirimkan permintaan ke server, dengan format yang kita inginkan.

Beberapa tools yang dapat digunakan untuk kepentingan ini yaitu:

  1. Advanced REST Client (Chrome)
  2. REST Client (Firefox)

Kedua tools di atas cukup sederhana dan mudah digunakan. Kita hanya perlu memasukkan URL yang akan kita uji, beserta dengan method HTTP-nya. Program kemudian akan menampilkan data yang diberikan dari server, dan kita dapat langsung memastikan apakah format yang diberikan sudah benar atau tidak. Hal ini akan sangat memudahkan kita ketika ingin berbicara degnan server.

Catatan Kaki

[1]Berdasarkan best practice yang dipublikasi oleh Yahoo, YSlow: https://developer.yahoo.com/performance/rules.html
comments powered by Disqus
Kembali ke bertzzie.com