React, Angular & Vue: Pilih Framework yang Mana?

baca 6 menit
React, Angular & Vue: Pilih Framework yang Mana?

Pengembangan web saat ini seakan sudah tidak bisa lepas dari yang namanya framework. Bagaimana tidak, standar pengembangan web yang makin tinggi juga menyebabkan proses pembuatannya semakin kompleks.

Walaupun bukan tidak mungkin kita membuat "web from scratch", tapi ini pasti akan memakan waktu lebih lama. Belum lagi pusing mikir bug-bug yang mungkin terjadi.

Oleh karena itu, para pengembang web berinisiatif membuat web framework untuk memudahkan pekerjaan kita. Googling aja "web framework", pasti bakal muncul hasil yang beragam.

Dari sekian banyaknya framework yang ada, 3 framework paling terkenal adalah React, Angular, dan Vue. Kita bisa lihat juga banyak web terkenal yang menggunakan framework ini.

Nah, pada kesempatan kali ini kita akan coba membandingkan 3 framework ini. Siapa tahu bisa menghilangkan kebimbangan kalian yang baru mau belajar atau mungkin mau buat proyek baru lagi.

React

Kita coba bahas dari yang paling populer dulu, ReactJS.

Library satu ini pertama kali dikembangkan oleh facebook dengan rilis publik pertamanya pada tahun 2013. Hingga artikel ini ditulis React sudah ada pada versi 18.

Popularitas

Kalau kita bicara popularitas sudah tidak perlu dipertanyakan lagi. React merupakan library yang menjadi pilihan utama para web developer.

Kalau kita lihat dari data unduhan NPM, React memiliki rata-rata 18 juta unduhan setiap minggunya. Jumlah ini mencapai 6 kali lipat jika dibanding dengan 2 framework yang akan kita bahas selanjutnya.

Di sisi lain, dari laman repositori github-nya, React punya lebih dari 1500 kontributor dengan jumlah star hampir 200 ribu.

Sudah bisa dilihat kan betapa populernya.

Fitur dan Kelebihan

  • Component Based — React merupakan library pertama yang memperkenalkan konsep component based. React menyediakan format jsx dan tsx yang memungkinkan kita untuk menulis tag html dalam javascript.
  • Sangat Fleksibel — Jika dibanding dengan 2 framework lain, React bisa dibilang sangat fleksibel. Ini karena React adalah library yang berfokus pada pembuatan interface. Kita bisa memasukkan React pada proyek apapun dengan mudah, termasuk website hasil CMS seperti wordpress.
  • Reaktivitas Verbose — Data yang berubah tidak akan langsung diimplementasikan ke UI. Harus dilakukan pemanggilan fungsi tertentu untuk mengupdate UI.
  • Komunitas Sangat Besar — Sebagai library paling populer, komunitas React tentunya sangat besar. Jika ada kode yang error tinggal googling saja, kemungkinan besar pertanyakan kalian sudah pernah ditanyakan orang lain. Jadi tidak perlu pusing-pusing.

Website dengan React

React dapat digunakan untuk berbagai macam proyek. Mulai dari skala kecil seperti website portfolio hingga website perusahaan besar.

Bahkan, kebanyakan website sosial media yang kita kunjungi setiap hari menggunakan library yang satu ini. Facebook, Instagram, Twitter, PayPal, Netflix, dan banyak lagi yang lainnya.

Kalau dilihat, hampir semua sosial media milik Meta (dulu Facebook) dibuat menggunakan React. Tidak heran, ini karena React sendiri merupakan gagasan dari Facebook dahulunya. Jadi, masalah reliabilitas cukup terjamin dengan hadirnya "orang dalam" dari Meta.

Angular

Yang kedua ada Angular. Kali ini kita akan bahas Angular 2 saja, karena versi terdahulunya (AngularJS) sudah habis masa supportnya.

Kalau React digagas oleh Facebook, sekarang ada Angular yang digagas oleh Google. Angular rilis publik pertama pada tahun 2009 dan merupakan framework paling tua di antara 2 framework lainnya. Saat artikel ini ditulis, Angular sudah ada pada versi 15.

Popularitas

Jika dibanding dengan React, jumlah unduhan Angular di NPM terpaut cukup jauh, yaitu sekitar 3 juta download tiap minggunya. Tetap saja, angka 3 juta juga tidak bisa kita anggap sedikit.

Di laman repo github-nya, Angular memiliki jumlah star sekitar 85 ribu dengan 1500 lebih kontributor.

Fitur dan Kelebihan

  • Arsitektur MVC — Angular mengguakan Model-View-Controller, arsitektur pengembangan yang cukup familiar di kalangan programmer.
  • Data Reaktif — Tidak seperti React, pada Angular jika kita mengubah nilai suatu data, maka ui juga akan langsung berubah.
  • Struktur Proyek Jelas — Angular menggunakan file .html, .css, dan .ts secara terpisah dalam setiap komponennya. Ini membuat pemisahan logika lebih jelas.
  • Dukungan Typescript — Angular menggunakan Typescript secara default, tidak seperti 2 framework lain yang secara default menggunakan Javascript.

Website dengan Angular

Angular banyak dipakai untuk membuat proyek yang besar. Ini karena struktur proyeknya yang sangat tertata sehingga sepertinya terlalu overkill untuk proyek kecil-kecilan. Walaupun tidak menutup kemungkinan ya.

Sang empunya, Google menggunakan Angular pada kebanyakan aplikasinya, seperti Google Analytics, Google AdWords, Google Cloud Platform dan banyak lagi yang lainnya.

Website lain yang menggunakan Angular adalah Office365 miliki Microsoft, PayPal, Udemy, Upwork, dan banyak lagi yang lainnya.

Vue

Yang terakhir nih, VueJS atau yang biasa kita sebut Vue.

Tidak seperti 2 framework sebelumnya yang masing-masing digagas dan punya bekingan perusahaan besar, Vue adalah web framework yang dibuat dan diinisiasi oleh komunitas open source.

Vue pertama kali dibuat oleh Evan You pada tahun 2014 dan sekarang sudah ada pada versi ke-3-nya yang sempat kontroversial beberapa waktu lalu.

Dari websitenya, Vue mengklaim dirinya sebagai framework yang "Progressive". Ini merujuk pada pembuatan aplikasi Vue yang dapat dengan mudah diskalakan dan ditambahkan ke aplikasi lainnya.

Popularitas

Jumlah unduhan di NPM tidak jauh berbeda dengan Angular, yaitu sekitar 3 juta unduhan tiap minggunya. Walaupun akhir-akhir ini terjadi lonjakan misterius yang membuat unduhannya jauh di atas React, yaitu hampir 50 juta unduhan 🤯.

Di github reponya Vue punya jumlah star yang paling banyak jika dibanding dengan Angular dan React, yaitu lebih dari 230 ribu.

Kalau dilihat dari jumlah kontributor, mungkin karena Vue tidak punya bekingan perusahaan besar jumlah kontributornya hanya sekitar 500 orang saja.

Fitur dan Kelebihan

  • Komponen Ekspresif — Komponen dalam vue bisa dibuat dengan SFC (Single File Component). Dalam SFC ini html, css, dan javascript terpisah namun tetap dalam 1 file yang sama dengan ekstensi .vue. Ini seperti mengambil jalan tengah antara React dengan jsx-nya dan Angular yang sepenuhnya terpisah.
  • Sangat Ringan — Vue sangat ringan secara default, bahkan lebih ringan dari React dan Angular. Ini karena arsitektur Vue yang modular, jadi hanya library yang diperlukan saja yang perlu di-import. Bahkan bisa juga dilakukan treeshaking untuk mengurangi library yang tidak diperlukan.
  • Integrasi dengan Vite — Vue punya integrasi yang apik dengan Vite. Vite adalah build tool javascript yang dikembangkan oleh Vue yang punya reputasi bagus dalam kecepatan dan efisiensi.
  • Data Reaktif — Seperti Angular, data pada vue juga reaktif. Setiap kali data berubah maka UI akan otomatis berubah.

Website dengan Vue

Vue digunakan oleh berbagai skala aplikasi, mulai dari skala kecil hingga website perusahaan besar.

Contoh proyek kecil yang pakai Vue adalah yang sedang kalian baca sekarang. Iyaa Inva dibuat pakai Vue hehehe...

Selain Inva ada juga website terkenal seperti Gitlab, Laravel, 9gag, dan banyak lagi yang lainnya. Mungkin karena tidak ada bekingan perusahaan, tidak ada implementasi eksklusif dari Vue pada perusahaan tertentu.

Pilih React, Angular, atau Vue?

Terkait pemilihan tentu yang bisa menentukan kalian sendiri ya. Jika masih bimbang, mungkin beberapa perbandingan di bawah bisa membantu

ReactAngularVue
PopularitasSangat populerSedang menurunSedang naik daun
Skala ProyekProyek kecil hingga kompleksProyek kompleks dan besarProyek kecil hingga kompleks
Model filejsx atau tsx (javascript yang mendukung tag html)html, css, ts terpisahSFC (file .vue dengan html, css, dan js dalam satu file)
Reaktivitas dataUpdate UI secara manual, programmer punya kontrol penuhUI akan diupdate secara otomatis ketika data berubahUI akan diupdate secara otomatis ketika data berubah
Performa relatifModeratCukup beratRingan
Learning CurveMudah hingga menengahCukup sulitMudah hingga menengah

Jadi, mau pilih yang mana nih? Apapun pilihannya, selamat berkoding ria 😉