Perjalanan Buat Website Sendiri (Part 2)

Bagaimana saya membuat website hasil ikut tutorial tayang di internet? Bagaimana saya belajar JavaScript? Inilah bagian dua dari tiga potongan cerita saya membangun website blog ini.

Bagi yang ingin baca bagian lain, silakan klik tatutan di bawah:

• Bagian 1
• Bagian 3

Membuat Proyek Tutorial Ini Live

Tidak hanya berhenti di tampilan, tapi saya juga mencoba membuat hasil kerja saya bisa tayang di internet. Bagi yang bingung, jadi biasanya web developer itu akan bekerja di komputernya secara lokal. Hasil kerjanya hanya bisa ditayangkan melalui komputernya (atau mungkin juga di LAN tempat komputer itu terhubung). Situs atau aplikasi tersebut belum bisa terkoneksi dengan internet dan orang-orang tidak bisa mengaksesnya. Agar sebuah web bisa diakses, maka web tersebut perlu dijalankan di sebuah server atau host (saya kurang paham istilahnya) yang terkoneksi ke internet secara umum. Selain itu, server/host tersebut juga perlu alamat domain yang merujuk ke tempatnya berada. Domain adalah yang kita ketik di browser misalnya 'google.com' atau 'sman1-slo.sch.id'. Masalahnya adalah, dua persyaratan itu biasanya berbayar.

Inspirasi saya untuk membuat hasil tutorial saya tayang di internet datang dari informasi bahwa ada kok layanan yang menyediakan host yang gratis. Domainnya pun juga gratis yang biasanya mengikuti layanan tersebut (seperti .wordpress.com atau .blogspot.com yang sering kita temui). Untuk domain tidak masalah lah, yang penting ada ilmu baru yang bisa didapat.

Untuk Django, ada yang namanya Python Anywhere. Saya tahu mengenai situs ini dari video tutorial freeCodeCamp yang pernah saya tonton sebelum saya ikut course deep learning. Saya sebenarnya sudah belajar mengenai pemrograman termasuk web development sedari lama. Namun memang saat itu tidak terlalu fokus dan disambi banyak hal. Bisa dikatakan hasil belajar saya waktu dulu itu sangat sedikit. Kembali lagi ke Python Anywhere. Jadi situs ini menyediakan host untuk menjalankan program Python, tanpa perlu melakukan pengaturan yang terlalu rinci mengenai host. Yang menarik adalah terdapat beberapa paket harga layanan termasuk paket gratis.

Untuk Vue, saya dengan tidak sengaja menemukan situs bernama Netlify. Saya lupa bagaimana tepatnya. Kalau tidak salah di sebuah pertanyaan di kolom komentar di Youtube. Situs ini menyediakan layanan host untuk aplikasi front end. Pada saat itu, saya kurang paham mengenai perbedaan hosting back-end dan front-end. Yang jelas, situs tersebut bisa digunakan untuk hosting Vue dan punya paket layanan gratis.

Mulailah saya mencoba kedua layanan tersebut. Tidak disangka, saya mampu melakukan semua proses tanpa masalah yang berarti. Lancar-lancar saja dan kalaupun ada kendala, jawabannya mudah dicari di Google. Inti prosedurnya adalah mengunggah semua file ke repository git yang umum semacam Github, Bitbucket, atau Gitlab. Kemudian saya perlu mengakses repository tersebut dari situs Python Anywhere dan juga Netlfy, dan dalam waktu (kalau tidak salah) dua hari (satu hari untuk masing-masing bagian) saya sudah punya website saya sendiri.

Jadi apakah ini akhir perjalanan saya membuat website? Apakah situs Naftena ini sama dengan situs hasil mengikuti tutorial? Tidak! Kencangkan sabuk pengaman kalian karena perjalanan masih panjang!

Memang hasil kerja saya mengikuti tutorial sangat memuaskan (bagi saya). Namun, saya masih merasa bahwa apa yang saya lakukan itu kurang dalam keilmuannya. Saya hanya mengikuti langkah-langkah dalam tutorial. Tidak ada penentuan tujuan, pengenalan masalah, analisis, dan penentuan keputusan dalam prosesnya. Saya masih belum mendapatkan ilmu yang cukup dalam web development. Karena itu saya memutuskan untuk lebih mendalami masalah ini. Langkah pertama yang saya ambil adalah belajar JavaScript.

JavaScript: Tidak Seperti Bahasa yang Pernah Saya Gunakan

Pada awalnya saya belajar melalui video freeCodeCamp di Youtube. Ternyata, video tersebut berdasarkan kurikulum yang ada di freeCodeCamp.org. Saat dibuka, ternyata freeCodeCamp.org itu mirip dengan HackerRank. Ada petunjuk, text editor program, dan output dari program yang dimaksud. Saya lalu fokus saja mengerjakan soal-soal di sana. Terdapat dua kurikulum yang saya ikuti, yaitu yang JavaScript tadi dan Back End. Yang kedua itu juga menggunakan JavaScript jadi sekalian lebih memahamkan diri mengenai JavaScript plus back-end juga API.

Saya tidak ingat berapa lama saya mengikuti 'setifikasi gratis' freeCodeCamp. Yang jelas belajar bahasa pemrograman baru bukan hal baru bagi saya. Awalnya saya merasa JavaScript bukan bahasa yang terlalu spesial. Syntax-nya mirip dengan C. Selain itu, saya juga tidak terlalu berpikir keras saat mengerjakan soal-soalnya. Yang penting jadi, sudah. Namun, ada hal yang mengganjal. JavaScript punya yang namanya promise. Saya tidak pernah menemukan hal ini di bahasa lain yang pernah saya pelajari (mungkin sebenarnya ada hanya saya tidak tahu). Saya jadi merasa cemas karena mungkin saja itu penting dan karena itu jangan-jangan saya akan membuat program dengan error tak berujung.

Selain saya mengerjakan soal-soal freeCodeCamp, saya juga menonton video-video mengenagi JavaScript dan web development di Youtube. Akhirnya, Youtube membawa saya pada sebuah video yang menarik tentang Event Loop.

Dari sana, saya baru tahu bahwa ternyata JavaScript adalah bahasa pemrograman yang dikhususkan untuk web browser. Tujuan dari bahasa ini adalah membuat situs yang kita kunjungi bisa memiliki perilaku, tidak hanya berupa dokumen diam. Kalau HTML adalah tentang isi, kalau CSS memberi gaya pada penampilan, maka JavaScript menyuntikkan behaviour pada halaman web. Dengan pola pikir ini, maka ada konsep-konsep khusus yang perlu dimiliki JavaScript. Yang utama adalah loop. Sebuah halaman web bisa dibuka kapan saja dan tetap terbuka selama yang diinginkan oleh pengguna tentunya. Dalam hal ini, browser harus selalu siap jika pengguna ingin memberi input. Karena itu, JavaScript akan terus malakukan perputaran dan mengecek apakah ada input atau tidak. Karena itu ada event loop dan lain sebagainya. Saya sendiri kalau harus menjelaskan masih kurang paham, tapi yang jelas JavaScript beda denga Python ataupun C.

Setelah selesai dengan dua kurikulum freeCodeCamp (yea!), saya menambah ilmu dengan menonton Youtube dan baca-baca artikel tentang JavaScript. Fakta paling menarik yang saya temui waktu itu adalah asal mula JavaScript. Seperti disebutkan di atas, JavaScript ada awalnya untuk browser. Di awal era internet, terdapat beberapa badan yang mengeluarkan browser. Masing-masing punya bahasa browser mereka sendiri. Jadi dibuatlah perjanjian spesifikasi agar bahasa browser bisa digunakan semua developer. Namun, karena tentu ada beberapa pihak yang terlibat, maka terkadang ada saja yang melanggar dan membuat fitur mereka sendiri. Sehingga di zaman dulu, para developer tak jarang perlu bekerja ekstra untuk membuat website-nya bisa berjalan benar di semua browser. Di zaman sekarang, hal ini sudah tidak terlalu sulit lagi. Kerja sama antar pengembang browser sudah semakin baik, dan alat-alat untuk membuat web sudah semakin canggih yang bisa memberi support ke berbagai browser. Sekalipun ya para developer (atau orang yang belajar web) lebih baik tetap sering membaca support masing-masing browser, misalnya melalui situs MDN Web Docs atau yang belajar (seperti saya) bisa membuka W3School.

Memahami asal-usul dan prinsip kerja JavaScript sangat membantu saya untuk bisa menulis kode. Dengan memahami konsep event loop (sekalipun tidak paham-paham banget) membuat saya bisa menyusun program dengan lebih baik, kerena lebih tahu apa yang sebenarnya terjadi di belakang layar. Hal ini sangat saya rasakan, terutama saat saya mulai mengerjakan proyek web saya sendiri. Mari kita loncat dan masuk ke pembahasan pembuatan web ini.

Keputusan-keputusan yang Saya Ambil

Akhirnya kita sampai juga ke pembahasan mengenai blog ini. Dari berbagai pengalaman yang saya telah miliki dan ilmu-ilmu baru yang saya dapatkan selama fokus belajar web, saya membuat beberapa keputusan dalam pemilihan teknologi yang digunakan.

1. Menggunakan Express.js dan MongoDB. Keputusan ini saya ambil karena Django itu sangat lengkap dan rumit untuk sesuatu yang sesederhana blog. Lumayan overkill. Express dan Mongo juga yang diajarkan di freeCodeCamp, jadi saya sudah punya dasar yang baik di situ. Selain itu, konsep Express yang 'berisi hal-hal basic, kalau kurang tambah plugin' saya rasa akan membantu saya lebih memahami tentang web development khususnya masalah back-end.
2. Vue sebagai front-end. Dua pengalaman dan berakhir memuaskan (sekalipun yang pertama didahului dengan frustasi). Saat itu saya tidak merasa ingin mencoba dan belajar framework atau library lain.
3. Memakai Tailwind CSS. Hal ini saya putuskan karena saya sudah pernah memakainya dan juga alat ini akan mempercepat proses pembuatan.
4. Membuat interface sistem manajemen/admin atau CMS (content management system) dengan HTML, CSS, dan JavaScript murni. Sistem ini sekedar halaman statis yang jadi satu dengan back-end alias Express. Saya tidak menggunakan library, framework, ataupun template engine sekalipun Express mendukung penggunaannya. Hal ini saya pilih karena saya ingin lebih belajar ketiga topik tersebut sedari dasar, karena tools biasanya akan membuat kita lebih paham tools daripada konsep dasarnya. Front-end sudah pakai Vue dan Tailwind, di sana akan sulit memahami dasar-dasarnya. Lagi pula, nanti hanya saya yang lihat. Desain gaya seadanya tidak jadi masalah.

Pola pikir utama dalam membuat keputusan-keputusan tersebut adalah bahwa saya sedang belajar. Saya berusaha membuat sesuatu yang saya kira mampu saya buat, tapi juga cukup menantang sehingga saya bisa mendapat ilmu. Selain itu, saya juga ingin lebih merasakan bagaimana membuat sesuatu tanpa panduan, jadi memilih dan memutuskan sendiri.

Proses Pengerjaan Dimulai

Di awal, tidak ada yang kendala serius di bagian Express dan MongoDB. Instal Express mudah karena sudah ada Node dan NPM, sedangkan MongoDB tinggal mengikuti panduan resmi yang lumayan detail. Di sini, ilmu yang saya dapat dari freeCodeCamp lumayan berguna. Namun, harus diakui bahwa memahami konsep-konsep JavaScript seperti promise sangat memudahkan saya dalam menyusun program back-end. Promise di JavaScript terbaru dapat ditulis dengan menggunakan async-await. Syntax ini membuat kode jadi lebih rapi sehingga proses menulis jadi lebih cepat dan mudah.

Masalah paling besar justru ada pada pembuatan sistem manajemen. Saya tidak punya dasar yang cukup mengenai HTML dan CSS. JavaScript untuk browser ternyata lebih khusus dibandingkan JavaScript secara umum. Karena itu, saya sering sekali Googling, membuka StackOverflow, dan membuka W3School atau MDN Web Docs untuk bisa mengimplementasikan fitur yang ingin saya buat. Namun, tidak ada yang terlalu membuat stres. Selain karena biasanya banyak topik sudah dibahas di internet, fitur yang saya inginkan tidak ada yang fix. Jika tidak bisa dilakukan 'seperti itu' yang saya lakukan 'seperti ini'. Yang pasti, banyak sekali pengetahuan web design yang saya dapatkan dari membuat halaman statis dengan HTML, CSS, JavaScript murni.

Untuk masalah front-end, awalnya saya mencoba mendesain sendiri. Namun, desain saya selalu jelek dan kurang enak dipandang. Saya juga merasa mendesain dari awal tanpa ilmu yang cukup hanya akan membuat proses belajar kurang efektif. Karena itu saya kembali memakai template dari TailGrids. Namun (lagi), sedari awal saya pakai template tersebut, saya merasa rumit sekali. Banyak elemen yang saya tidak paham fungsinya. Saya merasa tidak terlalu mendapat ilmu, sekalipun desainnya memang bagus. Karena itu saya mencari lagi template, tapi yang lebih sederhana. Ternyata, W3School juga memberikan template untuk bermacam-macam jenis web. Saat saya lihat desain untuk yang blog, terlihat sederhana. Ternyata kodenya pun juga sederhana. Sekalipun tidak sebagus TailGrids dan tidak memakai Tailwind, saya memutuskan untuk menggunakan template ini. Memang, template ini hanya berupa satu halaman utama saja. Saya jadi punya PR untuk membuat desain untuk halaman-halaman lain. Tidak masalah, karena untuk itu bisa dibuat seadanya. Yang penting halaman utama lumayan.

Rendering Strategy

Di saat yang bersamaan, saya mendapat info mengenai Nuxt, sebuah framework modern berbasis Vue. Pada saat itu (sampai saat saya menulis artikel ini), terdapat tren baru dalam dunia front-end. Server Side Rendering (SSR) dengan hydration sedang menjadi primadona. What the hell is that? Saya merasa terganggu dan penasaran. Beberapa framework yang menggunakan SSR ini adalah Next.js, Nuxt.js, dan SvelteKit. Untuk lebih memahami tentang SSR juga hydration, saya perlu memahami mengenai konsep awalnya, konsep yang tidak saya tahu sekalipun saya sudah memakai Vue dua kali.

Seperti yang sebelumnya saya jelaskan, situs web bisa dibangun secara dinamis. Yang tidak saya pahami waktu itu adalah, tidak harus server yang menyusun halaman web tapi client (browser) juga bisa melakukannya. Konsep ini dinamakan Client Side Rendering (CSR). Konsep ini dimungkinkan dengan menggunakan library atau framework seperti React.js, Vue.js, dan Angular.js. Pada saat memahami ini, saya jadi paham: 'Oh ternyata ini yang membuat React, Vue, dan Angular itu penting'. Istilah yang juga penting adalah Single Page Application (SPA). Jadi SPA itu aplikasi web yang menggunakan konsep CSR. Dalam SPA, saat kita ingin membuka suatu situs, maka server akan mengirimkan program/aplikasi daripada dokumen halaman yang dimaksud. Setelah itu, browser akan menjalankan aplikasi itu dan menyusun dokumen sehingga halaman bisa tertampil di layar. Proses ini menggunakan AJAX untuk mendapat data dari server, atau bisa juga melakukan panggilan API untuk mendapatkan data yang tersimpan di database. Jadi misalnya kita mau berpindah dari homepage ke about, maka browser tidak harus meminta dan memuat ulang dokumen baru. Browser melalui SPA tersebut tinggal meminta data about page, membuang elemen homepage, dan 'menambal' elemen about page sesuai data yang dimaksud. Proses ini akan membuat pengalaman pengguna (user experience) menjadi lebih menyenangkan. Seperti memakai aplikasi di smartphone, terasa smooth.

Namun, terdapat masalah besar dari sistem SPA. Dengan CSR murni, maka loading situs pertama kali akan lebih lambat. Browser perlu menerima aplikasi dulu, lalu meminta data, dan menyusun halaman. Hal ini membuat search engine seperti Google akan memberi penilaian rendah ke situs tersebut. Padahal search engine optimization (SEO) memiliki andil besar dalam kepopuleran suatu situs. Salah satu penyelesaian dari masalah ini adalah SSR dengan hydration tadi.

Dengan SSR plus hydration, yang pertama kali di dapat browser adalah halaman web biasa. Halaman ini disusun terlebih dahulu oleh server, sesuai konsep SSR. Kemudian hydration akan mengubah halaman ini menjadi aplikasi semacam SPA. Jadi saat pengguna memberi input ke browser setelah itu, maka akan terjadi proses kirim-terima data, bongkar-pasang-tambal elemen, layaknya yang terjadi pada SPA.

Apakah pada akhirnya saya akan meninggalkan Vue dan beralih ke Nuxt? Sayangnya, pos ini sudah terlalu panjang dan kita akan sambung di part selanjutnya.