先后端分离后的前端时代

什么是先后端分离，要区分前端和后端，须要有个明确的界限。通常，用户能够直接看到的东西，都是属于前端的范畴，除了前端以外都属于后端了。

在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，能够说是没有独立的“人格”可言。

前端负责切图和编写静态页面模板，后端将数据渲染到前端提供的页面模板中，最后将页面渲染到浏览器展现。

这个过程当中，前端只提供页面模板或者写一些JavaScript脚本，有的甚至JS脚本都是后端来写，前端的做用只局限于切图和样式模板文件，这种角色就是传说中的“切图仔”。

这也是为何行业内都以为前端是一个很简单的工做，只要花个一周，学下HTML、CSS和PS的简单技巧就能够胜任的工做。

如今看来，那时候的前端就是一个打酱油的，发展前景颇有限。那时候的JavaScript脚本也比较简单，一个jQuery就能够横扫天下，因此对于精通语言类代码的后端程序员来讲，能够很快的上手JavaScript，对前端来讲，发展空间就更小了。

先后端分离，不仅是简单的代码的分离。

首先是要架构上分离解耦，逐渐摆脱先后端在架构上的依赖，先后端各司其职，分开部署在不一样的服务器上，经过RESTful接口传递数据。减轻后端服务器的压力，后端服务器再也不负责页面渲染，只负责输入数据，吞吐量提高了好几倍。

其次是逻辑分离，不分离的时候，对于业务代码的界限很不明确，业务逻辑基本都放在后端，分离以后，前端也承担了一部分不应后端来写的业务逻辑，数据处理更加清晰。

最后是系统分离，同一个后端系统，能够将一样的接口数据提供给PC端、Mobile端和Native端等不一样的前端终端，不须要为每一种终端提供一套接口。一样，对于前端应用来讲，能够更方便的调用多个后端服务器的接口，处理和展现多个系统间的数据。

为何要先后端分离

先后端分离，让软件开发的流程更加清晰，解决了开发阶段的痛点。

从前，前端不止要学习后端的模板渲染语法，还要配置后端的开发环境，并不断同步后端的代码，这对于前端来讲是很是痛苦的。

而如今，前端有本身的服务器，不须要再依靠后端服务器来支持项目运行，若是在开发阶段，还可使用mock数据（要先和后端肯定接口数据结构），摆脱对后端接口的依赖，这样极大的提升了开发效率，系统分工也更加明确。

固然，若是只是提出一个概念，技术上不能实现也是空谈。

随着前端技术的更新发展，短短几年内就发展出了gulp、webpack等前端工程化工具，HTML5和JavaScript也不断更新新特性，提供了前端应用场景和开发前端独立应用的技术支持，React Native、PWA和微信小程序等也都是之前端技术为基础开发移动APP和小应用，前端迈入了一个最好的时代。

前端技术在近些年的发展，也使得后端不能再将前端束缚在本身麾下，必须放开手让前端闯出本身的一片天，发挥大前端的优点。只是下面看一下，前端技术在近几年有了哪些发展，使得先后端分离成为可能。

微服务的兴起，系统架构解耦合，先后端分离是必然的趋势。

2009年，谷歌推出angularJS，将后端MVC的思想带到了前端，模块化、指令和双向绑定等特性使得构建一个前端应用项目成为可能。

2012年HTML5规范定稿，2014年10月标准落地，HTML5的新特性加速了前端领域的发展。2015年6月17日，ECMAScript 6发布正式版本，带来了不少语言新特性，如class，module和promise等。

Nodejs的出现，使得JavaScript编写服务端程序成为可能，用JavaScript就能够开发一个从前端到后端的系统。Nodejs的事件驱动在负载均衡方面表现突出，愈来愈多的Nodejs服务器被应用到了生产环境。用npm管理的JavaScript模块，能够快速构建一个可插拔的系统。

经历过RequireJS的模块化，发展出了ReactJS、VueJS等前端框架，将前端模块化推上了一个新高度，结合ECMAScript 6语言class、module等，用babel编译成浏览器可识别的ES5语法，通过grunt、gulp、webpack和rollup等打包工具的编译打包，构建一个前端应用变得很是的容易。

前端的场景也已经跳出PC端网页，有了移动端H5页面，微信端页面，Hybird App内嵌页面等。

使用前端技术，能作哪些事

网站

网站是前端最基本的形态了，最基本的是PC端网站、移动端网站。能够在浏览器上打开，也能够在微信或各类APP内打开（这也是一直APP内webview打开的方式）

H5游戏

H5游戏已经见怪不怪了，当年微信退出打飞机游戏的时候，推进了H5游戏的大发展。它无需安装，经过手机浏览器便可访问，最大的特色就是：轻量、简单。

H5游戏的开发采用HTML5的canvas等制做，或者也可使用webgl来作3D的H5游戏。

移动APP

原生的移动APP，是用Native的开发语言作的，好比要开发IOS APP，你能够用Object-c，swift等，要开发Android APP，你能够用JAVA或Kotlin等。

咱们这里说的移动APP，是指使用前端技术来作的。前几年，比较火的Hybird APP框架是ionic，也有国内开发者作的mui和HTML5+框架，这些框架的技术是将html、css和JavaScript打包成一个文件，将文件放到webview中访问，最后再在外层套上原生应用的壳，生成IOS和Android的安装文件。这种APP能够作不少简单的APP，不适合交互比较复杂的APP，由于webview的性能仍是存在必定的问题，在Android设备上的卡顿变现比较明显。

这两年，以React为语法基础的React Native和以Vue为语法基础的Weex框架，成为新一代使用前端技术开发移动APP的框架，它们抛弃webview使用新的渲染机制，极大的提高了APP的性能和体验。目前这二者都处在完善阶段，在将来很被看好。

桌面应用

以Nodejs和Chromium为基础的框架Electron，使得使用HTML、CSS、JavaScript开发跨操做系统的桌面应用成为可能，应用能够运行在windows、maxOS和linux系统上。

Chrome APP

Chrome浏览器上运行的插件，是运行在Chrome上的HTML应用，彻底使用前端技术开发制做。

2010年Google推出了基于Chrome开发的PC端操做系统Chrome OS，特色就是速度快，设计简洁等，相对应的市场上也推出了不少基于Chrome OS的笔记本电脑，厂商有三星和戴尔等。

微信小程序

2017年1月，微信退出小程序，曾一度引爆前端行业。

小程序按照前端技术来设计开发，也作好了系统的兼容和不一样设备的适配的设计，开发者只须要专一于实现业务代码便可。因此，只要熟悉前端技术就能够很快的作出一个小程序。

Web VR、Web AR

这两年，新兴并大火的技术是人工智能和机器学习，紧接着的应该就是VR、AR了吧，去年年末QQ和支付宝都在AR和VR方面作出尝试，在抢红包上进行实践。

前端技术webgl，能够在浏览器上很好的实现3D场景，Three.js是这方便很好的JavaScript框架。Chrome浏览器已经兼容Web VR，配合Daydream View，能够浏览Web VR页面。

先后端分离后，须要考虑哪些事情

分离后的前端，再也不是一个简单的HTML文件，已是一个独立的应用系统。除了要考虑页面的数据渲染展现，还要用工程化的思想来考虑前端的架构，先后端的交互和数据安全等事情。

架构

前端应用部署在Nodejs、Nginx或者Nodejs和Nginx组合的服务器上，经过反向代理转发页面请求到后端服务器，至关于在传统的流程中加了Nodejs这一层。固然，也能够用Nodejs服务器来承担一部分负载均衡的工做，业务逻辑也能够放在Nodejs这一层来处理，例如：经过判断请求是来自PC仍是APP，将请求发到不一样的后端服务器。

Nodejs的架构中，分层以下：

RESTful接口交互

先后端分离以后，更多的是采用RESTful风格的接口与后端进行数据交互。

REST是“呈现状态转移（REpresentational State Transfer）”的缩写，一种API的架构风格，在客户端和服务端之间经过呈现状态的转移来驱动应用状态的演进。

在 REST 样式的 Web 服务中，每一个资源都有一个地址。资源自己都是方法调用的目标，方法列表对全部资源都是同样的。这些方法都是标准方法，包括 HTTP GET、POST、PUT、DELETE，还可能包括 HEADER 和 OPTIONS。
RESTful的API设计，使得后端经过接口向前端传递数据，数据的格式一般是JSON这种通用的格式。对前端来讲，只要后端返回过来的是RESTful的数据就行，无论后端是用Java写，仍是用python或PHP，拜托对后端的依赖，作到前端系统的独立。

工程化构建

Nodejs不止能够用来作前端服务器，在开发阶段，它也能发挥很大的做用。

前端生态的发展，是围绕着Nodejs进行的。用npm来管理项目依赖，能够很好的维护和运行在Nodejs环境上。

打包工具grunt、gulp、webpack和rollup等，都是运行在nodejs上，再结合语法编译、打包部署等插件，将应用输入成一个完整的应用。

若是你使用了Angular、React或Vue框架，或者你使用浏览器暂时还不兼容的ES6语法，还须要在应用打包前用babel将语法编译成浏览器可识别的ES5的语法。

SPA

SPA是单页Web应用（single page web application，SPA）的简写，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

像Angular、React或Vue就是为了SPA而设计的，结合前端路由库（react-router、vue-router）和状态热存储（redux、vuex）等，能够开发出一个媲美Native APP的Web APP，用户体验获得了很大的提高。

固然，SPA也不是完美的，也不是适合全部的web应用，须要结合项目和场景来选择。

SPA有以下缺点：

初次加载耗时增长。能够经过代码拆分、懒加载来提高性能，减小初次加载耗时。

SEO不友好，如今能够经过Prerender或Server render来解决一部分。

页面的前进和后端须要开发者本身写，不过如今一些路由库已经帮助咱们基本解决了。

对开发者要求高，因为作SPA须要了解一整套技术栈，因此，要考虑后期是否有合适的人选进行维护。

掌握哪些技术才能更好的开发前端应用

前端技术突飞猛进，发展迅速，做为一个与时俱进的前端工程师，仍是要不断的学习，更新技术栈。既然这样，咱们要掌握的技术有哪些呢？

如下列出一些前端技术，有些已经不会再应用在新系统中，可是仍是有不少老系统是使用它们作的。

语言知识

ES5 & ES6 & ES7 // ES语言基础

HTML5 API & CSS3 // HTML5和CSS特效

Less & Sass // CSS预编译语言

SVG & Canvas & D3.js // 图形数据可视化

WebGL & Three.js // 3D场景

CMD & AMD & CommonJS // 语言标准

RequireJS & SeaJS // ES模块化库

CoffeeScript & TypeScript // ES语言风格库

NodeJS & Express & Koa // Node的WEB服务器

TCP & HTTP & WebSocket // 网络协议

框架、库

jQuery

Backbone

Ember

Angular & Angular2 & Angular4

React

Vue & Vue2

Ionic & Ionic2

React Native

Weex

Electron

......

工具

Sublime Text & Atom & Webstorm & VS code //编辑器、IDE

SVN & Git //代码管理、版本控制

Chrome Dev Tools & FireFox Developer Edition // 浏览器开发者工具

ESLint & JSLint // JavaScript代码语法检查

React DevTools // react调试工具

Redux DevTools // redux调试工具

Vue DevTools // vue调试工具

Grunt & Gulp & browserify & Webpack // 代码打包工具

Babel // ES六、react等语法转换工具，将代码转换成ES5

forever * pm2 // nodejs项目部署工具

karma & mocha & PhantomJS //自动化测试框架

......

最后

前端时代的到来，对于前端开发来讲，是一个最好的时代，同时也是最坏的时代。

说是最好的时代，是由于各类前端技术都更新换代，开始应用于更多场景，发挥出更大的优点和做用。对于前端开发者来讲，是充满不少的机会的。

说是最坏的时代，是由于技术更新迭代速度很是快，可能在两三年内，整套技术栈都要更新一遍，须要开发者不断的取学习，更新本身的知识库，才能在技术更迭的大潮中被拍打到浪头以后。