新萄京娱乐手机版前后端分离的概念被提出

当前位置:新萄京娱乐手机版 > 新萄京娱乐手机版 > 新萄京娱乐手机版前后端分离的概念被提出
作者: 新萄京娱乐手机版|来源: http://www.shkimoto.com|栏目:新萄京娱乐手机版

文章关键词:新萄京娱乐手机版,同构

  前两年服务端渲染和同构的概念火遍了整个前端界,几乎所有关于前端的分享会议都有提到。在这年头,无论你选择什么技术栈,不会做个服务端渲染可能真的快混不下去了!最近刚好实现了个基于 React&Redux 的同构直出应用,赶紧写个文章总结总结压压惊。

  早些年前,大部分网站都使用传统的 MVC 架构进行后端渲染,就是实现一个 Controller,处理请求时在服务端拉取到数据 Model,使用模版引擎结合 View 渲染出页面,比如 Java + Velocity、PHP 等。但随着前端脚本 JS 的发展,拥有更强大的交互能力后,前后端分离的概念被提出,也就是拉取数据和渲染的操作由前端来完成。

  关于前端渲染还是后端渲染之争,可以看文章后面的参考链接,这里不做讨论。这里照搬后端渲染的优势:

  同构,在本文特指服务端和客户端的同构,意思是服务端和客户端都可以运行的同一套代码程序。

  SSR 同构也是在 Node 这门服务端语言兴起后,使得 JS 可以同时运行在服务端和浏览器,使得同构的价值大大提升:

  其实 Vue 和 React 都提供了 SSR 相关的能力,在决定在做之前我们考虑了一下使用哪种技术栈,之所以决定使用 React 是因为对于团队来说,统一技术栈在可维护性上显得比较重要:

  既然要做直出,首先需要一个 Web Server 吧,可以使用Koa,这里我们采用了团队自研基于Koa的IMServer(作者是开源工具whistle的作者,用过whistle的我表示已经离不开它了),Server 工程目录如下:

  由于是一个多页面应用(非 SPA),上文提到之前团队的实践中 Controller 逻辑并不是通用的,也就是说只要业务需求新增一个页面那么就得手写多一个 Controller,而且这些 Controllers 都存在共性逻辑,每个请求过来都要经历:

  那我们为什么不实现一个通用的 Controller 将这些逻辑都同构了呢:

  我选择了通过构建编译出这些文件,而不是在服务端引入babel-register来直接引入前端代码,是因为我想保留更高的自由度,即构建可以做更多babel-register做不了的事情。

  上述代码将 Controller 需要的同构模块和文件打包到了 server/目录下:

  容灾是指当服务端因为某些原因挂掉的时候,由于我们还有构建生成 xxx.html 异步页面,可以在 nginx 层上做一个容灾方案,当上层 Svr 出现错误时,降级异步页面。

  像因为生命周期的不同要在componentDidMount绑定事件,不能在服务端能执行到的地方访问 DOM API 这些大家都应该很清楚了,其实大概只需要实现最主要几个同构的基础模块即可:

  当然我要说的还有一些依赖客户端能力的模块,比如 wx 的 sdk,qq 的 sdk 等等。

  这里稍微要提一下的是,我最初设计的时候想尽可能不破坏团队现有的编码习惯,像 location、cookie之类的这些模块方法在每次请求过来的时候,拿到的值应该是不一样的,如何实现这一点是参考 TSW 的做法:,Node 的domain 模块使得这类设计成为可能。

  但是依旧要避免模块局部变量的写法(有关这部分内容,我另写了一篇文章可做参考)

  其实在 node 上 es6 的特性是都支持了的,打包出的同构模块需要尽可能的精简。

  这整个设计其实把构建能力抽象出来,新萄京娱乐手机版钩子可配置化后,就可以成为一个直出框架了。当然也可以像 Nextjs 那样实现一些 Document等组件来使用。

  当前设计由于 Server 的代码依赖了构建出来的同构模块,在日常开发中,前端做一些页面修改是经常发生的事,比如修改一些事件监听,而这时候因为 js, css 资源 MD5 值的变化,导致 template.html 变化,新萄京娱乐手机版故而导致 server 包需要发布,如果业务有有多节点,都要一一无损重启。肯定是有办法做到发布代码而不用重启 Node 服务的。

  以上就是本文的所有内容,请多多指教,欢迎交流(文中代码基本都是经过删减的)~

  IMWeb是真人前端社区,填写公司信息能帮助你更好的提升业内影响力。公司邮箱仅作一次性的验证使用,您不必担心信息泄露与垃圾邮件。

  IMWEB团队正式成立是时间是2011年6月7日,目前主要负责腾讯在线教育战略产品腾讯课堂,多人社交互动视频以及活动组织类项目的研发工作。

网友评论

我的2016年度评论盘点
还没有评论,快来抢沙发吧!