Angular vs React 7: 7 Fitur Utama Dibandingkan
Angular vs React adalah debat yang populer di kalangan Developers front-end JavaScript dan sering-nya debat itu berakhir menjadi bias pada satu teknologi atau yang satu-nya lagi. Dikembangkan oleh Google dan Facebook, Angular dan React adalah dua teknologi populer yang digunakan untuk membangun interactive single-page applications.
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 seorang pendukung kuat the code-first 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 library.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:
- Pengguna mengklik sebuah elemen React.
- Sebuah aksi dipicu. Aksi ini dikirimkan ke sebuah penyimpanan melalui pustaka pengiriman.
- 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.
Flux melengkapi React dan mengimplementasikan konsep Undirectional data flow.
Angular adalah sebuah framework untuk membangun client applications.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 Developers 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.
/* Path: /app/models/User.ts */
export class User {
id: number;
username: string;
password: string;
firstName: string;
lastName: string;
}
/* /app/services/user.service.ts */
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { User } from '../models/User';
@Injectable()
export class UserService {
constructor(private http: Http) { }
getAll() {
// API to return all users
}
create(user: User) {
//API call to create user
}
update(user: User) {
//API call to update user
}
delete(id: number) {
//API call to delete user
}
}
/* Path: /app/page/page.component.ts */
import { Component } from '@angular/core';
import { User } from '../models/User';
import { UserService } from '../services/user.service';
@Component({
templateUrl: 'page.component.html'
})
export class PageComponent {
currentUser: User;
users: User[] = [];
constructor(private userService: UserService) {
//Dependency is Injected inside the constructor's arguments
deleteUser(id: number) {
this.userService.delete(id).subscribe(() => { #Do Something});
}
private loadAllUsers() {
this.userService.getAll().subscribe(users => { #Do something else });
}
}
<!---Path: /app/home/page.component.html -->
<div class="title">
<h2>All users:</h2>
<ul>
<li *ngFor="let user of users">
{{user.username}} ({{user.firstName}} {{user.lastName}})
- <a (click)="deleteUser(user.id)">Delete</a>
</li>
</ul>
</div>
Component-Based Approach
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 di Angular dirancang sedemikian rupa sehingga Anda dapat mengaitkan struktur dan fungsionalitas dalam satu entitas. Berikut ini adalah ikhtisar arsitektur tingkat tinggi dari komponen dan bagaimana tautan ini ke semua yang lain di Angular.
Arsitektur dari Angular. Komponen sebagai pusatnya dan selainnya berputar mengitarinya.
Pembagian data antar komponen dimungkinkan dengan menyarangkan komponen seperti yang dicontohkan berikut.
/* UserParentComponent.ts */
import { Component } from '@angular/core';
// The <user-child> selector is nested inside <user-parent>. Each user is passed down as a property.
@Component({
selector: 'user-parent',
template: `
<h2>There are {{users.length}} registered users {{status}} now</h2>
<user-child *ngFor="let user of users"
[user]="user"
[status]="status">
</user-child>
`
})
export class UserParentComponent {
users: { id: number, name: string }[] = [
{ "id": 0, "name": "Chris" },
{ "id": 1, "name": "Dwayne" },
{ "id": 2, "name": "Eve" }
];
status: string = "online";
}
/* UserChildComponent.ts */
import { Component, Input } from '@angular/core';
// Input properties are adorned with @decorators
// user & status are input properties
@Component({
selector: 'user-child',
template: `
<h2>{{user.name}}</h3>
<p> id : {{user.id}} </p>
<p> Status: {{status}} </p>
`
})
export class UserChildComponent {
@Input() user: { id: number, name: string };
@Input() status: string;
}
Konsep dari komponen deeply rooted di dalam React, sama seperti di Angular. Facebook menyebut React sebuah library berbasis komponen yang mengizinkan kamu membangun User Interface 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.
/ Writing components using JavaScript functions
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Writing components using ES6 Class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
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 key features 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 lebih dalami tentang React, yah? Salah satu fitur bahasa penting dalam React terlihat jelas dalam contoh kode ini.
function Tweet(props) {
return(
<div className="tweet">
<img src="http://twitter.com/some-avatar.png" className="tweet__avatar" />
<div className="tweet__body">
<p>This is a tweet.</p>
</div>
</div>
);
}
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 di diterjemahkan menjadi ini:
"use strict";
function Tweet(props) {
return React.createElement(
"div",
{ className: "tweet" },
React.createElement("img", { src: "http://twitter.com/some-avatar.png", className: "tweet__avatar" }),
React.createElement(
"div",
{ className: "tweet__body" },
React.createElement(
"p",
null,
"This is a tweet."
)
)
);
}
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. lass User extends React.Component {
constructor(props) {
//bloat code alert
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleSubmit(user) {
//Method to handle submit
}
handleInputChange(user) {
//Method to handle input
}
render() {
return (
<div>
<UserRegistration
onSubmitSuccess={this.handleSubmit} onInputChange={this.handleInputChange} />
</div>
);
}
}
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.
let isLoggedIn: boolean = false;
let id: number = 10;
let name: string = "Davis";
let list: number[] = [1, 2, 3];
enum Color {Red, Green, Blue};
let c: Color = Color.Red;
let bucket: any = 4;
bucket = "I can be a string";
bucket = false; // or a boolean
Mendefinisikan signature dari sebuah API menggunakan sebuah interface membuat kode-nya tidak membingungkan dan mudah untuk dipahami. interface-nya hadir sebagai sebuah panduan cepat yang membantu kamu memulai kodenya segera dan menyimpan waktu ketimbang menghabiskan waktu untuk membaca dokumentasi atau implementasi nyata dari library-nya.
interface ButtonSettings {
text: string;
size?: { width: number; height: number; };
color?: string;
}
function createButton(settings: ButtonSettings) { ... }
createButton({ text: 'Submit' }); // OK
createButton({ text: 'Submit', size: { width: 70, height: 30 }}); // OK
createButton({ text: 'Submit', color: 43); // Not OK: 43 isn't a string
createButton({ text: 'Submit', size: { width: 70 }); // Not OK: size needs a height as well
createButton({ color: 'Blue'}); // Not OK: 'text' member is required
Kata kunci
type di TypeScript bisa digunakan untuk membuat sebuah nama samaran untuk sebuah tipe. Anda kemudian dapat membuat tipe baru yang merupakan penyatuan atau persimpangan dari tipe primitif ini. //Union Types
type Age = number | string;
function getAge (age: Age): string {
return `You are ${age}!`;
}
let ofSusan: Age =21;
let ofTyler: Age = 'thirty one';
getAge(ofSusan); // You are 21!
getAge(ofTyler); // You are thirty one!
//Intersection Types
interface Name{
name(firstName: string, lastName: string): string;
}
interface Age {
age(current: number): number;
}
// assign intersection definition to alias User
type User = Name & Age;
function createUser (testUser: User) {
testUser.name("David","John");
testUser.age(99);
testUser.address(); //error
React memiliki dukungan terbatas pada type checking karena ES6 tidak mendukungnya. Meskipun kamu bisa mengimplementasikan type checking menggunakan library
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. import PropTypes from 'prop-types';
//importing prop-types library
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
<P> My age is, {this.props.age} </h2>
);
}
}
Greeting.propTypes = {
name: PropTypes.string;
age: PropTypes.number;
};
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 yang 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.
// Angular CLI
$ npm install -g @angular/cli
// create-react-app
$ npm install -g create-react-app
Untuk membuat sebuah aplikasi Angular baru, kamu harus menggunakan perintah berikut:
$ ng new PROJECT-NAME
$ ng serve
Namun itu bukan dia. Perintah
ng generate membiarkanmu membuat komponen, routes, pipes, directives, dan services. $ ng generate component Page
installing component
create src\app\page\page.component.css
create src\app\page\page.component.html
create src\app\page\page.component.spec.ts
create src\app\page\page.component.ts
update src\app\app.module.ts
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 mengenai itu 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-appIni 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 script yang tersedia untuk aplikasi React-nya pada file package.json.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Data Binding: Two-Way Binding vs. Unidirectional Binding
Data binding adalah sebuah fitur yang mengaktifkan sinkronisasi data antara keadaan aplikasi-nya (model) dan view-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.
class UserChild extends React.Component {
render() {
let userData = this.props.users.map( (user) => {
return (<p> <strong>{user.id} </strong> : {user.name} </p>);
});
return (
<div>
<h2> Hello. The server is {this.props.status} </h2>
{userData}
</div>
);
}
}
class UserParent extends React.Component {
constructor() {
super();
//State gets defined here
this.state = {
status: "Online"
}
}
render() {
return (
<div>
<UserChild users={this.props.users} status={this.state.status} />
</div>
);
}
}
var USERS = [
{ "id": 0, "name": "Chris" },
{ "id": 1, "name": "Dwayne" },
{ "id": 2, "name": "Eve" }
];
ReactDOM.render(
<UserParent users={USERS} />,
document.getElementById('container')
);
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>
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. <div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
Server-Side Rendering
Server-side rendering adalah sebuah teknik rendering tradisional. Di sini, server-nya mengembalikan keseluruhan berkas HTML melalui request, 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 library yang kuat mungkin kelihatan tidak adil. Namun, mereka teknologi JavaScript lanjutan yang digunakan untuk membuat aplikasi satu halaman yang interaktif, dan karena-nya. Artikel ini seharusnya membantu-mu memutuskan untuk memilih satu dari mereka.Apa pendapatmu mengenai Angular vs. React? Bagikan di kolom komentar yah.
Terima Kasih :)
Post a Comment
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>