大家好，我卡颂。

回忆下你学新技术的次要路径是什么？看书？看技术文档？看博文？看视频？

归纳起来，无外乎文字、视频两种模式。

从纸媒时代到互联网时代，再到挪动互联网时代，尽管信息的载体发生变化，但信息的出现模式仍以文字为主。

文字能够被动管制浏览速度、节奏，而视频有更佳的表现力。

能够说他们在体验上各有优劣。

那有没有一种模式能联合两者的长处呢？有，答案是交互式文章。

置信很多React学习者都看过build-your-own-react。

这是一篇解说React原理的交互式博文，左侧代码，右侧注释。随着注释的浏览，左侧代码会相应变动。

这篇文章对应的Github仓库有5k star，能够认为是入门React原理的最佳实际了。

事实上，不仅是前端，很多畛域的技术文章都能以交互式的模式出现。

比方这篇介绍数组是如何工作的文章 —— how-arrays-work,用交互的形式演示了数组中每个字节解决数据的形式：

这样的文章，相比传统的技术文章、视频，有很多劣势。

本文会介绍交互式文章相干的一些技术实际，以及他为咱们开发者带来的新机遇。

欢送退出人类高质量前端框架群，带飞

交互方式的实际

交互式文章的实质还是文章。MD是最常见的技术文章格局，所以，在MD文件中插入交互式组件是常见的交互式文章组成模式，这就是MDX。

MDX中的交互方式次要有两种：

  • 动画交互成果
  • Demo交互

动画交互成果

code-surfer是一个动画交互组件。

他的实质是一个React动画组件（用于展现代码之间的突变动画）。

上文提到的build-your-own-react就是应用code-surfer实现的。

git-history是另一个应用code-surfer的我的项目。

咱们应用git diff命令时，命令行会应用色彩（通常是红、绿）辨别新增、删除的代码：

git-history我的项目应用动画的模式，展现git history中代码的增删。

读者能够在githistory我的项目体验他的成果。

Demo交互

除了动画交互外，Demo交互在技术文章中更常见。所有支流前端框架的文档中都提供了Demo。

比方，下图是React文档中的Demo：

常见的Demo交互模式有：

  • codesandbox

成名较早，是以后最支流的在线Demo展示形式，由客户端、服务端两局部组成。

开发者能够应用基于codesandbox封装的Sandpack实现自定义的在线Demo。

  • stackblitz

基于WebContainers（一款基于WebAssembly的操作系统，能够实现在浏览器中运行Node.js）封装，客户端、服务端都在浏览器中实现。

相较于codesandbox，有更多劣势，比方：

  • 能够离线应用（因为浏览器蕴含残缺的服务端、客户端）
  • 相比codesandbox网络提早更小（codesandbox中Node脚本是在服务端执行的，再传输给客户端）

文档的体验之争

前端畛域倒退至今，曾经很少有齐全翻新的开源我的项目了。

通常，新我的项目会在现有我的项目的根底上进行微翻新。比方Solid.js借鉴了React、Knockout.js。

Vue3也筹备借鉴Svelte，出一个无虚构DOM的版本。

为了在强烈的竞争中胜出，我的项目文档都会在用户体验上拉满。

这一点，能够比照React新老文档来领会。

对于文档的用户体验，其中十分重要的一点，就是提供丰盛的交互。

根底的，如Vue3，提供了在线Demo与Playground：

进阶的，如Svelte，提供了基于在线Demo的Svelte教程：

更具体的，如React，提供了以交互式文章组成的React教程

前端框架文档中的交互性次要以Demo为主。除此之外，还有些我的项目文档以动画交互为主，比方stripe文档中的滚动聚焦成果：

Lit文档中的hover后代码高亮成果：

视频的体验之争

视频相比于传统文章有更好的表现力，然而与交互式文章相比，就差远了。

Storyteller Demo Playback将Demo与动画交互联合，实现了视频播放器的成果：

相比于传统视频只能看不能动，交互式播放器能够随时暂停，批改代码。

scrimba是Demo与动画交互联合的播放器的商业化产品，读者能够看看scrimba vuex教程感触下交互体验。

开发者的一片蓝海

对于国内的技术博主，交互式文章还是一片蓝海。

相比于传统文章、视频，交互式文章的体验劣势有多大呢？比方这篇文章 —— 100%在CSS中的意义

在文章中，读者能够拖拽滑杆看到不同百分比的成果：

对于想建设本人技术影响力的开发者，这是种很好的尝试。