大家好，我是Kason。回想一下你学习新技术的主要方式是什么？阅读？看技术文档？阅读博客文章？看视频？总结起来就是“文字”和“视频”两种形式。从纸媒时代到互联网时代，再到移动互联网时代，信息的载体虽然发生了变化，但信息的呈现形式依然以“文字”为主。文字可以主动控制阅读速度和节奏，而视频则更具表现力。可以说，他们在经验上各有优缺点。有没有一种形式可以结合两者的优点呢？是的，答案是“互动文章”。相信很多React学习者都看过[1]。这是一篇讲解React原理的互动博文，左边是代码，右边是文字。随着文本的阅读，左边的代码会相应地发生变化。这篇文章对应[2]有5kstar，可以认为是入门React原理的最佳实践。事实上，不仅是前端，很多领域的技术文章都可以以“交互”的形式呈现。例如这篇文章《IntroductiontoHowArraysWork》-[3]，以交互的方式演示了数组中每个字节处理数据的方式：与传统的技术文章和视频相比，这样的文章有很多优势。本文将介绍一些与“互动文章”相关的技术实践，以及它给我们开发者带来的新机遇。交互方式的实践一篇交互文章的本质还是一篇文章。MD是最常见的技术文章格式，所以在MD文件中插入“交互式组件”是一种常见的交互式文章组合形式，这就是MDX。MDX中主要有两种交互方式：动画交互效果Demo交互动画交互效果[4]是一个动画交互组件。他的本质是一个React动画组件（用来展示代码之间的渐变动画）。上面提到的“build-your-own-react”是使用“code-surfer”实现的。[5]是另一个使用“code-surfer”的项目。当我们使用gitdiff命令时，命令行会使用颜色（通常是红色和绿色）来区分新的和删除的代码：“git-history”项目使用动画来展示代码在git历史中的增删改查。读者可以在[6]中体验他的效果。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：高级的Vue3在线demo，如Svelte，提供在线Demo-based[7]；更详细的，比如React，提供交互文章[8]]。前端框架文档中的交互主要以Demo为主。此外，还有一些项目文档主要关注动画交互，如[9]中的滚动焦点效果：[10]中悬停后的代码高亮效果：视频体验之争。与传统文章相比，视频具有更好的表现力，但与互动文章相比，则相差甚远。[11]Demo结合动画交互实现视频播放器的效果：相比传统视频只能看不能动，交互播放器可以随时暂停，可以修改代码。Scrimba是“结合demo和动画交互的播放器”的商业化产品。读者可以看[12]来体验互动体验。开发者的一片蓝海对于国内的科技博主来说，“互动文”依然是一片蓝海。与传统文章、视频相比，“互动文章”体验有哪些优势？比如这篇文章——[13]。文章中，读者可以拖动滑块查看不同百分比的效果：这对于想要建立自己技术影响力的开发者来说是一个很好的尝试。参考文献[1]build-your-own-react：https://pomb.us/build-your-own-react/。[2]Github存储库：https://github.com/pomber/didact。[3]阵列工作原理：https://www.nan.fyi/how-arrays-work。[4]代码冲浪者：https://github.com/pomber/code-surfer。[5]混帐历史：https://github.com/pomber/git-history。[6]github故事项目：https://github.github.githistory.xyz/torvalds/linux/blob/master/kernel/up.c。[7]Svelte教程：https://svelte.dev/tutorial/basics。[8]React教程：https://beta.reactjs.org/learn/describing-the-ui。[9]条纹文档：https://not-stripe.vercel.app/。[10]Lit文档：https://lit.dev/。[11]Storyteller演示回放：https://markm208.github.io/stDemo/playback.html?view=code。[12]scrimbavuex教程：https://scrimba.com/scrim/cMPa2Uk?pl=pnyzgAP。[13]CSS中100%的含义：https://wattenberger.com/blog/css-percents。
