墨滴

张春成

V2

2023/05/17阅读：23主题：默认主题

从一张交互式图表看现代互联网的前端与后端

从一张交互式图表看现代互联网的前端与后端

不知道从什么时候起，一提到互联网就会生出“前端”和“后端”来，最初好像一面镜子，总有前也总有后；最近又好像成了一颗玻璃球，既没有前也没有后。

本文是自己作为一个 WEB 门外汉的肤浅想法，不仅不具有普遍性，专业性也可能欠佳。但门外汉有门外汉的优势，那就是我从门外看到的东西，可能比较适合给其他门外的人提供一些感性的经验，比较容易哄骗几个好奇的到门内去，希望门内的人不要见怪。

  • 从一张交互式图表看现代互联网的前端与后端[1]
    • 一张交互式图表[2]
    • 搭台唱戏[3]
    • 所谓后端[4]
    • 所谓前端[5]
    • 互相卷起来的前端和后端[6]
    • AI 能做些什么？[7]

一张交互式图表

我说我是偷懒也好，产能不足也罢，最近程序写的少些，但浏览的量却增大了。事情要坚持总要松紧适度，毕竟不能总拿着短周期、低质量的东西一路猛冲，总要充电一下。因此我觉得这是好的事情。

看到一张美国大法官选举的交互式图表，它是描述近期美国大法官选举的投票情况，很有意思。它在好看的同时表达了三种信息

  1. 首先，蓝色和红色的美国两党的传统颜色；
  2. 其次，实心和空心代表投票情况；
  3. 再次，12 名候选人并排展开，方便进行比较。

比较有意思的是肖像头顶上的圈圈纹理，你可以把它想象成是传统西方法官头上戴的夸张假发套，看上去趣味满满。另外，由于这是交互式图表，因此当你把鼠标放在圈圈上的时候，鼠标附近会弹出该圈圈代表的参议员姓名等信息。

Untitled
Untitled

Supreme Court Justice Nominations[8]

搭台唱戏

见贤思齐，我当然开始关心这张图是怎么绘制的。这时我门外汉的属性开始发作，突然想要弄明白“交互式”图表与“图片”之间的区别是什么。显然，如果上述图表是一张图片的话，那么不管你的鼠标如何移动，它都不会给你提供任何反馈；其次，假如某个数据需要更新或更正的话，那么已经分发出去的静态图片也不会自动修改过来。而交互式图表没有以上两个问题，它不仅会与用户产生适当的交互，也能够根据数据的变化随时产生响应，你甚至可以在投票的过程中，以直播的方式实时更新图表中呈现的内容。

也就是说，交互式图表不是静态图片，它是在前端（也就是用户使用的浏览设备和软件）根据数据的情况，实时演算并呈现的。你也可以这样理解，交互式图表是前端借用用户的设备搭了个舞台，数据演员们在这个舞台上做现场表演。

所谓后端

说到这里，即使你完全不了解互联网技术，也会问出第一个问题：数据从哪里来？这个问题最容易解决，引用原文的话说，这组数据的来源是

Import data from csv file. Data scraped from Senate gov website. …… Positional arguments created with R ggparliament.

他们已经从不知道什么地方把数据整理好了，包括哪个党的来自哪个州的哪位参议员给哪名法官候选人投了什么票。这是典型的后端业务，即从数据库中选择合适的数据，进行初步整理后传递给前端。

不仅如此，后端在整理数据时还“顺手”做了一件事情，那就是给每位投票的参议员排定他的“坐次”，即下图中的 x 和 y 列，它代表每个蓝点或红点的位置。这也是典型的后端业务，即使用算法对数据进行必要的数学运算。

Untitled
Untitled
Untitled
Untitled

所谓前端

第二个问题是这些数据如何“表演”出图像？这个过程其实较为枯燥，因为数据演员们已经由后端准备好，前端需要做的是在用户使用的浏览设备上（通常是 Web 浏览器）开辟一块空间，之后让演员走到各自的位置上即可。

传统前端需要给演员位安排位置吗？我的理解是传统前端不需要负责安排演员走位的工作，因为他们的位置已经由后端传来的数据中规定好了。那么，传统前端有自己发挥的空间吗？我的理解是空间不大，因为数据走这个流程时，只剩下“是否可以被显示“这一个操作变量。我摘抄几个前端技术的比较官方的说法如下，措辞不一样但基本意思差不多。因此，大家开始说前端没有前途。

Front-end development focuses on the user-facing side of a website. Front-end developers ensure that visitors can easily interact with and navigate sites by using programming languages[9], design skills, and other tools. …… They produce the drop-down menus, layouts, and designs for websites.

quote from The Difference Between Front-End vs. Back-End | ComputerScience.org[10]

The main responsibility of the Front-End Developer is the User interface. …… Simply put, create things that the user sees.

quote from What is a Front-End Developer (w3schools.com)[11]

互相卷起来的前端和后端

这个世界上没有不黑的白，也没有不白的黑，前端和后端也一样，他们围绕”如何给用户提供更好的服务“这一问题，展开了无尽的攀比和追逐。

首先，后端想代替前端。让我们回到上述交互式图表，如果你阅读源码的话就会发现，所谓前端的工作其实就是给后端传来的数据加了个 Javascript 的语法壳。浏览器对新生成的代码进行解释，从而对内容进行渲染，产生了数据演员在表演的效果。那么后端程序员觉得可以省略前端的加工过程，后端不再直接提供裸数据，而是提供渲染好的、符合前端规范的前端页面就好了嘛，于是”后端渲染“的概念应运而生。

Rendering HTML Pages as an HTTP Server Response Using Node.js | Engineering Education (EngEd) Program | Section[12]

之后，所谓”身怀利器，杀心自起“，随着前端技术的飞跃式发展，前端开始想吞并后端。除了后端拿来”消灭“前端的 nodejs 工作原本是前端工具之外，面向 Javascript 的许多优秀计算库，如 d3js、webgl、threejs、TensorFlow.js 等，开始让用户的浏览器具备越来越强大的边缘计算能力，（是的，没错，你手里的电脑或手机的计算能力非常强大，至少比你想象的要强大）。

Untitled
Untitled

D3.js - Data-Driven Documents[13]

WebGL Samples[14]

Three.js – JavaScript 3D library[15]

TensorFlow.js | Machine Learning for JavaScript Developers[16]

举回前端的例子，那就是后端不仅把演员打包送到前端，甚至送佛送到西，直接把舞台搭好、演员摆好，再打包一起送过去。就像超市不再卖蔬菜，而是直接卖预制菜那样。这样浏览器可以直接渲染后端传来的页面，就不再需要前端程序员做任何操作了。

而前端想做的事情是反过来的，他们觉得用户想看什么表演我是知道的，那么我就要现场招募演员、立即搭台、直接唱戏。后端是什么我不知道，只要给我 token 我就能直接从数据库中挖出需要的数据。这样浏览器可以完成选角、搭台、唱戏的全程，就不再需要后端程序员做任何操作了。

当然，以上说法有戏说的成分，因为双方都太”典型“了，好像弄得水火不容。但事实上，随着互联网前、后端技术的不断发展，数据流和互联网业务开始变得越来越合理，用户需要开始形成分布式云计算后端渲染和边缘计算相结合的综合解决方案，需求变化更加丰富，业务弹性也日益增强。因此，我这个门外汉觉得前后端卷得越激烈越好。

AI 能做些什么？

那么，在两方程序员打得如火如荼的时候，以 ChatGPT 为代表的新晋 AI 能做些什么呢？我觉得 AI 能把桌子掀了。

因为我之前的论述假设了用户有某个需求，这个需求可能是他内生的，也可能是其他商业机构或技术机构给他创造的，但不管怎么说，这个需求是需要程序员利用前后端技术来解决的。但 AI 的出现使用户不需要再”等待“程序员为他解决需求，而是可以直接向 AI 说出自己的需求，而 AI 会生成相应的代码。

如果你觉得因为 AI 生成代码之后还需要程序员把代码敲到相应的位置，所以程序员还有较强的价值的话，那么我想请问你一个问题：你觉得，人和机器相比，谁更加知道代码应该填在哪里？我想答案是不言自明的。目前越来越强大的 AI，和其他应用结合越来越紧密的 AI 已经不断证明了这一点。

Untitled
Untitled

ChatGPT plugins[17]

Wolfram Plugin for ChatGPT[18]

所以人应该做些什么呢？我不知道。但是，你可以去想自己的需求，AI 会帮你解决；也可以去想别人的需求，或者创造别人的需求， AI 会帮你赚钱。当然，如果你还像我一样对这个世界充满好奇，那么还是可以关注一些算法和技术，只不过它们和赚钱相去甚远，不能说关联不大，简直是背道而驰。

参考资料

[1]

从一张交互式图表看现代互联网的前端与后端: #从一张交互式图表看现代互联网的前端与后端

 [2]

一张交互式图表: #一张交互式图表

 [3]

搭台唱戏: #搭台唱戏

 [4]

所谓后端: #所谓后端

 [5]

所谓前端: #所谓前端

 [6]

互相卷起来的前端和后端: #互相卷起来的前端和后端

 [7]

AI 能做些什么？: #ai-能做些什么

 [8]

Supreme Court Justice Nominations: https://observablehq.com/d/6c17f4b11c38626e

 [9]

programming languages: https://rveducsprd.wpengine.com/resources/computer-programming-languages/

 [10]

The Difference Between Front-End vs. Back-End | ComputerScience.org: https://www.computerscience.org/bootcamps/resources/frontend-vs-backend/

 [11]

What is a Front-End Developer (w3schools.com): https://www.w3schools.com/whatis/whatis_frontenddev.asp

 [12]

Rendering HTML Pages as an HTTP Server Response Using Node.js | Engineering Education (EngEd) Program | Section: https://www.section.io/engineering-education/rendering-html-pages-as-a-http-server-response-using-node-js/#:~:text=To%20render%20an%20HTML%20file%20into%20the%20server,message%20body.%20Here%20is%20the%20res.sendFile%20%28%29%20syntax.

 [13]

D3.js - Data-Driven Documents: https://d3js.org/

 [14]

WebGL Samples: https://webglsamples.org/

 [15]

Three.js – JavaScript 3D library: https://threejs.org/

 [16]

TensorFlow.js | Machine Learning for JavaScript Developers: https://js.tensorflow.org/

 [17]

ChatGPT plugins: https://openai.com/blog/chatgpt-plugins

 [18]

Wolfram Plugin for ChatGPT: https://www.wolfram.com/wolfram-plugin-chatgpt/

分类：

后端

标签：

后端

作者介绍

张春成
V2