头图

一个被忽略的前端细分领域

大家好,我卡颂。

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

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

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

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

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

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

相信很多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网络延迟更小(codesandboxNode脚本是在服务端执行的,再传输给客户端)

文档的体验之争

前端领域发展至今,已经很少有完全创新的开源项目了。

通常,新项目会在现有项目的基础上进行微创新。比如Solid.js借鉴了ReactKnockout.js

Vue3也准备借鉴Svelte,出一个无虚拟DOM的版本。

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

这一点,可以对比React新老文档来体会。

对于文档的用户体验,其中非常重要的一点,就是提供丰富的交互。

基础的,如Vue3,提供了在线DemoPlayground

Vue3在线demo

进阶的,如Svelte,提供了基于在线DemoSvelte教程

更详细的,如React,提供了以交互式文章组成的React教程

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

Lit文档中的hover后代码高亮效果:

视频的体验之争

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

Storyteller Demo PlaybackDemo与动画交互结合,实现了视频播放器的效果:

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

scrimbaDemo与动画交互结合的播放器的商业化产品,读者可以看看scrimba vuex教程感受下交互体验。

开发者的一片蓝海

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

相比于传统文章、视频,交互式文章的体验优势有多大呢?比如这篇文章 —— 100%在CSS中的意义

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

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

avatar
卡颂
《React技术揭秘》作者
2.5k 声望
16.5k 粉丝
0 条评论
推荐阅读
React和Vue谁会淘汰谁?
大家好,我卡颂。在我的技术群里大家经常会聊一些宏观的技术问题,就比如:Vue和React,最终谁会被淘汰?这样的讨论,到最后往往会陷入技术的细枝末节的比较,比如:对比两者响应式的实现原理对比两者的运行时性...

卡颂1阅读 642

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
avatar
卡颂
《React技术揭秘》作者
2.5k 声望
16.5k 粉丝
宣传栏