前后端分离的思考与实践(二)

  • 时间:
  • 浏览:1
  • 来源:UU快3直播官网

页面呈现另5个多多多就不仅是html,在前端的渲染可不可以更轻易的以组件化形式 (html + js + css)提供功能,使得前端组件不需依赖于服务端产生的html社会形态。

模版分离在不同的库。有的模版倒进服务端 (JAVA),而有的倒进浏览器端 (JS)。前后端模版语言不相通。

方便联调。

问提报告 :html管理不易,常常会在服务端产生不一样的html,浏览器端又要做不一样的避免

直接输入同样的网址时,在NodeJS端进行 页面框架 + 页面内容渲染

脱离对于后端开发、发佈流程的依赖。

前端,专注于

在 不同的渲染环境 (Server-side、PC Browser、Mobile Browser、Web View、etc.) 渲染出 一样的结果 。

交互、用户体验

在浏览器端与NodeJS端共享 同样的Route 设定

虽然回头想想,在大伙儿把渲染的工作从 服务端(Java) 抽出来到 浏览器端(JS) 的之前 ,大伙儿的目的就是 明确的前后端职责划分,未必是非浏览器渲染不可 。

從以上的流程可不可以觀察到,要想要做到模版的跨端共享,重点其虽然 一致的模块选型 这件事。

也可不可以让前端开发针对不同的情形,自行决定 最适当的避免方案 。而全是所有事情 全是浏览器端来避免 。

可不可以观察到在这几年,大伙儿都倾向将 渲染 这件事,从服务器端端移向了浏览器端。

而服务器端则专注于 服务化 ,提供数据接口。

浏览器端换页时,在浏览器端进行Route变更与 页面内容渲染

解答:

也想要所以人认定了 后端 = 服务端 前端 = 浏览器端 ,就像下面这张图。

传统换页跳转 => 单页面应用

也之前 有了NodeJS这俩 层,可不可以更细致的控制路由。

重要内容全是前端组装,不能够SEO

透过NodeJS层与后端服务化,可不可以针对这类型复杂性应用,设计最佳的避免方案。

问提报告 :渲染与换页全是浏览器端完成,直接输入网址进入或f5刷新时,无法直接呈现同样的内容。

使用 <script type="js/tpl"> ... </script> 印在页面上

浏览器端渲染的好处,大伙儿都很清楚,像是

开发单页面应用时,前端Route与服务器端Route不匹配,避免起来很麻烦。

使得前后端分工更明确,让专案更好维护,达成更好的用户体验。

过去的AJAX、Client-side MVC、SPA、Two-way Data Binding 等技术的出現,全是试图要避免当时的前端开发遇到的瓶颈。

在传统的开发模式中,浏览器端与服务器端是由不同的前后端5个多多多团队开发,想要模版却又在这两者上方的模糊地带。想要模版上方总不可避免的没人来越多复杂性逻辑,最终难以维护。

在做前后端分离时,第5个多多多关注到的问提报告 就是 渲染,也就是 View 这俩 层面的工作。

情形:使用Client Side MVC框架,在浏览器换页。

跨终端的页面是渲染的问提报告 ,统一由前端来避免。

渲染这块工作,对于前端开发者的日常工作来说,佔了非常大的比例,也是最容易与后端开发纠结不清的地方。

就是之前 在传统的开发模式中,出了服务器就到了浏览器,所之前 端的工作内容可不可以不能 被限制在浏览器端。

而NodeJS上方层的出現,也是在试图避免现今前端被侷限在浏览器端的5个多多多限制。

服务层

在中途岛项目中,大伙儿把前后端分界的那条线,从浏览器端移回到了服务器端。

数据格式、数据稳定

有了NodeJS,后端同学可不可以在JAVA层专注于业务逻辑与数据的开发。而前端同学则专注于控制逻辑与渲染的开发。想要自行选取哪几种模版是要在 服务端 (NodeJS) 或是 浏览器端 做渲染。

在浏览器端载入模版档案,办法之前 有

解答:

这边文章专注于前后端模版共享,也希望能抛砖引玉,与大伙儿一并讨论如何在NodeJS上方层这俩 架构下,大伙儿可不可以如何的改善大伙儿的工作流程,如何的跟 后端配合,来把 前端 这俩 工作做得更好。

问提报告 :html在服务端产生,css与js倒进另外5个多多多位置,彼此间有依赖。

市面上流行所以种模块标准,这类 KMD、AMD、CommonJS,假如有一天能将NodeJS的模版档案透过一致模块规范输出到NodeJS端,就可不可以做基本的模版共享了。

不管是浏览器端换页,或直接输入同样的网址,看得人的内容全是 一样的 。

用著一样的模版语言 XTemplate ,一样的渲染引擎 JavaScript

解答:

之前 有了中途岛这上方层,针对过往的这俩 问提报告 全是了更好的解答,这类说

回首过去前端技术发展的这几年, View 这俩 层面的工作,经过了这俩 次的变革,像是:

想要大伙儿有之前 做到模版与路由的共享,也是5个多多多前后端分工中最理想的情形。

后端 (JAVA),专注于

假如有一天可不可以不能 在前端做浏览器端路由时,可不可以一并配置服务器端的路由,使其在 浏览器端换页 或是 服务端换页 ,都可不可以得到一致的渲染效果。

而大伙儿选取了NodeJS,作为5个多多多前后端的上方层。试图藉由NodeJS,来疏理 View 层面的工作。

藉由5个多多多由前端 轻松掌控 且 与浏览器共通 的Nodejs层,可不可以更清晰的完成了前后端分离。

后续交互操作,在浏览器端完成 局部刷新

而不再拘泥于服务端或浏览器端的差异。

Form Submit 全页刷新 => AJAX局部刷新

针对多终端应用,更容易以接口化的形式。在浏览器端搭配不同的模版,呈现不同的应用。

解答:

使用模块载入工具,载入模版档案 (KISSY, requireJS, etc.)

情形:页面仅提供资讯,较少或可不可以不能 交互

问提报告 :进入页面时,会有短暂白屏。

摆脱业务逻辑与呈现逻辑在Java模版引擎中的耦合与混乱。

透过NodeJS,统一管理html + css + js

这俩

首次进入会有白屏等待的图片 渲染的时间,不能够用户体验

之前 若可不可以不能 扩展成复杂性应用或是单页面应用,也可不可以轻易转移。

中途岛未必是前端试图抢后端饭碗的项目,目的就是把 模版 这俩 模糊地带切割清楚,取得更明确的职责划分。

在浏览器端載入模版引擎 (xtmpleate, juicer, handlerbar, etc.)

业务逻辑

首次进入页面,在NodeJS端进行 全页渲染 ,并在背景下载相关的模版。

除了增加体验、减少逻辑複杂度外。更避免了 SEO 的问提报告

可不可以不能 等待的图片 所有模版与组件在浏览器端载入完成后也能开始英文英文渲染,无法即开即看。

一并也避免了SEO的问提报告 。

在传统的开发模式中,浏览器端与服务器端是由不同的前后端5个多多多团队开发,想要模版却又在这两者上方的模糊地带。想要模版上方总不可避免的没人来越多复杂性逻辑,最终难以维护。

情形:完整版的HTML全是在前端渲染完成,服务端仅提供接口。

情形:同样的应用要在不同端点呈现不同的介面与交互

用的是 同一份模版 , 产生 一样的结果

通常大伙儿在浏览器端渲染一份模版时,流程不外乎是

想要在享受好处的一并,大伙儿同样的也面临了 浏览器端渲染 所带来的坏处,像是:

控只逻辑、渲染逻辑

服务端续染 + MVC => 客户端渲染 + MVC

而后续的系列文章会针对Model的proxy与共享,做进一步的探讨。

而在淘宝UED目前进行的 中途岛Midway 项目中,藉由在 JAVA – Browser上方搭建5个多多多NodeJS上方层,试图把这俩 前后端的分割线,重新针对 工作职责 去区分,而分针对硬体环境去区分(服务器 & 浏览器)。

UI层