ConnectDot Architecture Revisited

Gambar 1. Ilustrasi Blueprint

Harus diakui bahwa aristektur ConnectDot merupakan sebuah eksperimen. Seharusnya, arsitektur ConnectDot bisa jauh lebih sederhana, akan tetapi developer memutuskan untuk bereksperimen.

TL; DR: Kompleksitas arsitektur ConnectDot terlalu rumit, akibatnya laju pengembangan tidak cepat.

Seharusnya, ConnectDot bisa memiliki aristektur seperti gambar berikut.

Gambar 2. Arsitektur aplikasi web yang cukup sederhana.

Akan tetapi, reaksi developer ConnectDot terhadap desain tersebut:

Gambar 3. Sebuah ilustrasi

Single Responsibility Principle

Prinsip ini mengharuskan setiap komponen dalam sebuah perangkat lunak benar-benar memiliki satu tanggungjawab. Komponen web server pada arsitektur gambar 2 punya banyak sekali tugas, mulai dari rendering web page, authentication, form validation, static asset serving, dll. Developer ConnectDot pun memutuskan untuk berpegang teguh pada prinsip ini dan menghasilkan arsitektur berikut.

Gambar 4. Arsitektur ConnectDot, diambil dari blog Ahmad Hasan Siregar, yang juga merupakan developer ConnectDot

Tentunya, di awal reaksi (hampir) semua (sebenarnya hanya 1–2 orang) developer kurang lebih:

Gambar 5. Ilustrasi lain

Mari kita bahas 1 titik kerumitan yang membuat (hampir) semua developer sakit kepala:

Firebase as Email Verification Service

Gambar 6. Verification service

Dokumentasi Firebase yang cukup membingungkan membuat pengembang membutuhkan waktu yang sangat lama untuk mengimplementasikan pendaftaran pengguna. Awalnya Firebase dianggap meyakinkan karena dikembangkan oleh Google. Sayangnya, itu hanya harapan palsu: Firebase rumit.

Selain Firebase, masih ada hal lain yang membuat sakit kepala:

JSON Web Token Authentication

JWT sangat menjanjikan karena merupakan skema autentikasi stateless, dimana server tidak perlu mencatat siapa-siapa saja yang sudah login dan mencabut dari catatan setiap kali ada yang logout.

Code 1. Implementasi login pada backend

Code 2. Implementasi pengambilan data profil untuk user yang sudah login pada frontend

JWT sudah memenuhi janji-janji manisnya. Implementasi pada backend cukup singkat. Implementasi pada frontend pun hanya butuh beberapa baris kode tambahan, yaitu pada bagian “Authorization: Bearer …”.

Sayangnya, tim developer sempat tersandung batu dan terjatuh ke jurang yang cukup dalam ketika library kriptografi yang dibutuhkan untuk implementasi JWT bermasalah. Untungnya, dengan mengurangi jam tidur selama beberapa jam, masalah ini bisa teratasi.

ConnectDot Architecture Diagram Correction

Authentication

Code 3. Potongan dari docker-compose

Oops! Sepertinya dari code 3, terlihat bahwa sebenarnya REST API ConnectDot tampaknya secara fisik terpisah dari sistem autentikasi. Ini artinya diagram butuh 1 komponen baru.

Image Serving

Code 4. Potongan code image serving pada frontend

Oops lagi! Ternyata ConnectDot menggunakan image resizer microservice! Ini artinya diagram butuh 1 komponen baru lagi. Sekarang jadi ada 2 komponen baru.

Frontend-Backend Communication

Gambar 7. Diagram komunikasi komponen yang kurang tepat

Sebenarnya, server frontend sama sekali tidak berkomunikasi dengan server backend. App frontend yang berjalan pada komputer client lah yang berkomunikasi dengan backend. Ini merupakan miskonsepsi yang perlu diluruskan di semua kalangan developer.

ConnectDot Software Architecture — The Correct Version

According to our code of course!

Gambar 8. Arsitektur ConnectDot

9 Komponen utama ConnectDot:

1. Frontend Server. Server ini menyimpan code frontend untuk dirender oleh frontend app. Ketika halaman web pertama kali dibuka, frontend server akan mengirimkan semua data yang diperlukan agar frontend app dapat berjalan. Data yang dikirim oleh frontend server adalah javascript, HTML, dan css.
2. Frontend App. Komponen ini lah yang berjalan pada komputer client. Frontend app mengatur apa saja yang dapat dilakukan oleh user. Frontend app harus berkomunikasi dengan komponen ConnectDot yang lain agar dapat benar-benar berfungsi.
3. REST API. Komponen ini bertugas sebagai API untuk mengakses data aplikasi ConnectDot.
4. ConnectDot DB. Database aplikasi connectdot.
5. JWT AUTH Server. Layanan autentikasi yang sudah terlebih dahulu janjian dengan REST API terkait secret key agar protocol JWT dapat berjalan.
6. Users DB. Database user yang hanya berisi username dan password, tidak lebih dari itu.
7. Email Verification Service. Layanan untuk memverifikasi pengguna melalui email.
8. Image Serving. Layanan untuk serving gambar dengan cepat. Sebenarnya juga bisa dipakai untuk serving video.
9. Image Resizer. Layanan untuk memperkecil ukuran gambar agar tidak menghabiskan bandwith pengguna. Pengguna yang menggunakan layar beresolusi rendah tidak perlu gambar resolusi tinggi.

9 komponen ini lah bukti ConnectDot berpegang teguh pada prinsip-prinsip berikut.

Principle of Least Knowledge

Komponen hanya perlu tahu apa yang benar-benar perlu diketahui. Sebagai contoh, server frontend ConnectDot benar-benar tidak tahu apa-apa tentang 7 komponen selain frontend app, karena server frontend kerjanya hanya untuk mengirim JS, HTML, dan CSS saja ke komputer user.

Single Responsibility Principle

yang sudah dijelaskan sebelumnya.

Do not Repeat the Functionality

Komponen jangan sampai punya fungsi yang sama. Dalam diagram tampaknya Image Serving dan Image Resizer punya fungsi yang sama. Akan tetapi, sebenarnya frontend app hanya akan langsung menghubungi Image Serving apabila tidak perlu resizing. Sebaliknya, apabila frontend app perlu gambar yang diperkecil, frontend app akan menghubungi Image Resizer untuk mendapatkan gambar.

Separation of Concerns

Ini lah inspirasi dari arsitektur ConnectDot yang sangat rumit. Setiap komponen yang punya urusan berbeda dibuat menjadi terpisah. Email verification bisa saja diimplementasikan di REST API. Akan tetapi, sebenarnya hal semacam itu seharusnya bukan urusan REST API. Maka dari itu, komponennya pun dipisah.

Docker Orchestration

Gambar 9. Diagram arsitektur ConnectDot dengan penjelasan tambahan

Docker stack digunakan untuk mengatur hubungan antar-container.