Google dan Facebook adalah dua perusahaan terkuat di dunia dan masing-masing telah membuat kerangka kerja untuk membangun aplikasi web. Transisi dari sisi template server statis (di mana peran JavaScript biasanya dikurangi menjadi manipulasi DOM jQuery) ke Aplikasi Laman Tunggal (utamanya didasarkan pada perutean Front-End dan API REST) memberi dampak besar pada keseluruhan industri web.
Selain itu, alasan intensitas dibalik pengenalan kerangka kerja baru yang hampir setiap hari, memaksa Pengembang Front-End untuk terus belajar tentang dunia teknologi / preprocessors / kompiler yang populer saat ini, namun tidak selalu praktis untuk saat ini, seperti Grunt, Bower, RequireJS, dll.
Permulaan Angular dan React
Versi pertama dari Angular diciptakan oleh Google pada tahun 2010. Mereka memberikan pola arsitektur MV * ( Model, View, Apa pun), dan injeksi data dua arah sebagai fungsionalitas inti kerangka kerja. Dengan penggunaan yang mudah, implementasi perintah yang cepat, dan kode yang terdokumentasi dengan baik, sehingga cepat mendapatkan popularitas di antara pengembang web. Dulu fitur ini cukup berarti, jadi Angular mendapatkan banyak pendukung. Dan, karena selain itu juga diiklankan dengan baik, ada banyak kursus gratis untuk setiap pemula pengembangan JavaScript yang ingin menjadi seorang profesional.
Namun, karena AngularJS bukanlah alat yang sempurna, banyak pengembang mulai mengeluh sambil menggali lebih dalam kerangka ini . Salah satu kelemahan terbesar AngularJS adalah kinerjanya. Pengambilan data dua arah, konsep yang sama terdengar sangat mengagumkan saat Angular diluncurkan. Namun pada tahun 2013 isu skalabilitas, kinerja, dan pengoptimalan telah diselesaikan oleh Facebook dengan diperkenalkannya React. Alih-alih mengikat data dua arah, React menggunakan konsep pemrograman yang berbeda dan beralih ke arus data searah. React sintaknya lebih bersih mudah dipelajari dan dipahami, karena itu pengembang mulai berganti sisi memilih React. Selain itu, berkat dukungan JSX, React mengajarkan satu hal menarik lagi (yang pada saat bersamaan agak aneh) – mengetik HTML di dalam JavaScript.
Sebagai tanggapan dari Facebook, Google mengumumkan versi baru Angular, yang secara resmi dirilis pada akhir tahun 2016. Banyak konsep lama tetap (injeksi ketergantungan misalnya), namun Angular punya kemampuan baru.Beberapa dari mereka dipinjam langsung dari React (misalnya struktur berbasis komponen atau data satu arah). Kemajuan terbesar adalah beralih dari JavaScript biasa ke sebuah TypeScript – sebuah bahasa yang dikembangkan oleh Microsoft (yang disusun ke JavaScript namun mengenalkan banyak fitur yang tidak tersedia dalam JavaScript). Fitur baru lainnya yang ditambahkan ke Angular adalah RxJS – sebuah perpustakaan untuk menangani arus data asynchronous.
Satu hal lagi. Sebelum kita melangkah lebih jauh perbedaannya, mari kita lihat sekilas bagaimana popularitas React dan Angular dalam beberapa kurun waktu ini.
Perbedaan utama antara Angular dan React
Pertama-tama yang paling penting untuk diingat adalah bahwa kenyataannya React bukanlah kerangka kerja.Namun “hanya” sebuah perpustakaan yang menangani terutama dengan lapisan View dari arsitektur MVC, tanpa paket eksternal, dan tidak menyediakan routing. Untungnya, komunitas React sangat besar, dan orang dapat menjelajahi berbagai komponen siap pakai dan sering diperbarui yang akan membantu mereka membangun aplikasinya dengan lebih cepat. Di sisi lain, Angular adalah kerangka kerja dan dilengkapi dengan banyak modul built-in seperti angular router, angular HTTP module, bahkan angular forms. Dengan demikian, Anda sebenarnya tidak memerlukan sesuatu lagi untuk mulai mengembangkan aplikasi yang kompleks. Hal ini juga berarti bahwa React mungkin juga sesuai jika Anda mengerjakan proyek kecil yang tidak memerlukan banyak pilihan. Di sisi lain jika menggunakan React Anda perlu menambahkan banyak komponen kustom jika ingin memiliki kontrol yang lebih besar terhadap struktur kode Anda. Jika tidak – pilihlah Angular. Bagi Anda yang ingin tahu lebih banyak tentang perbedaan antara framework dan library, lihat artikel saya Framework vs Library – perbedaan dalam pengembangan web.
Bagaimana Angular dan React bekerja dengan DOM
Perbedaan utama lainnya adalah React menangani HTML menggunakan DOM Virtual – representasi virtual dari Document Object Model (DOM mendefinisikan struktur dokumen yang logis dan direpresentasikan berupa pohon objek). DOM virtual hanyalah sebuah salinan ringan DOM biasa yang tidak memiliki kemampuan untuk langsung mengubah apa yang ada di layar. Dengan cara ini React memperbarui elemen HTML sebenarnya, hanya jika benar-benar diperlukan. Di sisi lain, untuk membuat elemennya dapat digunakan kembali dan merangkum pandangan Angular menggunakan komponen web. Bahkan ketika kita masih beroperasi pada file HTML biasa, kita dapat menyertakan tag HTML khusus dan keseluruhan aplikasi akan tetap bekerja dengan baik di semua browser modern. Untuk mencapai hal ini, komponen Angular didasarkan pada konsep Shadow DOM dimana kita dapat menyembunyikan DOM logic dan styling, yang membuatnya hanya dapat dicapai melalui sebuah komponen.
Untuk menangani pendekatan JavaScript React dan merasa lebih nyaman dengan elemen DOM yang berbasis pada DOM Virtual, React menggunakan JSX – preprocessor yang membuat kode Anda lebih elegan dan mudah dibaca.JSX memberikan perasaan alami struktur DOM karena apa yang Anda lakukan adalah menulis HTML di JavaScript (yang pada awalnya mungkin tampak sedikit aneh). Satu-satunya masalah dengan pendekatan ini adalah Anda harus ingat tentang sintaks khusus untuk beberapa atribut mirip HTML tertentu jika Anda ingin menghindari penamaan konflik. Misalnya, “Class”, kata yang dicadangkan di JS, sekarang “className”.
Di sisi lain, Angular secara default menggunakan TypeScript. Penjabaran dari JavaScript yang membuatnya lebih mirip dengan bahasa pemrograman (seperti Java) dan memberinya “kekuatan super”, fitur baru seperti enum, dekorator, atau antarmuka.
| ANGULAR | REACT |
| adalah framework yang lebih besar | adalah library yang lebih kecil |
| dibuat oleh Google | dibuat oleh Facebook |
| membutuhkan lebih banyak alat namun memberi Anda kerangka kerja matang | mudah dipelajari (dalam tingkat dasar) |
| arsitektur proyek standar | memiliki arsitektur yang fleksibel |
| menggunakan DOM Reguler + komponen web + sintaks Angular tambahan | menggunakan DOM virtual |
| menggunakan konsep “JavaScript ke HTML” | aplikasi hanya dibangun dalam JavaScript |
| TypeScript + RxJS sebagai fitur tambahan untuk dipelajari | Sintaks JSX untuk belajar |
Persamaan antara Angular dan React
Arsitektur berbasis komponen
Setiap komponen memiliki metode siklus hidup sendiri yang dipecat saat beberapa tindakan tertentu terjadi.Misalnya, Anda bisa menggunakan metode “ngOnInit” di Angular, sedangkan di React kita memiliki “componentDidMount”. Keduanya akan mengeksekusi kode di dalam metode setelah komponen dibuat. Demikian pula, sebelum Anda menghapus komponen apapun, Anda mungkin ingin menjalankan beberapa fungsi. Untuk melakukannya, Anda akan menggunakan metode “ngOnDestroy” di Angular atau “componentWillUnmount” in React.
Komunitas dan library
Secara teoritis, bahkan jika Angular memberi Anda semua yang diperlukan untuk membangun sebuah aplikasi, Anda akan segera mengetahui bahwa akan lebih baik jika mengimplementasikan beberapa perpustakaan pihak ketiga yang dibuat oleh komunitas. Tanpa komunitas besar, library maupun framework yang bagus pun akan sulit diterapkan. Jika Anda butuh bantuan dengan sesuatu yang spesifik? Di GitHub, Anda akan menemukan katalog berupa Komponen dan library untuk kedua Angular dan React .
Ada juga implementasi framework dan konsep UI yang paling populer – Bootstrap atau Material Design (catatan: Versi Material Design untuk Angular mungkin beberapa komponen masih missing), jadi sangat mudah untuk menyesuaikan tata letak yang sama dengan dua cara. Anda bahkan bisa menggunakan komponen React di dalam Angular! 
Sejak beberapa tahun terakhir, bahasa JavaScript berkembang dan menjadi nyata di web dan aplikasi web seluler.Belum lama ini, satu-satunya solusi menggabungkan desktop dan ponsel adalah membuat aplikasi hibrid. Saat ini, berkat pengetahuan React atau Angular pengembang dapat mengekspansi lebih jauh dan mengelola aplikasi asli yang ditulis dalam JavaScript, kemudian dikompilasi ke bahasa induk mereka. Klaim utama Angular adalah “One framework. Mobile & desktop.”, Yang banyak menjelaskannya. Angular hadir dengan ionik 2 atau nativeScript, React di sisi lain bisa digunakan via React Native.
Kinerja
Sejauh ini sangat sulit untuk membandingkan React dan Angular mengenai kinerja karena keduanya sangat cepat dan efektif. Mungkin, pada saat rilis selanjutnya React bisa berubah banyak. Hal tersebut karena React akan ditulis ulang saat versi 16.0 diluncurkan, React Fiber mungkin akan menjadi kinerja penguasa berkat rendering tambahannya.
Ringkasan
Angular dan React dibuat untuk memecahkan masalah serupa namun dengan cara yang sangat berbeda. Jika Anda ingin memiliki framework yang matang, dan lebih banyak opsi dalam proses pengembangan aplikasi – pilih Angular. Jika Anda ingin yang lebih fleksibel dalam hal apa dan bagaimana yang Anda gunakan – pilih React.Dengan React Anda bisa memulai pengembangan dengan tepat melalui konfigurasi yang minimal, jadi mungkin pilihan yang lebih baik untuk proyek skala lebih kecil.
Sulit untuk mengatakan “Angular is better” or “React rules, forget Angular”. Karena keduanya adalah tools yang sangat baik untuk membuat Halaman Aplikasi, jadi cobalah keduanya dan berpegang pada apa yang paling sesuai untuk Anda.
