浅谈前端发展历程与前后端分离模式

前端开发技术发展至今,相信各位工作在前端的同学多多少少会有一些体会。从传统开发模式到前后端分离。前端技术在迅猛发展。下面我们简单的来谈一下前端开发的发展历程。

传统开发模式

相信大多数人都经历过这个阶段,当然有一些公司还在沿用这样的开发方式。这种方式的特点是利用后端语言提供的模板引擎生成html页面,再经服务器返回到客户端浏览器中。而浏览器就只需要解析这些代码就行了。

常见的开发方式有:

  1. PHP语言的Smarty模板引擎与Thinkphp框架(确实很强大)。
  2. Java语言的Freemarker模板引擎与Jsp页面(也有很多框架的,不过不是特别了解)。

Ajax请求

Ajax是前后端分离的推进者,使用Ajax后,网页可以实现局部刷新。不需要再依靠刷新页面对网页中的内容进行更新了。同时后台仅需要给前台暴露出前台需要的各种API接口,并对前台提供的接口数据进行增删改查就可以了。这无疑也剩下了很多工作量。这无疑也就为前端的下一步发展打下了基础。

前端构建与请求

传统开发模式中,前端的所有文件都放在了后台的server中。后端的项目通常都会有自己的server,除了php以外。前端构建的话,前端项目也要搭建一个server,然后把前端的项目放到apache或者nginx中。或者利用nodeJs工具集。

现在前后端分离开了,当然也涉及到请求的问题。这时我们只需要告诉后端服务我们需要的数据就可以了。但这样会产生一个问题,Ajax跨域问题。在这里我们不能用常用的jsonp或者iframe信使等去解决问题,因为我们还有POST请求。

所以HTTP Proxy类工具就可以用到了,比如我再BrowserSync加入中间件判断每一个请求,如果是/api为前缀的就会被代理到API Server端,API server端接收到数据后再返回给BrowserSync,然后BrowserSync再返回给浏览器。

生产环境可以前后端分开部署,只需要在前端的server中写好转发规则就可以了,apache和nginx都支持的。

总结

前后端分离的优势:

  1. 前端静态资源与后台api分流,互不影响。
  2. 前后台同步开发,减少沟通成本。
  3. 方便开发调试,不影响工作进度。
  4. 易于维护扩展。

前后端分离缺点:

  1. 前端负载增加。
  2. 不利于搜索引擎优化。