给产品讲讲前后端与前后台

大家好。

据我了解，咱们产品同事很少有计算机科班毕业的学生，有些同事大学的时候是学平面设计的，也有学工业设计的，还有我这种学数媒的，大家都不怎么懂计算机。但是因为咱们对于互联网，或者说前沿技术的兴趣，所以在毕业后纷纷走上了产品这个岗位。

产品的日常工作中，有两个占比很大的工作内容，一是PRD的设计，另一个则是和开发人员的沟通配合。也因此，搞清楚开发人员的组成，以及他们彼此协作的原理，对于产品来说是能够提高产品研发效率的一个重要的发力点。

今天我们就从前后端与前后台这对比较容易混淆的概念说起，帮大家梳理一下软件研发中存在的一些概念，方便大家在日常工作中理解研发同事的工作是在做什么。

一段冗长的铺垫

首先可以明确，自计算机诞生后的很长一段时间中，软件的世界里，只有需求方和后端程序员这两个角色。

这个可以从世界第一台通用计算机ENIAC说起。这台体积庞大的计算机出生于二战期间，是美国陆军为了在战争期间实现快速精确的弹道计算，资助宾夕法尼亚大学进行研发的。¹

在当时，计算机没有屏幕，也没有键盘，输入输出内容依靠的是打孔卡片。²而且，ENIAC的计算机程序，也并非由我们目前熟悉的高级计算机语言（如C、Java等）编写而成，甚至不是由汇编语言写成，而是直接通过修改计算机的电路实现的。事实上，ENIAC计算机从1946年诞生到1955年退役，这台计算机上面运行的软件，是由当时负责编程的六名女工程师通过几百条电线和三千个开关编出来的。³这个不太好理解，这里涉及到一定逻辑电路的知识，大家感兴趣的可以自己去查一下。我不懂就不多说了。但可以直观的理解，编程在一开始，是一项非常需要脑力和体力的工作，我们对最初的程序员们表示respect。

而直到1956年，麻省理工的精英们才开始研究通过键盘直接操作计算机。⁴接上键盘后，人类操作计算机的难度大大降低。得益于此，程序员们终于可以坐下来歇一歇了；而计算机语言和软件，也踏上了一条飞速发展的道路。

简单回顾一下计算机语言的发展。

因为通过修改计算机电路编写程序太难太累了，人类就尝试发明一种新的工具，直接告诉计算机应该执行什么指令，计算什么数字。

1940年代，直接操作计算机硬件的汇编语言出现了。⁵汇编语言是一种低级语言，这里所谓的低级不是说它简单易懂，恰恰相反，它是除了手敲二进制之外最难的编程语言了。可以说，懂汇编语言的，有一个算一个都是大神。低级指的是它更接近硬件，更接近底层。汇编语言编写的程序，可以直接控制硬件的进行指令和数据层面的操作。也因此，它的代码需要针对具体的硬件来编写，如果你想在不同设备上实现同样的功能，就需要给每个型号的机器单独编写一遍代码。

汇编很酷，很牛，但是，写起来很困难，并且特别容易出bug。人类并不能直观的理解机器，正如同你的男/女朋友并不能直观的理解你。

怎样才能互相理解？说人话就好了嘛。

很快啊，到1950年代，以FORTRAN语言为代表的一批，更加“说人话”的计算机语言诞生了。⁶

这些语言被称为高级语言，根据低级语言的定义，我们很容易得知，高级语言就是不那么接近硬件的语言。高级语言更加接近人类的自然语言，尤其是特别像英语，所以能够更方便的被人类所理解。而通过针对不同硬件适配的编译器进行编译，高级语言就能够被不同的硬件平台所理解。这样，在不同的硬件上想要实现相同的功能，就不需要为每台设备分别编写一段代码了，这极大的减轻了开发人员的工作负担。

在同样的时间轨迹中，除了编程语言在进步，计算机本身也在不断进步。随着电子技术的发展，构成计算机的元器件也在不断进化。一开始，计算机的电路上布满了真空管（电子管）；后来，到了1950年代末，就换上了体积更小速度更快的晶体管（半导体）；再后来，到了1964年，又有了体积更更小速度更更快的集成电路……到70年代，终于演变成了大规模集成电路，也就是我们现在赖以为生的芯片。⁷芯片可以称为是人类历史上第三次工业革命皇冠上的宝石。

随着计算机电子元件的小型化与集成化不断提升，计算机的体积也从原来ENIAC的几间屋子大小的大型机，一步步缩小到一间屋子能放好几台的小型机，再到一张桌子就能放一台的微机，后来还演变出了一个文件袋就能放一台的轻薄本，和一个口袋就能放一台的智能手机。

这里不是开玩笑，智能手机的本质就是计算机。我们从技术角度不应该把电脑和手机当成两种截然不同的设备，它们只是胖瘦有别，就像有的同事很瘦，而我却很胖一样。

终于说完了计算机和程序的起源，我们再说说人机交互的演变和互联网的诞生。

又一段冗长的铺垫

说说人机交互。

计算机接入键盘后，到了60年代中期，人类和计算机交互就有了最原始的界面：命令行。⁸命令行是一种问答式的界面，就像你上学的时候给喜欢的男女同学通过小纸条对话一样。

你通过键盘输入一句话（指令），计算机就能够根据你的话（指令）作出一定的反馈。

这种交互是抽象的、高效的，同时又具有较高的学习门槛和较局限的应用场景。

学习门槛高体现在：计算机的指令是固定的。

你随便输入一句话，计算机是理解不了的。你只有按照正确的格式、输入正确的命令、操作正确的对象时，计算机才能给出Warning之外的答案。

应用场景局限则体现在：命令行是纯文本的。

通过命令行来算一道数学题是符合直觉的，通过命令行来聊天也是符合直觉的，因为这两个场景都只需要文本就可以。但是通过命令行来画画、弹琴、看片、开车却是非常违反直觉的，因为信息的载体超出了字面，变成了多媒体。我可以用几行字形容你是我的谁，却很难用几行字画出窗外的麻雀在电线杆上多嘴的画面。

因此，为了降低计算机的学习门槛，让计算机的使用领域能够从军用转向民用，从科研扩展到生产，让计算机成为更多生产者的辅助工具，其交互界面就不可避免的从命令行走向图形化。

因此，美国施乐公司创造性的研发出了计算机图形界面，其研发的计算机Alto第一次用上了鼠标，作为人类与图形界面间进行交互的工具。

1979年，乔布斯到访施乐，当场就觉得“图形界面很不错，但下一秒就是我的了”。于是苹果迅速于1983年推出了Lisa电脑，这是全球第一款零售的搭载图形界面的个人电脑。（如果施乐当时能够将Alto公开发售，那将完成绝杀。可惜被乔帮主抢先一步啊。）

从Apple Lisa开始，图形界面就横扫六合，席卷八荒，一统了全球计算机的交互方式。命令行则因为在少数场景的高效率，成为了一种重要的补充交互。

从电脑开始，图形界面交互一步步催生出了手机、智能手机、平板电脑、车载中控、智能电视等花里胡哨的各种设备，催使着屏幕占领人类目光所及的每一处。

话题终于绕回来了，产品经理画的PRD中，各种ER图、流程图其实就是对应着软件的逻辑；而原型图则是对应着图形界面。逻辑和界面交互二者共同构成了一份需求，二者缺一不可。当然有些时候，图形界面做的足够清晰易懂，能够实现让用户一眼看过去就能倒推出逻辑的地步，这种过于简单明了的流程图也可以省略。

最后一段冗长的铺垫

所以上面讲了一大通，讲的其实是我们身边能够接触到的计算机的发展。那么我们身边接触不到的计算机是怎么发展的呢？

这里就要涉及到互联网的诞生，以及C/S架构了。

1969年，美国高级研究计划局觉得，计算机单打独斗是没有前途的，计算机应该互相连接，方便大家分享自己的研究成果。于是设计部署了一套名叫阿帕网的计算机网络，这就是互联网的源头了。这套网络是通过一套私有协议进行通信的，后来其他组织组建的计算机网络无法与阿帕网互相通信，所以这个网络仍然不是真正意义上的互联网。

1974年，美国国防部觉得，阿帕网单打独斗是没有前途的，于是特地与斯坦福大学合作研发了计算机之间通信的协议，也就是鼎鼎有名的《TCP/IP协议》。有了这套协议，阿帕网改头换面，成为了可以和更多计算机通信的开放网络。互联网就这样起步了。⁹

但一开始的计算机网络真的只是计算机网络，网络上存在的就是一台台彼此独立的计算机。两台计算机可以通过TCP/IP技术进行通信，借此它们可以共享数据，却也仅仅是可以共享数据罢了。

1990年，英国科学家蒂姆·伯纳斯·李，写出了人类历史上第一个网页浏览器和网页服务器，万维网（WWW）的概念诞生了。万维网中，所有计算机都通过全球唯一的统一资源标志符（URI）进行定位，并通过超文本标记语言（HTML）进行数据表示，通过超文本传输协议（HTTP）进行数据传输。计算机终于可以仅凭一个链接，不需要资源拥有者的同意，就能单向访问到其他计算机的资源了。¹⁰

这个描述很清晰，请求资源的计算机和提供资源的计算机存在一个主从关系，这个主从关系又被称为Client/Server架构。Client就是客户端，请求资源的客户端；Server则是服务器，提供资源的服务器。因为主从架构的数据源都是放在服务器上的，客户端仅仅是请求数据并显示数据，因此在主从架构中，一台服务器被设计成允许接收多台客户端的请求。

也因此，服务器一般都是一些网络性能和计算性能较为高强的商用计算机，而客户端则可以是一些性能较弱的家用计算机。这种商用计算机就逐渐发展出了一个专有的计算机类别：服务器。

从万维网诞生开始，新时代的大门敞开了。

前端如何诞生？软件研发是怎么从后端solo，变成了如今的前后端配合的？

万维网的诞生，意味着互联网有了飞入寻常百姓家的切入点。

1994年，中国大陆正式接入国际互联网，来自中国的网民跨过长城，能够和世界上任何一个联通网络的地方通信。¹¹

从那以后，海内外的网站如雨后春笋般出现，中国大陆的第一个互联网服务，是1995年9月30日开始运营的瀛海威时空。同一年11月20日则是我本人出生的日子。

当然这些中国互联网的峥嵘岁月都按下不表，因为那会儿还不记事儿。

我们开始讲中国的互联网公司是怎样开发服务器程序，并给客户端提供服务的。

1990年代，智能手机还未出现，中国所有接入互联网的计算机都是电脑。电脑通过浏览器访问URL，从服务器获取静态页面。当时的网页是网站程序的一部分，服务器接到请求后，网站程序直接生成HTML内容，并返回给客户端。

举个例子，当时的美国在线AOL，其首页就是一个名叫main.html的网页。页面上所有内容都是纯展示。新闻就像是报纸，不支持点赞、评论。

这个时期的网站以展示内容为主，用户只能被动地接受信息，应用也集中在新闻、黄页等少数领域。这个时代也被称为Web1.0时代。

但是只能看不能动的网页是无法满足用户需求的，用户渴望从互联网上了解世界，更渴望在互联网上沟通彼此，展现自己。这也促使着越来越多的公司开始研究提升网页的表现力和可交互性，通过网站提供更多功能。

于是从2000年代起，更加以用户为中心的网络应用（Web Application）出现了。网络应用的典型例子有博客、维基百科、RSS订阅、即时通讯、社交网络等等¹²……这些网络应用的出现，意味着可交互的网络，也就是Web2.0时代的到来。

可以说，我们今天仍然处于Web2.0时代，或者说，我们仍沐浴着Web2.0的余晖。

这种重视用户交互的网络应用越来越普遍，用户在网站上耗费的时间也越来越长、进行的操作也越来越复杂。因此，为了进一步提升用户体验，顺便减轻一下后端程序员的压力，新的工种——前端程序员，诞生了。

前后端是怎么通讯的，数据库和API起到的作用是什么？

咱们接着Web2.0这个概念继续讲。

Web2.0时代有几个比较核心的特点：

1. 服务器上的服务，是通过应用程序接口（API）提供的
2. 服务器需要从关系型数据库获取数据并提供给客户端

与Web1.0时代相比，Web2.0时代访问一个网站，由直接从服务器的文件目录中，获取一个静态页面；变成了首先获取运行在浏览器内的客户端程序本身，然后由客户端程序访问API，向服务端发起请求，服务端程序查数据库并返回数据，然后客户端的页面实时更新数据进行展示。

这里提到的API（接口），就是提前确定输入的数据格式以及对应输出的数据格式后，支持系统与外界沟通的一种方式。有了接口，客户端就可以完全无视服务端的具体实现，只要知道访问不同种类的接口，就能获得不同种类的数据即可。减少了服务端的限制，就方便了客户端的可交互性的提升。

举个例子，老版本的Wordpress博客程序每次提交一条评论，页面都需要刷新一遍，是因为他的博客内容页面仍是由服务端程序生成的；而新版本的Wordpress博客程序，提交评论后可以在不刷新页面时正常发表和查看评论，是因为客户端的页面是单独运行的，不依赖于服务端程序。

而数据库存在的意义，则是让服务端程序能够从原来简单的静态页面返回器，变成了一个具备数据CRUD能力的业务系统。这是通过网站实现业务管理的基础，也就是说，后端数据库是SaaS作为一种业务模式得以成立的一大基石。

前后端分离后，客户端访问一个网站的过程，实际上是变得更复杂了。但这个过程是实现上的复杂，对用户来说是正面的体验提升。

举个实际一点的例子，乐易程小程序。

小程序就是Web2.0的网站。它本身的网页程序代码是存在腾讯服务器的，我们每次使用一个小程序，都是从腾讯服务器将客户端代码下载到本地并运行。同时客户端通过API访问智车商SaaS的API，读取各种业务数据。

API也很好举例子，比如在乐易程、智车管家都存在一个功能叫车联网。用户进入车联网页面是需要查看他拥有设备的所有车辆的。那么这个数据是怎么来的呢？就是客户端访问一个名字大概是getVehicle的API，访问API的时候带上客户ID作为参数，智车商就会从数据库去查找这个客户的所有带设备的车辆，并将车辆和设备以JSON的形式组织好，返回给客户端。

系统为什么要分前后台，前后台和前后端的区别是什么？

首先大家应该很明确前后端的概念了。前端属于客户端，而后端是服务端。前后端的概念对应的是C/S架构。

这里可能有人说了，客户端不是不仅包括前端，还包括移动端也就是App吗？是的，实际上平时我们说的前端和移动端都是一种狭义概念。狭义的前端，就是运行在浏览器里的客户端，而移动端，则是运行在iOS和Android等操作系统上的客户端。前端和移动端都是客户端。

另外除了C/S架构外，还有人说B/S架构（也就是浏览器/服务器架构）我觉得B/S架构是C/S架构的子集，浏览器只是客户端运行的依赖，实质上B里面的内容仍然是客户端。

那么，前后台呢？

前后台的概念并不来自于计算机领域，而是实际生产生活。

举个例子，你去银行办理一张新的银行卡：你坐在柜台前面，柜员坐在柜台后面。柜员让你掏出手机，打开银行的App，进行一些申请步骤；你的申请提交之后，柜员点点鼠标，通过了你的申请，并提交了通过申请的信息给银行的管理系统。可喜可贺，你有了一张新的银行卡。

在这个场景中，你是客户，你用的客户端，叫做前台；柜员是业务员，他用的客户端，叫做后台。

后台有时候也会根据业务员身份的不同分为很多种，比如店长端、店员端等，其实他们都是后台的一种。

那么我们可以理解了，前台和后台其实都是客户端，它们都是依赖于和服务端API通信的。前台、后台的数据，都是在服务端统一存储统一管理的。

了解了前后端与前后台之后，怎样认识研发同事们的岗位？

很简单，再记住一个事：后端软件是由逻辑和数据组成的。

那么做这一套系统，最必不可少的人就有以下四位：

• 后端逻辑与API开发（后端工程师）
• 后端数据结构开发（DBA）
• 前台前端开发（前端工程师）
• 后台前端开发（前端工程师）

在此基础上，为了提升业务系统的稳定性，降低出错率，我们还要加一位测试：

• 测试

最后，为了提升用户的视觉体验，我们还需要一个设计师，帮助前端工程师去设计页面：

• UI

有了这些人，我们设计的系统基本上就可以开发完成了。

但这就够了吗？不，想让服务端程序跑起来，还需要运维同事负责服务器的稳定运行：

• 运维

所以说，研发同事们每个人都有自己的专业所在，我们在和研发同事沟通时，可以学到对应领域的一些知识。这有利于产品与开发减少矛盾，降低沟通的成本。

设计实践中应当怎样去灵活运用这些知识？

这个问题主要是留给我们经验比较少的产品同事，可以自己去思考一下。