Ques NodeJS服务器渲染设计

本文作者：IMWeb 杨文坚 原文出处：IMWeb社区 未经同意，禁止转载

Ques NodeJS服务器渲染设计

本文会探讨一下Ques的服务器渲染设计方案，实现方案则留给@袁飞翔来详解。

Ques同构？

Yes，Ques NodeJS服务器渲染本质上为了实现：通过Mark来实现浏览器渲染 or 服务渲染的自动切换，即所谓的前后端代码重用（是的，我们野心不仅仅是重用模版而已）。

从Rely中我们学到什么？

• 模版 ＋ 数据 = 字符串 or DOM操作

字符串用于解决服务器渲染输出，DOM操作用于解决浏览器动态渲染。

• Type System Query Language（eg. GraphQL） = 数据源与数据Filter重用

也就是数据源和数据Filter（或者叫数据Format）并非不能复用，但是应当在后台去统一，而非前端。

所以过程就变成了

模版 ＋ 数据 = 字符串 or DOM操作

也就是Q.js负责模版在浏览器端渲染，Q.tpl负责模版在！How？

实际上DOM Template是轻逻辑型模版，其通过指令来封装指令，只要实现Q.js中的大部分指令到通用Template的转换，我们便可以做到在服务器渲染，例如q-text：

• before:

<p q-text="msg"></p>

• after:

<p q-text="msg"><%- msg %></p>

Today is difficult, tomorrow is more difficult, but the day after tomorrow is beautiful.

未来，从浏览器渲染切换向服务器渲染方案只需要：

• 在页面使用diy-cgi组件

<diy-cgi></diy-cgi>

• 在对应db文件加上renderTo属性，如：

DB.extend({
    test: DB.graphQL({
        // TSQL 前后端复用
        query: 'query CoursesQuery {\
          courses {\
            name\
            start\
            end\
          }\
        }',
        // 所以Ques会自动将id为recommend的Component转成模版，
        // 并进行渲染
        renderTo: '#recommend'
    })
});

便可完成服务器渲染工作。

中间过度方案

由于数据层统一并非易事，所以必然有中间过程，中间过程方案可以参见：https://github.com/miniflycn/Ques/issues/42

相关项目

• Q.tpl：https://github.com/feix760/Q.tpl
• Ques：https://github.com/miniflycn/Ques
• Q.js：https://github.com/imweb/Q.js