Ini adalah artikel respon kecil untuk publikasi
"Perbandingan kerangka JS: React, Vue dan Hyperapp" . Secara umum, saya bukan penggemar perbandingan seperti itu. Namun, karena kami berbicara tentang kerangka marginal seperti Hyperapp, dibandingkan dengan mastodon seperti React dan Vue, saya pikir, mengapa tidak mempertimbangkan semua contoh yang sama di
Svelte . Jadi untuk berbicara, untuk melengkapi gambar. Selain itu, dibutuhkan 5 menit secara harfiah. Ayo pergi!
Jika tiba-tiba Anda tidak terbiasa dengan
Svelte dan konsep menghilangnya kerangka kerja, Anda dapat membaca artikel
"Kerangka Kerja JS yang Menghilang Secara Ajaib" dan
"Kerangka Kerja Menghilang" .
Demi kenyamanan pembaca, saya menyalin contoh-contoh dari
artikel asli di bawah spoiler agar lebih mudah untuk membandingkan. Baiklah, mari kita mulai.
Contoh No. 1: aplikasi penghitung
Bereaksiimport 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"));
Vue 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" });
Hyperapp 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"));
VelLangsing
<div> <h1>{count}</h1> <button on:click="set({count: count - 1})">-</button> <button on:click="set({count: count + 1})">+</button> </div>
→ Contoh
kerja.Nal Analisis
Komponen
Svelte adalah file html yang memiliki format Single File Component (SFC), dalam satu bentuk atau lainnya, sudah digunakan dalam
Vue ,
Ractive ,
Riot, dan beberapa kerangka kerja lainnya. Selain templat html itu sendiri, komponen dapat memiliki perilaku dan logika yang dijelaskan dalam javascript, serta gaya cakupan dari komponen tersebut.
Tidak ada bagian dari komponen yang diperlukan, oleh karena itu komponen penghitung hanya dapat terdiri dari html-templat dari penghitung itu sendiri. Untuk mengubah nilai variabel
jumlah , penangan klik menggunakan metode
bawaan komponen
set () yang dijelaskan dalam
dokumentasi .
Contoh No. 2: bekerja dengan kode asinkron
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"));
Vue 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" });
Hyperapp 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"));
VelLangsing
<div> <button on:click="getData()">Get posts</button> {#each posts as {title, body}} <div> <h2><font color="#3AC1EF">{title}</font></h2> <p>{body}</p> </div> {/each} </div> <script> export default { methods: { getData() { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(posts => this.set({ posts })); } } }; </script>
→ Contoh
kerja.Nal Analisis
Tidak seperti JSX, yang, seperti salinan karbon, digunakan dalam semua 3 kerangka kerja dari perbandingan asli, dan pada kenyataannya memperluas kode javascript dengan sintaks seperti html,
Svelte menggunakan fitur yang lebih dikenal - menyematkan kode js dan css dalam html menggunakan
< script> dan
<style> .
Skrip komponen mengekspor objek JS sederhana, dibagi menjadi beberapa bagian. Bagian
metode menjelaskan metode komponen yang dapat digunakan melalui instance komponen dan penangan event. Jadi, ketika Anda mengklik tombol, metode
getData () dipanggil , di mana data diminta dan setelah selesainya operasi, data hanya diinstal dalam keadaan komponen dan segera ditarik dalam templat.
Perhatikan penggunaan penghancuran objek publikasi (pos) pada setiap langkah iterasi dari daftar publikasi:
{#each posts as {title, body}}
Trik ini menghindari redundansi dalam templat seperti
{post.title} dan menyederhanakan templat secara visual menggunakan entri
{title} yang lebih pendek.
Contoh 3: daftar komponen item untuk aplikasi Agenda
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> ); } }
Vue var TodoItem = Vue.component("todoitem", { props: ["id", "value", "done", "toggle"], template: '<li v-bind:class="{done : done}" v-on:click="toggle(id)">{{value}}</li>' });
Hyperapp const TodoItem = ({ id, value, done, toggle }) = ( <li class={done ? "done" : ""} onclick={() => toggle(id)}> {value} </li> );
VelLangsing
<li class="{done ? 'done' : ''}" on:click="set({done: !done})">{value}</li>
→ Contoh
kerja.Nal Analisis
Semuanya cukup biasa di sini. Kami mengekspos kelas css tergantung pada nilai yang
dilakukan dan mengubah nilai ini ke sebaliknya ketika Anda mengklik pada item daftar.
Perbandingan metode siklus hidup komponen
Penafian : Mulai sekarang, saya memutuskan untuk menghilangkan perbandingan dengan Hyperapp, karena kalau tidak, tabelnya tidak akan bisa dibaca.Nal Analisis
Langsing sangat minimalis, termasuk dalam hal kait siklus hidup. Hanya ada 4 kait:
- onstate - dipanggil sebelum komponen dibuat dan setiap keadaan berubah sebelum DOM diperbarui.
- oncreate - saat komponen dibuat disebut.
- onupdate - dipanggil segera setelah pemasangan di DOM dan setiap negara berubah setelah memperbarui DOM.
- ondestroy - dipanggil ketika komponen dihancurkan dan dihapus dari DOM.
Perbandingan Kinerja Kerangka
Jujur, saya tidak tahu harus berkomentar apa. Tolok ukur sendiri dan cara mereka dieksekusi selalu menimbulkan banyak kontroversi, jadi saya pikir tidak masuk akal untuk memusatkan perhatian secara tidak perlu.
Namun, kami masih belum memiliki data lain.
▍Bekerja dengan meja
OMemuat, meluncurkan, ukuran kode
▍Bekerja dengan memori
Nal Analisis
Dilihat dari angka,
Svelte cukup cepat, "makan" sedikit memori (termasuk karena tidak menggunakan VirtualDOM), itu dimulai dengan cepat dan memiliki ukuran kecil.
Secara umum, saya tidak bisa mengatakan bahwa hasil benchmark dari 3 kerangka kerja ini berbeda secara dramatis. Namun, hanya
Svelte yang memiliki kolom "hijau" secara eksklusif, mis. itu cukup baik sekaligus dalam semua hal, yang berarti sangat seimbang dan tidak memiliki distorsi yang jelas dalam kecepatan atau konsumsi memori atau metrik lainnya. Secara umum, dengan itu Anda dapat dengan aman memulai proyek apa pun, dari web biasa, hingga perangkat seluler, Smart TV, dan sistem yang lebih eksotis.
Ringkasan
Svelte adalah alat yang hebat untuk membangun komponen hampir semua aplikasi web. Ini sama kuatnya dengan React, dan meskipun memiliki komunitas yang jauh lebih kecil, ia membutuhkan lebih sedikit upaya untuk menguasainya. Ini fleksibel, seperti Vue, sementara itu jauh lebih minimalis dan diverifikasi, karena tidak mencoba untuk memahami sekaligus semua ide pengembangan web modern.
Selain itu, ia adalah satu-satunya yang menggunakan konsep
kerangka kerja yang terancam punah . Dengan kata lain, ia tidak memiliki
runtime khusus selain browser itu sendiri.
Aplikasi di atasnya ternyata cepat, tidak menuntut sumber daya dan ukurannya kecil. Selain itu,
Svelte dapat "mulus" digunakan dalam aplikasi yang ditulis dalam kerangka kerja lain, yang saya rencanakan untuk ditulis lain kali.
Jika Anda pertama kali menemukan kerangka kerja yang luar biasa ini, Anda mungkin tertarik untuk membaca artikel lain tentangnya:
→
Kerangka Kerja JS yang Menghilang Secara Ajaib→
1Kb autocomplete→
SvelteJS: Rilis versi keduaJika Anda masih memiliki pertanyaan tentang
Svelte , bergabunglah dengan
saluran telegram berbahasa Rusia
SvelteJS . Di sana Anda selalu dapat mengajukan pertanyaan dan mendapatkan saran, mencari tahu berita terbaru, dan hanya menikmati mengobrol. Kami akan senang melihat Anda!