Sudut vs Bereaksi vs Vue 2022

Ada tiga kerangka kerja untuk membangun aplikasi web yang pernah didengar oleh setiap pengembang frontend: React, Vue.js, dan Angular.

React adalah library UI, Angular adalah framework front-end yang lengkap, sedangkan Vue.js adalah framework progresif.

Mereka dapat digunakan hampir secara bergantian untuk membangun aplikasi front-end, tetapi mereka tidak 100 persen sama, jadi masuk akal untuk membandingkannya dan memahami perbedaannya.

Setiap kerangka kerja berbasis komponen dan memungkinkan pembuatan fitur UI dengan cepat.

Namun, mereka semua memiliki struktur dan arsitektur yang berbeda — jadi pertama-tama, kita akan melihat perbedaan arsitekturnya untuk memahami filosofi di baliknya.

Arsitektur

Reaksi

React tidak menerapkan struktur proyek tertentu, dan seperti yang Anda lihat dari contoh resmi "Hello World" di bawah ini, Anda dapat mulai menggunakan React hanya dengan beberapa baris kode.

 ReactDOM.render(
  <h1>Halo, dunia!</h1>,
  document.getElementById('root')
);

React dapat digunakan sebagai pustaka UI untuk merender elemen, tanpa menerapkan struktur proyek tertentu, dan itulah mengapa itu bukan kerangka kerja sepenuhnya.

React Elements adalah blok bangunan terkecil dari aplikasi React. Mereka lebih kuat daripada elemen DOM karena React DOM memastikan untuk memperbaruinya secara efisien setiap kali ada perubahan.

Komponen adalah blok bangunan yang lebih besar yang menentukan bagian independen dan dapat digunakan kembali untuk digunakan di seluruh aplikasi. Mereka menerima input yang disebut alat peraga dan menghasilkan elemen yang kemudian ditampilkan kepada pengguna.

React didasarkan pada JavaScript, tetapi sebagian besar dikombinasikan dengan JSX (JavaScript XML), ekstensi sintaks yang memungkinkan Anda membuat elemen yang berisi HTML dan JavaScript secara bersamaan.

Apa pun yang Anda buat dengan JSX juga dapat dibuat dengan React JavaScript API, tetapi sebagian besar pengembang lebih memilih JSX karena lebih intuitif.

Vue

Pustaka inti Vue.js hanya berfokus pada lapisan Tampilan. Ini disebut kerangka kerja progresif karena Anda dapat memperluas fungsinya dengan paket resmi dan pihak ketiga, seperti Vue Router atau Vuex, untuk mengubahnya menjadi kerangka kerja yang sebenarnya.

Meskipun Vue tidak sepenuhnya terkait dengan pola MVVM (Model-View-ViewModel), desainnya sebagian terinspirasi olehnya. Dengan Vue, Anda akan bekerja sebagian besar pada lapisan ViewModel, untuk memastikan bahwa data aplikasi diproses dengan cara yang memungkinkan kerangka kerja untuk merender Tampilan terbaru.

Sintaks templating Vue memungkinkan Anda membuat komponen View, dan menggabungkan HTML yang sudah dikenal dengan arahan dan fitur khusus. Sintaks templating ini lebih disukai, meskipun JavaScript dan JSX mentah juga didukung.

Komponen di Vue kecil, mandiri, dan dapat digunakan kembali di seluruh aplikasi. Komponen File Tunggal (SFC) dengan ekstensi .vue berisi HTML, CSS, dan JavaScript sehingga semua kode yang relevan berada dalam satu file.

SFC adalah cara yang disarankan untuk mengatur kode dalam proyek Vue.js, terutama yang lebih besar. Alat seperti Webpack atau Browserify diperlukan untuk mengubah SFC menjadi kode JavaScript yang berfungsi.

sudut

Dalam artikel ini, saya membahas Angular 2, dan bukan versi pertama dari kerangka kerja yang sekarang dikenal sebagai AngularJS.

AngularJS, kerangka kerja asli, adalah kerangka kerja MVC (Model-View-Controller)). Tetapi di Angular 2, tidak ada hubungan ketat dengan MV*-patterns karena juga berbasis komponen.

Proyek di Angular disusun menjadi Modul, Komponen, dan Layanan. Setiap aplikasi Angular memiliki setidaknya satu komponen root dan satu modul root.

Setiap komponen di Angular berisi Template, Kelas yang mendefinisikan logika aplikasi, dan MetaData (Dekorator). Metadata untuk suatu komponen memberi tahu Angular di mana menemukan blok penyusun yang diperlukan untuk membuat dan menyajikan tampilannya.

Template sudut ditulis dalam HTML tetapi juga dapat menyertakan sintaks template Angular dengan arahan khusus untuk menghasilkan data reaktif dan merender beberapa elemen, antara lain.

Layanan di Angular digunakan oleh Komponen untuk mendelegasikan tugas logika bisnis seperti mengambil data atau memvalidasi input. Mereka adalah bagian berbeda dari aplikasi Angular. Meskipun Angular tidak menerapkan penggunaannya, sangat disarankan untuk menyusun aplikasi sebagai kumpulan layanan berbeda yang dapat digunakan kembali.

Angular dibangun di TypeScript, jadi penggunaannya disarankan untuk mendapatkan pengalaman yang paling mulus, tetapi JavaScript biasa juga didukung.

Kepopuleran

Reaksi

React adalah salah satu proyek JavaScript paling populer dengan 160k bintang di GitHub. Ini dikembangkan dan dikelola oleh Facebook, dan digunakan secara internal di banyak proyek mereka. Selain itu, ini mendukung lebih dari 2 juta situs web, menurut statistik penggunaan BuiltWith.

Vue

Dari tiga kerangka kerja, Vue memiliki bintang paling banyak di GitHub, dengan 176 ribu bintang. Proyek ini dikembangkan dan dipimpin oleh mantan Googler Evan You. Ini adalah proyek independen yang sangat kuat di komunitas sumber terbuka dan digunakan oleh lebih dari 1 juta situs web, menurut BuiltWith.

sudut

Angular dikembangkan oleh Google, tetapi anehnya tidak digunakan di beberapa produk andalan mereka seperti Search atau Youtube. Ini sering digunakan dalam proyek perusahaan, dan mendukung lebih dari 97.000 situs web berdasarkan data BuiltWith.

Ini adalah yang paling sedikit berbintang di antara tiga kerangka kerja, dengan 68k bintang di GitHub. Namun, ketika beralih dari Angular 1 ke Angular 2, mereka membuat repositori yang sama sekali baru alih-alih melanjutkan proyek AngularJS, yang juga memiliki 59k bintang.

ekosistem

Paket sumber terbuka menghemat waktu Anda yang berharga saat mengembangkan aplikasi. Bukan hanya itu, tetapi sering kali lebih baik daripada komponen dan paket yang dibuat khusus karena telah teruji dalam pertempuran.

Penting untuk melihat ketersediaan komponen siap pakai, tema, dan alat lain yang dapat membantu Anda membuat fitur baru dengan lebih mudah.

Reaksi

Banyak aplikasi front-end mengandalkan manajemen status global untuk menyimpan informasi, seperti siapa yang masuk dan pengaturan pengguna lainnya.

Proyek paling populer untuk manajemen status JavaScript adalah Redux. Sebagian besar pengembang menggunakan binding React resmi untuk Redux, yang dikelola oleh tim Redux.

Karena popularitas React, menemukan komponen input dan elemen siap pakai menjadi sangat mudah. Semuanya hanya dengan pencarian Google atau GitHub.

Ekosistem React juga menyertakan React Native yang memungkinkan Anda membangun aplikasi iOS dan Android asli dari satu basis kode yang ditulis dalam React. Jadi, React bisa menjadi pilihan tepat untuk membangun aplikasi seluler menggunakan teknologi web juga.

React adalah bagian dari tumpukan MERN, yang berisi MongoDB, ExpressJS, React, dan NodeJS. Hal hebat tentang kombinasi ini adalah bahwa satu bahasa — JavaScript — menggerakkan seluruh aplikasi.

Vue

Meskipun Redux dapat digunakan di Vue, tidak ada binding resmi. Tetapi Anda tidak perlu khawatir karena Vuex adalah perpustakaan manajemen negara resmi yang dibuat khusus untuk aplikasi Vue. Selain terintegrasi dengan sangat baik dengan Vue, mudah untuk melakukan debug menggunakan alat pengembang Vue.

Pada hari-hari awal Vue, lebih sulit untuk menemukan komponen yang siap digunakan. Karena komunitas telah berkembang, ada berbagai macam komponen input dan elemen lanjutan yang dapat Anda gunakan untuk mempercepat pengembangan Anda.

Untuk pengembangan aplikasi seluler, ada proyek baru yang disebut Weex. Weex dikembangkan dan digunakan oleh Alibaba, tetapi tidak sedewasa dan sekuat React Native. Terlebih lagi, karena proyek ini dikembangkan dan digunakan lebih banyak di China, lebih sulit untuk menemukan dokumentasi dan solusi untuk masalah dalam bahasa Inggris.

Vue terintegrasi dengan baik dengan Laravel, dan itulah mengapa mereka sering digunakan bersama. Laravel menawarkan perancah JavaScript dan CSS lengkap untuk memungkinkan penggunaan Vue dalam proyek baru.

sudut

Untuk manajemen status di Angular, Anda dapat menggunakan proyek NgRx. Ini telah terinspirasi oleh Redux, tetapi secara khusus dibuat untuk Angular.

Seperti halnya Vue dan React, ada banyak komponen siap pakai yang dapat Anda impor ke dalam proyek Anda. Yang sedikit berbeda dari Angular adalah ada banyak komponen resmi dalam proyek Angular Material. Ini adalah proyek resmi oleh Google yang menawarkan komponen Desain Material untuk aplikasi Angular.

Anda dapat membangun aplikasi seluler lintas platform di Angular menggunakan NativeScript. Ini mendukung Vue juga, tetapi dukungan Angular lebih matang.

Angular adalah bagian dari tumpukan MEAN terkenal yang menggabungkan Angular dengan MongoDB, ExpressJS, dan NodeJS. Mirip dengan tumpukan MERN, itu bergantung sepenuhnya pada JavaScript untuk front-end dan back-end.

Teknologi Umum

Angular, React, dan Vue semuanya dapat digunakan untuk mengembangkan Progressive Web Apps, juga dikenal sebagai PWA.

PWA bukanlah aplikasi seluler tetapi aplikasi web yang dapat ditambahkan oleh pengguna ponsel cerdas sebagai pintasan ke layar beranda mereka dan menawarkan tampilan dan nuansa yang mirip dengan aplikasi seluler asli.

Anda juga dapat menemukan template premium dan aplikasi yang dibuat sebelumnya untuk setiap kerangka kerja, tetapi Angular dan React memiliki lebih banyak opsi premium yang tersedia daripada Vue.

Pertunjukan

Saat memilih kerangka kerja atau pustaka, Anda juga perlu memikirkan kinerja.

Dalam banyak kasus, Anda tidak perlu khawatir tentang kinerja, terutama jika Anda sedang membangun proyek kecil. Namun, semakin proyek tumbuh dalam ruang lingkup dan kompleksitas, kinerja dapat (dan akan) menjadi perhatian.

Penting untuk dicatat bahwa kualitas pengembangan dan mengikuti praktik terbaik dalam hal kinerja web lebih penting daripada pilihan kerangka kerja.

Tetapi karena ada beberapa metrik dan perbedaan kinerja, saya akan memeriksanya dan menjelaskan bagaimana masing-masing dapat memengaruhi upaya pengembangan Anda.

Tolok Ukur Kerangka Kerja JS: Sudut vs Bereaksi vs Vue

Hasil dari JS Framework Benchmark menunjukkan bahwa mereka semua berkinerja cukup baik di sebagian besar tolok ukur, seperti membuat atau menambahkan baris dalam tabel.

Seperti yang Anda lihat di atas, Vue jauh lebih lambat daripada Angular dan Bereaksi dalam memilih baris. Di sisi lain, Angular dan React tidak terlalu efisien dalam menukar baris.

Ini adalah satu-satunya perbedaan substansial dalam rendering benchmark — dan dalam banyak kasus, tidak akan menghasilkan hasil yang nyata. Karena memilih baris adalah fungsi yang lebih umum daripada menukar baris, saya akan mengatakan bahwa tolok ukur ini menempatkan Vue ke tempat ketiga di belakang Angular dan React yang berbagi posisi teratas.

Dalam hal memori dan waktu booting, React dan Vue memiliki skor yang sangat baik, tetapi Angular sedikit lebih lambat. Angular membutuhkan waktu 150 md untuk mem-boot skrip dasar dan membutuhkan lebih banyak memori untuk dijalankan.

Perf Track: Angular vs React vs Vue

Perf Track oleh Google Chrome Labs menunjukkan data produksi dari ribuan situs web. Statistik ini dipengaruhi oleh banyak hal lain dan tidak hanya kerangka pilihan, tetapi mari kita lihat angkanya.

Cat Berpuasa Pertama

Situs web Vue dan React berperingkat lebih tinggi untuk metrik ini dibandingkan dengan Angular yang membutuhkan lebih banyak waktu untuk mem-boot dan menyajikan konten kepada pengguna.

Cat Contentful Terbesar

Angular juga yang paling lambat di antara tiga kerangka kerja dalam merender halaman lengkap, dengan hanya 27 persen situs web Angular yang mencetak dalam kisaran yang dapat diterima.

Penundaan Masukan Pertama

Untuk ketiga kerangka kerja, lebih dari 80 persen situs web berada dalam kisaran yang dapat diterima untuk penundaan input pertama, yang menunjukkan berapa lama waktu yang diperlukan hingga pengguna dapat berinteraksi dengan halaman tersebut.

Byte JavaScript

Aplikasi yang paling ringan sejauh ini adalah yang dikembangkan dengan Vue, dengan 68 persen aplikasi Vue memuat JavaScript kurang dari 1MB. Di sisi lain, aplikasi Angular dan React cenderung memiliki ukuran kode yang lebih besar.

Cara Menggunakan Metrik Ini

Anda dapat melihat tren dari angka-angka ini, tetapi Anda tidak boleh terlalu cepat menarik kesimpulan. Untuk gambar terakhir, misalnya, penjelasannya bisa jadi bahwa Vue digunakan untuk mengembangkan aplikasi yang lebih ringan sementara Angular digunakan untuk proyek yang lebih besar.

Statistik dapat membantu memandu Anda membuat keputusan yang baik, tetapi Anda tidak dapat menggunakannya untuk membuktikan bahwa satu kerangka kerja lebih cepat atau lebih baik daripada yang lain.

Fitur lanjutan

Untuk aplikasi yang lebih maju, kerangka kerja front-end yang digunakan harus dapat melakukan beberapa tugas yang meningkatkan kinerja dan dapat diskalakan dengan lebih baik.

Dua teknologi yang menjadi kunci adalah server-side rendering (SSR) dan virtualisasi.

Reaksi

React mendukung rendering sisi server dengan paket resmi ReactDOMServer. Untuk virtualisasi, Anda dapat menggunakan alat pihak ketiga populer yang disebut React Virtualized.

Vue

Render sisi server didukung di Vue juga dengan paket SSR resmi. Selain itu, Anda juga dapat menggunakan framework Nuxt.js yang dibangun di atas Vue dan mendukung SSR.

Sayangnya, opsi virtualisasi di Vue tidak terlalu kuat. Menurut pendapat saya, Daftar Gulir Virtual Vue adalah solusi terbaik untuk pengguliran virtual, tetapi agak bermasalah dan tidak stabil seperti opsi untuk Bereaksi dan Sudut.

sudut

Angular memiliki paket Universal Angular resmi untuk SSR, dan komponen resmi untuk pengguliran virtual dan rendering daftar besar yang efisien.

Kurva Pembelajaran

Seberapa mudah mempelajari masing-masing kerangka kerja ini?

Untuk menjawab pertanyaan ini, kita perlu melihat kompleksitas setiap kerangka kerja dan konsep yang mereka perkenalkan.

Reaksi

Dalam kasus penggunaan yang paling dasar, React adalah yang paling kompleks dari tiga kerangka kerja. Itu karena Anda hanya perlu mengimpor perpustakaan, maka Anda dapat mulai menulis aplikasi React Anda dengan beberapa baris kode.

Tetapi selain dari contoh Hello World, sebagian besar aplikasi React berbasis komponen dan tidak hanya merender beberapa elemen pada halaman.

Satu hal yang menurut beberapa pengembang aneh atau sulit tentang React, adalah fakta bahwa mempelajari JSX adalah jalan satu arah. Anda juga dapat menggunakan JavaScript mentah, tetapi karena sebagian besar pengembang React menggunakan JSX, mempelajarinya hampir tidak dapat dihindari.

Ini adalah hal utama yang dapat membuat kurva belajar React sedikit lebih curam, tetapi selain itu, ini adalah perpustakaan yang mudah dipelajari bagi pengembang yang mengetahui JavaScript dan memahami konsep pengembangan web.

Vue

Vue sedikit lebih rumit untuk diatur daripada React. Anda dapat menggunakannya sebagai pustaka untuk menentukan komponen yang dapat Anda gunakan di seluruh HTML Anda — tetapi mirip dengan React, ini bukan cara sebagian besar proyek dibangun.

Sebagian besar proyek Vue akan memiliki komponen root bernama App.vue dan sejumlah komponen anak untuk menampilkan berbagai hal.

Ketika datang ke sintaks, satu-satunya hal baru yang harus Anda pelajari adalah sintaks template Vue, yang sangat mudah dipahami jika Anda tahu HTML. Arahan dasar, seperti v-if dan v-for untuk rendering bersyarat dan rendering daftar, mudah dipahami bahkan untuk pemula.

Selain itu, komponen file tunggal Vue menyimpan semua kode front-end di satu tempat, membuatnya mudah untuk mengatur proyek baru.

Vue adalah yang paling mudah dipelajari, menurut saya, karena kesederhanaan dan sintaksnya yang intuitif.

sudut

Angular memiliki struktur proyek yang paling kompleks dari ketiganya, dan karena ini adalah kerangka kerja front-end yang lengkap, ia bergantung pada lebih banyak konsep.

Selain komponen, Angular mendukung modul dan layanan. Ini mengharapkan Anda untuk menulis dan mendesain basis kode Anda dengan cara tertentu yang membuat proyek Anda lebih mudah dipelihara saat ditingkatkan.

Untuk sintaks, karena Angular bekerja paling baik dengan TypeScript, penting bagi Anda untuk mengetahui TypeScript saat membangun proyek Angular.

Sama seperti Vue, Anda juga harus membiasakan diri dengan sintaks seperti HTML sehingga Anda dapat mulai mengkodekan fitur UI baru dengan Angular.

Menurut pendapat saya, Angular adalah yang paling sulit dipelajari untuk pengembang rata-rata karena lebih kompleks dan bergantung pada TypeScript.

Prediksi Masa Depan

Banyak proyek dan kerangka kerja sumber terbuka menghilang dan menjadi tidak terawat. Haruskah Anda khawatir tentang salah satu kerangka kerja yang sedang kita diskusikan di sini?

Meskipun kami tidak dapat sepenuhnya memprediksi apa yang terjadi, pekerjaan pembangunan yang sedang berlangsung merupakan indikator yang baik dari kesehatan proyek-proyek ini. Popularitas dan pertumbuhan juga merupakan metrik penting untuk memprediksi umur panjang suatu proyek, jadi mari kita lihat setiap kerangka kerja.

Reaksi

React v17.0 telah dirilis, tetapi yang mengejutkan, itu tidak menyertakan fitur baru untuk pengembang.

Perubahan utama adalah bahwa versi baru ini memudahkan untuk mengupgrade React itu sendiri. Anda dapat memutakhirkan hanya beberapa bagian dari React dari versi yang lebih lama ke yang lebih baru, tanpa harus memutakhirkan seluruh proyek.

Jika aplikasi Anda bergantung pada fitur yang berubah atau tidak digunakan lagi dengan versi baru, Anda dapat mempertahankan versi lama agar fungsi ini tetap hidup. Pembaruan ini menjadikan React sebagai pilihan jangka panjang yang hebat karena membuatnya lebih mudah untuk tetap up to date dengan versi baru.

React telah tumbuh sebesar 44 persen sejak tahun lalu dalam unduhan npm mingguan. Dalam jumlah absolut, itu masih yang paling banyak diunduh dari tiga proyek.

Vue

Vue 3 telah dirilis pada September 2020, dan menangani banyak masalah serius yang dimiliki Vue 2 dalam proyek-proyek besar. Ini memperkenalkan Composition API yang terinspirasi oleh React Hooks dan membuatnya lebih mudah untuk menggunakan kembali logika di seluruh komponen.

Seluruh proyek ditulis ulang dalam TypeScript, yang meningkatkan dukungan TypeScript dalam proyek Vue baru sekaligus membuat proyek lebih mudah dikelola.

Vue 3 adalah peningkatan yang sangat dibutuhkan dan membuat Vue lebih cocok untuk proyek skala besar.

Unduhan mingguan Vue telah tumbuh sebesar 87 persen sejak tahun lalu, menjadikan Vue kerangka kerja yang tumbuh paling cepat secara relatif. Jika Vue dapat mempertahankan tingkat pertumbuhan ini, maka itu pasti akan segera melampaui Angular.

sudut

Angular baru-baru ini memperkenalkan Ivy Compiler. Ini mengurangi waktu pembuatan, mengoptimalkan aset, memungkinkan pengujian lebih cepat, dan secara umum meningkatkan pengalaman pengembang.

Tim Angular merilis pembaruan besar beberapa kali setahun, yang dapat menyertakan fitur baru atau hanya mempercepat kerangka kerja dengan versi browser baru.

Angular telah tumbuh sekitar 50 persen dalam unduhan mingguan sejak tahun lalu, jadi ini masih merupakan proyek yang populer.

Kesimpulan

Angular, React, dan Vue semuanya dalam pengembangan yang sangat aktif. Mereka secara teratur merilis versi baru dan mempertahankan yang sudah ada. Karena tingkat dukungan saat ini tinggi dalam setiap kasus, Anda dapat menggunakan salah satu kerangka kerja ini dengan aman.

Penting untuk dicatat bahwa Angular tidak tumbuh secepat sebelumnya, sementara Vue — meskipun baru saja dimulai — tampaknya berkembang pesat.

Seperti yang dinyatakan sebelumnya, kami tidak dapat memprediksi kerangka kerja mana yang akan tetap relevan dalam jangka panjang, tetapi setiap proyek memiliki komunitas hebat di belakangnya dan terus berkembang.

Tujuan saya dengan artikel ini adalah untuk menjelaskan perbedaan arsitektur, memecah kekuatan dan kelemahan setiap kerangka kerja, dan membandingkannya di mana pun itu berlaku.

Sebelum melompat ke kerangka kerja baru, ada beberapa hal yang perlu dipertimbangkan.

Pertama, pengalaman tim Anda dapat menjadi faktor penentu saat memilih teknologi baru.

Demikian pula, Anda harus mempertimbangkan bakat yang tersedia di daerah Anda sehingga Anda dapat mempekerjakan pengembang untuk proyek Anda.

Terakhir, jika menyangkut proyek itu sendiri, kompleksitas dan ruang lingkup juga dapat memengaruhi pilihan kerangka kerja Anda.

Dengan mempertimbangkan semua perbedaan utama, saya harap Anda dapat memutuskan kerangka kerja front-end mana yang terbaik untuk tujuan dan kebutuhan Anda.