SlideShare a Scribd company logo
Node.js酸奶框架 
我们的Web全栈开发实践 
Shared By Xiang Shouding
相守⿍鼎 
2012年加⼊入百度 
@相守⿍鼎 
@xiangshouding
⼤大纲 
• 酸奶框架是什么 
• 酸奶框架提供了那些功能 
• 应⽤用部署上线 
• 应⽤用的线上运维
酸奶框架是什么
• 先从⼀一个项⺫⽬目说起 
• 项⺫⽬目特性 
• 前端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”
Front-End Fr UI Layer 
Back-End 
UI Layer 
Browser 
Business Logic 
Server 
HTTP/HTTPS
UI Layer 
Front-End 
Back-End 
Browser 
Business Logic 
Server 
HTTP/HTTPS 
UI Layer 
Server 
HTTP/HTTPS
Yog Framework
⼩小结 
• 整个⽅方案实现了 
• ⾸首屏时间 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
Yog Framework
BigPipe 
• LazyRender 
• 组件延迟渲染
Yog Framework
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 
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)
部署 
• Nginx 配置实现⼩小流量,流量切换等 
• upstream 
• location
部署 
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; 
}
应⽤用线上运维
运维 
稳定性 
• 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

More Related Content

PDF
从开发到上线-实战持续交付
PDF
W3CTech美团react专场-Thinking in React
PPTX
浅谈电商网站数据访问层(DAL)与 ORM 之适用性
PDF
Chasingice
PDF
美团点评技术沙龙08 - 分布式服务通信框架及服务治理系统
PDF
W3CTech美团react专场-React Native 初探
PPT
性能优化
PPTX
ASP.Net MVC Framework
从开发到上线-实战持续交付
W3CTech美团react专场-Thinking in React
浅谈电商网站数据访问层(DAL)与 ORM 之适用性
Chasingice
美团点评技术沙龙08 - 分布式服务通信框架及服务治理系统
W3CTech美团react专场-React Native 初探
性能优化
ASP.Net MVC Framework

What's hot (20)

PPTX
Blazor 與 Radzen 同行
PPTX
Asp.net core v1.0
PPTX
Full stack-development with node js
PPTX
数据架构方面的一些探讨
PDF
一个 Mongodb command 的前世今生
PPTX
Team Foundation Server
PDF
Train.IO 【第六期-OpenStack 二三事】
PDF
金山云查询系统改进之路1
PPTX
深入淺出Node.JS
PDF
基于MySQL的分布式数据库实践
PPTX
ASP.Net WebAPI經驗分享
PDF
阿里CDN技术揭秘
PDF
美团点评技术沙龙14美团云-Docker平台
PPTX
React js
PPTX
DDD系統分析
PDF
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
PPTX
如何针对业务做DB优化
PDF
美团技术沙龙04 美团下一代分布式存储系统
PDF
頑皮工坊 GCP 大冒險
Blazor 與 Radzen 同行
Asp.net core v1.0
Full stack-development with node js
数据架构方面的一些探讨
一个 Mongodb command 的前世今生
Team Foundation Server
Train.IO 【第六期-OpenStack 二三事】
金山云查询系统改进之路1
深入淺出Node.JS
基于MySQL的分布式数据库实践
ASP.Net WebAPI經驗分享
阿里CDN技术揭秘
美团点评技术沙龙14美团云-Docker平台
React js
DDD系統分析
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
如何针对业务做DB优化
美团技术沙龙04 美团下一代分布式存储系统
頑皮工坊 GCP 大冒險
Ad

Viewers also liked (7)

PPTX
HTML5 介绍
 
PPT
腾讯大讲堂09 如何建设高性能网站
PDF
Lvs在大规模网络环境下的应用pukong
PPT
高性能网站最佳实践
PDF
Lenovo SAP Customer Success Story
PPT
Perl在nginx里的应用
PDF
Slack Pro Tips - The most used tool, the least known one
HTML5 介绍
 
腾讯大讲堂09 如何建设高性能网站
Lvs在大规模网络环境下的应用pukong
高性能网站最佳实践
Lenovo SAP Customer Success Story
Perl在nginx里的应用
Slack Pro Tips - The most used tool, the least known one
Ad

Similar to Yog Framework (20)

PDF
Nodejs & NAE
PPT
Node.js在淘宝的应用实践
PPT
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
PDF
Data Analyse Black Horse - ClickHouse
PDF
D2_node在淘宝的应用实践_pdf版
PDF
D baa s_in_xiaomi
PDF
美团点评技术沙龙13-前端工程化开发方案app-proto介绍
PDF
Hacking Nginx at Taobao
PDF
合久必分,分久必合
PDF
Introduction to NodeJS
PDF
构建基于Lamp的网站架构
PDF
Gops2016 云端基于Docker的微服务与持续交付实践
PDF
使用NodeJS构建静态资源管理系统
PDF
03.osb概览
PDF
KSDG BaaS Intro
PDF
分布式流数据实时计算平台 Iprocess
PDF
Truck js 高性能移动web开发解决方案
PPT
Real time web实时信息流推送
PPT
Real-Time Web实时信息流推送
PPTX
高性能远程调用解决方案
Nodejs & NAE
Node.js在淘宝的应用实践
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
Data Analyse Black Horse - ClickHouse
D2_node在淘宝的应用实践_pdf版
D baa s_in_xiaomi
美团点评技术沙龙13-前端工程化开发方案app-proto介绍
Hacking Nginx at Taobao
合久必分,分久必合
Introduction to NodeJS
构建基于Lamp的网站架构
Gops2016 云端基于Docker的微服务与持续交付实践
使用NodeJS构建静态资源管理系统
03.osb概览
KSDG BaaS Intro
分布式流数据实时计算平台 Iprocess
Truck js 高性能移动web开发解决方案
Real time web实时信息流推送
Real-Time Web实时信息流推送
高性能远程调用解决方案

Yog Framework

Editor's Notes

  • #13: Nodejs的出现让这种架构成为可能 1.控制更灵活,开发效率更高 2.性能更高
  • #19: 启用方便
  • #21: mode=quickling的组件,首次渲染不会直接渲染;
  • #25: resource access layer