Sebelum membahas lebih dalam, mari kita lihat apa sih perbedaan antara kode dieksekusi secara Synchronous dan kode dieksekusi secara Asynchronous.
Synchronous JavaScript
Seperti namanya, Synchronous memiliki arti secara berurutan. Setiap baris kode dieksekusi satu per satu. Jadi, sebuah statement harus menunggu statement sebelumnya terlebih dulu selesai, barulah dapat dieksekusi.
Contoh, perhatikan kode di bawah ini:
<script>
document.write("Halo"); // Pertama
document.write("<br>");
document.write("PHPMaker") ; // Kedua
document.write("<br>");
document.write("Apa kabar?"); // Ketiga
</script>
Jika kode di atas dijalankan, maka hasilnya akan menjadi seperti ini:
Halo
PHPMaker
Apa kabar?
Dari potongan kode tadi, kode pada bagian pertama yaitu Halo akan dicatat pertama, lalu lanjut ke bagian kedua yang menampilkan tulisan PHPMaker akan dicatat, kemudian setelah selesai kedua baris tadi, maka kode pada bagian ketiga yang akan dieksekusi yaitu: Apa kabar?
Jadi, kode dieksekusi secara berurutan. Setiap baris kode menunggu kode sebelumnya dieksekusi terlebih dulu, barulah kode yang bertalian dieksekusi.
Asynchronous JavaScript
Asynchronous Code mengijinkan program dieksekusi seketika, dan mari langsung kita bandingkan dengan Synchronous Code; yang akan memblok eksekusi kode berikutnya sampai dia menyelesaikan kodenya sendiri dieksekusi.
Sekilas, Synchronous Code bukanlah menjadi masalah, tapi ketika kita lihat gambaran besarnya, barulah kita menyadari bahwa hal ini akan mengakibatkan tertundanya Antar Muka Aplikasi dimuat/ditampilkan ke hadapan Pengguna Akhir aplikasi web.
Sekarang, mari kita lihat contoh bagaimana Asynchronous JavaScript berjalan.
<script>
document.write("Hai");
document.write("<br>");
setTimeout(() => {
document.write("Mari kita lihat apa yang terjadi");
}, 2000);
document.write("<br>");
document.write("Selesai");
document.write("<br>");
</script>
Jika dijalankan, maka akan menghasilkan sebagai berikut:
Hai
Selesai
Mari kita lihat apa yang terjadi
Pertama, kode akan menampilkan Hai lalu tanpa harus menunggu selesainya fungsi setTimeout
yang akan menunggu sekitar 2 detik baru selesai, sistem akan langsung menampilkan tulisan Selesai terlebih dulu, barulah menyelesaikan fungsi setTimeout
tadi.
Karena kita memakai browser untuk menjalankan JavaScript, maka ada web API yang menangani hal ini untuk Pengguna. Jadi, yang dilakukan oleh JavaScript adalah, dia melewatkan fungsi setTimeout
melalui penggunaan web API, kemudian kita tetap menjalankan kode seperti biasa.
Jadi, dia tidak memblok sisa kode untuk dijalankan, tapi dia mendorong ke call stack lalu pada akhirnya mengeksekusinya. Inilah yang terjadi pada kode JavaScript yang dijalankan secara Asynchronous. Dampaknya, tidak terjadi penundaan tampilan di sisi antar muka Aplikasi Web.
Kembali ke PHPMaker!
Dari penjelasan mengenai perbedaan antara Synchronous dan Asynchronous di atas, maka PHPMaker menggunakan Javascript yang dijalankan secara Asynchronous. Sejak dulu sampai sekarang.
Itulah kenapa pada aplikasi web yang dihasilkan oleh PHPMaker, kita melihat proses render elemen-elemen di suatu halaman terlihat dengan jelas di browser Pengguna. Kode Javascript dieksekusi seketika tanpa harus menunggu kode yang lainnya selesai dijalankan.
Kemungkinan terburuk yang pernah terjadi jika kode Javascript tidak dimuat secara Asynchronous adalah, script akan memblok proses memuat keseluruhan halaman website karena menunggu waktu yang sangat lama untuk memastikan file-file Javascript dan CSS yang dibutuhkan aplikasi web dimuat seluruhnya.
Hanya saja, bedanya, sejak versi 2021, PHPMaker menggunakan teknik khusus untuk memastikan setiap kode Javascript yang terkait dengan jQuery misalnya, dimuat setelah jQuery itu sendiri selesai dimuat.
Mari kita lihat contoh di bawah ini:
<script>
loadjs.ready("jquery", function() {
// kode berikut dijalankan setelah jquery berhasil dimuat oleh system
// ...
});
</script>
Kode di atas artinya, kita memastikan bahwa jQuery sudah dimuat terlebih dulu sebelum kode yang kita tulis bisa dieksekusi. Mengapa? Karena dalam hal ini kode kita tersebut tergantung dengan jQuery.
Tidak hanya itu saja. Sering kali kita ingin memastikan bahwa suatu Javascript Library yang kita gunakan sangat tergantung dengan beberapa file .js sekaligus, dan ini harus dimuat dalam satu paket. Tidak boleh dipisahkan.
Contoh, paket tersebut kita sebut dengan identitas yang unik yaitu jqueryinputmask, maka, kita bisa menggunakan kode seperti ini untuk memuat dua file .js yang saling terkait:
<script>
ew.ready("head", [
ew.PATH_BASE + "jquery/jquery.inputmask.min.js",
ew.PATH_BASE + "jquery/msjqueryinputmask.js"
], "jqueryinputmask");
</script>
Perhatikanlah bahwa dengan kode tadi, maka kedua file .js dimuat sekaligus di bagian head dari aplikasi web, ditandai dengan nama jqueryinputmask.
Nah, identitas jqueryinputmask ini selanjutnya akan digunakan pada kode Javascript di file yang dibangkitkan oleh PHPMaker, untuk mengeksekusi fungsi-fungsi terkait di dalam kedua file .js tadi. Kira-kira begitulah maksudnya.
Mungkin timbul pertanyaan, mengapa teknik tersebut baru digunakan sejak PHPMaker versi 2021?
Jawabannya, karena di versi 2020 dan sebelumnya, kadang-kadang (tidak selalu) terjadi isu dalam menampilkan item menu di bagian Sidebar yang tidak semuanya muncul. Bagi yang pernah menggunakan versi 2020, pasti pernah mengalami kejadian tersebut.
Untuk mengatasi isu tadi, maka Developer PHPMaker sepertinya mencari cara bagaimana memuat beberapa file Javascript yang saling terkait. Dengan cara ini pulalah, kita menjadi tahu, sebuah file Javascript terkait dengan, atau bergantung kepada satu atau beberapa file Javascript lainnya.
Itulah sebabnya sejak versi 2021 (sampai sekarang), PHPMaker tetap mempertahankan menggunakan teknik penulisan kode seperti yang sudah dijelaskan di atas tadi, yaitu menggunakan loadjs.ready atau ew.ready (tergantung case-nya).
Nah, ini yang sepertinya belum banyak diketahui oleh Web Developer yang menggunakan PHPMaker untuk membuat aplikasi web. Jadi, jika Anda sudah membaca artikel ini, maka tidak ada alasan lagi Anda tidak mengetahui perubahan tersebut.
Sedangkan untuk menjawab pertanyaan utama pada judul artikel ini, maka jawabannya adalah karena PHPMaker tidak ingin membuat kesan buruk terjadinya delay saat menampilkan antar muka di aplikasi web yang dihasilkan olehnya.
Jadi, sudah tahu sekarang kan? Mengapa PHPMaker menggunakan Asynchronous Javascript (termasuk juga untuk Stylesheet CSS). PHPMaker tidak ingin menunggu semua kode Javascript dimuat seluruhnya terlebih dulu, barulah semua antar muka aplikasi web dimunculkan.
Itulah alasan utama mengapa mereka sejak dulu sampai sekarang menggunakan Asynchronous Javascript. Bedanya sejak versi 2021, mereka menggunakan teknik khusus untuk memastikan kode Javascript yang terkait dapat dimuat sesuai dengan dependency-nya masing-masing.
Saya yakin, mereka menggunakan teknik loadjs maupun ew.ready di atas tadi, karena saya melihat dan merasakan langsung perubahan yang terjadi sejak versi 2021 untuk mengatasi isu pada versi 2020 dan versi-versi sebelumnya.
Dan memang terbukti, sejak versi 2021 sampai sekarang, PHPMaker tidak pernah lagi mengalami isu seperti yang terjadi pada aplikasi web yang dihasilkan oleh versi 2020.
Tinggalkan Balasan