MVC : Konsep MVC pada MERN Stack


MVC atau Model-View-Controller adalah salah satu konsep pola desain yang umum diterapkan dalam sebuah aplikasi. Konsep ini memisahkan bagian Model atau Database, View berupa tampilan Frontend dan Controller yang bertanggung jawab atas logika dan biasanya juga sebagai endpoint dari API yang akan kita buat. Konsep MVC sangat sering digunakan sebagai standar pengembangan aplikasi di banyak perusahaan, karena bersifat scalable atau diperluas dalam proses pengembangannya.

Biasanya pemisahan ini dilakukan dengan memisahkan semua file codingan MVC ke dalam directory atau folder project. Dalam pengembangannya biasanya juga terdapat folder lain selain Model, View dan controller, seperti pada gambar dibawah. Biasanya folder lain selain MVC merupakan folder tambahan seperti middlewares untuk pengecekan API sebelum ke controller, lalu routes yang dimana merupakan jalan sekaligus tempat menetapkan url dari API yang kita buat.

Mern Stack

MERN merupakan singkatan dari MongoDB, Express.js, React.js dan Node.js. MERN merupakan kumpulan teknologi yang dipakai untuk membuat aplikasi. Express dan Node merupakan dua komponen pembuat API sebuah aplikasi. Express merupakan server-side web framework sedangkan Node adalah platform server JavaScript yang populer dan powerfull, lalu MongoDB merupakan database noSQL yang digunakan oleh aplikasi untuk menyimpan data dan React adalah bagian penerima data dari server juga merupakan antarmuka yang dilihat user ketika menjalankan aplikasi.

Namun pada pembuatan aplikasi API kita tidak membutuhkan React, karena maksud dari artikel ini adalah penjelasan aplikasi Backend berupa Restfull API dari Aplikasi Node.js, Express.js dan mongoDB. 

Adapun tool dan app lain seperti penggunaan ORM/ODM seperti Prisma atau Mongoose, juga banyak package lain yang akan diinstall dalam project.

A. Express.js and Node.js server

Express.js adalah kerangka kerja web yang berjalan di atas platform Node.js. Express menyediakan fitur-fitur yang kuat untuk mengembangkan aplikasi web, seperti routing, middleware, dan pengelolaan permintaan HTTP. Dengan Express.js, pengembang dapat dengan mudah membuat server HTTP yang kuat dan fleksibel. sedangkan Node.js adalah platform runtime JavaScript yang memungkinkan eksekusi kode JavaScript di sisi server.

Node.js menggunakan model asynchronous non-blocking I/O, yang memungkinkan kinerja tinggi dan skalabilitas dalam menangani permintaan HTTP. Dengan Node.js, pengembang dapat menulis logika server menggunakan JavaScript, yang menyatukan bahasa pemrograman di kedua sisi aplikasi web (server dan klien).

B. MongoDB server

MongoDB adalah database NoSQL yang sangat populer dalam pengembangan aplikasi modern. mongoDB menggunakan model berbentuk collections dan dokumen yang fleksibel untuk menyimpan data dalam format JSON. MongoDB dapat dengan mudah diintegrasikan dengan aplikasi Node.js menggunakan driver query MongoDB resmi atau library seperti Mongoose. Dengan MongoDB, pengembang dapat dengan mudah menyimpan, mengelola, dan mengakses data aplikasi dengan skalabilitas tinggi dan kinerja yang baik.

MVC dan MERN

Implementasi MVC di MERN stack merupakan cara yang bagus untuk mengembangkan sebuah API karena mengadopsi prinsip-prinsip pemisahan tugas yang baik antara Model, View, dan Controller. Bahkan konsep MVC ini pun akan sangat baik diterapkan di Tech Stack lain selain MERN stack. Meskipun pada awalnya MERN stack lebih dikenal sebagai sebuah teknologi untuk pengembangan aplikasi web berbasis JavaScript, penggunaannya untuk membangun API juga semakin populer karena fleksibilitasnya.

Untuk bisa memahami konsep ini, diatas merupakan gambaran bagaimana struktur sebelum kita melakukan proses development pada project yang akan kita buat nanti. Pada gambar diatas terdapat gambaran dari alur directori structure project MERN stack dengan MVC. Namun akan kita lebih fokus pada bagian server aplikasi

Disana terdapat file yang digambarkan dengan tulisan dengan ekstensi .js, lalu folder dengan gambaran berupa kotak dengan nama folder tersebut di dalamnya. Tanda panah mengartikan alur dari API yang pada gambar dimulai dari app.js hingga directory views di react.js. Kita juga bisa memindahkan folder views ke direktori yang sama dengan routes, model dan controllers, lalu isi folder views tersebut diisi dengan project dari react.js.

Adapun alasan mengapa implementasi MVC di MERN stack untuk pengembangan API adalah pilihan yang baik :

  • Pemisahan Tugas: Dengan memisahkan komponen Model, View, dan Controller, struktur aplikasi menjadi lebih terorganisir. Model bertanggung jawab atas logika bisnis dan interaksi dengan basis data, View menangani tampilan yang disajikan kepada pengguna, sedangkan Controller mengatur aliran logika aplikasi. Ini membuat kode lebih mudah dipahami, dipelihara, dan dikembangkan lebih luas.
  • Skalabilitas: Dengan memisahkan komponen ke dalam Model, View, dan Controller, pengembangan API menjadi lebih scalable. Setiap komponen dapat diperluas atau dimodifikasi secara independen tanpa mengganggu bagian lain dari aplikasi. Misalnya, jika Anda perlu menambahkan fitur baru ke dalam API, Anda bisa fokus pada pengembangan Controller tanpa harus menyentuh Model atau View.
  • Reusabilitas Kode: Dengan menggunakan pola desain MVC, kode menjadi lebih modular dan dapat digunakan kembali. Komponen-komponen yang sama, seperti Model atau Controller, dapat digunakan di berbagai bagian aplikasi atau bahkan dalam aplikasi lain jika diperlukan. Hal ini memungkinkan pengembangan yang lebih cepat dan efisien.
  • keterbacaan Kode: Struktur yang terorganisir dan pemisahan tugas yang jelas membuat kode lebih mudah dibaca dan dipahami. Ini sangat berguna ketika bekerja dalam tim pengembangan di mana beberapa pengembang mungkin harus berkolaborasi dalam pengembangan API.
  • Kepatuhan Standar: MVC adalah pola desain yang sangat umum dalam pengembangan perangkat lunak. Dengan mengimplementasikannya dalam MERN stack, Anda mengikuti praktik terbaik industri yang dikenal dan dipercaya oleh banyak pengembang.

Ditulis oleh Backend Developer Intern at Digital Amoeba MSIB Batch 6
Raie Aswajjillah – Universitas Islam Nusantara (linkedin.com/in/raie-aswajjillah)