spa静态化输出

上周分享的的ppt,markdown版。主要表明公司之后在spa静态化输出道路上的方向。
下面是ppt源码

[slide]

#spa前端框架静态化输出

[slide]

  1. 什么是spa框架静态输出?
  2. 静态化解决了我们什么问题?
  3. 静态化怎么实现?
  4. 实现过程中有哪些困难点?

[slide]

#中间层&SEO

[slide]

[slide]

#看看我厂的原子弹Tatami

[slide]

Tatami的路由

1
2
3
#/detail?id=xx => detailModule

/detail.html?id=xx

[slide]

Tatami模块之间的关系

[slide]

Tatami框架生命周期

[slide]

实现静态化需要解决哪些问题?

  1. 对应路由能打开对应模块的静态化文件
  2. 静态化文件能完成用户交互操作

那么怎么做?

[slide]

想法很多。。。。
感觉条条大路通罗马

[slide]

然而。。
我们遇到了不可描述的问题

[slide]

新瓶装老酒

[slide]

分两大块实现

  1. 预处理modules,处理成node能识别的文件
  2. node接受请求,返回静态文件(中间层)

[slide]

[slide]

预编译成

1
2
3
4
5
6
7
8
module.exports = {
mvtList: {
detail: ()=> {}
xxx: xx
},
basicMvt: () => {},
basicNameList: ['footer', 'header']
}

[slide]

中间层

1
2
3
4
5
6
7
8
(moduleName, hashs, done) => {
defineModule(moduleName);
initModule(moduleName, hashs); // init main view
let html = renderHtml(moduleName); // request, update view

// async
done(html);
}

[slide]

最后
遇到了好多坑啊~

  1. 服务器端界面渲染
  2. node的异步请求
  3. UI组件初始化
  4. 替换原来的hash url
  5. 时间
  6. xxx

[slide]

#DEMO

[slide]

#QA