https://github.com/fex-team/yog

1. Node.js酸奶框架
我们的Web全栈开发实践
Shared By Xiang Shouding

2. 相守⿍鼎
2012年加⼊入百度
@相守⿍鼎
@xiangshouding

3. ⼤大纲
• 酸奶框架是什么
• 酸奶框架提供了那些功能
• 应⽤用部署上线
• 应⽤用的线上运维

4. 酸奶框架是什么

5. • 先从⼀一个项⺫⽬目说起
• 项⺫⽬目特性
• 前端WebApp应⽤用，RTT时间⻓长
• 数据接⼝口杂乱
• 业务⽀支持度不理想
• 静态资源管理不理想

6. • ⽅方案
• 后端渲染，解决webapp RTT时间⻓长问题
• 使⽤用node作为中间层，提⾼高前端可控性，⽅方便⽀支
持项⺫⽬目以及统⼀一接⼝口
• 使⽤用FIS 2.0解决前端⼯工程问题

7. “⽤用node.js的哪个框架呢？”

8. express.js koa
nodejs <= 0.10.30 nodejs >= 0.11.1
烦⼈人的callback generator
稳定性
express.js

9. express.js
可扩展
⾼高度灵活
需配置（硬编码）
kraken.js
可扩展
MVC
通过配置⽂文件配置

10. 介绍
• 酸奶框架，基于kraken.js的Web MVC开发框架;
• 可扩展
• 前后端分离
• ⽀支持项⺫⽬目拆分
• ⽀支持BigPipe，chunk渲染模板
• 简称“yog”

11. Front-End Fr UI Layer
Back-End
UI Layer
Browser
Business Logic
Server
HTTP/HTTPS

12. UI Layer
Front-End
Back-End
Browser
Business Logic
Server
HTTP/HTTPS
UI Layer
Server
HTTP/HTTPS

14. ⼩小结
• 整个⽅方案实现了
• ⾸首屏时间 3.55s 减少⾄至 1.55s
• 开发速度相较相同项⺫⽬目提升20%

15. 酸奶框架提供的功能

16. • FIS静态资源管理
• BigPipe
• RAL：resource access layer

17. FIS静态资源管理
• ⾃自动构建：
• 静态资源：md5，压缩，CDN，资源合并，资源定位...
• 异构语⾔言的使⽤用：less，coffescript，sass...
• 前端模板预编译
• 模块化
• 按需加载
• ⽅方便维护

18. 静态资源管理
{%widget "widget/nav/nav.tpl"%}
{%widget "widget/sidebar/sidebar.tpl"}

19. BigPipe
• Chunk输出：并行数据并行渲染模板
• 高效
• SPA（单页应用）
• 学习成本低
• pagecache
• 对SEO友好
• LazyRender
• 方便做首屏优化

20. BigPipe
并⾏行数据并⾏行渲染

21. BigPipe SPA
{%widget "content.tpl" id=“content" mode=“quickling”%}
A B
page_a.tpl page_b.tpl

23. BigPipe
• LazyRender
• 组件延迟渲染

25. RAL: resource access layer
• node-ral
• 负载均衡
• 多种数据打包⽅方式
• 扩展性

26. RAL: resource access layer
{
"SOME_SERVICE": {
"unpack": "json",
"pack": "form",
"method": "POST"
"encoding": "gbk",
"balance": "random",
"protocol": "http",
"server": [
{ "host": "127.0.0.1", "port": 8080}
]
}
}
var RAL = require('node-ral').RAL;
var request = RAL('SOME_SERVICE', {
path: '/user/info'
data: {
'name': 'admin',
'city': 'Beijing',
'gender': 'Male'
}
});
request.on('data', function(data){
data.status.should.be.eql(0);
});

27. 小结
• 静态资源管理
• ⾃自动化
• 模块化
• ⽅方便快速开发SPA
• 便于性能优化
• ⽅方便和通⽤用服务通信

28. 应⽤用部署上线

29. Nginx
PHP UI
…
Nginx
PHP UI
server server
PHP UI Cluster
Request
Load Balancer(Transmit)
Nginx
…
Node.js process
Node.js process
Node.js process
server(multi core)
NodeJS UI Cluster
…
Nginx
Node.js process
Node.js process
…
Node.js process
server(multi core)

30. 部署
• Nginx 配置实现⼩小流量，流量切换等
• upstream
• location

31. 部署
upstream nodejs {
location ~ "^/mobile/xxx"{
proxy_pass http://nodejs;
break;
}
upstream nodejs_php {
server 127.0.0.1:8080 max_fails=2 fail_timeout=1s weight=10;
server 10.0.0.10:8080 max_fails=2 fail_timeout=1s weight=1
}
location ~ "^/mobile/yyy"{
proxy_pass http://nodejs_php;
break;
}
server 127.0.0.1:8080 max_fails=2 fail_timeout=1s weight=10;
}

32. 应⽤用线上运维

33. 运维
稳定性
• pm2
• 0宕机启动
• 监控
• 多进程管理
• yog-pm
• 扩展⾃自pm2
• 内存检查
• ⾃自启动

34. 运维
logger 标准化的⽇日志
• ⽅方便⽇日志统计
• ⽅方便统计监控
• 捕获异常，错误，请求
• 维持唯⼀一ID

35. 总结
• Yog是什么
• Yog的核⼼心功能
• ⾃自动化、模块化的静态资源管理
• 灵活的⻚页⾯面渲染⽅方式
• ⽅方便和通⽤用服务互联
• Yog App的部署、上线

36. Q&A

37. Thanks
• FEX官⺴⽹网 http://fex.baidu.com
• FIS官⺴⽹网 http://fis.baidu.com
• FIS解决⽅方案 http://fis.baidu.com
• github https://github.com/fex-team/yog