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

相关项目

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全栈修炼

在线网站 blog-react 项目的文档说明

此 blog 项目是基于 react 全家桶 + Ant Design 的,项目已经开源,项目地址在 github 上。

10840
来自专栏晓晨的专栏

ASP.NET Core 3.0 gRPC 拦截器

前面两篇文章给大家介绍了使用gRPC的入门以及双向流的使用,今天介绍的是gRPC中的拦截器。拦截器就像MVC的过滤器或者是ASP.NET Core middle...

7320
来自专栏前端资源

Bootstrap 模态框(Modal)插件的基本应用

通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍,可以在不离开父窗体的情况下进行一些互动和内容的交互。

11900
来自专栏无道编程

自己原生js封装的ajax请求

这几天在恶(xue)补(xi)node.js,其中老师讲到了ajax,以前学习js都是东一点、西一点。不系统,当然,原因也很多。

14730
来自专栏前端资源

javascript和jQuery修改a标签的href属性

6410
来自专栏前端资源

JavaScript运算符整理总汇(++、--、+=)

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

10220
来自专栏前端自习课

【JS】408- 看一看 JavaScript 引擎是什么

如果您觉得自己对 JavaScript 引擎有了一些了解的话,可以先给自己鼓个掌,但不要急着关掉本文,我相信阅读完成后您仍然可以从中学到一些东西。

7120
来自专栏全栈修炼

js 实现上下改变父 div 的高度,左右上下动态分割孩子的宽高

实现父 div 里面 左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) 。

8230
来自专栏前端资源

JavaScript的引入方式和基本属性

2、引入外部js文件:通过 src 引入,此时 script 标签内添加任何js代码都不起效果。

11400
来自专栏码匠的流水账

聊聊rocketmq的enableMsgTrace

rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/producer/DefaultMQ...

7000

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励