建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
回想下你學(xué)新技術(shù)的主要途徑是什么？看書？看技術(shù)文檔？看博文？看視頻？
歸納起來，無外乎「文字」、「視頻」兩種形式。
從紙媒時代到互聯(lián)網(wǎng)時代，再到移動互聯(lián)網(wǎng)時代，雖然信息的載體發(fā)生變化，但信息的呈現(xiàn)形式仍以「文字」為主。
文字可以主動控制閱讀速度、節(jié)奏，而視頻有更佳的表現(xiàn)力。
可以說他們在體驗(yàn)上各有優(yōu)劣。
那有沒有一種形式能結(jié)合兩者的優(yōu)點(diǎn)呢？有，答案是「交互式文章」。
相信很多React學(xué)習(xí)者都看過[1]。
這是一篇講解React原理的交互式博文，左側(cè)代碼，右側(cè)正文。隨著正文的閱讀，左側(cè)代碼會相應(yīng)變化。
這篇文章對應(yīng)的[2]有5k star，可以認(rèn)為是入門React原理的最佳實(shí)踐了。
事實(shí)上，不僅是前端，很多領(lǐng)域的技術(shù)文章都能以「交互式」的形式呈現(xiàn)。
比如這篇「介紹數(shù)組是如何工作」的文章 —— [3],用交互的方式演示了數(shù)組中每個字節(jié)處理數(shù)據(jù)的方式：
這樣的文章，相比傳統(tǒng)的技術(shù)文章、視頻，有很多優(yōu)勢。
本文會介紹「交互式文章」相關(guān)的一些技術(shù)實(shí)踐，以及他為我們開發(fā)者帶來的新機(jī)遇。
交互方式的實(shí)踐
交互式文章的本質(zhì)還是文章。MD是最常見的技術(shù)文章格式，所以，在MD文件中插入「交互式組件」是常見的交互式文章組成形式，這就是MDX。
MDX中的交互方式主要有兩種：
- 動畫交互效果
- Demo交互
動畫交互效果
[4]是一個動畫交互組件。
他的本質(zhì)是一個React動畫組件（用于展示代碼之間的漸變動畫）。
上文提到的「build-your-own-react」就是使用「code-surfer」實(shí)現(xiàn)的。
[5]是另一個使用「code-surfer」的項(xiàng)目。
我們使用git diff命令時，命令行會使用顏色（通常是紅、綠）區(qū)分新增、刪除的代碼：
「git-history」項(xiàng)目使用動畫的形式，展示git history中代碼的增刪。
讀者可以在[6]體驗(yàn)他的效果。
Demo交互
除了動畫交互外，Demo交互在技術(shù)文章中更常見。所有主流前端框架的文檔中都提供了Demo。
比如，下圖是React文檔中的Demo：
常見的Demo交互形式有：
- codesandbox
成名較早，是當(dāng)前最主流的在線Demo展現(xiàn)方式，由客戶端、服務(wù)端兩部分組成。
開發(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)勢，比如：
- 可以離線使用（因?yàn)闉g覽器包含完整的服務(wù)端、客戶端）。
- 相比codesandbox?網(wǎng)絡(luò)延遲更?。╟odesandbox中Node腳本是在服務(wù)端執(zhí)行的，再傳輸給客戶端）。
文檔的體驗(yàn)之爭
前端領(lǐng)域發(fā)展至今，已經(jīng)很少有完全創(chuàng)新的開源項(xiàng)目了。
通常，新項(xiàng)目會在現(xiàn)有項(xiàng)目的基礎(chǔ)上進(jìn)行微創(chuàng)新。比如Solid.js借鑒了React、Knockout.js。
Vue3也準(zhǔn)備借鑒Svelte，出一個「無虛擬DOM」的版本。
為了在激烈的競爭中勝出，項(xiàng)目文檔都會在「用戶體驗(yàn)」上拉滿。
這一點(diǎn)，可以對比React新老文檔來體會。
對于文檔的用戶體驗(yàn)，其中非常重要的一點(diǎn)，就是提供豐富的交互。
基礎(chǔ)的，如Vue3，提供了在線Demo與Playground：
Vue3在線demo
進(jìn)階的，如Svelte，提供了基于在線Demo的[7]：
更詳細(xì)的，如React，提供了以交互式文章組成的[8]。
前端框架文檔中的交互性主要以Demo為主。除此之外，還有些項(xiàng)目文檔以動畫交互為主，比如[9]中的滾動聚焦效果：
[10]中的hover后代碼高亮效果：
視頻的體驗(yàn)之爭
視頻相比于傳統(tǒng)文章有更好的表現(xiàn)力，但是與交互式文章相比，就差遠(yuǎn)了。
[11]將Demo與動畫交互結(jié)合，實(shí)現(xiàn)了視頻播放器的效果：
相比于傳統(tǒng)視頻只能看不能動，交互式播放器可以隨時暫停，修改代碼。
scrimba是「Demo與動畫交互結(jié)合的播放器」的商業(yè)化產(chǎn)品，讀者可以看看[12]感受下交互體驗(yàn)。
開發(fā)者的一片藍(lán)海
對于國內(nèi)的技術(shù)博主，「交互式文章」還是一片藍(lán)海。
相比于傳統(tǒng)文章、視頻，「交互式文章」的體驗(yàn)優(yōu)勢有多大呢？比如這篇文章 —— [13]。
在文章中，讀者可以拖拽滑桿看到不同百分比的效果：
對于想建立自己技術(shù)影響力的開發(fā)者，這是種很好的嘗試。
分享題目：?一個被忽略的前端細(xì)分領(lǐng)域
新聞來源：http://m.5511xx.com/article/dpohppg.html
