大家好，我卡頌。

回想下你學(xué)新技術(shù)的主要途徑是什么？看書(shū)？看技術(shù)文檔？看博文？看視頻？

歸納起來(lái)，無(wú)外乎「文字」、「視頻」兩種形式。

從紙媒時(shí)代到互聯(lián)網(wǎng)時(shí)代，再到移動(dòng)互聯(lián)網(wǎng)時(shí)代，雖然信息的載體發(fā)生變化，但信息的呈現(xiàn)形式仍以「文字」為主。

文字可以主動(dòng)控制閱讀速度、節(jié)奏，而視頻有更佳的表現(xiàn)力。

可以說(shuō)他們?cè)隗w驗(yàn)上各有優(yōu)劣。

那有沒(méi)有一種形式能結(jié)合兩者的優(yōu)點(diǎn)呢？有，答案是「交互式文章」。

相信很多React學(xué)習(xí)者都看過(guò)[1]。

這是一篇講解React原理的交互式博文，左側(cè)代碼，右側(cè)正文。隨著正文的閱讀，左側(cè)代碼會(huì)相應(yīng)變化。

這篇文章對(duì)應(yīng)的[2]有5k star，可以認(rèn)為是入門(mén)React原理的最佳實(shí)踐了。

事實(shí)上，不僅是前端，很多領(lǐng)域的技術(shù)文章都能以「交互式」的形式呈現(xiàn)。

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

這樣的文章，相比傳統(tǒng)的技術(shù)文章、視頻，有很多優(yōu)勢(shì)。

本文會(huì)介紹「交互式文章」相關(guān)的一些技術(shù)實(shí)踐，以及他為我們開(kāi)發(fā)者帶來(lái)的新機(jī)遇。

交互方式的實(shí)踐

交互式文章的本質(zhì)還是文章。MD是最常見(jiàn)的技術(shù)文章格式，所以，在MD文件中插入「交互式組件」是常見(jiàn)的交互式文章組成形式，這就是MDX。

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

• 動(dòng)畫(huà)交互效果
• Demo交互

動(dòng)畫(huà)交互效果

[4]是一個(gè)動(dòng)畫(huà)交互組件。

他的本質(zhì)是一個(gè)React動(dòng)畫(huà)組件（用于展示代碼之間的漸變動(dòng)畫(huà)）。

上文提到的「build-your-own-react」就是使用「code-surfer」實(shí)現(xiàn)的。

[5]是另一個(gè)使用「code-surfer」的項(xiàng)目。

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

「git-history」項(xiàng)目使用動(dòng)畫(huà)的形式，展示git history中代碼的增刪。

讀者可以在^[6]體驗(yàn)他的效果。

Demo交互

除了動(dòng)畫(huà)交互外，Demo交互在技術(shù)文章中更常見(jiàn)。所有主流前端框架的文檔中都提供了Demo。

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

常見(jiàn)的Demo交互形式有：

• codesandbox

成名較早，是當(dāng)前最主流的在線Demo展現(xiàn)方式，由客戶端、服務(wù)端兩部分組成。

開(kāi)發(fā)者可以使用基于codesandbox封裝的Sandpack實(shí)現(xiàn)自定義的在線Demo。

• stackblitz

基于WebContainers（一款基于WebAssembly的操作系統(tǒng)，可以實(shí)現(xiàn)在瀏覽器中運(yùn)行Node.js）封裝，客戶端、服務(wù)端都在瀏覽器中實(shí)現(xiàn)。

相較于codesandbox，有更多優(yōu)勢(shì)，比如：

• 可以離線使用（因?yàn)闉g覽器包含完整的服務(wù)端、客戶端）。
• 相比codesandbox?網(wǎng)絡(luò)延遲更?。╟odesandbox中Node腳本是在服務(wù)端執(zhí)行的，再傳輸給客戶端）。

文檔的體驗(yàn)之爭(zhēng)

前端領(lǐng)域發(fā)展至今，已經(jīng)很少有完全創(chuàng)新的開(kāi)源項(xiàng)目了。

通常，新項(xiàng)目會(huì)在現(xiàn)有項(xiàng)目的基礎(chǔ)上進(jìn)行微創(chuàng)新。比如Solid.js借鑒了React、Knockout.js。

Vue3也準(zhǔn)備借鑒Svelte，出一個(gè)「無(wú)虛擬DOM」的版本。

為了在激烈的競(jìng)爭(zhēng)中勝出，項(xiàng)目文檔都會(huì)在「用戶體驗(yàn)」上拉滿。

這一點(diǎn)，可以對(duì)比React新老文檔來(lái)體會(huì)。

對(duì)于文檔的用戶體驗(yàn)，其中非常重要的一點(diǎn)，就是提供豐富的交互。

基礎(chǔ)的，如Vue3，提供了在線Demo與Playground：

Vue3在線demo

進(jìn)階的，如Svelte，提供了基于在線Demo的[7]：

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

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

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

視頻的體驗(yàn)之爭(zhēng)

視頻相比于傳統(tǒng)文章有更好的表現(xiàn)力，但是與交互式文章相比，就差遠(yuǎn)了。

[11]將Demo與動(dòng)畫(huà)交互結(jié)合，實(shí)現(xiàn)了視頻播放器的效果：

相比于傳統(tǒng)視頻只能看不能動(dòng)，交互式播放器可以隨時(shí)暫停，修改代碼。

scrimba是「Demo與動(dòng)畫(huà)交互結(jié)合的播放器」的商業(yè)化產(chǎn)品，讀者可以看看[12]感受下交互體驗(yàn)。

開(kāi)發(fā)者的一片藍(lán)海

對(duì)于國(guó)內(nèi)的技術(shù)博主，「交互式文章」還是一片藍(lán)海。

相比于傳統(tǒng)文章、視頻，「交互式文章」的體驗(yàn)優(yōu)勢(shì)有多大呢？比如這篇文章 —— [13]。

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

對(duì)于想建立自己技術(shù)影響力的開(kāi)發(fā)者，這是種很好的嘗試。

參考資料

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

[2]Github倉(cāng)庫(kù):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項(xiàng)目: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。