【Erʌpt】一个前后端同构的设计思想
J.Gong
2017-08-15
3.5min
【Erʌpt】一个前后端同构的设计思想
最近一直没有更新博客，其实脑子里面已经装了很多东西了，略微分享一下。
前提
2017年前端看起来是风平浪静的，其实不然，今年WASM终于定稿了，那意味着用任何语言编译web应用得到了官方支持。由于采纳的是Mozilla的asm.js方案，兼容性上面要好得多。很多人关注的是性能上的提升，而我觉得最先活起来的应该是前后端同构。因为大批的后端程序员可以避开javascript的各种坑去使用自己的开发语言开发前端应用了。
最近出现了很多诸如RustWeb和Golymer的框架
CS架构解决的问题
- 我是谁
- 我从哪里来
- 要到哪里去
照以前前后端分离的方案
| server | client |
|---|---|
| 返回html | 发出请求 |
| 空闲 | 获取css、js等资源 |
| 空闲 | 发出ajax请求 |
| 返回数据 | 空闲 |
| 空闲 | 渲染数据 |
前后端同构的做法
| server | client |
|---|---|
| 返回html头部 | 发出请求 |
| 返回html碎片 | 获取css、js |
| 返回html碎片 | 渲染碎片 |
| 返回end | 结束页面渲染 |
小结一
前后端同构是在“我是谁？”这一部分做了优化。
前后端同构的优势
- SEO，不多说了；
- 减少http请求数；
- 减少用户初次访问页面的白页时间；
- 减少因前后端分离造成的技术障碍。
前后端同构的策略
- 精确渲染
- 结构渲染
- 模板渲染
精确渲染
把页面首屏的内容都渲染出来。
精确渲染的评价
优点
- 渲染出来的页面就是用户看到的
缺点
- 部分后端请求会阻塞页面的渲染
结构渲染
把初始状态的首屏渲染出来然后在同一请求中把应该展示的状态展示出来。
框架渲染的评价
优点
- 解决了精确渲染会阻塞的问题
缺点
- 对于新闻类型的页面，框架渲染不利于SEO
模板渲染
把模板直接作为html传到客户端。
模板渲染的评价
优点
- 字符串渲染，计算开销最小
缺点
- 用户会看到未渲染的模板变量
小结二
应该结合精确渲染和框架渲染
介绍Erʌpt
| Erʌpt | ||
|---|---|---|
| E | Express | 这都不知道？退下吧 |
| R | React | 这也不知道？别看了 |
| ʌ | Values | 基于Redux的异步数据管理 |
| P | Pipe | HTML渲染器 |
| T | Tunnel | 同步数据管理 |
Values异步数据管理
单向数据流
react的render函数是会不断轮询页面上绑定的数据来进行页面更新的。
| value===“bud” | value===“bloom” |
|---|---|
 |  |
Values的写法
class TestValues extends Values {
public getReducer() {
return combineReducers({
flower: TestValues.FlowerValue(),
});
}
public static FlowerValue = () => {
return ( value = "bud", action ) => {
if ( action.type === "开花" ) return "bloom";
if ( action.type === "被狗踩了" ) return "baiduLogo";
return value;
}
}
}怎么使用Values
const v = new TestValues();
const store = createStore(v.getReducer());
store.getState(); // { flower: "bud" }Pipe HTML渲染器
用于利用React renderToString 生成HTML。
Pipe的写法
class TestPipe extends Pipe<Request, Response> {
constructor(request, response) {
super( request, response, minifyParams);
}
public renderPage(tunnel) {
this.html(`
<!doctype html>
<html>
<body>
${this.JSX2HTML(
<Provider store={store}>
<Page></Page>
</Provider>
)}
</body>
</html>
`);
this.response.end();
}
}Tunnel同步数据管理
Tunnel的设计
前后端同构的意思是要在后端完成一部分工作，当前端getState的时候，获取的是后端生成并注入到前端作用域的state，也就是说这个对象在后端完成set工作，而在前端完成get工作。
Tunnel的使用
Server
const t = new Tunnel("QNR_GLOBAL", {}, value);
Pipe.renderPage(t)Client
const t = new Tunnel();
t.$state // { flower: "bud" }
window.QNR_GLOBAL // { $state: { flower: "bud" } }结论
Ervpt是VPT在react+express上面的实现，能够很好地实现前后端同构中的精确渲染和结构渲染，基于这套思想我相信它能带来一场新的前后端分离的革命，也就是前端能够主导全部的页面逻辑，后端专注于接口的优化。