建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我卡頌。
回想下你學(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)方式，由客戶(hù)端、服務(wù)端兩部分組成。
開(kāi)發(fā)者可以使用基于codesandbox封裝的Sandpack實(shí)現(xiàn)自定義的在線Demo。
- stackblitz
基于WebContainers（一款基于WebAssembly的操作系統(tǒng)，可以實(shí)現(xiàn)在瀏覽器中運(yùn)行Node.js）封裝，客戶(hù)端、服務(wù)端都在瀏覽器中實(shí)現(xiàn)。
相較于codesandbox，有更多優(yōu)勢(shì)，比如：
- 可以離線使用（因?yàn)闉g覽器包含完整的服務(wù)端、客戶(hù)端）。
- 相比codesandbox?網(wǎng)絡(luò)延遲更?。╟odesandbox中Node腳本是在服務(wù)端執(zhí)行的，再傳輸給客戶(hù)端）。
文檔的體驗(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ì)在「用戶(hù)體驗(yàn)」上拉滿(mǎn)。
這一點(diǎn)，可以對(duì)比React新老文檔來(lái)體會(huì)。
對(duì)于文檔的用戶(hù)體驗(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ā)者，這是種很好的嘗試。
網(wǎng)頁(yè)標(biāo)題：?一個(gè)被忽略的前端細(xì)分領(lǐng)域
本文來(lái)源：http://www.5511xx.com/article/dpohppg.html
