7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Angular

Angular vs React 7: 7 Fitur Utama Dibandingkan

Read Time: 14 mins

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Angular vs ReactAngular vs ReactAngular vs React

Angular vs React adalah debat yang pipuler di kalangan pengemband front-end JavaScript dan sering-nya debatnya berakhir menjadi bias pada satu teknologi atau yang satu-nya lagi. Dikembangkan oleh Google dan Facebook, Angular dan React adalah dua teknologi yang populer untuk membangun aplikasi satu laman yang interaktif.

Perbandingan komprehensif antara Angular dan React memungkinkan karena ada beberapa titik di mana mereka menawarkan hal yang berbeda secara signifikan, yaitu membuat tampilan front-end dari aplikasi-mu dan di tempat lain di mana fungsionalitas mereka tidaklah sempurnah kecuali dibantu oleh pustaka pihak ketiga. Mengadopsi salah satu di antaranya adalah sebuah pertanyaan mengenai apakah Angular atau Rect yang menyelesaikan masalahmu lebih baik dan butuh sedikit intuisi. Pada panduan ini, kita akan membandingkan tujuh fitur berbeda dari Angular dan React.

Saya adalah pendukung kuat dari code-fist approach (mereka bilang kode berbicara lebih kencang ketimbang kata-kata). Dengan begitu, saya telah menambahan sampel-sampel kode dari Angular dan React kapanpun mungkin sehingga kamu bisa membangun intuisi dan putuskan mana yang bagus untukmu dan mana yang tidak. Mari mulai.

Framework vs. Library

Angular adalah sebuah framework, sedangkan React adalah sebuah pustala.

Lalu apa artinya ini? React yang berdiri sendiri tidak akan mengizinkanmu membuat sebuah aplikasi web karena dia didesain untuk membuat view (bagian 'V' dari MVC). Apa yang React bisa lakukan adalah membuat view berbasis build component yang datanya bisa disalurkan ke anak views-nya. Untuk mengisi kekosongan ini, Facebook telah mengembangkan Flux yang merupakan pola arsitektural yang melengkapi React. Arsitektur Flux ketika dipasangkan dengan React menyediakan skenario sebagai berikut:

  1. Pengguna mengklik sebuah elemen React.
  2. Sebuah aksi dipicu. Aksi ini dikirimkan ke sebuah penyimpanan melalui pustaka pengiriman.
  3. Penyimapanan-nya memantau keadaan aplikasi dan metode penerimaan data. Tiap pembaharuan pada keadaannya akan muncul di view, dan ini membantu untuk menjaga view-nya konsisten dengan keadaan aplikasinya.

Tidak masuk akal? Figur ini akan merangkumnya untukmu.

An image that depicts how the Flux architecture complements ReactAn image that depicts how the Flux architecture complements ReactAn image that depicts how the Flux architecture complements React
Flux melengkapi React dan mengimplementasikan konsep Undirectional data flow.
Angular adalah sebuah framework untuk membangun klien aplikasi.

AngularJS dibangun secara kokoh di atas pola MVC yang memisahkan aplikasi-nya ke dalam tiga lapisan berbeda. Kombinasi dari model, view dan controller beserta kompleksitas yang terlibat pada mastering directive, factories, layanan-layanan dan komponen lainnya untuk membuat sebuah aplikasi satu halaman memaksa para pengembang di Google untuk berpidah ke arsitektur berbasis komponen.

Namun, saat aplikasi-mu mulai berkembang, penting untuk memiliki sebuah struktur solid yang menjaga logika bisnis aplikasi-mu jauh dari komponen-komponen-nya. Sebagai framework, Angular mengizinkanmu untuk melaksanakan organisasi terstruktur dengan memindahkan aturan bisnis-mu ke sebuah model domain (menggunakan gabungan dari kelas model dan layanan) dan memasukkan meodel-nya ke komponen-mu melalui injeksi dependency.

Ini adalah contoh kode yang mengilustrasikan bagaimana logika bisnis dikapsulasi di dalam model User dan layanan User, dan jauh dari komponen kita.

Pendekatan Berbasis Komponen

Komponen adalah blok pembangun paling dasar dari sebuah antarmuka dalam aplikasi Angular. Sebuah aplikasi Angular adalah sebuah pohon dari komponen-komponen Angular.

Apa itu komponen? Dalam Angular, komponen adalah class TypeScript yang memiliki dekorator @Component yang menandai mereka. Terlebih lagi, di dalam dekorator ini, kita bisa mendefinisikan apa yang Angular sebut dengan meta-data yang berisi template-nya, styles, selectors dan lainnya.

Hirarki komponen dalam Angular didesain dengan suatu cara yang membuatmu bisa mengassiasikan struktur dan fungsionalitas dalam satu entitas. Ini adalah tinjauan arsitektural tingkat tinggi dari komponen-komponennya dan cara dia terhubung ke yang lainnya di Angular.

The architecture of AngularThe architecture of AngularThe architecture of Angular
Arsitektur dari Angular. Komponen sebagai pusatnya dan selainnya berputar mengitarinya.

Pembagian data antar komponen dimungkinkan dengan menyarangkan komponen seperti yang dicontohkan berikut.

Konsep dari komponen berakar jauh di dalam React, sama seperti di Angular. Facebook menyebut React sebuah pustaka berbasis komponen yang mengizinkan kamu membangun tampilan antarmuka yang interaktif. Namun, tidak seperti Angular, komponen React hanyalah fungsi-fungsi JavaScript dengan sejumlah input dan sebuah output. Kode berkut menunjukkan komponen yang didefinisikan menggunakan fungsi JavaScript dan menggunakan sebuah class ES6.

Kita akan mengikuti standar ES6 untuk membuat komponen karena itulah yang direkomendasikan Facebook. Tiap komponen React menerima sejumlah input yang disimpan dalam sebuah objek bernama props.

Dia juga memiliki sebuah metode render, dan seperti namanya, metode ini menentukan apa yng akan dirender ketika komponen-nya diminta. Tiap komponen menjaga sebuah keadaan internal (melalui this.state). Dan tiap kali keadaaannya berubah, fungsi render komponen tersebut akan diminta kembali.

Fitur Bahasa: TypeScript vs ES6

Aplikasi Angular ditulis dalam TypeScript yang merupakan superset dari ECMA2016 dan menggunakan sebuah transpiler untuk membuat berkas .ts menjadi berkas .js. TypeScript menawarkan ekstensi bahasa yang didesain untuk mempermudah penulisan JavaScript, dan dia mengasosiasikan informasi tipe dengan entitas JavaScript untuk melaksanakan pengecekkan tipa dan mengembangkan alur kerja pengembangan.

Beberapa dari fitur kunci TypeScript termasuk optional static typing dan dukungan interfaces, classes, dan decorators. (Decorators adalah fungsi yang diawali dengan '@' dan diikuti langsung oleh sebuah class, parameter atau proeprty.)

Mari menyelam ke React, bolehkah? Salah satu fitur penting bahasa di dalam React hadir dalam contoh kode ini.

Bukankah itu bagus? React membiarkanmu menanam tag XML/HTML ke berkas JavaScript-mu dan ini dilakukan melalui JSX yang menawarkan kemampuan ekstensi sintaks ke JavaScript. Kita harus menggunakan sebuah compiler seperi Babel yang akan mengubah kode JSX kita menajdi JavaScript yang dipahami browser. Kode berikut diterjemahkan menjadi ini:

Meskipun direkomendasikan menggunakan JSX, kamu bisa menggunakan React.createElement() jika kamu tidak suka ide dari menanamkantag HTML dalam JavaScript.

Lebih jauh lagi, kamu bisa menggunakan baik standar ES6 atau bentuk tradisional dari JavaScript ketika bekerja dengan React. Meskipun ES6 relatif baru, dia memiliki banyak fitur seperti class, arrow function, template literals, destructing, dan penggunaan let dan const. Satu-satunya kerugian yang bisa saya bayangkan adalah dia menambah sedikit kode boilerplate seperti kita harus memanggil super() tiap kali kamu memanggil constructor(), dan itu tidak secara otomatis mengikat penanganan metode dengan this.

Type Checking di Angular vs PropTypes di React

Static type checking dilakukan saat sedang kompilasi. Compiler-nya akan memperingati kamu mengenai kemungkinan salah ketik dan mendeteksi beberapa error yang tidak disadari. Selain itu, mendefinisikan sebuah contract pada variabel, properti, atau parameter dari sebuah fungsi akan menghasilkan kode yang lebih mudah dibaca dan dipelihara.

Deklarasi variabel dan fungsi dibuat lebih ekspresif dengan menyatakan tipe data mereka, Kamu bisa membaca lebih mengenai aneka data primitif di dokumentasi TypeScript.

Mendefinisikan signature dari sebuah API menggunakan sebuah antarmuka membuat kode-nya tidak membingungkan dan mudah untuk dipahami. Antarmuka-nya hadir sebagai sbeuah panduan cepat yang membantu kamu memulai kodenya segera dan menyimpan waktu ketimbang menghabiskan waktu untuk membaca dokumentasi atau implementasi nyata dari pustaka-nya.

Kata kunci type di TypeScript bisa digunakan untuk membuat sebuah nama samaran untuk sebuah tipe. Lalu kamu bisa membuat tipe baru yang merupakan sebuah gabungan atau irisan dari tipe-tipe primitif tersebut.

React memiliki dukungan terbatas pada type checking karena ES6 tidak mendukungnya. Meskipun kamu bisa mengimplementasikan type checking menggunakan pustaka prop-types yang dikembangkan oleh tim React. Type checking props dari sebuah komponen untuk memastikan apakah dia sebuah string atau bukan bisa dilakukan seperti berikut.

Tapi prop-types tidak terbatas pada string, angka, dan boolean. Kamu bisa melakukan jauh lebih banyak seperti yang dijelaskan pada dokumentasi pustaka prop-types. Namun, jika kamu menseriusi static type checking, kamu harus menggunakan sesuatu seperti Flow yang merupakan pustaka static type-checker untuk JavaScript.

Scaffolding: Angular CLI vs. create-react-app

Membuat sebuah proyek dari awal mungkin terlihat menyenangkan pada awalnya. Namun, proses persiapan dari struktur direktori, menulis kode boilerplate untuk komponen dan membuat aplikasi ter-bootstrap merupakan hal yang tidak produktif dan sia-sia. Strategi-mu harusnya adalah untuk siap secapat mungkin dan fokus pada pengembangan aplikasi yan sesungguhnya. Terima kasih kepada Google dan Facebook, kamu memiliki alat untuk membuat dan merangkai aplikasimu dengan mudah

Atur Angular-CLI dan create-react-app untuk React sangat mudah dengan menggunakan npm.

Untuk membuat sebuah aplikasi Angular baru, kamu harus menggunakan perintah berikut:

Namun itu bukan dia. Perintah ng generate membiarkanmu membuat komponen, routes, pipes, directives, dan services.

Angular CLI bisa melakukan jauh lebih banyak, seperi membuat sebuah bangunan untuk aplikasi Angularmu, memerintahkan sebuah unit test, dan pengetesan end-to-end. Kamu bisa membaca lebih banyak mengenainya di GitHub.

Di sisi lain, create-react-app adalah cara yang didukung secara resmi untuk membuat aplikasi React tanpa berkas konfigurasi apapun.

$ npm install -g create-react-app

Ini seharusnya membuat sebuah aplikasi fungsional React dengan semua babel-nya dan dependensi webpack-nya telaha terurus. Kamu bisa mulai menjalankan aplikasi di browser-mu menggunakan npm start.

Anda dapat menemukan skrip yang tersedia untuk aplikasi React-nya pada berkas package.json.

Data Binding: Two-Way Binding vs. Unidirectional Binding

Data binding adalah sebuah fitur yang mengaktifkan sinkronisasi data antara keadaan aplikasi-nya (model) dan ivew-nya. Pada one-wy data binding, tiap perubahan pada keadaan aplikasi-nya secara ajaib memperbaharui view-nya. Di sisi lain, two-way data binding mengikat properti dan event-event dalam sebuah entitas yaitu tiap modifikasi dari model memperbaharui view dan sebaliknya.

Di React, properti-nya dilewatkan dari komponen induk ke anak yang dikenal sebagai undirectionalatau top-down data flow. Keadaaan sebuah komponen dikapsulasi dan tidak dapat diakses komponen lain kecuali dia disalurkan ke komponen anak sebagai sebuah prop, yaitu keadaan sebuah komponen menjadi prop dari anak komponen.

Namun, bagaimana jika kamu harus menyebarkan data-nya melalui pohon komponen? Ini dilakukan melalui child event dan parent callback. Dokumentasi React memiliki contoh bagus mengenai skenario tersebut.

Teknik-teknik data binding yang ada pada Angular adalah salah satu yang membuatnya menarik. Angular memiliki dukungan yang tidak disangka-sangka untuk interpolasi, one-way binding, two-way binding, dan event binding.

Interpolasi adalah cara paling sederhana untuk mengikat komponen proeprti-mu di dalam teks di antara tag HTML dan tugas-tugas atributnya.

<p>Welcome back {{currentUser.name}}!</p>

Property binding mirip dengan interpolasi karena kamu bisa mengikat properti dari elemen view-mu ke komponen properties. Property binding  berjasa pada komunikasi komponen dan identik dengan cara props disalurkan dalam React.

<img [src]="userImgUrl">

<user-child[user]="currentUser"></user-child>

Event binding mengizinkan alur data dalam arah terbalik yaoti dari elemen ke komponen. Di sini, click adalah event target, dan di kana kita memiliki metode onSave() yang terpicu ketika sebuah event terjadi.

<button (click)='onSave()">Save</button>

Tapi, fitur paling pentingnya adalah two-way binding menggunakan [(ngModel)]. Ini menggabungkan property binding dan event binding pada satu directive dan sangat berguna untuk form dan input fields.

Server-Side Rendering

Server-side rendering adalah sebuah teknik rendering tradisional. Di sini, server-nya mengembalikan keseluruhan berkas HTML melalui permintaan, dan browser-nya ditinggalkan dengan tugas sederhanya untuk menampilkannya ke penguna. Di sisi lain, client-side rendering mengembalikan dokumen bare-bones HTML, stylesheet dan sebuah berkas JavaScript.

JavaScript-nya membuat sebuah permintaan selanjutnya untuk merender sisa dari situs menggunakan sebuah browser. React, Angular dan semua pustaka front-end JavaScript modern lainnya adalah contoh yang bagus dari client-side rendering. Ini bukti jika kamu melihat sumbernya dari aplikasi Angular/React-mu.

Tapi client-side rendering memiliki kekurangan karena tidak bagus untuk SEO yang memberikan konten HTML yang tidak lengkap ketika kamu membagikan tautan-mu pada situs sosial media. Angular memiliki sebuah solusi yang disebut Angular Universal yang membuat aplikasi-mu ramah mesin pencari dansosial media. Dia adalah sebuah pustaka yang dibuat oleh tim Angular dan menggunakan itu sangatlah nikmat.

Universal menggunakan teknik pre-rendering di mana keseluruhan situs dirender dari server terlebih dahulu, dan setelah beberapa detik, pengguna dipindahkan server-side rendering. Karena semua terjadi dibalik layar, pengguna tidak akan menyadari perbedaannya.

Jika kamu menggunakan React dengan Redux, Dokumentasi Redux memiliki panduan bagus untuk mengatur server rendering. Kamu juga bisa menyiapkan React untuk me-render dari server-nya menggunakan komponen BrowserRouter dan StaticRouter yang tersedia di pustaka react-router. Kamu bisa membaca lebih mengenai ini pada artikel Medium ini. Tapi jika kamu fokus pada performa dan optimisasi, kamu bisa mencoba next.js yang merupakan pustaka untuk SSR di React.

Kesimpulan

Membadingkan sebuah framework yang kaya fitur dengan sebuah pusaka yang kuat mungkin kelihatan tidak adil. Namun, mereka teknologi JavaScript lanjutan yang digunakan untuk membuat aplikasi satu halaman yang interaktid, dan karena-nya. Artikel ini seharusnya membantu-mu memutuskan untuk memilih satu dari mereka.

Apa pendapatmu mengenai Angular vs. React? Bagikan di kolom komentar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.