你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
thonatos

前后端分离的实现 6个回复 专栏 @ 探索

thonatos 发布于 4 年前

更新:2014.12.28

看过了“淘宝前后端分离实践”后,考虑在公司内部进行试验,更多的还是借鉴。

前后端分离的实现在SPA(Single-Page App)中应用较为广泛,如AngularJS,React 使用Ajax技术与后端通过RESTFul方式进行数据的请求与发送,

如我们的数据统计就是通过ng(AngularJS)的SPA项目,但它并不适用于我们主要项目(如SEO体验较差)。

考虑到之前曾讨论的未来可能会换到JAVA的后端服务的可能性,重新看了一遍淘宝UED的”淘宝前后端分离的思考与实践“的文章,下面两张图是我对他们结构的理解。

一)结构

1.经典的结构

2.前后端分离的结构

二)优势

1.后端实现业务逻辑和数据的查询计算,独立部署后端服务。(例如后端服务部署在8080端口)

2.前端路由,MVC,实现相对于后端的独立,自主控制视图层。(同样实现独立部署如部署在80端口)

# 这里的Model如上图所示,是与8080端口的后端进行交互

3.通过Server(Nginx模块)判断客户端请求类型,自助引导至不同的模块,仅需要一次判断,后续无需重复判断。

4.前端通过步骤3的预处理,可以在页面渲染前对例如css/images/js资源进行压缩处理,如置换渲染所需资源到所需的CDN(如icon/icon-mobile/icon@1x/icon@2x)

5.传统的SPA通常由于资源的处理时间问题(网络环境影响),在完成前可能出现”空白页“(等待阶段),这里可以参考BigPipe方式,持续输出。

# 虽然可以通过一些手段实现渲染完成前的一些预处理,但采用这里说到的方法,实现上更加优雅。

6.相对于传统,这样的分离更加明确各自的职责,后端职责更加明确,前端自由度更高,耦合度却有所降低。

三)实现

  • 一篇公司内部分享会议上Presentation.

http://slides.com/thonatos_yang/vbigger#/

  • MT-NOTES

http://www.thonatos.com/docs/MT-Projects/MT-NOTES.md

——————————(我是牛逼的分割线。)

未完待续。


参考:淘宝UED
地址:http://2014.jsconf.cn/slides/herman-taobaoweb/index.html#/

  • wang

    我很想知道楼主的 结构图是用什么工具画的....

    #1
  • thonatos

    @wang

    哦哦,这个里面的图是用白底脑图随手画的,然后presentation里面的图是用ProcessOn搞得。

    #2
  • Rayi

    其实我觉得前后端分离是一种设计思想 我们目前考虑了说用nodejs来实现只是因为我们期望能尝试一些新的技术,其实,全面将“前端”的php部分负责也是可以的。

    #3
  • thonatos

    @Rayi

    非常赞同,分离是设计思想和职责上得分离,我们尝试这种模式也有自身需求上得原因,更多的是需求驱动,实现形式用什么应该是比较自由的,我们内部用这个是因为在内部系统上需要进行大量的运算,所以后端分离了出去,自然前端考虑一种更加自由的实现形式了,团队前端比较熟悉js,所以选择了nodejs。

    #4
  • lanpang

    其实学习nodejs的成本比thinkphp要大多了,而且node作为新语言,稳定性和php还是有一定的距离的。我觉得前端没必要局限在类js语言里,写php,java也都是可以的

    #5
  • Rango

    正在新项目中尝试,前端负责view+controller,后端负责 data+model. 前后交互用 ajax 做数据读写通讯

    #6
登录后回复,如无账号,请使用邀请码注册