Perbandingan Kerangka Kerja JavaScript Utama: Sudut vs Bereaksi

Sebuah pertanyaan yang saya tanyakan hampir setiap hari adalah apakah saya harus memulai dengan ReactJS atau Angular? Namun, sebelum saya melanjutkan lebih jauh, izinkan saya memberi Anda disclaimer.

Ini bukan blog di mana saya akan memukul satu atau yang lain atau mengatakan bahwa Anda harus selalu menggunakan satu di atas yang lain. Setiap pengembang dan setiap proyek benar-benar berbeda dan mereka memiliki serangkaian persyaratan yang berbeda sehingga mengatakan bahwa Anda harus selalu menggunakan ReactJS atau selalu menggunakan Angular sangatlah bodoh.

Argumen Logis

Anda mungkin berpendapat bahwa Angular adalah kerangka kerja dan React secara teknis adalah perpustakaan dengan sendirinya. Saya tidak menyangkal fakta ini, tetapi ini adalah argumen yang tidak ingin saya bahas sekarang. Ada paket yang dapat Anda tambahkan ke React yang akan mengubahnya menjadi kerangka kerja yang bersaing langsung dengan Angular. Kami membandingkan dua ekosistem, bukan kerangka kerja yang tepat versus perpustakaan yang tepat.

Kurva Pembelajaran

Mari kita mulai dengan Angular. Penafian lain: ketika saya mengatakan Angular, saya berbicara tentang Angular 4 bukan AngularJS.

Angular adalah kerangka kerja besar yang berarti kuat dan mencakup banyak hal. Ada banyak yang harus dipelajari. Anda akan mendengar banyak kosakata baru yang mengintimidasi seperti injeksi ketergantungan, dekorator arahan, pipa, dll. Kemudian Anda harus berurusan dengan TypeScript, yang merupakan JavaScript ditambah banyak fitur lain termasuk pengetikan statis.

Angular lebih berpendirian daripada React, yang merupakan salah satu keuntungan menurut saya karena dengan React Anda dapat melakukan hal yang sama dengan jutaan cara yang berbeda. Dengan Angular, umumnya ada satu atau dua cara untuk melakukan hal-hal tertentu, yang membuatnya lebih mudah untuk diikuti, memberi Anda instruksi yang jauh lebih jelas tentang apa yang seharusnya Anda lakukan.

Tapi sekali lagi, itu tergantung pada preferensi. Anda mungkin menyukai fleksibilitas untuk melakukan sesuatu dengan cara yang berbeda. Seperti yang saya sebutkan, ReactJS adalah perpustakaan jika kita berbicara tentang hanya perpustakaan inti, itu jauh lebih kecil dan lebih mudah dipelajari daripada kerangka kerja Angular. Anda dapat mengatakan bahwa Anda akan belajar React dalam waktu yang lebih singkat. React adalah pustaka tampilan yang bagus itu sendiri tetapi bahkan tidak sekuat untuk aplikasi besar. Jika Anda ingin perutean, validasi, permintaan HTTP di React, Anda harus menginstal paket lain dan itu menambah kurva pembelajaran.

Jika Anda melihat kode Bereaksi dari dua pengembang yang berbeda, mereka mungkin akan terlihat sangat berbeda apakah mereka membuat Permintaan HTTP atau menangani Status dan Properti. Semua hal itu dapat ditangani dengan sangat berbeda dan seringkali dengan cara yang salah.

Anda menemukan praktik terbaik dan semua masalah hilang tetapi itu menambah kurva belajar.

Tidak seperti Angular React tidak menggunakan template. Ini menggunakan sesuatu yang disebut ekstensi JSX atau JavaScript atau ekstensi sintaks JavaScript, yang memungkinkan kita untuk menyematkan HTML dalam JavaScript. Pada awalnya ini bisa tampak sedikit aneh. Terutama, ketika Anda mungkin diajarkan untuk memisahkan markup dan JavaScript Anda.

Anggap saja seperti meletakkan HTML di dalam JavaScript dengan beberapa perubahan berbeda: Anda tidak dapat menggunakan atribut kelas dan Anda harus menggunakan nama kelas.

Terakhir, kami memiliki Redux. React sering digunakan dengan Redux atau Flux yang merupakan manajer negara tingkat aplikasi. Menurut pendapat saya, Redux sangat sulit hanya mengaturnya dan mempelajari konsepnya saja sulit.

Saya pikir itu digunakan secara berlebihan. Saya pikir banyak pengembang menggunakan redux di tempat yang tidak diperlukan. Anda tidak memerlukannya untuk aplikasi yang lebih kecil tetapi banyak pengembang bersikeras untuk menggunakannya. Itu kembali lagi ke preferensi. Redux sangat kuat, saya tidak ingin mengambilnya. Ketika berbicara tentang kurva belajar, sangat sulit untuk dipahami.

Pemenang: Ini seri

Pertunjukan

Tidak adil membandingkan langsung kinerja Angular dengan React. Angular adalah kerangka kerja depan-ke-belakang yang lengkap yang mencakup perutean, alat formulir, pustaka HTTP, ekstensi Reaktif, dll. Semua fitur ini mengasapi kerangka kerja dan membuatnya lebih lambat. Namun React dengan sendirinya hanyalah pustaka tampilan, yang jauh lebih kecil dan lebih cepat.

Setelah Anda mulai menambahkan paket seperti router, klien HTTP, atau apa pun yang akan Anda tambahkan ke aplikasi React Anda, maka itu mulai muncul sedikit lebih ke tempat Angular berada dan kemudian Anda dapat mulai membandingkannya secara adil tetapi bahkan setelah itu Bereaksi masih memenangkan departemen kinerja. Ini adalah teknologi yang sangat cepat pada umumnya.

Perubahan dari Angular 2 ke Angular 4 di bawah tenda mereka lakukan sedikit untuk meningkatkan kinerja. Angular 4 berkinerja lebih baik daripada Angular 2. Meskipun demikian, React masih menang di Departemen kinerja.

Sudut vs Bereaksi. Sumber: Academind.com

Pemenang: Bereaksi

Fitur

Kedua kerangka kerja tersebut memiliki banyak fitur dan keunggulan umum yang sama: mereka mengatur kode Anda, berbasis komponen, menawarkan markup dinamis, dll. Mereka terbiasa melakukan banyak hal yang sama, dan berbagi banyak fitur yang sama.

Kami akan melihat beberapa fitur individu. Angular jelas memiliki lebih banyak fitur daripada React pada intinya. Biarkan saya mengingatkan Anda, kita sedang berbicara tentang dua ekosistem dan paket umum yang digunakan dengan React.

Angular adalah kerangka kerja yang mencakup semua. Muncul dengan router komponen, ekstensi Reaktif untuk yang dapat diamati, klien HTTP, modul formulir untuk validasi dan daftarnya terus berlanjut. Selain itu, ia menawarkan pengikatan data dua arah dengan cara yang tidak dilakukan oleh kerangka kerja lain. Mengikat data dari tampilan ke model sangat mudah menggunakan direktif model ng.

Angular juga mendukung MVC (Model View controller) atau setidaknya aspek yang berbeda dari pola desain itu. itu juga dilengkapi dengan fitur yang memungkinkan Anda untuk dengan mudah menerapkan pengujian: baik pengujian unit dan pengujian ujung ke ujung. Angular dikemas dengan fitur untuk membangun aplikasi front-end tingkat perusahaan. React di sisi lain tidak mencakup banyak hal pada intinya. Namun, hal-hal dapat ditambahkan untuk memberikan fitur yang Angular sertakan out-of-the-box ditambah beberapa yang tambahan.

Bereaksi menggunakan DOM virtual yang sangat kuat. Itu menciptakan versi ringannya sendiri dari Dom yang sebenarnya dan hanya menyertakan dan memperbarui apa yang dibutuhkan daripada menyegarkan semuanya. Virtual DOM adalah alasan utama mengapa React sangat cepat.

React menggunakan JSX yang lebih kuat daripada template standar karena Anda dapat memasukkan semua jenis JavaScript yang Anda inginkan ke dalamnya. JSX tidak diperlukan untuk menggunakan React tetapi itu membuat segalanya jauh lebih mudah. Saya tidak dapat memikirkan alasan mengapa Anda tidak menggunakan JSX dengan Angular juga. Bereaksi juga melakukan pekerjaan yang sangat baik dalam mengelola status dan properti komponen. Itu membuat data sangat mudah untuk digunakan dan disebarkan di antara komponen. Melewati data antar komponen, Angular jauh lebih sulit daripada melakukannya di Bereaksi.

Core React sulit untuk mempertahankan status level aplikasi. Status Komponen mudah tetapi jika Anda menginginkan manajemen status tingkat aplikasi yang sebenarnya maka Anda memerlukan Redux atau Flux, yang saya katakan sebelumnya cukup membingungkan untuk dipelajari. Paket eksternal yang sering digunakan seperti router React versi 4 yang baru agak sulit untuk dipahami tetapi juga sangat kuat setelah belajar menjalankan dan mengaturnya. Ada banyak cara berbeda untuk menggunakannya juga. React tidak memiliki komponen inti HTTP seperti Angular, tetapi Anda dapat menggunakan Fetch atau Axios, yang merupakan klien HTTP eksternal dan kemudian Enzyme populer untuk membuktikan React. Ada beberapa paket berbeda yang biasa digunakan dengan React meskipun mereka bukan bagian dari library yang sebenarnya.

Sementara kedua teknologi berbagi sejumlah fitur yang baik, jika Anda hanya membandingkan teknologi inti, maka Angular adalah pemenangnya.

Pemenang: Sudut

Perkakas

Angular dan React memiliki beberapa antarmuka baris perintah yang cukup bagus. Angular CLI dan Create React App keduanya cukup hebat dan mereka benar-benar memungkinkan kami untuk merampingkan pengembangan. CLI Angular sedikit lebih kuat karena kita dapat dengan cepat menghasilkan hal-hal seperti komponen dan layanan. Buat Bereaksi tidak bisa melakukan itu. Anda harus membuat semuanya sendiri sejauh file dan struktur dasar. Kedua sistem menggunakan paket web, memiliki server pengembang pemuatan otomatis sendiri dan memiliki alat kompilasi dan pembuatan. Jelas, Angular memiliki tugas tambahan untuk menerjemahkan TypeScript. CLI memiliki skrip untuk itu ketika kami menjalankan ng serve. Semua itu terjadi di balik layar. Ia menggunakan sesuatu yang disebut TSC atau TypeScript Compiler untuk itu dan keduanya memiliki alat pengujian juga. Create React App menggunakan Jest untuk pengujian dan kemudian salah satu bagian dari alat ini adalah kemampuan untuk membangun aplikasi Anda ke dalam produksi menjadi aset statis yang dapat Anda unggah ke server atau Anda dapat menempatkannya ke folder klien back-end Anda.

Jika ini adalah aplikasi tumpukan penuh maka ini sangat penting. Anda tidak perlu menggunakannya. Anda dapat membangun aplikasi React dari awal dengan paket web. Ini membuatnya jauh lebih mudah untuk tidak hanya membangun aplikasi tetapi juga mengkompilasi dan membangunnya untuk produksi.

Mereka berdua cantik bahkan di departemen itu.

Pemenang: Sudut

Ekosistem

Seperti yang saya katakan, kedua teknologi ini memiliki ekosistemnya sendiri yang sekarang menyebar jauh melampaui browser web.

Ionic adalah kerangka kerja hybrid populer yang merupakan aplikasi Angular yang berjalan di dalam pembungkus asli untuk aplikasi seluler. Anda dapat membuat aplikasi seluler menggunakan Angular. Aplikasi hybrid bisa sedikit kikuk dibandingkan dengan aplikasi asli. Pengalaman pengguna terkadang tidak begitu bagus–tidak secepat dan responsif. Di antara berbagai kerangka kerja hybrid, Ionic 3 adalah yang terbaik. Ada juga NativeScript, yang memungkinkan kita untuk membangun aplikasi asli aplikasi iOS dan Android dengan Angular serta JavaScript.

Meskipun demikian, NativeScript tampaknya tidak sebagus React Native Facebook setidaknya pada saat ini. Angular juga memiliki pustaka komponen desain material jika Anda adalah penggemar desain material. Angular Universal adalah proyek benih yang dapat digunakan untuk merender Angular di sisi server. Ada juga toko NgRx yang merupakan perpustakaan manajemen negara yang terinspirasi oleh Reax redux. Ini didasarkan pada status yang dimutasi oleh reduksi rekan. Ini juga memiliki integrasi dengan ekstensi Reaktif.

Anda akan menyadarinya. Suatu kali, salah satu dari mereka melakukan sesuatu yang lain menyalin dengan cara yang berbeda. React dan Angular telah menjadi kerangka kerja JavaScript Microsoft dan Apple.

React memiliki ekosistem yang cukup. Ini memiliki React native yang populer. Ini adalah cara terbaik untuk membangun aplikasi seluler dengan teknologi web. React Native cepat dan banyak aplikasi jika dibangun dengan benar, mereka ada di sana dengan aplikasi asli yang dibangun di Swift atau Java. React memiliki pustaka desain material yang disebut Material-UI yang sangat mirip dengan komponen desain material Angular tetapi lebih matang. JS adalah kerangka kerja untuk merender aplikasi React sisi server. Ini bertujuan untuk melakukan ini dengan cara sesederhana mungkin sehingga ini dapat dibandingkan dengan Angular Universal. MobX adalah cara lain untuk mengelola status. Ini bekerja sedikit berbeda dari redux. Ini menyediakan satu set dekorator untuk mendefinisikan yang dapat diamati dan pengamat dan memperkenalkan logika Reaktif ke Negara Anda.

Storybook adalah lingkungan pengembangan untuk React. Ini memungkinkan Anda untuk menelusuri pustaka komponen, melihat status yang berbeda dari setiap komponen dan secara interaktif mengembangkan dan menguji komponen. Reactive VR membuat React menjadi virtual reality. React desktop adalah library JavaScript yang dibangun di atas library Reacts yang seharusnya membawa pengalaman desktop asli ke web, menampilkan banyak komponen macOS dan Windows 10. Ekosistem React sangat besar dan kuat. React membuat jalannya ke setiap aspek teknologi dan itu adalah pemenang yang jelas.

Pemenang: Bereaksi

Orang-orang berjas dan berdasi menggunakan Angular dan para hipster dengan janggut lusuh menggunakan React.

Intinya: Ini dasi

Jika Anda memutuskan antara kerangka kerja ini, lihat kategori yang berbeda dan lihat apa yang menarik minat Anda. Cobalah keduanya dan lihat mana yang Anda ambil lebih cepat. Lakukan lebih banyak penelitian daripada blog ini. Anda tidak akan pernah mendapatkan semua info yang Anda butuhkan dari satu blog, jadi bacalah lagi.

Jika Anda melihat ekosistem yang lebih besar yang mencakup pengembangan aplikasi seluler asli, pilih Bereaksi tanpa berpikir dua kali. Jika Anda mencari fitur, Angular sangat besar. Ada lebih banyak fitur daripada yang Anda butuhkan.