avalon2为了提高性能,采用全新的架构,四层架构,其中一层为虚拟DOM。

虚拟DOM的一个好处是能大大提高性能,另一个好处是能过错整描述我们的页面结构。因此在非浏览器环境下,虚拟DOM也能正常运行。并且avalon2自一开始,就努力隔离DOM API。基于这两点,avalon2可以原封不动地运行于nodejs中,进行定义VM,渲染视图等操作。

  1. 客户端上,虚拟DOM通过vm.$render方法渲染到页面中

  2. 服务端上,虚拟DOM使用serveRender生成HTML字符串

与react的后端渲染相比,它的使用是非常简单的。React的渲染单位是组件,组件有生命周期,我们在添加一些处理时,都是放在生命周期钩子中(getDefaultProps,getInitialState,componentWillMount,componentDidMount,componentWillUpdate。。。。),而在nodejs,生命周期只能走到componentDidMount之前。用户想后端渲染,需要有针对性地写代码。而avalon2则不需要懂这些,只要保证所有DOM操作在回调中就行了。

react的后端渲染有两个方法,ReactDOMServer.renderToString 和 ReactDOMServer.renderToStaticMarkup。renderToString带着uuid,为了前端只进行绑定事件,不再生成DOM,但缺点是让页面体积变大很多。而renderToStaticMarkup只能输入不带交互的静态页面。

而avalon只有一个方法,它输出的页面没有ms-xxx,:xxx这些绑定属性,因此相当于输出静态页面。为了实现绑定属性功能,如果将模板函数或已经生成好的事件传过去,想必体积太大。因此avalon将原始页面的很少一部分压缩传过去。即便你没有用html-minify这些工具,avalon也会做去空白节点处理!

因此从生成页面速度,与传输体积上,avalon的后端渲染都比react优秀不少。

与传统后端渲染相比,即JSP,PHP方案,主要好处是,模板的控制台掌握在我们前端手中。不要痛苦成为套页面的工具。avalon对切图人员交给我们的页面,所做修改是很少的,就是加一些绑定属性。

与近年流行前端模板渲染方案相比,即后端出数据,前端在script标签,textarea标签里写模板,主要好处是SEO!前端模板是无法搞定SEO,并且还有"首屏乱码"问题,这些在ng, avalon1, vue1 也有这问题,需要ng-cloak 等东西做遮丑布! 有了后端渲染就没有这问题了。

好了,我们看如何做。为简单起见,本文使用koa2做后端框架。koa2是使用es7的async function处理异步,从此告别异步地狱与那些深涩难懂的generators。

但就算最新的nodejs6也不支持async function,不过没关系,我们可以使用babel。至于如何用,后面直接给出一个例子。现在我们看一下一些通用的步骤,熟悉了它,你可以将avalon用于koa1, express及其他nodejs框架。

  1. 引入最新版 avalon 这里用avalon.modern体积少些

  2. 引入avalon仓库下的serve下的文件serveRender.js

  3. 引入你定义VM的文件 (所有DOM操作要在回调里进行,不要出现 window, document, 方便能在nodejs环境中运行) 对你的VM使用webpack进行打包 (目的是处理module.exports, require)

var vm = avalon.define({
$id: "test",
aaa: '222'
}) module.exports = vm //这里必须使用module.exports,而不是es6 module
  1. 引入你该页面的模板(就是一个普通的HTML文件片段,里面需要用ms-controller,指向你刚才的VM.$id)

  2. 将VM与模板放进serveRender方法,得到一个对象,里面包含渲染好的HTML(A) 及 一个包括所有模板的对象(B)

  3. 创建一个script标签, 里面定义一个avalon.serverTemplates对象, 将B对象赋给它

  4. 将上面的标签与A页面, 赋给ctx.body发往前端(或其他可以放送到前端的方法里面去)

//1. 引入avalon
var vm = require('./src/avalon')
//2. 引入avalon的后端渲染器
var serveRender = require('./dist/serverRender')
//3. 当前页面VM
var vm = require('./src/vm')
//4. 当前页面模板
var test = fs.readFileSync('./src/aaa.html', 'utf-8'); //5.
var obj = serveRender(vm, test) //6.
var files = JSON.stringify(obj.templates)
var script = '<script src="./avalon.js"><\/script>' +
'<script> avalon.serverTemplates= ' + files + '<\/script>' +
'<script src="./test.js"><\/script>'
//7. render
app.use(async function(ctx){
await (ctx.body = script + obj.html)
})

这些我已经做成一个例子,放到GITHUB中,大家可以下回来看。

这是后端返回前端的源码,大家可以做得更漂亮些,把head, body, html等标签补上。不过就算你不写,浏览器也会帮你补上的。



这是效果图!

有了后端渲染,我们就可以加快首屏的渲染速度与SEO。 并且我们可以实现前后同构, 前后端共用一套模型(VM),一套验证代码,一套模板!!!做ABTest,埋点等也测试了!后端的一些部分也掌握在我们前端手中,我们的价值就越来越大,工资自然也上去了!

有关后端渲染的话题,大家也可以看一下react的方案及早期百度,腾讯基于它们的私有框架的实践。

  1. https://segmentfault.com/a/1190000004135256
  2. https://segmentfault.com/a/1190000005679938
  3. https://segmentfault.com/a/1190000005641012

avalon2的后端渲染实践的更多相关文章

  1. 基于 koajs 的前后端分离实践

    一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...

  2. [转]谈谈前端渲染 VS 后端渲染

    首先,预编译跟前后端没有关系,预编译一样可以用于后端渲染. 看看下面的测试时间,单位: ms 模板字符串: var s = '{{#datas}}{{name}} abcdefg {{type}} { ...

  3. 后端渲染html、前端模板渲染html,jquery的html

    作者:赵魏璇链接:https://www.zhihu.com/question/28725977/answer/116177149来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  4. 理解Web路由(浅谈前后端路由与前后端渲染)

    1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...

  5. 后端渲染神器!Dust

    Dust一个适用于浏览器与node的异步模板框架. 先上实例 后端模板: {@inject api="http://api.myserver.com/get_message"} & ...

  6. Nuxt.js服务端渲染实践,从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  7. 后端开发实践——Spring Boot项目模板

    在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后再来反 ...

  8. 后端开发实践系列之三——事件驱动架构(EDA)编码实践

    在本系列的前两篇文章中,笔者分别讲到了后端项目的代码模板和DDD编码实践,在本文中,我将继续以编码实践的方式分享如何落地事件驱动架构. 单纯地讲事件驱动架构(Event Driven Architec ...

  9. 后端开发实践:Spring Boot项目模板

    在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后再来反 ...

随机推荐

  1. net_device 结构体分析

    /* * The DEVICE structure. * Actually, this whole structure is a big mistake. It mixes I/O * data wi ...

  2. eclipse中运行项目时报Class not found的错误

    环境:Groovy/Grails Tool Suite 3.1.0.RELEASE(BASED ON ECLIPSE JUNO 3.8.1).JDK1.6 运行class的main方法,或启动juni ...

  3. java 压缩文件 传入文件数组,压缩文件,在指定路径下生成指定文件名的压缩文件

    /** * 传入文件数组,压缩文件,在指定路径下生成指定文件名的压缩文件 * * @param files * 文件数组 * @param strZipName * 压缩文件路径及文件名 * @thr ...

  4. 【Unity3D基础教程】给初学者看的Unity教程(零):如何学习Unity3D

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点推荐.谢谢! Unity3D有什么优势 Unity3D是一个跨 ...

  5. 解决IIS7该问.svc文件的错误问题

    解决IIS7.5中部署WCF时,访问.svc文件的404错误问题如果你直接在IIS 7中配置WCF,访问.svc文件时会出现404错误.解决方法,以管理员身份进入命令行模式,运行:"%win ...

  6. 我终于搞清楚为什么谷歌地图获取到的联通3G基站与大家手头的基站表不同了

    我终于搞清楚这个问题了,大家使用谷歌地图手机版.MobileTrack以及网优用的FieldTest获取到的WCDMA基站Cellid为什么不是大家手头的CellTrack91或基站表里的数字了... ...

  7. byte与char的区别

     byte 是字节数据类型 ,是有符号型的,占1 个字节:大小范围为-128—127 .char 是字符数据类型 ,是无符号型的,占2字节(Unicode码 ):大小范围 是0—65535 :char ...

  8. Windows 2003上 SaltStack/Salt 和 psutil 可能存在的问题及解决

    今天把salt安装在windows 2003上,发现无法启动,随之而来的是一个有一个的坑,让我们一起逐个排查. 问题一(salt无法启动) salt无法启动,错误结果如图:

  9. innodb insert buffer 插入缓冲区的理解

    今天在做一个大业务的数据删除时,看到下面的性能曲线图 在删除动作开始之后,insert buffer 大小增加到140.对于这些状态参数的说明 InnoDB Insert Buffer 插入缓冲,并不 ...

  10. Access使用参数化UPDATE数据时,数据无法更新的问题

    今天update access数据库时,使用了参数化的方式,结果不报错,但是数据也没有更新.经过google发现access使用参数化时,参数位置必须和赋值顺序相同才行,否则更新时就会出现数据无法更新 ...