Svelteフロントエンドフレームワーク探索
9092 ワード
Svelteの作者もrollupの作者Rich Harris、先端界の車輪兄です.sevlteプロジェクトは2016年11月16日に初めて提出され、現在のバージョンは3.6.1(2019-06-27)であり、v 3バージョンは大きく変更され、以前のバージョンとは大きく異なる(v 1、v 2バージョンのAPIの使い方はvueに似ており、v 3は完全に独自のスタイルに属している).2016-12-02を見て、尤雨渓大神はこの枠組みに対する評価(もちろん時代遅れだが、核心的な思想は一致している):
このフレームワークのAPIデザインはRactive側から伝承されている(自然とVueにもよく似ている)が、これはポイントではない.Svelteの核心思想は『静的コンパイルによりフレームワークの実行時のコード量を減らす』ことである.例えば、現在のフレームワークはReact AngularでもVueでも、どのようにコンパイルしても、フレーム自体、いわゆるランタイム(runtime)を「導入」する必要があります.しかし、Svelteでは異なり、1つのSvelteコンポーネントがコンパイルされた後、必要なすべてのランタイムコードが含まれています.このコンポーネント自体を導入する以外に、いわゆるフレームワークランタイムを追加する必要はありません.
Svelteとは?
Svelteは、vueおよびreactと同様に、データ駆動コンポーネントフレームワークである.しかし、フレーム自体を導入する必要がなく、仮想DOMも使用していないランタイムフレームワークとは大きく異なります(ランタイムフレームワークの特性がこのフレームワークと仮想DOMとは縁がないことを決定します).Svelte runs at
build time, converting your components into highly efficient
imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
仮想DOMは使用されていませんが、優れたパフォーマンスを実現し、開発者のコード作成に便利です.
ReactとVueとは違いますか?
では、
svelteの意味を見てみましょう.スリムですから.スリムなフレームワークは著者の初期目的であり、スリムにはコードの作成量、パッケージサイズなどが含まれている.このフレームワークの利点,すなわち著者らが新しいフレームワークを開発する目的をまとめた.
単純な使い方の比較
react hook
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
{a} + {b} = {a + b}
);
};vue
{{a}} + {{b}} = {{a + b}}
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
svelte
let a = 1;
let b = 2;
{a} + {b} = {a + b}
言うまでもなく、一目でわかるように、svelteはずっと簡単です.
なぜ仮想DOMを使用しないのですか?
reactとvueが盛んな時代には、仮想DOMの速度が速く、実際のDOMよりも仮想DOMの速度が速いという概念が植え込まれる可能性があります.
だからもしあなたがこの考えを持っているならば、あなたはきっとsvelteが仮想DOMを使っていないことを疑って、その速度はどうして速いですか?
実は仮想DOMはいつでも速いわけではないので、粗い対比例を見てみましょう.
比較例
ここではレンダリング時間を直接統計するのではなく、多くのデータから直接的なパフォーマンスを感じることができます.特に各データをクリックすると、明らかに(オンライン上の例なので、初めてのレンダリング速度が不正確で、主にクリックの応答速度を見ます).
もちろん、これは50000件のデータの下でのテストにすぎません.フレームワークのいわゆる速度を比較すると、実際の状況では、こんなに多くのデータを一度に示すことはありません.したがって、パフォーマンスが実行可能な場合、より多くの選択は、上手さ、メンテナンスの難しさ、コミュニティの大きさなどの条件を含むフレームワークによる便利さです.
svelte
https://svelte.dev/repl/367a2...
import { onMount } from "svelte";
const = [];
for (let i = 0; i < 50000; i++) {
list.push(i);
}
const beginTime = +new Date();
let name = "world";
let data = list;
function click(index) {
return () => {
data[index] = "test";
};
}
onMount(() => {
const endTime = +new Date();
console.log((endTime - beginTime) / 1000, 1);
});
{#each data as d, i}
Hello {name} {i} {d}!
{/each}
vue
http://jsrun.net/kFyKp/edit
Hello {{name}} {{i}} {{d}}!
const list = []
for(let i = 0; i < 50000; i++) {
list.push(i);
}
const beginTime = +new Date();
new Vue({
el: '#component-demo',
data: {
list: list,
name: 'Hello'
},
methods:{
click(index){
const list = new Array(50000);
list[index] = 'test'
this.list = list
}
},
mounted(){
const endTime = +new Date();
console.log((endTime - beginTime) / 1000,1);
}
})react
http://jsrun.net/TFyKp/edit
const list = []
for(let i = 0; i < 50000; i++) {
list.push(i);
}
class App extends React.Component {
constructor(props){
super(props);
this.state = {
list
}
}
click(i) {
return ()=>{
list[i] = 'test'
this.setState({
list,
})
}
}
render() {
return (
{this.state.list.map((v,k)=>{
return(
Hello wolrd {k} {v}!
)
})}
)
}
}
function render() {
ReactDOM.render(
,
document.getElementById('root')
);
}
render(); まとめ
まず仮想DOMは機能ではなく、データ駆動の開発を実現する手段であり、仮想DOMがなくてもデータ駆動の開発方式を実現することができ、svelteはまさにこのことをした.
単純に上記の比較例から見ると、svelteの速度は仮想DOMよりも速い(フレームワークによって仮想DOM実装が異なる).より深いコントラストは行われていないが,仮想DOMの速度が速いという観点が不完全であると考えるならば,仮想DOMは大部分の速度がまだ可能なWebアプリケーションを構築できると言うべきである.
Svelteにはどんな使いやすい特性がありますか?
const content = 'test';
{ test }
let count = 0;
function handleClick () {
// calling this function will trigger an
// update if the markup references `count`
count = count + 1;
}
{ count }
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers.push(numbers.length + 1);
}
$: sum = numbers.reduce((t, n) => t + n, 0);
{numbers.join(' + ')} = {sum}
import { writable } from 'svelte/store';
export const count = writable(0);
import { count } from './stores.js';
The count is {$count}
import { count } from './stores.js';
function increment() {
$count += 1;
}
// SvelteComponent.js
import SvelteComponent from './SvelteComponent';
const app = new SvelteComponent({
target: document.body,
props: {
answer: 42
}
});Svelteにはどんな欠点がありますか?
svelteはスタートして間もないフロントエンドのフレームワークであり、メンテナンススタッフもコミュニティも大きく3つのフレームワークに及ばないが、ここでは本人が考えているsvelteの欠点を列挙する.
export let title;
title = ' ' + title
{ title }
export let propOne;
export let propTwo = 'defaultValue';
export let customDOM;
export let dom;
test
import { count } from './stores.js';
function increment() {
$count += 1;
}学習と要約記事は同時に公開されます.https://github.com/xianshanna...ああ、興味があれば注目して、一緒に勉強して進歩することができます.