分离后的前端,不再是一个简单的HTML文件,已经是一个独立的应用系统。除了要考虑页面的数据渲染展示,还要用工程化的思想来考虑前端的架构,前后端的交互和数据安全等事情。
RESTful接口交互
前后端分离之后,更多的是采用RESTful风格的接口与后端进行数据交互。
REST是“呈现状态转移(REpresentationalStateTransfer)”的缩写,一种API的架构风格,在客户端和服务端之间通过呈现状态的转移来驱动应用状态的演进。
在REST样式的Web服务中,每个资源都有一个地址。资源本身都是方法调用的目标,方法列表对所有资源都是一样的。这些方法都是标准方法,包括HTTPGET、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应用(singlepagewebapplication,SPA)的简写,就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
像Angular、React或Vue就是为了SPA而设计的,结合前端路由库(react-router、vue-router)和状态热存储(redux、vuex)等,可以开发出一个媲美NativeAPP的WebAPP,用户体验得到了很大的提升。
当然,SPA也不是完美的,也不是适合所有的web应用,需要结合项目和场景来选择。
SPA有如下缺点:
初次加载耗时增加。可以通过代码拆分、懒加载来提升性能,减少初次加载耗时。
SEO不友好,现在可以通过Prerender或Serverrender来解决一部分。
页面的前进和后端需要开发者自己写,不过现在一些路由库已经帮助我们基本解决了。
对开发者要求高,由于做SPA需要了解一整套技术栈,所以,要考虑后期是否有合适的人选进行维护。