大家好，我卡颂。
回忆下你学新技术的次要路径是什么？看书？看技术文档？看博文？看视频？
归纳起来，无外乎 文字 、 视频 两种模式。
从纸媒时代到互联网时代，再到挪动互联网时代，尽管信息的载体发生变化，但信息的出现模式仍以 文字 为主。
文字能够被动管制浏览速度、节奏，而视频有更佳的表现力。
能够说他们在体验上各有优劣。
那有没有一种模式能联合两者的长处呢？有，答案是 交互式文章。
置信很多 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 中的意义
在文章中，读者能够拖拽滑杆看到不同百分比的成果：
对于想建设本人技术影响力的开发者，这是种很好的尝试。