我想如果有在五年內寫過前端的,或多或少都會有留意過或者有用React.js 或者 Vue 和 Angular。

但我還是希望可以推這個東西。

對比框架是個很玄學的事情。但我還是希望這篇文是sound 的。

背景:後端工程師,但同時在工作上應用過React 和Vue,但不Trivial 的個人項目中應用過Svelte。為Google Blocky 寫過Svelte 的Binding Example。

(可能就是所謂的越是本職越不敢/不想寫吧,就寫寫前端好了)

比如 : Svelte 的第一句

All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. (所有代碼都是錯誤的。 因此,有理由說,你越寫越buggy。)

我就認為是過份的簡化和沒有指導意義的。

但Svelte舉的例子卻是挺實用的:

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 (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

看起來Vue 比起 React 短了不少,但主要問題還是在於State Binding 是wire 至一個object 的指者key 中的 ( <function T>.<var><object T>.data )