2021 年 11 月 左右，Strve 第一個(gè)版本發(fā)布，社區(qū)的反饋大部分是支持，也有少部分小伙伴提出了質(zhì)疑，這都正常。你只要在社區(qū)發(fā)布一些作品，就必須接受其他人對(duì)你的作品的評(píng)價(jià)。

當(dāng)初，開發(fā) Strve 的初衷只是受到 JSX 語(yǔ)法的影響，覺(jué)得在 JavaScript 中編寫 HTML 很酷，所以想能不能自己也開發(fā)一個(gè)前端框架。我最初給自己的目標(biāo)就是能在 JavaScript 中寫 HTML，然后通過(guò)編寫 JavaScript 來(lái)改變頁(yè)面狀態(tài)。經(jīng)過(guò)兩個(gè)多周的調(diào)研，發(fā)現(xiàn)自己在原地打轉(zhuǎn)。JSX 語(yǔ)法不能直接在瀏覽器運(yùn)行，你必須通過(guò)類似 Babel 這種編譯工具編譯才能運(yùn)行。所以，我就打算在模版字段串內(nèi)編寫 HTML。但是，又遇到了另一個(gè)問(wèn)題，如何精確更新 DOM。當(dāng)時(shí)，第一個(gè)想法就是利用虛擬 DOM，所以就抽時(shí)間來(lái)學(xué)習(xí)前端框架中都是怎么利用虛擬 DOM 來(lái)精確更新。不懂得就去網(wǎng)上查資料，然后就記下來(lái)。可能有些小伙伴就會(huì)問(wèn)，是什么力量讓你去做可能完成了也沒(méi)什么意義的事情。怎么說(shuō)呢！當(dāng)時(shí)，我就是想要做出點(diǎn)東西來(lái)，覺(jué)得自己能做出來(lái)。至于做出來(lái)有什么意義，我沒(méi)有多想。有時(shí)候我們做一件事情之前，考慮很多未必是好事，這往往會(huì)阻礙了我們做事情的腳步。

就這樣，靠著自己的熱情，第一個(gè)版本就這么問(wèn)世了。

有很多小伙伴感覺(jué) Strve 寫法很像lit-html。說(shuō)實(shí)話，開發(fā) Strve 之前，我并不知道這個(gè)框架。后來(lái)看社區(qū)反饋，才到網(wǎng)上查看了有關(guān)的資料。雖然寫法像，但并不是它的復(fù)制品。就比如 Strve 內(nèi)部使用的是虛擬 DOM，這時(shí)的虛擬 DOM 還只是一個(gè)初版，只能說(shuō)是簡(jiǎn)單的比對(duì)。

全新的認(rèn)識(shí)

之前有看過(guò)我的文章的小伙伴，多多少少會(huì)知道 Strve。但是可能也只是停留在知道這個(gè)層面上，現(xiàn)在我通過(guò)幾點(diǎn)來(lái)重新介紹下 Strve。

Strve 是一個(gè)易用、快速、靈活且輕量級(jí)的 JavaScript 庫(kù)，用于構(gòu)建用戶界面?；?nbsp;tagged template 的 HTML 模板引擎，利用 ES6 的模板字符串來(lái)進(jìn)行模板的書寫，利用瀏覽器的原生的能力進(jìn)行模板渲染。

• 更容易上手：只要你對(duì) HTML、CSS 和 JavaScript 已經(jīng)基本熟悉，就可以直接上手。
• 聲明式渲染：我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀態(tài)之間的關(guān)系，開發(fā)者可以更加專注于業(yè)務(wù)邏輯的開發(fā)，不需要過(guò)多地關(guān)心 DOM 操作的細(xì)節(jié)。
• 順滑的用戶體驗(yàn)：模板字符串來(lái)進(jìn)行模板的書寫，在一些場(chǎng)景中代碼智能提示、代碼格式化方面不是特別友好。所以，我們提供了新的一種編碼方式，我們可以使用 JSX 語(yǔ)法編寫 Strve，提升用戶開發(fā)體驗(yàn)。
• 性能出色：采用了虛擬 DOM 的模式，虛擬 DOM 使用 diff 算法的方法來(lái)計(jì)算出真正需要更新的節(jié)點(diǎn)，最大限度地減少了 DOM 操作以及 DOM 操作帶來(lái)的排版與重繪損耗，從而顯著提高了性能。另外，我們的 JavaScript 庫(kù)在全球知名的測(cè)評(píng)榜單(js-framework-benchmark)上贏得了優(yōu)秀的成績(jī)。
• 組件化：一個(gè)函數(shù)就是一個(gè)組件，可以根據(jù)應(yīng)用規(guī)模任意組合。并且組件特有的 “孤島特性”，使得將虛擬 DOM 樹計(jì)算的級(jí)別控制在組件級(jí)別。
• 靈活的應(yīng)用場(chǎng)景：有無(wú)構(gòu)建工具都可以使用，并且可以適配到其他前端框架開發(fā)的應(yīng)用項(xiàng)目中去。
• 輕量級(jí)：壓縮后的文件大小不足 10k。另外，可以根據(jù)不同應(yīng)用場(chǎng)景，選擇不同類型的文件。

想要了解更多關(guān)于 Strve 的特性，可以到官方中文文檔中去探索。

https://strvejs.gitee.io/strve-doc-zh。

貼心的優(yōu)化

2023 年我陸續(xù)發(fā)布了幾個(gè)大的版本，大部分時(shí)間都是在優(yōu)化底層代碼。包括虛擬 DOM 的算法優(yōu)化、減輕使用 API 時(shí) 心智負(fù)擔(dān)等等優(yōu)化措施。

下面我們來(lái)展開看下。

如果你不打算使用構(gòu)建打包工具開發(fā)項(xiàng)目，而是直接開發(fā)。推薦使用全局構(gòu)建版本，通過(guò) CDN 使用 Strve 時(shí)，不涉及“構(gòu)建步驟”，這使得設(shè)置更加簡(jiǎn)單。

<script src="https://cdn.jsdelivr.net/npm/strve-js@6.6.6/dist/strve.full.prod.js"></script>
<script>
  const { html, defineComponent } = Strve;

  defineComponent(
    {
      mount: '#app',
    },
    ({ setData }) => {
      let count = 0;

      function add() {
        setData(() => {
          count++;
        });
      }

      return () => html`<h1 onClick=${add}>${count}</h1>`;
    }
  );
</script>

模板字符串來(lái)進(jìn)行模板的書寫，在一些場(chǎng)景中代碼智能提示、代碼格式化方面不是特別友好。所以，我們提供了一種新的編碼方式，我們可以使用 JSX 語(yǔ)法編寫 Strve 應(yīng)用，這樣就大大提升了用戶開發(fā)體驗(yàn)。

defineComponent(() => {
  const state = {
    msg: 'Hello',
  };
  return () => h1>{state.msg}</h1>;
});

另外，我們底層采用了虛擬 DOM 的模式，虛擬 DOM 使用 diff 算法的方法來(lái)計(jì)算出真正需要更新的節(jié)點(diǎn)，最大限度地減少了 DOM 操作以及 DOM 操作帶來(lái)的排版與重繪損耗，從而顯著提高了性能。

Strve 應(yīng)用程序是由 組件 組成的。一個(gè)組件是 UI（用戶界面）的一部分，它擁有自己的邏輯和外觀。組件可以小到一個(gè)按鈕，也可以大到整個(gè)頁(yè)面。

在 Strve 中，組件就是一個(gè)函數(shù)。

const MyComponent = defineComponent(({ setData }) => {
  let count = 0;

  function add() {
    setData(() => {
      count++;
    });
  }

  return () => (
    <div class='MyComponent'>
      <p>{count}</p>
      <button onClick={add}>MyComponent</button>
    </div>
  );
});

// 復(fù)用組件
defineComponent(
  {
    mount: '#app',
  },
  ({ setData }) => {
    let count = 0;

    const add = () => {
      setData(() => {
        count++;
      });
    };

    return () => (
      <div class='App'>
        <p>{count}</p>
        <button onClick={add}>App</button>
        <component $is={MyComponent} />
      </div>
    );
  }
);

Strve 內(nèi)部的渲染系統(tǒng)是基于虛擬 DOM 構(gòu)建的，虛擬 DOM (Virtual DOM，簡(jiǎn)稱 VDOM) 是一種編程概念，意為將目標(biāo)所需的 UI 通過(guò)數(shù)據(jù)結(jié)構(gòu)“虛擬”地表示出來(lái)，保存在內(nèi)存中，然后利用 Diff 算法來(lái)比對(duì)新老數(shù)據(jù)，將真實(shí)的 DOM 與之保持同步。

如何虛擬 DOM 樹過(guò)于龐大，使得 Diff 計(jì)算時(shí)間大于 16.6ms，那么就可能造成性能的卡頓。組件有一個(gè)特性就是 ”孤島“。何為“孤島”，孤島就是在 Strve 應(yīng)用中我們可以理解成一個(gè)獨(dú)立的模塊。將一個(gè)龐大的虛擬 DOM 樹分解成很多獨(dú)立的模塊，這樣 Diff 計(jì)算時(shí)間就會(huì)控制在組件級(jí)別，大大縮減了計(jì)算的時(shí)間，提高了性能。

從 API 層面，我們盡可能的貼合易用的特性，將核心 API 縮減為 2 個(gè)。分別為defineComponent和setData?？蚣苁切枰菀资褂玫模喾爆嵉脑O(shè)置或者操作很容易增重心智負(fù)擔(dān)。

豐富的生態(tài)

開發(fā)框架單單只有一個(gè)核心庫(kù)肯定是不夠的，你還需要其他生態(tài)工具來(lái)加以輔助。

你要有一套用于快速構(gòu)建項(xiàng)目的命令行工具，也就是說(shuō)用戶可以通過(guò)輸入命令快速搭建項(xiàng)目。CreateStrveApp 是一套用于快速構(gòu)建 Strve 項(xiàng)目的命令行工具。CreateStrveApp 是使用 Vite 構(gòu)建的，這是一個(gè)新的前端構(gòu)建工具，可以顯著提升前端開發(fā)體驗(yàn)。它有幾個(gè)模版可供選擇：strve、strve-apps、strve-jsx、strve-jsx-apps。

我們開發(fā)項(xiàng)目需要跳轉(zhuǎn)多個(gè)頁(yè)面，那么就需要路由管理器。StrveRouter 是 Strve 的官方路由管理器。它與 Strve 的核心深度集成，輕松構(gòu)建單頁(yè)應(yīng)用程序。

另外，我們介紹兩款編譯時(shí)工具。BabelPluginStrve是一款 babel 插件，將 HTML 模板字符串轉(zhuǎn)化為 Virtual Dom。從之前的運(yùn)行時(shí)轉(zhuǎn)移到編譯時(shí)，大幅度提高渲染性能。如果你想使用 JSX 語(yǔ)法，BabelPluginJsxToStrve這款插件是必不可少的，它是一款 babel 插件，將 JSX 轉(zhuǎn)換為與 Strve 一起使用的標(biāo)記模板。CreateStrveApp 項(xiàng)目腳手架工具已默認(rèn)安裝，選擇 strve-jsx 或者 strve-jsx-apps 模版即可。我們使用 CreateStrveApp 搭建完 Strve 項(xiàng)目你會(huì)發(fā)現(xiàn)，同時(shí)安裝了 BabelPluginStrve、BabelPluginJsxToStrve，這是因?yàn)槲覀冃枰褂?BabelPluginJsxToStrve 將 JSX 轉(zhuǎn)換為標(biāo)簽?zāi)０?，之后再使?BabelPluginStrve 將標(biāo)簽?zāi)０孓D(zhuǎn)換為 Virtual DOM。

我們最后壓軸的一款生態(tài)工具可以說(shuō)是近期更新力度最大的了。它被稱為獨(dú)立運(yùn)行的可響應(yīng)性 Strve，由 @vue/reactivity和 strve-js 提供支持的自定義元素 JavaScript 庫(kù)。

主要特性有以下幾個(gè)：

• Web Components
• Hooks
• Reactivity API
• Props
• Emit
• Slot
• Styles
• Automatic registration component
• Virtual DOM

Strve 結(jié)合 Vue 組合式 API 形成了一款新的 JavaScript 庫(kù)。只要你熟悉組合式 API，就可快速上手。

// MyComponent.jsx
import { ref, defineComponent, reactive } from 'strve-reactivity';

const MyComponent = defineComponent(() => {
  const items = reactive([
    {
      id: 1,
      tit: 'A',
    },
    {
      id: 2,
      tit: 'B',
    },
  ]);
  const count = ref(4);
  const increase = () => {
    items.unshift({
      id: count.value++,
      tit: 'C',
    });
  };

  return () => (
    <fragment>
      <button onclick={increase}>increase</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <span>{item.id}</span>
            <span>-</span>
            <span>{item.tit}</span>
          </li>
        ))}
      </ul>
    </fragment>
  );
});

出色的跑分

我們只是口頭說(shuō) Strve 性能是非常不錯(cuò)的，沒(méi)有真憑實(shí)據(jù)那是說(shuō)不過(guò)去的。跑分方面，Strve 在 js-framework-benchmark 中的表現(xiàn)比 React 要好得多。

https://krausest.github.io/js-framework-benchmark/current.html。

巨人的肩膀

前端框架最近幾年來(lái)層出不窮，出現(xiàn)這種情況好嗎？我覺(jué)得是個(gè)好現(xiàn)象。大家都在為前端社區(qū)貢獻(xiàn)自己的力量，使得前端的生態(tài)生機(jī)勃勃。

大家可能非常討厭跟知名框架比較，可能有些人會(huì)說(shuō)蹭熱度。其實(shí)不妨換個(gè)角度想想，為什么會(huì)比較，是因?yàn)橐?。怎么樣才能更好，那只能不斷地?yōu)化。那么在這優(yōu)化的過(guò)程中你不光是做出一個(gè) JavaScript 庫(kù)或者前端框架，更多的是你可以從中獲得你在平時(shí)工作中得不到的東西。比如，對(duì)設(shè)計(jì)一款框架需要考慮哪些方面。作者在設(shè)計(jì) API 時(shí)為什么會(huì)這么設(shè)計(jì)等等一些非工作業(yè)務(wù)上的事情。

我開發(fā)這款 JavaScript 庫(kù)，我是另辟蹊徑嗎？我感覺(jué)并不是，我只是學(xué)習(xí)其他優(yōu)秀框架中可以借鑒的思想，并按照自己想要的方式去展現(xiàn)它。只有站在巨人的肩膀上才能望得更遠(yuǎn)！