Sebab utama

Antara sebab utama saya mengambil inisiatif untuk mengubah keseluruhan layout blog ini adalah:

• Pengurusan kod (Code maintainability)
• UI dan persembahan grafik yang lebih fresh dan clean
• Berubah kepada web hosting server provider yang baru

Untuk entri kali ini, saya akan menyentuh point yang pertama terlebih dahulu. Dan selebihnya, akan saya kupas dengan lebih lanjut di dalam entri yang lain pula.

Tanpa membuang masa, kita pergi ke point yang pertama!

Pengurusan kod (code maintainability)

Untuk memastikan sebuah website / aplikasi yang di bina berada dalam tahap yang terbaik, pengurusan kod untuk membina suatu perisian itu haruslah mencapai piawaian yang baik untuk tujuan penyelengaraan dan penambahbaikan di masa yang akan datang.

Sebelum ini, blog fvtrx ini dibina menggunakan Gatsby.js sebagai front-end framework yang dipilih. Dan ia juga mempunyai sokongan GraphQL sebagai storan untuk menyimpan data entri-entri blog di dalam fvtrx tanpa perlu membangunkan sebuah database (sebuah storan data) seperti MySQL, Microsoft SQL dan lain-lain.

GatsbyJS sendiri adalah web framework yang menggunakan React, sebuah lagi framework yang dibina menggunakan JavaScript sebagai bahasa pengantara untuk menghubungkan command kepada komputer untuk diterjemahkan dalam bentuk visual, seperti yang anda lihat di semua laman web yang pernah anda layari sebelum ini.

Namun, selepas beberapa bulan saya menggunakan teknologi GatsbyJS. Saya mula menyedari akan darjah kesukaran yang telah saya alami untuk memahami struktur code yang saya sendiri dah tulis untuk blog fvtrx sebelum ini. Percubaan untuk mengubahsuai blog fvtrx menjadi serabut ketika mana saya mengalami kekeliruan ketika menggunakan GatsbyJS. Semuanya berkecamuk!

Serabut yang amat. Seperti di atas.. 😂

Ia juga berpunca dari kesalahan saya yang sebelum ini, hanya belajar dari copy and paste kod orang lain. Tanpa memahami struktur dan asas untuk teknologi GatsbyJS itu sendiri. Dan codebase saya juga berkecamuk dengan pelbagai component, template dan jenis file yang bercampur aduk. Sekejap guna file JavaScript, sekejap guna TypeScript.

Dari situ, saya tekad untuk mempelajari sebuah web framework yang lebih mudah untuk difahami. Serta tak begitu memeningkan kepala. Oleh itu, saya telah menjumpai NextJS untuk dijadikan sebagai programming framework bagi membina blog fvtrx ini from scratch. Mula balik semula.

NextJS sebagai framework baru.

Jadi, apa itu NextJS? Huraian nya adalah seperti berikut:

Next.js is a React Framework, with server side rendering capabilities and also all the other features you need for production. Without little or no any configuration. 😉

NextJS memberikan para developers keupayaan untuk membina aplikasi web dengan keupayaan 'server side rendering' tanpa konfigurasi tambahan yang memeningkan. Dalam erti kata lain, masa yang diambil untuk memaparkan keseluruhan web page akan menjadi lebih pantas berbanding biasa apabila aplikasi tersebut di bina dengan menggunakan NextJS.

Dan untuk pengetahuan anda, anda mungkin perasan yang ketika mana anda melayari blog ini, anda tidak pernah reload page walau sekalipun ketika melayari blog ini bukan?

Seperti yang anda lihat ketika ini, blog ini merupakan sebuah Single Page Application (SPA), iaitu sebuah aplikasi web yang dibina menggunakan bahasa pengaturcaraan JavaScript.

Ini adalah antara ciri yang terdapat di dalam blog fvtrx ketika ia dibina dengan menggunakan NextJS sebagai SPA. Ia berinteraksi dengan pelayar Internet (browser) hanya dengan menggantikan data pada web tersebut, menyebabkan ia tidak memerlukan anda untuk 'reload page' ketika anda cuba untuk mengakses ke mana-mana page yang terdapat di dalam blog ini.

Kebiasaannya SPA adalah lebih pantas daripada laman web tradisional kerana fail-fail HTML, CSS dan JavaScript hanya dimuatkan sekali sahaja sepanjang sesi anda melayari web tersebut; hanya data dan fail media sahaja yang dimuat semula oleh pelayar. Data kebiasaannya mempunyai saiz payload yang kecil dan selalunya tidak menjadi masalah bagi kepantasan Internet yang biasa-biasa.

Omar Mokhtar (omvr.io), 2020

Saya juga mendapati, selepas sahaja saya beralih dari GatsbyJS kepada NextJS. Code structure menjadi lebih kemas, lebih teratur dan mudah untuk difahami dari setiap component, templates, logic functions yang telah saya tulis untuk menghasilkan reboot bagi blog ini.

Sebagai contoh, anda boleh melihat code snippets seperti tertera di bawah:

Lebih kemas, lebih teratur untuk dibaca dan difahami 👍🏻

---

Sampai di sini sahaja terlebih dahulu. Nantikan bahagian kedua dan ketiga untuk entri ini di masa yang akan datang.

Terima kasih kerana sudi membaca!

Abdullah Fitri