大家好，我是Kason。回想一下你学习新技术的主要方式是什么？阅读？看技术文档？阅读博客文章？看视频？综上所述，无外乎文字和视频两种形式。从纸媒时代到互联网时代，再到移动互联网时代，信息的载体虽然发生了变化，但信息的呈现方式依然以文字为主。文字可以主动控制阅读速度和节奏，而视频则更具表现力。可以说，他们在经验上各有优缺点。有没有一种形式可以结合两者的优点呢？是的，答案是一篇互动文章。相信很多React学习者都看过build-your-own-react。这是一篇讲解React原理的互动博文，左边是代码，右边是文字。随着文本的阅读，左边的代码会相应地发生变化。本文对应的Github仓库有5kstars，可以算是React原理入门的最佳实践。其实不只是前端，很多领域的技术文章都可以用交互的形式呈现。比如这篇介绍数组工作原理的文章——how-arrays-work，以交互的方式演示了数组中每个字节处理数据的方式：与传统的技术文章和视频相比，这样的文章有很多优势。本文将介绍一些与互动文章相关的技术实践，以及它给我们开发者带来的新机遇。欢迎加入人类优质前端框架群，飞扬交互方式的实践交互文章的本质还是文章。MD是最常见的技术文章格式，所以在MD文件中插入交互组件是交互文章的常见形式，也就是MDX。MDX中主要有两种交互方式：动画交互效果Demo交互动画交互效果code-surfer是一个动画交互组件。他的本质是一个React动画组件（用来展示代码之间的渐变动画）。上面提到的build-your-own-react是使用code-surfer实现的。git-history是另一个使用code-surfer的项目。当我们使用gitdiff命令时，命令行会使用颜色（通常是红色和绿色）来区分新的和删除的代码：git-history项目使用动画来展示代码在git历史中的增删改查。读者可以在githubstory项目中体验他的效果。Demo交互除了动画交互，Demo交互在技术文章中更为常见。所有主流前端框架的文档中都提供了Demo。例如下图是React文档中的demo：常见的demo交互形式有：codesandbox成名较早，是目前最主流的在线demo展示方式，由client和server两部分组成。开发者可以使用基于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后的代码高亮效果：video视频的体验比传统文章表现力更好，但不如互动文章。StorytellerDemoPlayback将Demo与动画交互相结合，实现了视频播放器的效果：相比传统视频只能看不能动，交互播放器可以随时暂停，可以修改代码。Scrimba是一款集demo和动画交互为一体的播放器商业产品。读者可以看看scrimbavuex教程，体验交互体验。开发者的一片蓝海对于国内的科技博主来说，互动文章依然是一片蓝海。与传统文章和视频相比，互动文章的体验优势是什么？比如这篇文章——100%在CSS中的含义文章中，读者可以拖动滑块来查看不同百分比的效果：这对于想要建立自己技术影响力的开发者来说是一个很好的尝试。
