Perbandingan Vue.js dengan React
Vue.js vs React
Kesamaan antara Vue dan React adalah keduanya:
- menggunakan virtual DOM
- menyediakan view components yang reaktif dan composable
- berfokus pada library utama, dengan perhatian routing dan global state management ditangani oleh library pendamping
Performance
Baik React maupu Vue menyediakan performa yang sebanding dalam sebagian besar kasus, dengan Vue sedikit lebih unggul karena implementasi Virtual DOMnya yang lebih ringan. Data benchmark dapat dicek di sini. Benchmark tersebut berfokus pada performa raw rendering/updating.
Dengan virtual DOM, sebuah objek JavaScript yang merepresentasikan DOM tree aslinya dibuat. Upadate pada elemen manapun dilakukan pada Virtual DOM, bukan di DOM aslinya. Saat sesuatu berubah, Virtual DOM baru dibuat dan perubahaan antara DOM lama dan baru ditentukan. Kemudian perubahaan tersebut akan diaplikasikan pada DOM aslinya.
Contoh dapat kita lihat pada list di bawah ini dalam HTML
<ul class="list"> <li>item 1</li> <li>item 2</li> </ul>
Dengan MobX
MobX sudah menjadi cukup populer di dalam komunitas React dan sebenarnya menggunakan reactivity system yang hampir sama dengan Vue. Sampai batasan tertentu, arus kerja React + MobX bisa dibayangkan sebagai Vue yang lebih bertele-tele, jadi jika kalian menggunakan kombinasi tersebut dan menyukainya, beralih ke Vue mungkin merupakan langkap berikutnya yang masuk akal.
Kemiripan
Menggunakan Virtual DOMDengan virtual DOM, sebuah objek JavaScript yang merepresentasikan DOM tree aslinya dibuat. Upadate pada elemen manapun dilakukan pada Virtual DOM, bukan di DOM aslinya. Saat sesuatu berubah, Virtual DOM baru dibuat dan perubahaan antara DOM lama dan baru ditentukan. Kemudian perubahaan tersebut akan diaplikasikan pada DOM aslinya.
Contoh dapat kita lihat pada list di bawah ini dalam HTML
<ul class="list"> <li>item 1</li> <li>item 2</li> </ul>
Dalam JavaScript dapat direpresentasikan seperti ini
{ type: 'ul', props: {'class': 'list'}, children: [ { type: 'li', props: {}, children: ['item 1'] }, { type: 'li', props: {}, children: ['item 2'] } ] }
Implementasi Virtual DOM sebenarnya lebih kompleks dari ini, namun intinya Virtual DOM merupakan sebuah objek nested JavaScript dengan nested arrays.
Component Based Architecture
Baik React maupun Vue menggunakan arsitektur berbasis komponen. Ini berarti memisahkan aplikasi ke bagian-bagian berbeda dengan fungsionalitas yang berhubungan dengan cara yang terdefinisi untuk setiap bagian dapat 'berbicara' satu dengan lainnya. Penjelasan lengkap apa itu component dapat dibaca pada artikel Medium ini.
Pada Vue, kalian bisa menggunakan single file components yang mengikuti prinsip berikut ini.
//PastaItem.vue <template> <li class="pasta-dish list-unstyled"> <div class="row"> <div class="col-md-3"> <img :src="this.item.image" :alt="this.item.name" /> </div> <div class="col-md-9 text-left"> <h3>{{this.item.name}}</h3> <p> {{this.item.desc}} </p> <button v-on:click="addToOrderNew" class="btn btn-primary">Add to order</button>
<mark>{{this.orders}}</mark> </div> </div> </li> </template> <script> export default { name: 'pasta-item', props: ['item'], data: function(){ return{ orders: 0 } }, methods: { addToOrderNew: function(y){ this.orders += 1; this.$emit('order'); } } } </script> <style src="./Pasta.css"></style>
Seperti yang bisa kalian lihat pada contoh di atas, HTML, JavaScript, dan CSS digabungkan menjadi satu file. Kalian tidak perlu memasukkan CSS ke dalam file komponen .vue, namun kalian tetap bisa jika mau.
Pada React, hal ini sangat mirip, dengan JavaScript dan JSX markup dalam sebuah file komponen.
import React from "react"; class PastaItem extends React.Component { render() { const { details, index } = this.props; return ( <li className="pasta-dish list-unstyled"> <div className="row"> <div className="col-md-3"> <img src={details.image} alt={details.name} /> </div> <div className="col-md-9 text-left"> <h3>{details.name}</h3> <p> {details.desc} </p> <button onClick={() => this.props.addToOrder(index)} className="btn btn-primary">Add to order</button>
<mark>{this.props.orders || 0}</mark> </div> </div> </li> ); } } export default PastaItem;
Build Tools
Baik React maupun Vue memiliki aplikasi bootstrap yang berjalan cepat dengan lingkungan development kalian. Build tool pada React adalah Create React App (RCA), sendangkan untuk Vue adalah vue-cli. Pada kedua kasus, kalian mendapatkan template project yang dipersiapkan pada penerapan terbaru yang terbaik.
Dengan CRA kalian lebih dibatasi pada opsi-opsinya. CRA merupakan tool yang dogmatis, memaksa kalian untuk menggunakan Webpack dan Babel dari awal. Dengan vue-cli, kalian memiliki opsi dalam bentuk template yang membuatnya sedikit lebih fleksibel.
Dalam kenyataannya, kedua bootstrap tool sangat luar biasa dan memberi kalian titik awal yang solid dan modern untuk memulai coding.
Companion Frameworks
Kemiripan (dan perbedaan) lainnya di antara kedua framework ini adalah bagaimana mereka menangani framework-framework pendampingnya. Baik React maupun Vue berfokus hanya kepada layer UI, dan meninggalkan fungsionalitas seperti routing dan state handling kepada framework pendamping.
Perbedaan antara Vue dan React adalah bagaimana mereka berhubungan dengan framework pendampingnya masing-masing. Tim utama Vue mengurus framework vue-router dan vuex dan dibawahi langsung dalam payung utama Vue. Sendangkan react-router dan react-redux milik React diurus oleh anggota komunitas dan tidak secara resmi di bawah payung Facebook/React.
Perbedaan
Templating vs JFX
Perbedaan utama antara React dan Vue adalah bagaimana templating dilakukan. Dalam Vue, kalian didorong untuk menggunakan templating regular dan kuno dari HTML. Pendekatan ini memanfaatkan attribut-attribut kustom dari elemen standar HTML.
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
Attributnya juga dapat digunakan pada single file components, walaupun dibutuhkan langkap pembangunan untuk mengonversi sintaksis komponennya menjadi JavaScript dan HTML yang valid.
<ul>
<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
</ul>
Vue mendorong digunakannya HTML untung merender, saat Vue menggunakan metode yang familiar dengan Angular-style untuk memberi output konten dinamik dengan Mustache-style syntax (dua buah kurung keriting).
Contoh:
<span>Message: {{ msg }}</span>
Untuk alasan ini, Vue dapat dibilang lebih mudah untuk diintegrasikan pada aplikasi yang sudah ada, karena kalian bisa dengan mudah memasukkan template Vue ke dalam template yang sudah ada tanpa pusing kepala. Hal ini juga dilaporkan membuatnya lebih mudah untuk pendatang baru beradaptasi dengan sintaksisnya.
React ditangan lain merekomendasikan kalian untuk menulis seluruh template code kalian dalam JavaScript dengan menggunakan sebuah 'syntax extension to JavaScript' yang disebut JSX.
Sebagai contoh, code yang sama dalam JSX:
<ul className="pasta-list">
{
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]}
addToOrder={this.addToOrder} orders={this.state.orders[key]} /> ) } </ul>
addToOrder={this.addToOrder} orders={this.state.orders[key]} /> ) } </ul>
React/JSX secara jelas terlihat lebih bertele-tele pada pandangan pertama, namun dengan menambah kemampuan untuk menggunakan JavaScript dalam template memberikan kemampuan yang lebih pada developer.
Stage Management vs Object Properties
React memiliki konsep kunci beruba application state, bahkan memiliki beberapa framework yang didedikasikan untuk mengatur objek berskala besar, seperti Redux. Selain itu, state data pada aplikasi React bersifat kekal, yaitu tidak dapat diganti secara langsung (tidak sepenuhnya benar). Dalam React, kalian perlu menggunakan method setState() untuk memodifikasi apapun di dalam locat state.
addToOrder(key) {
//Make a copy of this.state
const orders = { ...this.state.orders };
//update or add
orders[ key ] = orders[ key ] + 1 || 1;
this.setState( { orders } );
}
Dengan Vue, objek local state tidak dibutuhkan, dan data diatur melalui data property di dalam objek Vue.
export default {
name: 'app',
data() {
return {
samplePasta: samplePasta,
orders: {}
}
},
...
methods: {
handleOrder: function (key) {
if (!this.orders.hasOwnProperty(key)) {
this.$set(this.orders, key, { count: 0 });
}
this.orders[key].count += 1;
}
}
}
Dalam Vue kita tidak butuh memanggil fungsi state management seperti setState(), karena parameter data dalam objek Vue bekerja sebagai penampung untuk data aplikasinya.
React Native vs. ?
Satu area yang jelas diungguli oleh React adalah kemampuannya dalam membuat native mobile apps menggunakan React Native. Kemampuan untuk menggunakan JavaScript, CSS, dan HTML untuk membuat native mobile apps yang legit adalah sebuah game changer. Komunitas Vue dan raksasa e-commerce Alibaba Group sedang bekerja membuat React Native versi Vue dengan nama Weex, namun masih dalam pengembangan dan belum jelas kemampuannya dalam penggunaan di lapangan.
Kesimpulan
Jika kalian ingin berkecimpung ke pasar dengan JavaScript UI Framework yang baru, kalian tidak akan salah memilih baik React maupun Vue. React memang terlihat lebih populer, namun Vue juga sedang mendapat popularitas dan tidak akan hilang/terlupakan. Jika kalian ingin mengitegrasi JavaScript framwrok ke dalam codebase yang sudah ada, Vue lebih direkomendasikan. Namun jika kalian ingin membangun sebuah aplikasi mobile dengan teknologi web, React (untuk sekarang) adalah pilihan yang lebih baik.
Pada kenyataannya, keduanya merupakan pilihan yang bagus untuk membangun aplikasi JavaScript modern dan bergantung pada pendekatan mana yang lebih menarik untuk kalian.
Comments
Post a Comment