Geekly articles weekly

Perbandingan kerangka JS: React, Vue, dan Hyperapp

Penulis materi, terjemahan yang kami terbitkan hari ini, percaya bahwa Hyperapp adalah alternatif penting untuk kerangka kerja web seperti React atau Vue . Dia mengatakan alasan untuk klaim ini adalah bahwa dia menemukan bahwa Hyperapp lebih mudah dipelajari daripada dua kerangka kerja. Idenya telah dikritik, karena tampaknya itu semata-mata didasarkan pada pendapatnya, dan pendekatan ini sama sekali tidak memberi kerangka kerja lain kesempatan untuk menunjukkan kekuatan mereka. Artikel ini ditujukan untuk analisis objektif Hyperapp, React, dan Vue, berdasarkan contoh sederhana yang menunjukkan kemampuan mereka dan berdasarkan hasil pengujian mereka.



Contoh # 1: aplikasi penghitung


Implementasi aplikasi penghitung mungkin merupakan salah satu contoh yang paling umum digunakan dalam pemrograman reaktif. Ini sangat sederhana dan dapat dimengerti:

  • Kami membutuhkan jumlah variabel, yang akan menyimpan nilai penghitung.
  • Dua metode akan dibutuhkan untuk menambah dan mengurangi jumlah variabel.
  • Diperlukan mekanisme untuk menampilkan nilai yang disimpan dalam count dan menyajikannya kepada pengguna.
  • Diperlukan dua tombol yang terikat pada metode yang sesuai, memungkinkan pengguna untuk bertindak pada variabel count .

Berikut ini adalah implementasi dari contoh ini menggunakan kerangka kerja yang dimaksud.

▍Bereaksi


 import React from "react"; import ReactDOM from "react-dom"; Class Counter extends React.Component {   constructor(props) {       super(props);       this.state = { count: 0};   }   down(value) {       this.setState(state => ({ count: state.count - value }));   }   up(value) {       this.setState(state => ({ count: state.count + value }));   }   render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick = {() => this.down(1)}>-</button>               <button onClick = {() => this.up(1)}>+</button>           </div>       );   } } ReactDOM.render(<Counter />, document.querySelector("#app"));

UeVue


 import Vue from "vue"; new Vue({   data: { count: 0 },   methods: {       down: function(value) {           this.count -= value;       },       up: function(value) {           this.count += value;       }   },   render: function(h) {       return(           <div>               <h1>{this.count}</h1>               <button onClick={() => this.down(1)}>-</button>               <button onClick={() => this.up(1)}>+</button>           </div>       );   },   el: "#app" });

▍Hperper


 import { h, app } from "hyperapp"; const state = {   count: 0 }; const actions = {   down: value => state => ({ count: state.count - value}),   up: value => state => ({ count: state.count + value}) }; const view = (state, actions) => (   <div>       <h1>{state.count}</h1>       <button onclick={() => actions.down(1)}>-</button>       <button onclick={() => actions.up(1)}>+</button>   </div> ); app(state, actions, view, document.querySelector("#app"));

Nal Analisis


Jika Anda tidak terbiasa dengan kerangka kerja ini, atau bahkan dengan setidaknya satu kerangka kerja, maka di sini, mungkin, Anda akan menemukan sesuatu yang tidak dapat dipahami. Jadi mari kita uraikan kode ini.

  • Saat menggunakan ketiga kerangka kerja, ada perintah import di awal kode aplikasi.
  • Bereaksi menggunakan paradigma berorientasi objek. Ini menciptakan kelas untuk komponen Counter . Vue berjalan dengan cara yang sama. Di sini instance baru dari kelas Vue dibuat, informasi diteruskan ke sana. Dan akhirnya, Hyperapp menggunakan paradigma fungsional, menggunakan view entitas independen, state dan actions .
  • Jika kita berbicara tentang jumlah variabel, maka dalam Bereaksi itu diinisialisasi dalam konstruktor komponen, dan dalam Vue dan Hyperapp itu adalah properti dari data dan objek state , masing-masing.
  • Jika kita lebih jauh mengeksplorasi aplikasi ini, kita dapat melihat bahwa Bereaksi dan Vue menggunakan metode yang sangat mirip untuk berinteraksi dengan variabel count . Di Bereaksi, untuk mengubah keadaan aplikasi, metode setState diwarisi dari React.Component . Di Vue, nilai this.count diubah secara langsung. Metode Hyperapp ditulis menggunakan sintaks fungsi panah ES6. Di antara kerangka kerja yang dimaksud, ia adalah satu-satunya yang menggunakan ini, karena Bereaksi dan Vue terpaksa menggunakan kata kunci this di dalam metode mereka. Metode Hyperapp, di sisi lain, mengharuskan mereka, sebagai argumen, dilewatkan objek dengan keadaan aplikasi. Ini berarti bahwa mereka kemungkinan besar dapat digunakan kembali dalam berbagai konteks.
  • Bagian dari aplikasi yang bertanggung jawab untuk mengeluarkan data ke halaman terlihat hampir sama dalam ketiga contoh. Kekhasan Vue adalah bahwa ketika menggunakan framework ini, fungsi h harus diteruskan ke subsistem rendering. Hyperapp menggunakan onclick daripada onclick , dan di sini variabel count diakses secara berbeda dari React dan Vue, karena kekhasan bagaimana keadaan aplikasi disimpan di setiap kerangka kerja.
  • Dan akhirnya, ketiga kerangka kerja menggunakan ikatan ke elemen #app . Di masing-masing dari mereka, operasi ini dilakukan secara berbeda. Perlu dicatat bahwa dalam Vue operasi ini terlihat paling sederhana dan paling mudah dipahami dan memberikan pengembang desain yang lebih fleksibel, bekerja dengan pemilih elemen, dan tidak dengan elemen itu sendiri.

▍ Kesimpulan


Jika Anda langsung membandingkan kode yang memecahkan masalah yang sama yang ditulis menggunakan ketiga kerangka kerja, ternyata Hyperapp, untuk penerapan aplikasi penghitung, membutuhkan paling sedikit garis kode, dan ini adalah satu-satunya kerangka kerja yang menggunakan pendekatan fungsional. Namun, jumlah kode yang ditulis menggunakan Vue, jika Anda menghitung jumlah karakter, ternyata sedikit kurang, dan penggunaan pemilih elemen di dalamnya terlihat sangat bagus. Kode aplikasi Bereaksi tampaknya menjadi yang terpanjang, tetapi ini tidak berarti bahwa itu jauh lebih sulit untuk dipahami daripada kode yang ditulis untuk bekerja dengan kerangka kerja yang dianalisis lainnya.

Contoh No. 2: bekerja dengan kode asinkron


Ada kemungkinan bahwa, dalam praktiknya, Anda harus berurusan dengan kode asinkron. Salah satu operasi asinkron yang paling umum adalah mengirim permintaan ke beberapa API. Untuk keperluan contoh ini, API JSONPlaceholder digunakan , yang berisi data bersyarat dan daftar publikasi. Inilah yang akan kita lakukan di sini:

  • Kami menyimpan array untuk posting di dalamnya dalam keadaan aplikasi.
  • Kami memanggil, menggunakan metode yang sesuai, fetch() , menunjukkan URL yang kami butuhkan, menunggu data tiba, mengurai kode JSON yang diterima, yang merupakan array dari objek, dan akhirnya memperbarui variabel posts dengan menuliskan data yang diterima ke dalamnya.
  • Kami menampilkan tombol pada halaman yang memanggil metode yang memuat daftar publikasi.
  • Daftar posting dari posts menggunakan tombol.

Pertimbangkan kode yang mengimplementasikan skema tindakan di atas.

▍Bereaksi


 import React from "react"; import ReactDOM from "react-dom"; class PostViewer extends React.Component {   constructor(props) {       super(props);       this.state = { posts: [] };   }   getData() {       fetch(`https://jsonplaceholder.typicode.com/posts`)       .then(response => response.json())       .then(json => {           this.setState(state => ({ posts: json}));       });   }   render() {       return (           <div>               <button onClick={() => this.getData()}>Get posts</button>               {this.state.posts.map(post => (                   <div key={post.id}>                       <h2><font color="#3AC1EF">{post.title}</font></h2>                       <p>{post.body}</p>                   </div>               ))}           </div>       );   } } ReactDOM.render(<PostViewer />, document.querySelector("#app"));

UeVue


 import Vue from "vue"; new Vue({   data: { posts: [] },   methods: {       getData: function(value) {           fetch(`https://jsonplaceholder.typicode.com/posts`)           .then(response => response.json())           .then(json => {               this.posts = json;           });       }   },   render: function(h) {       return (           <div>               <button onClick={() => this.getData()}>Get posts</button>               {this.posts.map(post => (                   <div key={post.id}>                       <h2><font color="#3AC1EF">{post.title}</font></h2>                       <p>{post.body}</p>                   </div>               ))}           </div>       );   },   el: "#app" });

▍Hperper


 import { h, app } from "hyperapp"; const state = {   posts: [] }; const actions = {   getData: () => (state, actions) => {       fetch(`https://jsonplaceholder.typicode.com/posts`)       .then(response => response.json())       .then(json => {           actions.getDataComplete(json);       });   },   getDataComplete: data => state => ({ posts: data }) }; const view = (state, actions) => (   <div>       <button onclick={() => actions.getData()}>Get posts</button>       {state.posts.map(post => (           <div key={post.id}>               <h2><font color="#3AC1EF">{post.title}</font></h2>               <p>{post.body}</p>           </div>       ))}   </div> ); app(state, actions, view, document.querySelector("#app"));

Nal Analisis


Mari kita menganalisis kode ini dan membandingkan tiga kerangka kerja yang diselidiki.

  • Seperti dalam contoh sebelumnya, menyimpan keadaan aplikasi, mengeluarkan data dan menghubungkan ke elemen halaman sangat mirip dalam ketiga kerangka kerja. Di sini perbedaan yang sama diamati, yang telah kami sebutkan di atas.
  • Mengunduh data menggunakan fungsi fetch() adalah operasi yang cukup sederhana, berfungsi seperti yang diharapkan dalam semua kerangka kerja. Namun, perbedaan utama di sini adalah bahwa Hyperapp mendukung melakukan operasi asinkron sedikit berbeda dari kerangka kerja lain. Alih-alih memodifikasi negara secara langsung, di dalam tindakan asinkron, tindakan ini memanggil tindakan lain yang sinkron, yang menerima data dan mengubahnya menjadi format yang sesuai. Ini membuat inti aplikasi lebih fungsional dan lebih cocok untuk membobol bagian-bagian kecil yang berpotensi cocok untuk digunakan kembali. Pendekatan ini, di samping itu, membantu untuk menghindari beberapa masalah yang melekat pada panggilan balik bersarang yang mungkin timbul dalam situasi seperti ini.
  • Jika kita berbicara tentang ukuran kode, maka aplikasi Hyperapp lagi membutuhkan lebih sedikit garis kode untuk mencapai tujuan yang sama, tetapi kode Vue terlihat lebih pendek, dan jika Anda menghitung jumlah karakter dalam kode, itu lebih pendek daripada opsi lain.

▍ Kesimpulan


Melakukan operasi asinkron ternyata sama-sama sederhana dalam semua kerangka kerja. Hyperapp dapat mengarahkan pengembang untuk menulis kode yang lebih fungsional dan modular ketika bekerja dengan tindakan asinkron, tetapi dua kerangka kerja lainnya juga melakukan tugasnya dengan sangat baik, dan, dalam hal ini, memberikan kesempatan kepada pengembang untuk memilih.

Contoh 3: daftar komponen item untuk aplikasi Agenda


Aplikasi Agenda mungkin adalah contoh paling terkenal dalam pemrograman reaktif. Rupanya, sesuatu yang serupa diimplementasikan menggunakan hampir setiap kerangka yang ada. Di sini kami tidak akan mengimplementasikan seluruh aplikasi. Sebagai gantinya, mari kita fokus pada komponen stateless sederhana untuk mengeksplorasi kemungkinan kerangka kerja yang sedang dipelajari untuk membuat blok bangunan kecil aplikasi web yang cocok untuk digunakan kembali.

Pertimbangkan implementasi komponen menggunakan kerangka kerja yang dipelajari. Dalam contoh ini, kami akan memperluas opsi kode yang dipertimbangkan dengan mempertimbangkan komponen Bereaksi yang ditulis dalam gaya fungsional.

▍Bereaksi (gaya fungsional)


 function TodoItem(props) {   return (       <li class={props.done ? "done" : ""} onclick={() => props.toggle(props.id)}>           {props.value}       </li>   ); }

▍Bereaksi


 class TodoItem extends React.Component {   render () {       return (           <li class={this.props.done ? "done" : ""} onclick={() => this.props.toggle(this.props.id)}>               {this.props.value}           </li>       );   } }

UeVue


 var TodoItem = Vue.component("todoitem", {   props: ["id", "value", "done", "toggle"],   template:       '<li v-bind:class="{done : done}" v-on:click="toggle(id)">{{value}}</li>' });

▍Hperper


Harap dicatat bahwa Hyperapp juga menggunakan gaya fungsional.

 const TodoItem = ({ id, value, done, toggle }) = (   <li class={done ? "done" : ""} onclick={() => toggle(id)}>       {value}   </li> );

Nal Analisis


  • Bereaksi, sehubungan dengan penggunaan pola pengkodean, adalah kerangka kerja yang paling fleksibel. Ini mendukung komponen fungsional, serta komponen yang dirancang sebagai kelas. Selain itu, Bereaksi, dalam bentuk standarnya, juga mendukung komponen Hyperapp.
  • Hyperapp juga mendukung komponen Bereaksi fungsional. Ini berarti bahwa ketika bekerja dengan Hyperapp dan Bereaksi, ada banyak ruang untuk eksperimen.
  • Vue menempati urutan terakhir dalam tes ini. Ini memiliki sintaks yang agak aneh yang sulit dimengerti segera bahkan bagi mereka yang akrab dengan React atau Hyperapp.
  • Jika kita berbicara tentang panjang kode, maka semua contoh memiliki ukuran yang sangat mirip. Satu-satunya hal yang dapat dicatat di sini adalah bahwa kode pada Bereaksi, di salah satu opsi, ternyata sedikit lebih banyak daripada yang lain.

▍ Kesimpulan


Dibutuhkan waktu untuk membiasakan diri dengan Vue, karena templatnya sedikit berbeda dari templat dua kerangka lainnya. Bereaksi sangat fleksibel, mendukung berbagai pendekatan yang digunakan untuk membuat komponen. Pada saat yang sama, semuanya sangat sederhana di Hyperapp, dan itu juga kompatibel dengan React, yang memungkinkan Anda untuk mengubah kerangka kerja, jika perlu, pada beberapa tahap proyek.

Perbandingan metode siklus hidup komponen


Pertimbangan penting lainnya yang memengaruhi pilihan kerangka kerja adalah peristiwa siklus hidup komponen yang didukungnya, yang dapat Anda ikuti dan yang dapat Anda proses sesuai dengan kebutuhan pengembang. Berikut adalah tabel berdasarkan analisis API dari sistem yang diteliti.
Acara
Bereaksi
Vue
Hyperapp
Inisialisasi
konstruktor
sebelumBuat, dibuat
-
Pemasangan
comoinentDidMount
sebelumMount, dipasang
oncreate
Perbarui
componentDidUpdate
sebelum Pembaruan, diperbarui
onupdate
Lepas
komponenWillUnmount
-di atas
Penghancuran
-sebelum Destroy, hancur
ondestroy

Nal Analisis


Inilah yang dapat Anda pahami dengan menganalisis tabel ini:

  • Sebagian besar kait siklus hidup ada di Vue. Dengan bantuan mereka, programmer memiliki kesempatan untuk memproses segala sesuatu yang terjadi dengan komponen, baik sebelum acara yang sesuai dipanggil, atau sesudahnya. Ini mungkin berguna untuk mengelola komponen yang kompleks.
  • Kait siklus hidup React dan Hyperapp sangat mirip, meskipun React menggabungkan pemrosesan peristiwa yang terjadi selama pelepasan dan penghancuran komponen, sementara Hyperapp juga bertindak dengan peristiwa membuat dan memasang komponen. Keduanya memberi pengembang sejumlah kemungkinan untuk memproses acara siklus hidup.
  • Vue tidak menangani peristiwa unmount (sejauh yang dapat Anda pahami dengan menganalisis kerangka API), alih-alih mengandalkan kait yang terkait dengan penghancuran komponen. Bereaksi tidak menangani peristiwa pembunuhan komponen, yang memungkinkan hanya komponen unmount kejadian yang akan diproses. Hyperapp tidak menawarkan kait untuk menangani acara pembuatan komponen, melainkan mengandalkan sepenuhnya pada aktivitas pemasangan. Bergantung pada kebutuhan dan pengalaman Anda, perbedaan-perbedaan ini harus dipertimbangkan ketika merancang aplikasi, dengan mempertimbangkan kemungkinan pemrosesan peristiwa siklus hidup komponen.

▍ Kesimpulan


Secara umum, dapat dicatat bahwa metode untuk menangani peristiwa yang terjadi selama siklus hidup komponen mendukung semua kerangka kerja. Metode ini akan menyelesaikan banyak masalah. Ketiga kerangka menawarkan kait untuk semua jenis acara, tetapi ada perbedaan kecil di antara mereka, sumber yang dapat menjadi fitur internal kerangka kerja dan perbedaan dalam implementasinya. Mungkin Vue di area ini selangkah lebih maju dari sistem lain, menawarkan sistem pemrosesan acara yang lebih terperinci, memungkinkan Anda untuk menangani acara siklus hidup baik sebelum atau setelah terjadi.

Perbandingan Kinerja Kerangka


Selain kenyamanan menggunakan kerangka kerja dan teknik pemrograman yang digunakan untuk bekerja dengannya, banyak pengembang sangat khawatir tentang kinerja kerangka kerja, terutama untuk aplikasi yang cukup kompleks. Sumber informasi berharga tentang kinerja berbagai kerangka kerja adalah proyek js-framework-benchmark .

Oleh karena itu, lihat hasil tes Bereaksi, Vue, dan Hyperapp.

▍Bekerja dengan meja


Berikut ini adalah hasil pengujian kerangka kerja untuk bekerja dengan tabel. Indikator dalam sel tabel sesuai dengan durasi operasi ± standar deviasi. Hasil membagi indikator yang diperoleh dengan indikator terbaik ditunjukkan dalam tanda kurung.


Analisis


  • Operasi di mana kunci (bukan kunci) tidak digunakan untuk output data jauh lebih cepat daripada operasi di mana kunci digunakan (kunci).
  • Yang tercepat dari keenam opsi yang dipertimbangkan adalah yang menggunakan Bereaksi tanpa menggunakan kunci, yang menunjukkan kinerja mengesankan di semua pengujian.
  • Jika Anda membandingkan Vue dan Bereaksi saat bekerja dengan kunci, maka Vue memiliki sedikit keuntungan. Pada saat yang sama, jika Anda membandingkan React dan Vue dalam varian di mana kunci tidak digunakan, Vue menunjukkan kinerja yang jauh lebih rendah daripada React.
  • Vue dan Hyperapp, seperti yang dapat Anda lihat dari hasil, mengalami beberapa kesulitan dengan tes, di mana pembaruan parsial dari tabel dilakukan, dan Bereaksi menunjukkan dirinya dengan baik di atasnya, mungkin karena beberapa optimasi yang ditujukan untuk mempercepat seperti operasi.

OMemuat, meluncurkan, ukuran kode


Berikut ini adalah tabel dengan hasil studi indikator yang terkait dengan kecepatan peluncuran kerangka kerja, ukurannya, hingga penggunaan utasnya.


Analisis


  • Kode Hyperapp ternyata menjadi yang terkecil di antara kerangka kerja yang dipelajari. Kode React dan Vue kira-kira berukuran sama.
  • Hyperapp membutuhkan waktu paling sedikit untuk meluncurkan. Alasannya, tentu saja, adalah ukuran kecil dari kode kerangka kerja dan pendekatan minimalis untuk merancang API-nya.
  • Vue, ketika tiba saatnya untuk meluncurkan kerangka kerja, sedikit lebih cepat daripada Bereaksi.

▍Bekerja dengan memori


Sekarang perhatikan hasil pengujian alokasi memori.


Analisis


  • Hyperapp adalah kerangka kerja yang paling ringan dalam hal konsumsi memori.
  • Secara umum, dapat dicatat bahwa semua kerangka kerja tidak mengkonsumsi banyak memori. Ini menunjukkan bahwa mereka, pada komputer modern, akan bekerja kurang lebih sama.

▍ Kesimpulan


Jika, ketika mengembangkan suatu proyek, Anda perlu mencapai kinerja maksimum, Anda harus memahami, pertama, jenis aplikasi apa yang Anda kembangkan, dan kedua, untuk secara jelas menentukan kebutuhan aplikasi ini. Jika Anda menggabungkan analisis kinerja ketiga kerangka kerja, Anda merasa bahwa Vue dan React lebih cocok untuk aplikasi yang lebih kompleks, dan Hyperapp lebih baik pada aplikasi yang lebih kecil yang perlu memproses lebih sedikit data, yang membutuhkan secepat mungkin untuk dijalankan, dan siapa yang mungkin perlu bekerja pada komputer yang tidak tercepat.

Namun, perlu diingat bahwa tes kinerja yang digunakan di sini jauh dari kehidupan nyata, dari semacam skenario rata-rata. Oleh karena itu, setelah menguji dan membandingkannya pada proyek nyata, Anda dapat melihat hasil lainnya.

Catatan tambahan


Perlu dicatat bahwa membandingkan kerangka kerja web mungkin menyerupai sesuatu seperti membandingkan apel dengan jeruk. Berikut adalah beberapa pertimbangan lain mengenai Bereaksi, Vue, dan Hyperapp yang mungkin berguna dalam memilih kerangka kerja spesifik untuk suatu proyek:

  • Bereaksi mem-bypass masalah yang elemen JSX tetangga harus dibungkus dalam elemen induk, memperkenalkan konsep fragmen - elemen yang memungkinkan Anda untuk mengelompokkan satu set elemen turunan tanpa menambahkan node tambahan ke DOM.
  • Bereaksi menyediakan pengembang dengan komponen tingkat tinggi , sementara Vue menggunakan mixin untuk menggunakan kembali fungsi komponen.
  • Vue lebih sepenuhnya memanfaatkan konsep pemisahan tanggung jawab, memisahkan struktur dan fungsionalitas aplikasi menggunakan templat .
  • Hyperapp, bila dibandingkan dengan Bereaksi dan Vue, tampak seperti sistem yang menyediakan API tingkat rendah. Kode aplikasi Hyperapp ternyata lebih pendek, itu memberikan fleksibilitas yang besar, yang dapat berguna dalam kasus di mana pengembang mungkin ingin mengatasinya dengan memperbaiki dan meneliti mekanisme internal.

Ringkasan


Penulis materi ini percaya bahwa jika Anda membaca sampai titik ini, maka Anda sudah memiliki pemahaman tentang kerangka mana yang dipelajari di sini yang paling sesuai dengan kebutuhan Anda. Pada akhirnya, kami tidak berbicara tentang kerangka mana yang terbaik, tetapi tentang yang mana yang paling mampu menunjukkan dirinya dalam berbagai situasi. Sebagai hasilnya, kita dapat menarik kesimpulan umum berikut:

  • React — , , , - , . , , , , . , React — , .
  • Vue , - JavaScript-, — . React, , , , React - . Vue , , , , React.
  • , , Hyperapp — , , — . , React Vue, . , . , Hyperapp, , , , Hyperapp-, . , , Hyperapp, , , , React Vue, .

! -?


, - 10% :)

Source: https://habr.com/ru/post/id417483/

More articles:


All Articles