Teknologi Dibalik Multinity

Teknologi Nov 05, 2020

Multinity mengedepankan kecepatan dan antarmuka yang baik dan nyaman dipandang dan digunakan.

Kecepatan di sini soal critical rendering path, bagaimana web secepat mungkin di-render oleh browser menjadi sekumpulan piksel di layar pengguna. Hal ini melibatkan beberapa aspek, mulai dari coding style hingga server yang meladeni client.

Selain kecepatan web perforamce, juga kecepatan development time. Multinity hanya memiliki seorang web developer. Ini juga yang menjadi tantangan, bagaimana semuanya bisa diselesaikan dengan cepat oleh satu orang dan bisa menghasilkan performance yang cepat juga.

Front-end

Hal yang pertama kali saya pikirkan adalah SPA dengan client-side routing yang memungkinkan pengguna dapat beralih dari satu halaman ke halaman lain dengan cepat. Karena browser hanya perlu memuat bagian-bagian yang perlu dimuat saja, tidak semua dimuat.

Kerangkakerja SPA di JavaScript itu banyak, namun saya memilih React karena semua kodenya saya tulis semua dari awal, mulai dari HTTP client, data bindings, hingga error handling. Ini yang akan memudahkan saya untuk debugging nanti.

React secara bawaan menggunakan metode client-side rendering, artinya server mengirim respons yang minimal dan di dalamnya terdapat kode JavaScript, sisanya biarkan browser bekerja.

Teknik ini tidak bagus untuk SEO, karena respons HTML tidak sepenuhnya dikirim dari server, melainkan harus menunggu browser selesai melakukan proses rendering.

Saya tahu, hal ini bisa diatasi dengan library semacam react-snap. Tapi, itu bukan hal yang saya suka.

Saya sudah terbiasa dengan Next.js, jadi saya init proyek Multinity dengan Next.js. Untuk UI saya pakai template dengan beberapa kustomisasi lainnya agar sesuai dengan image Multinity. Fun fact, saya lebih banyak melakukan kustomisasi~

Alur kerja proyek di Multinity jadinya seperti ini:

  1. Init Next.js blank project
  2. Integrating HTML template into Next.js app
  3. Implementing APIs

Pertama saya init proyek kosong Next.js, setelah itu mulai transformasi kode HTML ke JSX dan impor semua asset di template tersebut ke Next.js, template ini menggunakan Sass, dan beruntung Next.js sudah mendukung Sass dengan zero-configuration.

Next.js hadir dengan server bawaan Next itu sendiri. Tapi, kita bisa memilih untuk menggunakan custom server, seperti menggunakan Express.

Di sini saya menggunakan Express sebagai server untuk Next.js, karena ada beberapa custom server route juga.

Secara bawaan, Next.js sudah pre-rendering, artinya HTML yang dikirim dari server sudah jadi atau sudah dikomplit. Pre-rendering di sini bisa saat build-time atau setiap request.

Bila saat build-time, hal ini disebut dengan static-site generation (SSG), bila saat setiap request, hal ini disebut dengan server-side rendering (SSR). Walaupun keduanya termasuk pre-rendering di server. Dan juga istilah universal rendering lebih tepat untuk kasus di Next.js ini, karena setelah halaman hydrated, maka browser akan menggunakan client-side routing – tidak memuat seluruh halaman.

Dan dalam kasus Multinity, saya menggunakan server-side rendering. Kendari SSG memiliki performance yang jauh lebih baik, karena dapat di-cache oleh CDN. Tapi, ingatlah setiap kasus memiliki teknik terbaiknya, jadi SSR untuk Multinity adalah teknik yang sangat tepat.

Next.js juga memiliki komponen Link, yang di mana akan melakukan pre-fetches di background. Sehingga perpindahan halaman akan semakin cepat bahkan hampir instant, seperti membuka folder.

Hal utilities yang saya gunakan di front-end adalah parallax, image preloader, infinite scroll, CSS tree-shaking. Oh iya ini juga pakai Bootstrap 4, otomatis ada jQuery, makannya agak lambat webnya.

Back-end

Hampir semua konten di Multinity itu dinamis, terdapat tempat untuk mengelola konten tersebut. Awalnya saya memilih WordPress sebagai CMS, dengan beberapa konfigurasi tambahan seperti WP-GraphQL, WP-REST, Advanced Custom Fields, dan lain sebagainya.

Namun terdapat beberapa masalah. Pertama, beberapa di antara plugin WP tadi berbayar; kedua, WP secara bawaan menggunakan server-side rendering, membuat perpindahan halaman menjadi tidak instan.

Saya mencari alternatif lain, dan saya ingat pernah menggunakan Strapi. Akhirnya saya mulai menginit Strapi. Strapi sendiri merupakan sebuah headless CMS, yang artinya dia memiliki halaman admin tapi tidak punya kepala.

Data yang berada di Strapi dapat dikirim melalui API, entah REST atau GraphQL. By default, Strapi using REST.

Saya termasuk orang yang gak suka GraphQL dalam beberapa case. Saya ingin return dari API Strapi tidak fleksibel. Artinya respons dari API harus field yang sudah saya sesuaikan di kodenya. Kalo di kodenya saya hanya meminta field name, email, bio, maka API harus mengirim field itu juga. Saya gak mau ada parameter yang dapat mengubah field-field tadi. Tujuannya supaya lebih aman dan lebih ringan.

Dengan REST, semua ini dapat dilakukan dengan mudah tanpa ada konfigurasi apapun :)

Untuk database, Strapi mendukung beberapa driver, seperti MySQL, SQLite, Mongo, Postgre, etc. Saya sekarang menggunakan MySQL, karena belum pernah mencoba Mongo untuk kasus banyak relasi. MySQL sudah pasti saya tau. Saya sudah pakai sejak 8 tahun yang lalu.

Strapi juga sudah memiliki beberapa fitur keren lainnya, seperti SSO, JWT, ACL, content builder, plugin ecosystem, dan lain sebagainya.

Ini yang memudahkan saya bikin fitur SSO di Multinity, supaya user gak perlu repot-repot masukkin email dan password, lalu kirim aktivasi kode ke email mereka untuk verifikasi bahwa mereka user beneran. Ini repot, saya harus bikin SMTP server atau pake 3rd-party service seperti Sendgrid, atau Mailgun. Mahal :)

Belum lagi saya harus mengamankan akun mereka. Kalo gini ya saya gak perlu repot-repot kan. User juga jadi mudah login-nya.

Server

Saya pakai Ubuntu server 20.04 Focal dengan 4 GB RAM, dan 2 CPU – tidak ada swap, karena tidak butuh.

Untuk daemonize saya pakai PM2 supaya gampang manage-nya, dan untuk web server saya pakai Nginx, selain mudah untuk dikonfigurasi, Nginx juga cepat buat reverse-proxy dan server static files. Oh iya, ini juga sudah SSD.

Biaya server 20$/month di DigitalOcean, sejauh ini mereka belum pernah mengecewakan saya dalam urusan server.


Ingat, semua teknologi yang saya gunakan tergantung kasus dan development time. Ini one-person development, jadi saya lakukan sehemat mungkin, dan secepat mungkin. Dan saya lakukan ini selama ~1 bulan dengan waktu pengerjaan sekitar ~4 jam tiap malam, karena saya paginya bekerja.

Sudah, kalo punya pertanyaan, silahkan tanya Nauval.

Tag

Admin Multinity

Seorang admin di Multinity tercinta.