Bundle terpisah untuk tiap Javascript Module

Dari awal hingga saat ini (24 November 2015), Dicoding masih server-side rendered. Namun seiring jalan, jumlah kode Javascript semakin meningkat.

Pada awalnya, semua kode javascript berada di dicoding.js. Jika diperlukan, kode javascript juga akan ditulis di blade template.

Ada beberapa masalah dari pendekatan di atas.

  1. Ketika dicoding.com dibuka, semua javascript kode di load. Termasuk kode javascript yang tidak diperlukan.
  2. Kode javascript yang ada di blade template, tidak di-minify. Konsekuensinya ukuran halaman jadi lebih besar.

Untuk mengatasi dua masalah tersebut, kami memutuskan untuk memisahkan kode javascript ke module-module yang terpisah dan membundlenya secara terpisah pula.

Misal, kita membutuhkan kode javascript yang khusus untuk form pembuatan Challenge, mengubah Challenge, membuat event, dsb. Daripada menggabungkan semua kode tersebut di dalam dicoding.js, maka kami pecah ke module yang terpisah: challengecreation/script.js, challengeedit/script.js, event/script.js, dst.

Namun untuk menerapkan pendekatan di atas, kami membuat syarat sebagai berikut:

  1. Ada struktur direktori yang harus dipatuhi. Semua module ditaruh di resources/components. Sebagai contoh: resources/components/challengecreation/script.js.
  2. Berkas javascript bernama script.js. Berkas css bernama style.css.

Pembuatan aturan seperti di atas memudahkan kami untuk:

  1. Melakukan proses build menggunakan gulp: uglify, minify
  2. Load bundle di blade template.

Berikut ini, kami akan menjelaskan dua mekanisme di atas.

Gulpfile

Berikut adalah script gulpfile yang berhubungan dengan point 1.

Dan berikut adalah isi dari componentTask.js

Jadi, build step untuk module-module javascript dan css, akan dijalankan oleh task component. Task ini akan memantau perubahan pada folder resources/components. Bila terjadi perubahan pada salah satu berkas di alamat tersebut, maka metode buildComponent akan dijalankan.

Metode buildComponent akan memeriksa apakah berkas yang berubah adalah berkas javascript atau berkas css. Disinilah keuntungan dari adanya aturan struktur sebelumnya (semua berkas javascript bernama script.js, dan semua berkas css bernama style.css). Dengan aturan ini, kita tinggal memeriksa apakah pada berkas yang berubah terdapat string script.js atau style.css.

Bila pada berkas yang berubah terdapat string script.js, maka berkas tersebut adalah berkas javascript. Kita tinggal menjalankan fungsi buildScriptComponent.

Sementara bila berkas tadi mengandung style.css, maka ia adalah sebuah berkas css. Dan metode buildStyleComponent akan dijalankan.

Di dalam dua metode build di atas, terdapat tugas-tugas build yang berbeda. Namun garis besarnya adalah:

  1. Optimalkan ukuran.
  2. Pindahkan ke direktori build.
  3. Buat versioning untuk hasil build.

Untuk mengetahui output dari proses build di atas, kita dapat mengumpakan sebuah berkas resources/components/challengecreation/script.js. Hasil build untuk berkas tersebut adalah public/js/challengecreation_script-xxxxx.js. Nilai dari xxxxx akan tergantung pada versioning yang dilakukan oleh rev().

Hal yang sama berlaku untuk berkas css. Berkas resources/components/challengecreation/style.css akan di-build menjadi public/js/challengecreation_style-xxxxx.css.

Loading Bundle di Blade

Bagaimana cara memanggil bundle tadi dari blade?

Pada dasarnya, tiap berkas yang sudah di-build, direkam versioningnya di berkas rev-manifest.json. Contohnya:

Di blade, bila kita ingin mengambil module challengecreation_script di atas, kita tinggal menjalankan dComponent:

Bundling Ke Depannya

Kami di Dicoding memiliki rencana untuk menggunakan Ecmascript 201(5|6). Kami belum mencobanya, namun sepertinya proses bundling ini bisa menjadi lebih mantab karena sudah adanya mekanisme import untuk javascript.

Kami juga sudah bermain-main menggunakan vue.js. Konsep vueify sangat menarik, karena di dalam satu berkas, terdapat definisi template, style dan script. Dengan menggabungkan vueify ke dalam metode buildComponent di atas, proses buildnya bisa jadi lebih sederhana.

Namun dua hal di atas, dan ditambah kegatelan lainnya untuk urusan front-end, adalah rencana pengembangan kedepannya. Adakah yang tertarik untuk membantu kami dalam mengembangkan front end di Dicoding? Dicoding mencari tim baru lo :D (http://bit.ly/1PWsLYF)

Demikian adalah cara kami di Dicoding menerapkan bundling di Dicoding. Apakah teman-teman juga menerapkan mekanisme bundling dan loading bundle? Kami berharap teman-teman mau berbagi pendekatannya. :D

Terimakasih. Selamat berkarya.