大家好，我卡頌。

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

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

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

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

可以說他們在體驗上各有優(yōu)劣。

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

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

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

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

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

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

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

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

交互方式的實踐

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

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

• 動畫交互效果
• Demo交互

動畫交互效果

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

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

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

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

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

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

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

Demo交互

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

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

常見的Demo交互形式有：

• codesandbox

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

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

• stackblitz

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

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

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

文檔的體驗之爭

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

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

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

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

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

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

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

Vue3在線demo

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

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

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

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

視頻的體驗之爭

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

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

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

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

開發(fā)者的一片藍海

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

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

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

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

參考資料

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