yog framework
DESCRIPTION
https://github.com/fex-team/yogTRANSCRIPT
Node.js酸奶框架我们的Web全栈开发实践
Shared � By � Xiang � Shouding �
相守⿍鼎
@xiangshouding@相守⿍鼎
2012年加⼊入百度
⼤大纲
• 酸奶框架是什么
• 酸奶框架提供了那些功能
• 应⽤用部署上线
• 应⽤用的线上运维
酸奶框架是什么
• 先从⼀一个项⺫⽬目说起
• 项⺫⽬目特性
• 前端WebApp应⽤用，RTT时间⻓长
• 数据接⼝口杂乱
• 业务⽀支持度不理想
• 静态资源管理不理想
• ⽅方案
• 后端渲染，解决webapp RTT时间⻓长问题
• 使⽤用node作为中间层，提⾼高前端可控性，⽅方便⽀支持项⺫⽬目以及统⼀一接⼝口
• 使⽤用FIS 2.0解决前端⼯工程问题
“⽤用node.js的哪个框架呢？”
express.js koa
nodejs <= 0.10.30 nodejs >= 0.11.1
烦⼈人的callback generator
稳定性
express.js
express.js
可扩展
⾼高度灵活
需配置（硬编码）
kraken.js
可扩展
MVC
通过配置⽂文件配置
介绍
• 酸奶框架，基于kraken.js的Web MVC开发框架;
• 可扩展
• 前后端分离
• ⽀支持项⺫⽬目拆分
• ⽀支持BigPipe，chunk渲染模板
• 简称“yog”
Fr UI � LayerFront-End
Back-End
UI � Layer
Business � Logic
Server
Browser
HTTP/HTTPS
UI � LayerFront-End
Back-End
Business � Logic
Server
Browser
HTTP/HTTPS
UI � Layer
Server
HTTP/HTTPS
⼩小结
• 整个⽅方案实现了
• ⾸首屏时间 3.55s 减少⾄至 1.55s
• 开发速度相较相同项⺫⽬目提升20%
酸奶框架提供的功能
• FIS静态资源管理
• BigPipe
• RAL：resource access layer
FIS静态资源管理
• ⾃自动构建：
• 静态资源：md5，压缩，CDN，资源合并，资源定位...
• 异构语⾔言的使⽤用：less，coffescript，sass...
• 前端模板预编译
• 模块化
• 按需加载
• ⽅方便维护
静态资源管理
{%widget "widget/nav/nav.tpl"%}{%widget "widget/sidebar/sidebar.tpl"}
BigPipe
• Chunk输出：并行数据并行渲染模板 �
• 高效 �
• SPA（单页应用） �
• 学习成本低 �
• pagecache �
• 对SEO友好 �
• LazyRender �
• 方便做首屏优化
BigPipe
并⾏行数据并⾏行渲染
BigPipe � � SPA
{%widget "content.tpl" id=“content" mode=“quickling”%}
A B
page_a.tpl page_b.tpl
BigPipe
• LazyRender
• 组件延迟渲染
RAL: � resource � access � layer
• node-ral
• 负载均衡
• 多种数据打包⽅方式
• 扩展性
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);});
小结
•静态资源管理
•⾃自动化
•模块化
•⽅方便快速开发SPA
•便于性能优化
•⽅方便和通⽤用服务通信
应⽤用部署上线
Nginx
PHP � UI
…
Nginx
PHP � UI
server server
PHP � UI � Cluster
Load � Balancer(Transmit)
Nginx
…
server(multi � core)
NodeJS � UI � Cluster
Node.js � process
Node.js � process
…
Node.js � process
Request
Nginx
server(multi � core)
Node.js � process
Node.js � process
…
Node.js � process
部署
• Nginx 配置实现⼩小流量，流量切换等
• upstream
• location
部署
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;}
upstream nodejs { server 127.0.0.1:8080 max_fails=2 fail_timeout=1s weight=10;}
应⽤用线上运维
运维稳定性
• pm2
• 0宕机启动
• 监控
• 多进程管理
• yog-pm �
• 扩展⾃自pm2
• 内存检查
• ⾃自启动
运维
logger 标准化的⽇日志
• ⽅方便⽇日志统计
• ⽅方便统计监控
• 捕获异常，错误，请求
• 维持唯⼀一ID
总结• Yog是什么
• Yog的核⼼心功能
• ⾃自动化、模块化的静态资源管理
• 灵活的⻚页⾯面渲染⽅方式
• ⽅方便和通⽤用服务互联
• Yog App的部署、上线
Q&A
Thanks
• FEX官⺴⽹网 http://fex.baidu.com
• FIS官⺴⽹网 http://fis.baidu.com
• FIS解决⽅方案 http://fis.baidu.com
• github https://github.com/fex-team/yog