Mengapa Saya Beralih dari AngularJS ke React

Diterbitkan: 2022-03-11

Pada tahun 2011, ketika kode saya mulai berantakan dengan penyeleksi dan panggilan balik jQuery, AngularJS datang sebagai penyelamat yang membantu dalam manajemen yang lebih baik, pengembangan yang cepat, dan lebih banyak fungsi di luar kotak. Pengikatan dua arah AngularJS dan filosofi "model sebagai sumber kebenaran tunggal" mengejutkan saya dan mengurangi redundansi data di seluruh aplikasi saya.

Namun, seiring waktu, saya menemukan bahwa AngularJS memiliki beberapa poin kesulitannya sendiri. Akhirnya ini membuat saya cukup frustrasi sehingga saya mulai mencari-cari solusi alternatif.

Titik nyeri di AngularJS 1.x

  • DOM untuk eksekusi

    Angular sangat bergantung pada DOM untuk alur eksekusinya. Dalam bootstrap default aplikasi, ia memindai DOM dan mengkompilasinya dengan prioritas arahan yang membuatnya sulit untuk men-debug dan menguji urutan eksekusi.

  • Injeksi ketergantungannya sendiri

    JavaScript tidak memiliki pengelola paket dan penyelesai ketergantungannya sendiri. Namun akhir-akhir ini, implementasi seperti AMD, UMD dan CommonJS telah menyelesaikan masalah ini dengan sangat baik. Sayangnya, AngularJS tidak berguna dengan semua ini. Sebaliknya, ia memperkenalkan injeksi ketergantungan (DI) sendiri; meskipun ada implementasi AngularJS DI non-resmi menggunakan RequireJS.

  • Pengikatan dua arah adalah pedang bermata dua

    Menggunakan penjilidan dua arah memang menggoda, tetapi seiring dengan bertambahnya kompleksitas komponen Anda, hal itu dapat menyebabkan bencana kinerja.

    Bagaimana pengikatan dua arah memengaruhi kinerja? Yah, JavaScript ES5 tidak memiliki implementasi apa pun untuk memberi tahu perubahan apa pun pada variabel atau objeknya, jadi Angular menggunakan sesuatu yang disebut "pemeriksaan kotor" untuk melacak perubahan data dan menyinkronkannya dengan UI. Pemeriksaan kotor dilakukan setelah operasi apa pun yang dilakukan dalam lingkup Angular (siklus intisari) yang mengarah ke kinerja yang lebih lambat karena jumlah pengikatan meningkat.

    Masalah lain dengan pengikatan dua arah adalah banyak komponen berbeda pada halaman yang mampu mengubah data, yang mengarah ke banyak sumber input data. Jika tidak ditangani dengan baik dapat menyebabkan situasi yang ambigu. Tapi agar adil, ini murni masalah implementasi.

  • Angular memiliki dunianya sendiri

    Setiap operasi di Angular harus melalui siklus intisarinya atau komponen Anda tidak akan disinkronkan dengan model data Anda. Jadi, jika Anda menggunakan perpustakaan JavaScript pihak ketiga yang ada, Anda perlu membungkusnya dengan fungsi $apply Angular jika melibatkan perubahan data atau Anda perlu mengonversinya menjadi layanan jika itu adalah perpustakaan utilitas. Ini seperti menemukan kembali setiap modul JavaScript yang tersedia untuk Angular.

  • Terlalu banyak konsep dan kurva belajar yang curam

    Belajar Angular membutuhkan mempelajari banyak konsep termasuk modul, pengontrol, arahan, cakupan, templat, fungsi penautan, filter, dan injeksi ketergantungan.

Bertemu Bereaksi

React, library JS open source baru dari Facebook dan Instagram, adalah cara berbeda untuk menulis aplikasi JavaScript. Ketika diperkenalkan di JSConf EU pada Mei 2013, penonton dikejutkan oleh beberapa prinsip desainnya seperti "aliran data satu arah" dan "DOM Virtual".

Situs resmi React mengatakan, “React adalah pustaka JavaScript untuk membangun antarmuka pengguna” dan ya, hanya antarmuka dan tidak ada yang lain. Ini bukan kerangka kerja seperti AngularJS. Tetapi Anda dapat menulis komponen mandiri yang kurang lebih dibandingkan dengan arahan Angular. Ikhtisar Cepat

React memikirkan kembali praktik terbaik dalam pengembangan web. Reach mendorong aliran data satu arah dan percaya pada filosofi bahwa komponen adalah mesin negara yang digerakkan oleh data. Sementara sebagian besar kerangka kerja lain suka bekerja dengan DOM dan memanipulasinya secara langsung, React membenci DOM dan bekerja untuk melindungi pengembang darinya. React hanya menyediakan API dasar yang diperlukan untuk mendefinisikan komponen UI apa pun dan tidak ada yang lain. Jangkauan mengikuti filosofi UNIX: Kecil itu indah. Lakukan satu hal dan lakukan yang terbaik.

Ini adalah perbandingan yang sangat bagus antara keduanya oleh Pete Hunt (dari tim Instagram)

Itu hanya perpustakaan. Apakah kita memerlukan kerangka kerja dengan React?

Jawaban singkat: Pilihan Anda.

Menggunakan React, Anda dapat membangun antarmuka pengguna, tetapi kita masih perlu mengelola dependensi, melakukan panggilan AJAX, menerapkan filter data. Jika kita memang membutuhkan kerangka kerja, mengapa membuang AngularJS?

Kerangka kerja adalah satu set paket dan satu set aturan. Bagaimana jika saya tidak membutuhkan beberapa paket, atau ingin menukar dengan paket lain. Bagaimana saya melakukannya? Kami membutuhkan manajer paket. Bagaimana cara kami mengelola paket di AngularJS? Itu pilihan Anda, tetapi Angular memiliki dunianya sendiri. Anda harus membungkus setiap paket luar ke dunia Angular dan kemudian menggunakannya. Tetapi React hanyalah JavaScript, dan paket apa pun yang ditulis dalam JavaScript tidak memerlukan pembungkus apa pun di React.

Jadi, lebih baik jika kita memilih paket kita sendiri dari repositori paket seperti npm dan mengaturnya sesuka kita. Kabar baiknya adalah bahwa React mendorong penggunaan npm, yang memiliki banyak paket siap pakai. Untuk memulai React, Anda mungkin ingin menggunakan salah satu dari Full-Stack Starter Kits ini

Keuntungan dari React

Jadi mengapa saya benar-benar beralih ke React?

Bereaksi cepat!

React mengambil pendekatan yang berbeda dari framework lainnya. Itu tidak membiarkan Anda bekerja dengan DOM secara langsung. Sebaliknya, ini memperkenalkan lapisan DOM Virtual antara logika JavaScript Anda dan DOM yang sebenarnya. Ini membantu dalam meningkatkan kecepatan secara drastis. Pada render yang berurutan, React melakukan diff pada DOM Virtual dan hanya memperbarui bagian DOM asli yang perlu diperbarui.

Virtual DOM juga membantu dalam memecahkan masalah lintas browser, karena menyediakan API lintas browser terpadu yang bahkan berfungsi di Internet Explorer 8. (Fiuh!)

Semuanya adalah komponen (widget UI)

Menulis komponen UI mandiri memodulasi aplikasi Anda dan memisahkan kekhawatiran untuk masing-masingnya. Setiap komponen dapat dikembangkan dan diuji secara terpisah dan pada gilirannya menggunakan komponen lain untuk meningkatkan rawatan.

Aliran data satu arah untuk menang!

Flux adalah arsitektur untuk membuat lapisan data satu arah dalam aplikasi JavaScript. Itu dirancang di Facebook bersama dengan perpustakaan tampilan Bereaksi. Itu membuat pengembangan lebih sederhana dan membuatnya lebih mudah untuk melacak dan memperbaiki bug. Flux lebih merupakan konsep daripada implementasi. Hal ini dapat diimplementasikan dalam kerangka kerja lain juga. Alex Rattray memiliki implementasi Flux yang sangat bagus menggunakan Backbone Collection dan Model di React.

JavaScript dan tidak ada yang lain

Aplikasi web modern bekerja dengan cara yang berbeda dari web tradisional. Lapisan Tampilan perlu diperbarui dengan interaksi pengguna tanpa menyentuh server. Dan karenanya View dan Controller harus sangat bergantung satu sama lain. Banyak kerangka kerja lain menggunakan mesin templating seperti Handlebars dan Moustache untuk lapisan View mereka, tetapi React percaya bahwa kedua bagian itu sangat saling bergantung sehingga mereka harus berada di satu tempat tanpa menggunakan mesin templating pihak ketiga, dan tanpa meninggalkan ruang lingkup JavaScript.

JavaScript isomorfik

Kelemahan terbesar dari aplikasi web JavaScript satu halaman adalah ia memiliki keterbatasan saat dirayapi oleh mesin pencari. React punya solusi untuk ini. React dapat melakukan pra-render aplikasi di server sebelum mengirimkannya ke browser dan juga dapat mengembalikan status yang sama ke dalam aplikasi langsung dari konten statis yang telah dirender sebelumnya dari server. Karena Perayap Mesin Pencari sangat bergantung pada Respons Server daripada eksekusi JavaScript, pra-rendering aplikasi semacam itu membantu dalam Pengoptimalan Mesin Pencari.

React bermain dengan baik dengan RequireJS, Browserify dan Webpack

Loader dan bundler sangat dibutuhkan saat Anda membangun aplikasi besar. Sayangnya, versi JavaScript saat ini tidak menyediakan bundler atau loader modul, meskipun diusulkan dalam versi EcmaScript 6 (System.import) yang akan datang. Untungnya kami memiliki beberapa alternatif seperti RequireJS dan Webpack, yang cukup baik.

React dibuat dengan Browserify, tetapi jika Anda ingin menginjeksi aset gambar dan mengkompilasi KURANG atau CoffeeScript, maka Webpack mungkin merupakan opsi yang lebih baik.

Saya beralih ke Bereaksi dengan sedikit rasa sakit.

  • Karena AngularJS adalah kerangka kerja, ia datang dengan banyak barang, yang mencakup pembungkus AJAX dalam layanan $http, $q sebagai layanan janji, ng-show, ng-hide, ng-class dan ng-if sebagai pernyataan pengontrol untuk templat.

  • React bukanlah framework tetapi library untuk membangun UI, jadi Anda perlu memikirkan semua bagian lainnya sendiri. Saya sedang mengerjakan proyek open source yang dapat digunakan dengan React untuk memudahkan pengembangan Anda, dan komunitas juga secara aktif menyumbangkan komponen serupa yang dapat digunakan kembali.

    React-components.com adalah situs direktori tidak resmi di mana Anda dapat menemukan komponen open source tersebut.

  • Filosofi React tidak mendorong Anda untuk menggunakan pengikatan dua arah, yang membawa banyak kesulitan saat Anda berurusan dengan elemen formulir dan kisi data yang dapat diedit. Namun, saat Anda mulai memahami aliran data Flux dan Penyimpanan, segalanya menjadi lebih jelas, lebih sederhana, dan lebih mudah.

React masih baru sehingga akan membutuhkan beberapa waktu bagi komunitas untuk berkembang.

Angular telah mendapatkan popularitas besar belakangan ini dan memiliki jumlah ekstensi yang relatif besar yang tersedia seperti AngularUI dan Restangular. Komunitas open source React masih baru, tetapi berkembang pesat, dengan ekstensi seperti React Bootstrap. Hanya masalah waktu sebelum kami memiliki lebih banyak komponen yang tersedia, dan React dapat dengan mudah digunakan untuk pengembangan aplikasi web yang cepat.

Kesimpulan

Jika Anda pernah menggunakan AngularJS sebelumnya, maka Anda mungkin membenci React pada awalnya, terutama karena aliran data satu arah dan kurangnya "kerangka" di mana Anda harus mengurus banyak hal lain sendiri. Tetapi segera setelah Anda merasa nyaman dengan pola desain Flux dan filosofi React, Anda akan menyadari keindahannya.

Facebook dan Instagram sama-sama menggunakan React. Atom Editor baru Github dibuat menggunakan React. Yahoo Mail yang akan datang sedang dibangun kembali di React. Apa contoh lain yang Anda butuhkan? Cobalah React hari ini.