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

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

就這樣，靠著自己的熱情，第一個版本就這么問世了。

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

全新的認識

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

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

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

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

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

貼心的優(yōu)化

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

下面我們來展開看下。

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

<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>

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

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

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

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

在 Strve 中，組件就是一個函數(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>
  );
});

// 復用組件
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，簡稱 VDOM) 是一種編程概念，意為將目標所需的 UI 通過數(shù)據(jù)結(jié)構(gòu)“虛擬”地表示出來，保存在內(nèi)存中，然后利用 Diff 算法來比對新老數(shù)據(jù)，將真實的 DOM 與之保持同步。

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

從 API 層面，我們盡可能的貼合易用的特性，將核心 API 縮減為 2 個。分別為defineComponent和setData?？蚣苁切枰菀资褂玫?，太多繁瑣的設(shè)置或者操作很容易增重心智負擔。

豐富的生態(tài)

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

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

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

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

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

主要特性有以下幾個：

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

Strve 結(jié)合 Vue 組合式 API 形成了一款新的 JavaScript 庫。只要你熟悉組合式 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>
  );
});

出色的跑分

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

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

巨人的肩膀

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

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

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