Download as PDF, PPTX
![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);
});](https://image.slidesharecdn.com/yog-framework-141025043121-conversion-gate02/85/Yog-Framework-26-320.jpg)
Yog Framework
- 1. Node.js酸奶框架 我们的Web全栈开发实践 SharedBy Xiang Shouding
- 2. 相守⿍鼎 2012年加⼊入百度 @相守⿍鼎 @xiangshouding
- 3. ⼤大纲 • 酸奶框架是什么 • 酸奶框架提供了那些功能 • 应⽤用部署上线 • 应⽤用的线上运维
- 4.
- 5. • 先从⼀一个项⺫⽬目说起 •项⺫⽬目特性 • 前端WebApp应⽤用，RTT时间⻓长 • 数据接⼝口杂乱 • 业务⽀支持度不理想 • 静态资源管理不理想
- 6. • ⽅方案 •后端渲染，解决webapp RTT时间⻓长问题 • 使⽤用node作为中间层，提⾼高前端可控性，⽅方便⽀支 持项⺫⽬目以及统⼀一接⼝口 • 使⽤用FIS 2.0解决前端⼯工程问题
- 7.
- 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的WebMVC开发框架; • 可扩展 • 前后端分离 • ⽀支持项⺫⽬目拆分 • ⽀支持BigPipe，chunk渲染模板 • 简称“yog”
- 11. Front-End Fr UILayer 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.
- 21. BigPipe SPA {%widget"content.tpl" id=“content" mode=“quickling”%} A B page_a.tpl page_b.tpl
- 23. BigPipe • LazyRender • 组件延迟渲染
- 25. RAL: resource accesslayer • node-ral • 负载均衡 • 多种数据打包⽅方式 • 扩展性
- 26. RAL: resource accesslayer { "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.
- 37. Thanks • FEX官⺴⽹网http://fex.baidu.com • FIS官⺴⽹网 http://fis.baidu.com • FIS解决⽅方案 http://fis.baidu.com • github https://github.com/fex-team/yog