前端架构经验谈之一
in Web with 0 comment

前端架构经验谈之一

in Web with 0 comment

谈谈历史

web前端的发展历史大致可以分为两个阶段:node 之前与 node 之后。在 nodejs 出现之前,前端的发展一直比较缓慢,主要是因为:

基于以上的原因,前端一直不能很好的开发大型应用,所以在web程序中,前端一直处于配角的角色。在 nodejs 出现之后,前端的发展迎来了质的飞跃,带来了我们当时无法想象的便利与潜力。

nodejs 出现了之后,又陆续出现了扩展前端运行领域的工具,如

随着 node 的出现与前端的发展,工程化自动构建便成了开发人员的一个基本需求,这使得前后端分离断定了基础。

前后端分离

前后端分离,就是让前端与后端解耦,开发和运行都不再耦合在一起。这样,前端开发人员便可更好的掌控自己的代码,更高效快捷的开发 web 前端程序。否则,前端对页面的开发与调试总是依赖后端程序,而不能本地运行,这就导致前端开发很耗时,并且毫无意义。

工程分离

首先是工程的分离,也就是代码的分离。这就是说让原来前后端融合在一起的项目分离开,前端一个项目,后端一个项目。包括我们公司的一些旧有php大部分项目,甚至包括一些核心的java项目,都是大部分采用了前后混合开发,导致前端开发人员在调试出现了需要依靠后端人员。

数据流分离

<script>
var data = JSON.parse('通过后端模板返回的 json 数据');

// 使用 js 渲染 data 数据
</script>

web与静态服务器分离

web与静态服务器分离是何等的重要?

其中“我们家”最新的portal,和cms配置,都符合了上面的特点,前后端分离,而且上传文件(图片),生成功能页面(包括专题页面)之类的,都是直接上传或rsync到远程静态服务器上。

本地化接口模拟,前后端并行开发

当前后端分离开发后,瀑布流方式开发?需要等待后台人员给接口,错了,前端工具何其多,本地接口模拟很easy,而且这种方案和工具也在流行, 本地化接口模拟就是说我们要在本地模拟一个与服务器差不多的环境,能够提供数据所需的接口,进行错误模拟处理等等。

一般来说,本地数据模拟的解决方案有两种思路:

同等模拟服务器环境

这种方式基本上不需要在代码层面做更改,因为本地接口与服务器接口基本上一致,包括接口名称,请求方法,请求参数,响应数据。比较常见的有 mock.js,RAML(RESTful API Modeling Language 即 RESTful API 建模语言),Swagger,API Blueprint等。

多环境配置&切换

这种方式是在代码的层面配置多个环境(如 线上环境,本地环境),根据是在线上还是在本地切换不同的环境。

比如,开发的时候切换到本地环境,线上运行的时候切换到线上环境(如果有需要,可以配置更多环境)。在本地环境接口都是采用的本地化模拟的接口,而线上环境接口则是线上实际运行的接口。这样做的好处是:

两者配合使用

本地化接口模拟这两种方式是从不同的角度出发给出的解决方案,可以配合在一起使用。

Responses