Arsitektur Aplikasi Django + React
Pada artikel kali ini, saya akan membahas mengenai arsitektur yang digunakan pada aplikasi Django+React, khususnya pada proyek PPL yang kelompok saya kembangkan, yakni SekolahKu. Kami menggunakan framework Django sebagai back-end dan React sebagai front-end.
Arsitektur Django
Pertama-tama kita akan membahas mengenai arsitektur pada aplikasi Django, yang umumnya menggunakan arsitektur MVT atau Model-View-Template. Bagi kalian yang sebelumnya telah mengetahui mengenai arsitektur MVC atau Model-View-Controller, arsitektur MVT ini kurang lebih serupa dengan MVC, hanya saja ‘View’ pada MVT menghandle business logic yang ada pada aplikasi. Berikut penjelasan mengenai masing-masing komponen dari MVT.
Model
Model berfungsi sebagai database layer dimana arsitektur dan segala kebutuhan database ditulis. Secara default, database yang digunakan adalah SQLite, yang nantinya setiap class model yang dibuat akan dipetakan ke tabel database yang berbeda.
View
View berfungsi sebagai ‘jembatan’ yang menghubungkan Model dengan Template. Seluruh business logic dari aplikasi dituliskan pada komponen ini, yang mana setiap path URL umumnya dipetakan pada sebuah view. Sehingga nantinya ketika user mengakses suatu URL, view akan mengeksekusi business logic, memilih template mana yang perlu di render, dan mengakses model jika diperlukan.
Template
Template berfungsi sebagai presentation layer dimana seluruh tampilan yang nantinya akan dilihat oleh pengguna termasuk kedalam komponen template ini. Mudahnya, template merupakan ‘front-end’ dari suatu website.
Penggunaan React Sebagai Front-End
Dalam mengembangkan proyek SekolahKu, tim saya memutuskan untuk menggunakan React sebagai front-end. Mengingat diperlukannya beberapa penyesuaian terkait hal ini, kami memutuskan untuk menggunakan Django REST framework, sehingga arsitektur yang semula adalah Model-View-Template kemudian berubah menjadi Model-View-Serializer.
Pada ‘Model’, kami mengubah database yang semula SQLite menjadi PostgreSQL untuk kemudahan deployment ke Heroku. Terkait ‘View’, kami menggunakan ‘View’ dari Django REST framework. Untuk ‘Template’, kami tidak lagi menggunakannya karena saat ini front-end akan di-handle oleh React dan menggantikannya dengan ‘Serializer’, yakni bagian dari Django REST framework yang akan men-serialize model yang ada dan menghasilkan REST API yang nantinya akan di-consume oleh React.
Dapat dilihat pada gambar diatas, nantinya React sebagai front-end dapat dengan mudah memperoleh data yang diperlukan dengan meng-consume API yang telah dihasilkan oleh Django REST framework, melalui pemanggilan HTTP request menggunakan axios (ataupun cara lainnya).
