大家好，我卡頌。

回想下你學新技術的主要途徑是什么？看書？看技術文檔？看博文？看視頻？

歸納起來，無外乎「文字」、「視頻」兩種形式。

從紙媒時代到互聯網時代，再到移動互聯網時代，雖然信息的載體發生變化，但信息的呈現形式仍以「文字」為主。

文字可以主動控制閱讀速度、節奏，而視頻有更佳的表現力。

可以說他們在體驗上各有優劣。

那有沒有一種形式能結合兩者的優點呢？有，答案是「交互式文章」。

相信很多React學習者都看過[1]。

這是一篇講解React原理的交互式博文，左側代碼，右側正文。隨著正文的閱讀，左側代碼會相應變化。

這篇文章對應的[2]有5k star，可以認為是入門React原理的最佳實踐了。

事實上，不僅是前端，很多領域的技術文章都能以「交互式」的形式呈現。

比如這篇「介紹數組是如何工作」的文章 —— [3],用交互的方式演示了數組中每個字節處理數據的方式：

這樣的文章，相比傳統的技術文章、視頻，有很多優勢。

本文會介紹「交互式文章」相關的一些技術實踐，以及他為我們開發者帶來的新機遇。

交互方式的實踐

交互式文章的本質還是文章。MD是最常見的技術文章格式，所以，在MD文件中插入「交互式組件」是常見的交互式文章組成形式，這就是MDX。

MDX中的交互方式主要有兩種：

• 動畫交互效果
• Demo交互

動畫交互效果

[4]是一個動畫交互組件。

他的本質是一個React動畫組件（用于展示代碼之間的漸變動畫）。

上文提到的「build-your-own-react」就是使用「code-surfer」實現的。

[5]是另一個使用「code-surfer」的項目。

我們使用git diff命令時，命令行會使用顏色（通常是紅、綠）區分新增、刪除的代碼：

「git-history」項目使用動畫的形式，展示git history中代碼的增刪。

讀者可以在^[6]體驗他的效果。

Demo交互

除了動畫交互外，Demo交互在技術文章中更常見。所有主流前端框架的文檔中都提供了Demo。

比如，下圖是React文檔中的Demo：

常見的Demo交互形式有：

• codesandbox

成名較早，是當前最主流的在線Demo展現方式，由客戶端、服務端兩部分組成。

開發者可以使用基于codesandbox封裝的Sandpack實現自定義的在線Demo。

• stackblitz

基于WebContainers（一款基于WebAssembly的操作系統，可以實現在瀏覽器中運行Node.js）封裝，客戶端、服務端都在瀏覽器中實現。

相較于codesandbox，有更多優勢，比如：

• 可以離線使用（因為瀏覽器包含完整的服務端、客戶端）。
• 相比codesandbox?網絡延遲更?。╟odesandbox中Node腳本是在服務端執行的，再傳輸給客戶端）。

文檔的體驗之爭

前端領域發展至今，已經很少有完全創新的開源項目了。

通常，新項目會在現有項目的基礎上進行微創新。比如Solid.js借鑒了React、Knockout.js。

Vue3也準備借鑒Svelte，出一個「無虛擬DOM」的版本。

為了在激烈的競爭中勝出，項目文檔都會在「用戶體驗」上拉滿。

這一點，可以對比React新老文檔來體會。

對于文檔的用戶體驗，其中非常重要的一點，就是提供豐富的交互。

基礎的，如Vue3，提供了在線Demo與Playground：

Vue3在線demo

進階的，如Svelte，提供了基于在線Demo的[7]：

更詳細的，如React，提供了以交互式文章組成的[8]。

前端框架文檔中的交互性主要以Demo為主。除此之外，還有些項目文檔以動畫交互為主，比如[9]中的滾動聚焦效果：

[10]中的hover后代碼高亮效果：

視頻的體驗之爭

視頻相比于傳統文章有更好的表現力，但是與交互式文章相比，就差遠了。

[11]將Demo與動畫交互結合，實現了視頻播放器的效果：

相比于傳統視頻只能看不能動，交互式播放器可以隨時暫停，修改代碼。

scrimba是「Demo與動畫交互結合的播放器」的商業化產品，讀者可以看看[12]感受下交互體驗。

開發者的一片藍海

對于國內的技術博主，「交互式文章」還是一片藍海。

相比于傳統文章、視頻，「交互式文章」的體驗優勢有多大呢？比如這篇文章 —— [13]。

在文章中，讀者可以拖拽滑桿看到不同百分比的效果：

對于想建立自己技術影響力的開發者，這是種很好的嘗試。

參考資料

[1]build-your-own-react:https://pomb.us/build-your-own-react/。

[2]Github倉庫:https://github.com/pomber/didact。

[3]how-arrays-work:https://www.nan.fyi/how-arrays-work。

[4]code-surfer:https://github.com/pomber/code-surfer。

[5]git-history:https://github.com/pomber/git-history。

[6]githistory項目:https://github.githistory.xyz/torvalds/linux/blob/master/kernel/up.c。

[7]Svelte教程:https://svelte.dev/tutorial/basics。

[8]React教程:https://beta.reactjs.org/learn/describing-the-ui。

[9]stripe文檔:https://not-stripe.vercel.app/。

[10]Lit文檔:https://lit.dev/。

[11]Storyteller Demo Playback:https://markm208.github.io/stDemo/playback.html?view=code。

[12]scrimba vuex教程:https://scrimba.com/scrim/cMPa2Uk?pl=pnyzgAP。

[13]100%在CSS中的意義:https://wattenberger.com/blog/css-percents。