作者：王Lisa，产品解析与实战课学员，产品汪一枚；
1996年，上海市开了第一家网吧后，全中国各地的网吧竞相开业，计算机这种新生物润物细无声般进入了我们的生活，从厚脑壳计算机->超薄电脑->笔记本->智能手机；从电子管->晶体管->集成电路->大规模集成电路，计算机硬件的发展速度远远超过软件的发展速度，硬件的物美价廉也使得电脑从奢侈品变成了消耗品。
我们越来越离不开计算机，身边也越来越多的朋友们从事计算机相关工作；行业内关于产品经理的要求也越来越广，今天就给大家分享一些前后端分离的相关内容。
一、前后端的演变
前端笼统概念一共有3种：Web前端；Android终端开发；IOS终端开发；本文主要介绍Web端。
1.1 简单粗暴：一个Apache+PHP+Css，搞定所有页面
在2012年前后，PHP非常盛行，不同于C语言的语法复杂，不同于Java的开发繁琐，PHP以简单轻便，成本低，占据各大公司的开发语言首位，有传言淘宝的第一个版本就是用PHP写的。PHP+Mysql+Apache/Ngnix的开发模式成为当时的固定套餐。
当时的文件结构应该是下图这样的：
而显示页面的时候，需要把代码写到html静态页面内。
简单来说通过php语言读取业务数据，在将php的语法添加到html静态文件内；
这样做非常麻烦，数据层和应用层还有展示层都在一个方法里面，以上图为例，如果增加了第5个业务类型，我们就需要把所有的PHP页面增加一遍，在把HTML页面全部增加一遍，非常容易有遗漏的页面。
1.2后端为主：MVC模式->model+control+view
我们又开始了一种新的框架方式MVC。
model是指与数据方面链接的数据层；control属于调用model方法的控制层；view属于展示HTML的展示层；
这个时候，我们已经把数据层和应用层基本分开了，而且调用方法已经采用了AJAX调用；
但是展示层依旧需要写数据到HTML上面；
MVC的方式，着实让人轻松了不少，增加一个小业务，只需要改动view层的代码就可以了；
1.3逐渐明细：restful风格的Api和阿里系的Sea.js
应该是14年前后，移动手机端的兴起，和电商第一的淘宝网，吸引了所有人的目光。
一、随着工作内容的细分和专业化，再也不用一个人既要写PHP,又要写HTML，又要会PS了；有了专业写后端的，就有专业写前端的，前端可以是手机前端，也可以是Web前端。
这时候后端只需要一个接口，手机前端和Web前端，共同调用相同接口展示到不同设备端；
那么怎么让2个前端人快速理解API，restful应时而起。
如上图，只要简单传递一些ID参数，调用接口就可以获得正确数据；从名称就可以快速区分哪些是获得（Get）或删除（Delete）。
二、电商的兴起，让人们注意到淘宝网首页的结构之复杂，内容之多，加载之快，并发时如何快速解决的，让Sea.js和Require.JS浮出水面。也认识一位国内前端大牛：王保平。
但是随着时代的进步，非常遗憾这2款js已经不在淘宝首页应用了。现在淘宝用的是Kissy（也是王保平写的）,感兴趣的朋友可以去看看官方文档。
KISSY 是一款跨终端、模块化、使用简单的 JavaScript 框架。除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等，KISSY 还面向团队协作做了独特设计，提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY 为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。
当时sea.js和require.js,已经极大的优化了前端的工作，但是写html的时候，依旧是需要在开头引入无数个js文件，等待浏览器的加载（淘宝现在依旧这么做的）。
1.4前端为主：EmberJS、KnockoutJS、AngularJS等
关于AngularJS最好的方面是，它是不间断的前端开发的全面解决方案。开发人员不必担心其他模块，并且可以毫不费力地使用JavaScript开发数据驱动的Web应用程序。页面只需要引入一个Js。
运行结果
在元素内赋值
运行结果
感兴趣的小伙伴可以去下载源码看一下；下载源码地址：https://github.com/angular/angular.js。
1.5全栈时代：node.JS，vue.JS
随着4G移动设备的普及，快速响应，支持数据多端大并发成为了很多人迫切想要优化解决的一个问题。
说起node.js要从大牛Google与微软的浏览器大战说起，当时微软认为IE6浏览器已经非常完善，几乎没有可改进之处，然后解散了IE6开发团队！而Google却认为支持现代Web应用的新一代浏览器才刚刚起步，尤其是浏览器负责运行JavaScript的引擎性能还可提升10倍。
Google于是开始创建自家的浏览器。他们也看中了WebKit内核，于是基于WebKit内核推出了Chrome浏览器。
Chrome浏览器是跨Windows和Mac平台的，并且，Google认为要运行现代Web应用，浏览器必须有一个性能非常强劲的JavaScript引擎，于是Google自己开发了一个高性能JavaScript引擎，名字叫V8，以BSD许可证开源。
有个叫Ryan Dahl的歪果仁，他的工作是用C/C++写高性能Web服务。对于高性能，异步IO、事件驱动是基本原则，但是用C/C++写就太痛苦了。于是这位仁兄开始设想用高级语言开发Web服务。他评估了很多种高级语言，发现很多语言虽然同时提供了同步IO和异步IO，但是开发人员一旦用了同步IO，他们就再也懒得写异步IO了，所以，最终，Ryan瞄向了JavaScript。
因为JavaScript是单线程执行，根本不能进行同步IO操作，所以，JavaScript的这一“缺陷”导致了它只能使用异步IO。
选定了开发语言，还要有运行时引擎。这位仁兄曾考虑过自己写一个，不过明智地放弃了，因为V8就是开源的JavaScript引擎。让Google投资去优化V8，咱只负责改造一下拿来用，还不用付钱，这个买卖很划算。
于是在2009年，Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。虽然名字很土，但是，Node第一次把JavaScript带入到后端服务器开发，加上世界上已经有无数的JavaScript开发人员，所以Node一下子就火了起来。
1.安装node环境
2.编写代码
3.运行命令（需要电脑已经安装node.JS 环境）
4.打开浏览器
简单来说，node.JS提供了一个Js脱离浏览器运行的环境。当浏览器阻塞时，我们直接把请求发给服务器，让它来干活。
二、什么是前端
说到前端，开头说过一共有3种：Web前端；Android终端开发；iOS终端开发；这里也主要介绍一下Web端。
Web前端相关，就不得不说浏览器和GPU（计算机的图形处理器），前面也提到了Google和微软的浏览器大战。可以看下图简单了解一下。
2.1浏览器请求
浏览器查看本地是否有缓存，有缓存读取缓存，没有缓存向服务器发送请求，获取数据，渲染到页面；
2.2 Html页面显示
Html页面如何显示颜色，布局和按钮样式等加载原理如下图：
三、什么是后端
后端是指在服务器端工作的，控制着前端的数据内容，主要负责程序设计架构思想，管理数据库等。后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现业务判断、数据的存取、平台的稳定性与性能等，涉及动态语言如PHP、Golang、JSP等。
3.1PHP语言
3.2 Golang语言
四、前后端分离示例
4.1前端框架AngularJS简介
下载源码地址：https://github.com/angular/angular.js
4.2后端语言Golang（简称Go）
下载源码地址：https://github.com/golang/go
4.3前后端分离示例
Go语言后端部分代码示意：
AngularJS代码示意：
运行结果
注意：这里将直接赋值与返回查询结果写到一起了，注释直接赋值代码，运行结果就会返回Api查询到的数据；
从1996年到2020年，计算机带我们进入了一个最好的时代，它已经深深影响了我们所有人的生活方式和生活细节。软件技术也在不停的向前发展着，N多年前，谁可以预测到web前端可以脱离浏览器的存在呢？N多年后，或许服务器都不需要了。
文章的结尾，向冯·诺伊曼先生致敬。