知道早期的开发中，前后端是不分离的吗？那么后来它们又为什么要“分家”呢？分离后又有什么好处呢？

在前面一篇文章中，产品汪搞懂了前后端的工作分工。但是了解过程中，一个程序猿哥哥不经意间的一句话：“现在都是前后端分离的”，让小汪感到纳闷了，以前难道前后端不分离的么？于是小汪就继续深究起来。

不温馨的一家人

在十几年前，前端的地位其实相对于后端并不那么强势，以下是一种经典的编程框架。

MVC：Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码。

有意思的事情出现了，内容是传给用户的，前端并不是直接接触用户的！前端只是提供了个样式模板，由后端把内容嵌入进入，再由后端直接传给用户。

这个时候，前端的编程要各种顺着后端哥哥的心意，而且前端要是出bug了，还得拉上后端一起研究，谁让你往我的模板里插了内容，出了幺蛾子你就得负责到底。

这个时期前后端高度耦合，从编程环境、到开发调试，都必须“在一起”，对于前端来说，其实自主权就不高，对后端来说，也要懂一些前端的知识。

于是前端程序猿对后端程序猿说，要不……你只管你的业务和数据，把结果给我，我来负责组装与呈现，这样大家都轻松些。于是前后端就分离了。

当初是你要分开，分开就分开

前后端分离带来的好处：

（1）编程更轻松

前后端分离之后，后端更专注于实现业务逻辑，形成一套标准化的“API接口”，例如需要创建商品，前端将商品信息传给后端创建商品的接口，后端就会完成商品的创建，并返回创建结果。如果前端给的创建商品信息缺了标题或者价格，后端还能返回创建失败的结果，并且提示缺失了哪些信息等。

前端除了负责界面样式和交互，还接管了获取和展示数据的权利，从此前端开发就自由多了，如果遇上bug，也能很轻松定位到是前端还是后台的事情。

（2）更高的可复用性

前后端分离，更是顺应了互联网发展多样化的潮流。后端通过提供一系列可以实现不同业务功能的接口，就可以让不同的前端、甚至外部系统过来对接。

这样方便了公司不断推广自己的产品，今天推出手机网页版、明天推出APP版、后天推出小程序版本等。而后端只需要提供一次接口，无需每增加一类客户端，后端就要新写过。

用户访问网站的过程小知识：

1. 浏览器先下载HTML的内容
2. 根据HTML里的内容，下载并加载对应的CSS，让网页漂亮起来
3. 根据HTML里的内容，下载并加载对应的JavaScript，让网站具备交互动效，其中部分JavaScript代码负责向服务器上的后端请求数据，并展示在页面上。

但是久而久之，前后端分离在web网页上也遇到了一些问题，最明显的是以下两点：

1. JavaScript的请求在用户浏览器中进行，当一个网站需要展示非常多的内容时，JavaScript就要向后台多个接口请求数据，然后再在用户浏览器上完成页面组装，这过程中就会给用户设备的网速、设备的运行速度（CPU、内存等）带来一定的压力。
2. 搜索引擎，如百度、搜狗、谷歌等，想爬取网页的内容时，就会用到爬虫。爬虫会抓取网页HTML里面的内容，然后让其他网友可以搜索到你的网页。但是此时，HTML文件就是个框架，要依靠JavaScript才能获取到数据。这就会导致你的网页难以被搜索引擎收录，用户很可能搜不到你的网页。

前后端分离为用户设备带来的影响，可以通过“换台新手机”、“换台新电脑”解决，但是搜索引擎爬不到网页的数据，对很多重度依赖搜索引擎流量的产品来讲，打击可就大了。

例如你需要找一个菜谱的时候，可能会在百度搜索“芥蓝怎么炒好吃？”，然后再从搜索结果里面访问各种美食网站。又或者你想去哪里玩，就会在百度搜索“土耳其旅游攻略”等等。对于这类重搜索引擎流量的网站而言，如果爬虫爬不到自己的数据，客流损失就比较严重。

运行在后面的前端

考虑到上诉问题，聪明的网页前端程序猿就想到了一个新的办法，那我们先把后台的数据跟HTML内容整合好，再呈现给用户吧，得力于一种叫做Node.JS的、可以使用网页前端熟悉的JavaScript编程的工具，于是有了2.0版本的前后端分离。

前端程序猿跟服务器上的后端说，让一让，给我腾个地儿，然后把Node.JS放在了服务器上。等用户或者爬虫需要访问网页时，这个运行在服务器上的程序，先请求后端获得数据，并整合到HTML中，然后再返回给用户。

这样一来，用户的设备就少了JavaScript多次请求后端的烦恼，加快了运行速度，而爬虫也可以爬取到填充好内容的HTML网页了。

看到这里，小汪就想，这么一来，用户体验、爬虫的问题确实解决了，但是让本来本该发生在用户浏览器上的事情，都在服务器上做了嘛，如果访问量大的话，咱服务器的压力不就很大了？

前端程序猿哥哥呵呵一笑，其实不然，你想想，很多用户都是在访问同一个网页，看同一个商品、读同一篇文章，这些请求，要是服务器的前端就请求后台一次，然后把整合好的HTML保存起来，下次再有人再来访问，就把这个生成好的HTML展示给用户，这样不就服务器轻松了、用户访问也快了么！

小汪又问了，那咋们页面多了，不就要每个页面都保存一份HTML文件么，服务器储存的空间不就越来越少了么？

前端程序猿哥哥继续答道：久而久之，HTML文件在服务器积累多了，就把好久都没人访问的HTML删了，给其他新保存的HTML文件让位置，通过“缓存”技术，让服务器永葆活力。

小汪恍然大悟，原来这就是缓存啊！这下子，小汪终于明白了前后端分离是什么回事，以及为什么要前后端分离。

现在随着很多大型产品的形成、独立运行，新的“信息孤岛”正在形成。例如微信的公众号-小程序-朋友圈-圈子，然后通过搜一搜进行统一搜索，内部造血，而不再依赖传统的搜索引擎为他引流。

又例如淘宝，很多年前就拒绝了让百度爬虫爬取他的商品信息，只允许在淘宝内进行搜索。你在百度上搜不到淘宝的商品，在微信上也找不淘宝的任何信息、无法访问淘宝任何的链接，如果你要淘宝购物，就只能去淘宝网站或者下载淘宝APP。新的互联网格局的形成，肯定会进一步影响着前后端的关系。

本文由 @iCheer 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

懂技术的产品经理可能在遇上bug时都不知道去找谁，本文说明产品前后端如何划分，相关问题属于哪个“端”，适合初级产品人阅读。

产品汪在验自己产品时，经常遇上bug了，就去找测试小姐姐，测试小姐姐看了看，就说：“这个找后台的某某吧”，“这个找前端的某某吧”。

小汪就好奇了，那么多程序猿哥哥，他们的职责是怎么划分的呢？

产品经理眼里的“端”

在产品经理眼里，一般按业务的使用者对产品领域进行划分，例如淘宝的用户端、商家端，再例如滴滴的乘客端、司机端、运营后台；甚至会进一步细分，有网约车司机端、代价司机端等。

当然，也可能按照业务模块进行划分，例如物流系统、支付系统、订单系统等。

前后端：谁前？谁后？

在大部分公司里，一个程序员的工作，可能会覆盖很多个产品端。例如一位前端的同事，可能既要做用户端的H5，也要做商家端的网页，还要做平台运营后台的网页。一个后端的同事，工作也可能覆盖多个业务模块。

那他们的工作是怎么划分的呢？

简单来说，对于程序猿哥哥来说，前端就是负责“用户看得见”的内容，将UI稿转换成网页、APP、电脑软件等，同时实现所有交互事件，例如用户点击、滑动、拖动等操作。

前端又会根据实现的形式进行细分，常见的有：

1）移动端APP

根据手机系统的不同，又细分为苹果iOS APP、谷歌Android（安卓） APP，甚至一些非常小众的手机系统APP，例如微软的Windows Phone（简称WP）的APP。

不同手机系统上APP开发需要用的编程语言差异较大，开发环境也有所差异，所以一个APP前端程序员，一般只会开发一个端，例如只负责安卓端，或者只负责苹果端。

另外，在移动端，大家经常能听到一个词，叫做“原生”。所谓原生就是使用系统指定的编程语言开发的软件，“非原生”，一般指套用一个网页浏览器，然后再在浏览器内用网页展示内容实现的软件。

2）PC端软件

例如我们常用的office系列软件Word、Excel、PowerPoint；电脑版的QQ、微信、QQ音乐；上网页用的Google Chrome浏览器、Firefox浏览器等，都是PC端的软件。PC端也因系统的差异，前端也会进一步的细分。

3）网页web

网页基于HTML（HyperText Markup Language，超文本标记性语言）实现，现在已经发展到了HTML5.0版本，也就是大家耳熟能详的H5。Web内容具有编程语言统一、与平台无关的特点，我们可以通过各种电脑网页浏览器、手机上的网页浏览器（UC、百度浏览器等），甚至内嵌了网页浏览器的微信、QQ、支付宝等等，实现网页的访问。

得益于网页内容编程语言统一的特点，网页前端程序员一般能做非常多的事情，例如开发电脑端网页、手机端网页、微信公众号H5等等。

4）小程序

一种新生的事物，某些软件当用户规模足够巨大时，就可以设定一套规范，然后让前端程序员们直接为这些软件，而不是不同的系统，开发“程序中的程序”。

这样的好处就是，用户不再需要手机上装各种各样的APP，一个软件里就能解决大部分事情。

现在主流的小程序，例如微信小程序、百度小程序、支付宝小程序等，都是基于HTML衍生发展出来的。开发过程与编写HTML网页相似，所以一些公司并没有专门的小程序前端，而是由网页web程序猿哥哥“被迫营业”同时从事小程序的开发。

目前很多公司推出的小程序，虽然都是基于HTML衍生出来的，但是各自衍生（魔改）方法不一样，所以具体编写时也有所差异。目前，市面上有一些小程序代码转换工具，例如写好一个微信小程序，用工具一转，就能生成一个百度小程序。

相对于“用户看得见”的前端，那用户“看不见”的部分，就是由后端负责了，后端程序猿哥哥要负责业务逻辑的实现、订单、用户资料等数据的增删改查。

一款产品的后端，一般只会用一种编程语言编写。一些功能特别丰富的产品可能会用一种编程语言作为核心，另外用1-2种语言实现一些这类语言擅长的模块，例如用Java做核心语言，但配套的数据平台用Python写之类的。

由于在同一款产品中，后端编程语言不像前端一样根据系统/设备不同各种开花。所以，后端程序猿哥哥就可以一个人负责多个业务模块的后端编写，甚至轮流负责不同模块的编写。

后端哥哥也是很辛苦的，因为他们需要去实现各种业务逻辑，订单流转、登录登出及权限管理、实现数据的存储导出、进行不同系统间的对接等等。

根据问题特征，回溯bug该找谁

介绍完了前端后端分工内容的区别，那么想区分一个bug到底归谁，那就容易些了。

如果是页面样式上的错位、缺了或多了啥字段或模块，某些按键或交互点了没反应，就优先找对应内容的前端。

相对比前端的bug，后端bug体现形式就比较丰富：

1）业务逻辑错误

例如创建订单计算金额错误、优惠券是否能用判断条件错误、订单审批流程错误等等。

2）点了之后报错

一个按钮不是点了没反应，而是点了就弹出一大堆英文的错误信息，这种情况下一般可以先找后端看看问题。

3）404、500错误

这种有明显数字代码的错误，先找后端就没错了。

这下子，小汪就明白了，原来前后端的程序猿哥哥们是这样分工的。

用户可见的界面、进行的交互操作就是前端负责，业务的逻辑、流程、数据的处理就是后端的职责。

本文由 @iCheer 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

端开发和后端开发是为了什么？有什么区别？

通俗地说，前端工作用户可以直接看到，而后端开发工作主要在服务器端，用户无法直接看到。虽然前端开发和后端开发有很大的区别，但是为了更好的用户体验，他们的工作是相辅相成的。

1.网站前端是什么？

网站前端指的是网站的页面制作或静态页面制作，是直接与用户交互的部分，包括你在浏览网页时接触到的所有视觉内容——从字体到颜色，以及下拉菜单和侧边栏。这些可视内容由浏览器解析、处理和呈现后呈现。

举个简单的例子，静态页面就像是固定布局的内容和图片。

之所以称之为静态，是因为这些内容是不能动态改变的，而动态改变则是指用户可以在后台进行上传、编辑、发布等操作来改变网页的内容。

简而言之，网站前端是指网站的页面制作，网站前端工作利用html、css、js等计算机语言技术制作网站页面的样式、布局、动态效果和数据交互，即为网站前端。

2.网站后端是什么？

网站后端是指网站的服务器端技术或后端技术。

为了使服务器、应用程序和数据库能够相互交互，我们也说过静态页面的缺点是不能动态改变页面上的内容，实现一些代码逻辑，比如我们需要实现用户的注册和登录验证，或者上传图片和发布文章等，这都需要后端来实现。

后端工作主要是做平台部署、界面设计和功能实现。平台部署主要是配置服务器；接口设计主要针对不同的服务设计相应的功能接口。通常，一个平台有多个windows套接字。功能是实现具体的业务逻辑。

后端工程师需要有服务器端语言，如asp、java、jsp、php等，用于应用程序构建。采用Linux作为开发部署环境，网站后端技术还包括MySQL、sqlserver等数据库，用于存储后端数据。

3.网站前端和后端的区别

现在我们明白了，网站的前端和后端工作是完全不同的。

(1) 呈现方式不同。

前端工作是创建网页，后端工作是结合数据库实现一些代码的功能逻辑。

简单来说，前端开发人员用一个按钮在应用程序中创建一个界面，然后按下按钮获取客户数据。后端开发人员编写代码，通过指出从数据库中提取哪些数据并传递回前端(最后显示在那里)，使按钮工作。

(2)使用不同的技术

前端开发使用的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack、AngularJs、ReactJs、VueJs等技术。

以java为例，后端开发主要使用的技术包括但不限于Struts Spring MVC Hibernate HTTP协议Servlet Tomcat服务器。