社区精选 | 一个被忽略的前端细分领域

今天小编为大家带来的是社区作者 卡颂 的文章，让我们一起来学习一个被忽略的前端细分领域。

---

大家好，我卡颂。

回想下你学新技术的主要途径是什么？看书？看技术文档？看博文？看视频？

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

从纸媒时代到互联网时代，再到移动互联网时代，虽然信息的载体发生变化，但信息的呈现形式仍以文字为主。

文字可以主动控制阅读速度、节奏，而视频有更佳的表现力。

可以说他们在体验上各有优劣。

那有没有一种形式能结合两者的优点呢？有，答案是交互式文章。

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

https://pomb.us/build-your-own-react/

这是一篇讲解 React 原理的交互式博文，左侧代码，右侧正文。随着正文的阅读，左侧代码会相应变化。

这篇文章对应的 Github 仓库 https://github.com/pomber/didact 有 5k star ，可以认为是入门 React 原理的最佳实践了。

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

比如这篇介绍数组是如何工作的文章 —— how-arrays-work https://github.com/pomber/didact ,用交互的方式演示了数组中每个字节处理数据的方式：

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

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

交互方式的实践

---

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

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

• 动画交互效果
• Demo 交互

动画交互效果

code-surfer  https://github.com/pomber/code-surfer 是一个动画交互组件。

他的本质是一个 React 动画组件（用于展示代码之间的渐变动画）。

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

git-history https://github.com/pomber/git-history 是另一个使用code-surfer的项目。

我们使用 git diff 命令时，命令行会使用颜色（通常是红、绿）区分新增、删除的代码：

 git-history 项目使用动画的形式，展示 git history 中代码的增删。

读者可以在 githistory 项目（https://github.githistory.xyz/torvalds/linux/blob/master/kernel/up.c）体验他的效果。

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 教程  https://svelte.dev/tutorial/basics ：

更详细的，如 React ，提供了以交互式文章组成的 React 教程 https://beta.reactjs.org/learn/describing-the-ui 

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

Lit 文档 https://lit.dev/ 中的 hover 后代码高亮效果：

视频的体验之争

---

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

Storyteller Demo Playback https://markm208.github.io/stDemo/playback.html?view=code 将 Demo 与动画交互结合，实现了视频播放器的效果：

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

scrimba 是 Demo 与动画交互结合的播放器的商业化产品，读者可以看看 scrimba vuex 教程 https://scrimba.com/scrim/cMPa2Uk 感受下交互体验。

开发者的一片蓝海

---

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

相比于传统文章、视频，交互式文章的体验优势有多大呢？比如这篇文章 ——  100% 在 CSS 中的意义 https://wattenberger.com/blog/css-percents 

在文章中，读者可以拖拽滑杆看到不同百分比的效果：

对于想建立自己技术影响力的开发者，这是种很好的尝试。

---

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -