SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Node 在淘宝的应用实
践
这些年,我们一起开发过的 Node.js
By @ 朴灵




    1
关于我
                        连 IE6 都能
                        兼容的男
• CNode 社区                  人
• 前端 at SAP for Mobile Web
• 前端 at 淘宝数据产品部

                2
议程
• 我为什么要做 Node 开发
• 准备工作与作品
• Node.js 带来的新问题与如何逆袭
 •   异步编程

 •   缓存与内存

 •   Buffer

• Node.js 在淘宝产品中的一点实践
               3
长达半天的欢乐


       icons powered by morcha design




前端屌丝的坎坷路
           4
Node 与前端的亲缘




     5
Node 与前端的亲缘




     6
左手 HTML5 右手
        Node.js
• 熟知的 JavaScript 执行原理 / 事件循环
• 熟悉的 API 、事件、单线程、回调
• Ajax/ 异步
• 相比 HTML5 , Node 将开启更多的可能
 性


              7
好奇心 & 满足感
• HTTP 协议栈:深入后端,反哺前端
 •   Status code

 •   Cookie & Session

 •   Request & Response

 •   Web Framework

• 高性能 JavaScript 平台
• 拓宽视野
                          8
Go, go, go!!!
var http example.jsServer running at http://127.0.0.1:1337/res) {
% node = require('http');http.createServer(function (req,
 res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');}).listen(1337,
'127.0.0.1');console.log('Server running at
http://127.0.0.1:1337/');




                                  9
作品




 10
全 JavaScript 堆栈的产
         品
                               Connect


WebGhost                     ITier


Redis & MRedis
                 MongoSkin


                              Should

                        11
前端工程师到 Web 工程
     师
            让女神青睐


如何摆脱前端屌丝的身份

           结果重了 10 斤




      12
问题:异步协作
var proxy = new EventProxy();
proxy.all("template", "data", "l10n", render);
•    嵌套还是并行?
$.get("template", function (template) {
    // something
$.get("template", function (template) {
    proxy.trigger("template", template);
}); // something
    $.get("data", function (data) {
$.get("data", function (data) {
        // something
    // something
        $.get("l10n", function (l10n) {
    proxy.trigger("data", data);
});         // something
            render(template, data);
$.get("l10n", function (l10n) {
        });
    // something
    });
    proxy.trigger("l10n", l10n);
});
});
                                  13
问题:异步还是同步
var proxy = new EventProxy();
var status = "ready";
var _getFile = function (callback) {


 • 复杂的异步编程
  proxy.once("template", callback);
  if (status === "ready") {
    fs.readFile("views/index.html", function (err, file) {
      status = "pending";
      proxy.fire("template", err, file);
    });
  }
};
var view = fs.readFileSync("../views/index.html", "utf8");
var _template;
var getTemplate = function (callback) {
  if (_template) {
    callback(null, _template);
  } else {

 同步 + 缓存,妥妥滴
    _getFile(function (err, file) {
      if (!err && !_template) {
        _template = file.toString();
      }
      callback(null, _template);
    });
  }
};
                                                 14
问题:缓存的使用
var map = {};
var get = function (key) {
var LimitableMap = require('limitablemap');
  return map[key];
}; map = new LimitableMap(1000);
var
map.set("key1", "key1");
var set = function (key, value) {
map.get("key1");
  map[key] = value;
};
// 检查缓存
if (!get(key)) {
  // 从数据库或别的地方获取了对象后,放进缓存中
  set(key, value);
}

                         15
问题: Session
• V8 内存堆栈限制
• 分布式中, Session 需要共享
 (Redis)
• 重启应用不丢失 session
• 多点 Redis ,备份容灾
            16
// 正确的方法
var chunks = [];
var size = 0;

       问题: Buffer 对象
res.on('data', function (chunk) {
  chunks.push(chunk);
  size += chunk.length;
});
var data = function () {
res.on('end',
               "";
res.on('data', function (chunk) {
  var data = null;
   //简单且正确的方法 对象
      chunk 是一个 Buffer
//switch(chunks.length) {
var bufferHelper = 隐藏的 toString ()
    case += chunk;// new BufferHelper();
   data 0: data = new Buffer(0);
}) break;
req.on("data", function (chunk) {
    case 1: data = chunks[0];
   bufferHelper.concat(chunk);
.on("end", function () {
     break;
})// 对 data 转码
    default:
.on('end', function () {
}); data = new Buffer(size);
   var html i= bufferHelper.toBuffer().toString();
     for (var = 0, pos = 0, l = chunks.length; i < l; i++) {
       var chunk = chunks[i];
}); chunk.copy(data, pos);
       pos += chunk.length;
     }
     break;
  }                                       17
问题: String 传输的性
       能
• 7k 大小的静态文件,需做替换
• String ➛ Buffer
• 缓存 Buffer , 4 倍性能提升

            18
问题:多核 CPU 的利
var cluster = require('node-cluster');

  •         用
    单线程与多核 CPU
var master = new cluster.Master();
master.register(8080, 'app.js');
  • 单线程因为异常退出?
master.dispatch();    负载均衡
                      多核利用
  • 仿若熟悉的 Web Worker: 提升稳定
var http = require('http');
var cluster = require('node-cluster');
      child_process
var worker = new cluster.Worker();
  •    进程与消息
var server = http.createServer(function (req, res) {
  // server
});

worker.ready(function (socket) {
  server.emit('connection', socket);
});                               19
小结
• 异步编程问题? EventProxy 、 JScex
 等
• 内存限制问题?第三方存储 Redis
• CPU 消耗问题?缓存中间结果
• 单线程 CPU 利用不足问题?多进程
• 单线程稳定性问题? Node-Cluster
              20
实践:运维
         // 异步方法中 try catch 是不靠谱
• 异常     滴
         双机房
         进程数量
         // 异步方法的异常
• 日志     双 Redis MRedis 模块
         CPU
         async(functionMongoSkin {
         双 MongoDB
         内存if (err) {
                         (err, data)

• 监控     数据源集群
         Loadlogger.error(err);
         磁盘 IO // TODO
             return;
• 部署     流量}
           // TODO

• 备份容灾   });



          21
实践:测试
• 测试
    •   单元测试

    •   自动化测试

    •   性能测试         Should.js

•   持续集成                         WebGhost


                22
实践: CommonJS & Node &
         NPM

CommonJS            NPM




           Node

             23
实践:公司范围内共享代码


• 如何保护隐私代码
• 如何重用散乱代码
• 如何告别复制粘贴

         24
实践:公司范围内共享代码
          单向同步
 本地 NPM          官方 NPM




私有模块      项目      公有模块


            25
展望
• 深度发掘前端开发和用户体验
• 无需与开发沟通,节省成本
• 知晓细节,更易改进产品体验
• 感谢伟大的 github
• 感谢伟大的 NPM 促成的生态圈
• 感谢 Node 这件美妙的礼物
          26
Q&A
屌丝のぎゃくしゅ
    う


           27

Weitere ähnliche Inhalte

Was ist angesagt?

Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
Dongxu Yao
 

Was ist angesagt? (20)

Koa 正在等一個人
Koa 正在等一個人Koa 正在等一個人
Koa 正在等一個人
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 
Class 20170126
Class 20170126Class 20170126
Class 20170126
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
現代 IT 人一定要知道的 Ansible 自動化組態技巧
現代 IT 人一定要知道的 Ansible 自動化組態技巧現代 IT 人一定要知道的 Ansible 自動化組態技巧
現代 IT 人一定要知道的 Ansible 自動化組態技巧
 
Maven & mongo & sring
Maven & mongo & sringMaven & mongo & sring
Maven & mongo & sring
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
 
Node js实践
Node js实践Node js实践
Node js实践
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
Asp.net core v1.0
Asp.net core v1.0Asp.net core v1.0
Asp.net core v1.0
 
Automate with Ansible basic (3/e)
Automate with Ansible basic (3/e)Automate with Ansible basic (3/e)
Automate with Ansible basic (3/e)
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
 

Andere mochten auch

Hypocrite Dr. Shriniwas Kashalikar
Hypocrite Dr. Shriniwas KashalikarHypocrite Dr. Shriniwas Kashalikar
Hypocrite Dr. Shriniwas Kashalikar
shriniwaskashalikar
 
紹興的橋+好友十句話
紹興的橋+好友十句話紹興的橋+好友十句話
紹興的橋+好友十句話
Josephine C
 
Results For Questionaire New Onee[1]
Results For Questionaire New Onee[1]Results For Questionaire New Onee[1]
Results For Questionaire New Onee[1]
guest969fd6
 
Top 50 facebook pages 2009
Top 50 facebook pages 2009Top 50 facebook pages 2009
Top 50 facebook pages 2009
guestabace6
 
1 kapitulli ii pasqyrat financiare
1 kapitulli ii  pasqyrat financiare1 kapitulli ii  pasqyrat financiare
1 kapitulli ii pasqyrat financiare
Menaxherat
 
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
taobao.com
 
Victory Over Neck And Back Pain Dr Shriniwas Kashalikar
Victory Over Neck And Back Pain  Dr Shriniwas KashalikarVictory Over Neck And Back Pain  Dr Shriniwas Kashalikar
Victory Over Neck And Back Pain Dr Shriniwas Kashalikar
shriniwaskashalikar
 
E ardhmja e Unionit Evropian
E ardhmja e Unionit EvropianE ardhmja e Unionit Evropian
E ardhmja e Unionit Evropian
Menaxherat
 
Y O G A, M A N A G E M E N T A N D N A M A S M A R A N D R
Y O G A,  M A N A G E M E N T  A N D  N A M A S M A R A N  D RY O G A,  M A N A G E M E N T  A N D  N A M A S M A R A N  D R
Y O G A, M A N A G E M E N T A N D N A M A S M A R A N D R
shriniwaskashalikar
 
Namasmaran And Stress Dr. Shriniwas J. Kashalikar
Namasmaran And Stress Dr. Shriniwas J. KashalikarNamasmaran And Stress Dr. Shriniwas J. Kashalikar
Namasmaran And Stress Dr. Shriniwas J. Kashalikar
shriniwaskashalikar
 

Andere mochten auch (20)

Hypocrite Dr. Shriniwas Kashalikar
Hypocrite Dr. Shriniwas KashalikarHypocrite Dr. Shriniwas Kashalikar
Hypocrite Dr. Shriniwas Kashalikar
 
紹興的橋+好友十句話
紹興的橋+好友十句話紹興的橋+好友十句話
紹興的橋+好友十句話
 
What Is 2010love
What Is 2010loveWhat Is 2010love
What Is 2010love
 
P R A L H A D S A I D D R
P R A L H A D  S A I D  D RP R A L H A D  S A I D  D R
P R A L H A D S A I D D R
 
Second language learning and reading
Second language learning and readingSecond language learning and reading
Second language learning and reading
 
My Presentation to Teradata_13 Jan 2014
My Presentation to Teradata_13 Jan 2014My Presentation to Teradata_13 Jan 2014
My Presentation to Teradata_13 Jan 2014
 
Results For Questionaire New Onee[1]
Results For Questionaire New Onee[1]Results For Questionaire New Onee[1]
Results For Questionaire New Onee[1]
 
Ad Creative London 09
Ad Creative London 09Ad Creative London 09
Ad Creative London 09
 
Madness
MadnessMadness
Madness
 
Dedicate time
Dedicate timeDedicate time
Dedicate time
 
Top 50 facebook pages 2009
Top 50 facebook pages 2009Top 50 facebook pages 2009
Top 50 facebook pages 2009
 
201010 Investment Outlook 4 Q10
201010 Investment Outlook 4 Q10201010 Investment Outlook 4 Q10
201010 Investment Outlook 4 Q10
 
1 kapitulli ii pasqyrat financiare
1 kapitulli ii  pasqyrat financiare1 kapitulli ii  pasqyrat financiare
1 kapitulli ii pasqyrat financiare
 
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
 
Victory Over Neck And Back Pain Dr Shriniwas Kashalikar
Victory Over Neck And Back Pain  Dr Shriniwas KashalikarVictory Over Neck And Back Pain  Dr Shriniwas Kashalikar
Victory Over Neck And Back Pain Dr Shriniwas Kashalikar
 
E ardhmja e Unionit Evropian
E ardhmja e Unionit EvropianE ardhmja e Unionit Evropian
E ardhmja e Unionit Evropian
 
Splinternetmarketing Keyword Rankings 3 5 2011 Vs 3 28 2011
Splinternetmarketing Keyword Rankings 3 5 2011 Vs 3 28 2011Splinternetmarketing Keyword Rankings 3 5 2011 Vs 3 28 2011
Splinternetmarketing Keyword Rankings 3 5 2011 Vs 3 28 2011
 
Y O G A, M A N A G E M E N T A N D N A M A S M A R A N D R
Y O G A,  M A N A G E M E N T  A N D  N A M A S M A R A N  D RY O G A,  M A N A G E M E N T  A N D  N A M A S M A R A N  D R
Y O G A, M A N A G E M E N T A N D N A M A S M A R A N D R
 
Namasmaran And Stress Dr. Shriniwas J. Kashalikar
Namasmaran And Stress Dr. Shriniwas J. KashalikarNamasmaran And Stress Dr. Shriniwas J. Kashalikar
Namasmaran And Stress Dr. Shriniwas J. Kashalikar
 
Intro Open House
Intro Open HouseIntro Open House
Intro Open House
 

Ähnlich wie Node.js在淘宝的应用实践

D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
Jackson Tian
 
Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验
QLeelulu
 
Real time web实时信息流推送
Real time web实时信息流推送Real time web实时信息流推送
Real time web实时信息流推送
yongboy
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
 
Node js实践
Node js实践Node js实践
Node js实践
myzykj
 
Lamp高性能设计
Lamp高性能设计Lamp高性能设计
Lamp高性能设计
锐 张
 

Ähnlich wie Node.js在淘宝的应用实践 (20)

D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
 
Yog Framework
Yog FrameworkYog Framework
Yog Framework
 
Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验
 
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
 
Real time web实时信息流推送
Real time web实时信息流推送Real time web实时信息流推送
Real time web实时信息流推送
 
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
 
Chasingice
ChasingiceChasingice
Chasingice
 
Erlang游戏开发
Erlang游戏开发Erlang游戏开发
Erlang游戏开发
 
Node.js长连接开发实践
Node.js长连接开发实践Node.js长连接开发实践
Node.js长连接开发实践
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
EventProxy introduction - JacksonTian
EventProxy introduction - JacksonTianEventProxy introduction - JacksonTian
EventProxy introduction - JacksonTian
 
Event proxy introduction
Event proxy introductionEvent proxy introduction
Event proxy introduction
 
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接 构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接
 
高性能LAMP程序设计
高性能LAMP程序设计高性能LAMP程序设计
高性能LAMP程序设计
 
Node js实践
Node js实践Node js实践
Node js实践
 
介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用介紹前端 Web 技術在跨平台開發上的應用
介紹前端 Web 技術在跨平台開發上的應用
 
Html5
Html5Html5
Html5
 
Web Caching Architecture and Design
Web Caching Architecture and DesignWeb Caching Architecture and Design
Web Caching Architecture and Design
 
Lamp高性能设计
Lamp高性能设计Lamp高性能设计
Lamp高性能设计
 

Mehr von taobao.com

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical engine
taobao.com
 
Html5环保小游戏
Html5环保小游戏Html5环保小游戏
Html5环保小游戏
taobao.com
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台
taobao.com
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
 
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
 
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
taobao.com
 
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
taobao.com
 
西乔:理性的设计
西乔:理性的设计西乔:理性的设计
西乔:理性的设计
taobao.com
 
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
taobao.com
 
More weapons, more power
More weapons, more powerMore weapons, more power
More weapons, more power
taobao.com
 
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
 
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
taobao.com
 

Mehr von taobao.com (20)

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical engine
 
Html5环保小游戏
Html5环保小游戏Html5环保小游戏
Html5环保小游戏
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
 
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践
 
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
 
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
 
西乔:理性的设计
西乔:理性的设计西乔:理性的设计
西乔:理性的设计
 
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
 
More weapons, more power
More weapons, more powerMore weapons, more power
More weapons, more power
 
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
 
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
 

Node.js在淘宝的应用实践

  • 2. 关于我 连 IE6 都能 兼容的男 • CNode 社区 人 • 前端 at SAP for Mobile Web • 前端 at 淘宝数据产品部 2
  • 3. 议程 • 我为什么要做 Node 开发 • 准备工作与作品 • Node.js 带来的新问题与如何逆袭 • 异步编程 • 缓存与内存 • Buffer • Node.js 在淘宝产品中的一点实践 3
  • 4. 长达半天的欢乐 icons powered by morcha design 前端屌丝的坎坷路 4
  • 7. 左手 HTML5 右手 Node.js • 熟知的 JavaScript 执行原理 / 事件循环 • 熟悉的 API 、事件、单线程、回调 • Ajax/ 异步 • 相比 HTML5 , Node 将开启更多的可能 性 7
  • 8. 好奇心 & 满足感 • HTTP 协议栈:深入后端,反哺前端 • Status code • Cookie & Session • Request & Response • Web Framework • 高性能 JavaScript 平台 • 拓宽视野 8
  • 9. Go, go, go!!! var http example.jsServer running at http://127.0.0.1:1337/res) { % node = require('http');http.createServer(function (req, res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/'); 9
  • 11. 全 JavaScript 堆栈的产 品 Connect WebGhost ITier Redis & MRedis MongoSkin Should 11
  • 12. 前端工程师到 Web 工程 师 让女神青睐 如何摆脱前端屌丝的身份 结果重了 10 斤 12
  • 13. 问题:异步协作 var proxy = new EventProxy(); proxy.all("template", "data", "l10n", render); • 嵌套还是并行? $.get("template", function (template) { // something $.get("template", function (template) { proxy.trigger("template", template); }); // something $.get("data", function (data) { $.get("data", function (data) { // something // something $.get("l10n", function (l10n) { proxy.trigger("data", data); }); // something render(template, data); $.get("l10n", function (l10n) { }); // something }); proxy.trigger("l10n", l10n); }); }); 13
  • 14. 问题:异步还是同步 var proxy = new EventProxy(); var status = "ready"; var _getFile = function (callback) { • 复杂的异步编程 proxy.once("template", callback); if (status === "ready") { fs.readFile("views/index.html", function (err, file) { status = "pending"; proxy.fire("template", err, file); }); } }; var view = fs.readFileSync("../views/index.html", "utf8"); var _template; var getTemplate = function (callback) { if (_template) { callback(null, _template); } else { 同步 + 缓存,妥妥滴 _getFile(function (err, file) { if (!err && !_template) { _template = file.toString(); } callback(null, _template); }); } }; 14
  • 15. 问题:缓存的使用 var map = {}; var get = function (key) { var LimitableMap = require('limitablemap'); return map[key]; }; map = new LimitableMap(1000); var map.set("key1", "key1"); var set = function (key, value) { map.get("key1"); map[key] = value; }; // 检查缓存 if (!get(key)) { // 从数据库或别的地方获取了对象后,放进缓存中 set(key, value); } 15
  • 16. 问题: Session • V8 内存堆栈限制 • 分布式中, Session 需要共享 (Redis) • 重启应用不丢失 session • 多点 Redis ,备份容灾 16
  • 17. // 正确的方法 var chunks = []; var size = 0; 问题: Buffer 对象 res.on('data', function (chunk) { chunks.push(chunk); size += chunk.length; }); var data = function () { res.on('end', ""; res.on('data', function (chunk) { var data = null; //简单且正确的方法 对象 chunk 是一个 Buffer //switch(chunks.length) { var bufferHelper = 隐藏的 toString () case += chunk;// new BufferHelper(); data 0: data = new Buffer(0); }) break; req.on("data", function (chunk) { case 1: data = chunks[0]; bufferHelper.concat(chunk); .on("end", function () { break; })// 对 data 转码 default: .on('end', function () { }); data = new Buffer(size); var html i= bufferHelper.toBuffer().toString(); for (var = 0, pos = 0, l = chunks.length; i < l; i++) { var chunk = chunks[i]; }); chunk.copy(data, pos); pos += chunk.length; } break; } 17
  • 18. 问题: String 传输的性 能 • 7k 大小的静态文件,需做替换 • String ➛ Buffer • 缓存 Buffer , 4 倍性能提升 18
  • 19. 问题:多核 CPU 的利 var cluster = require('node-cluster'); • 用 单线程与多核 CPU var master = new cluster.Master(); master.register(8080, 'app.js'); • 单线程因为异常退出? master.dispatch(); 负载均衡 多核利用 • 仿若熟悉的 Web Worker: 提升稳定 var http = require('http'); var cluster = require('node-cluster'); child_process var worker = new cluster.Worker(); • 进程与消息 var server = http.createServer(function (req, res) { // server }); worker.ready(function (socket) { server.emit('connection', socket); }); 19
  • 20. 小结 • 异步编程问题? EventProxy 、 JScex 等 • 内存限制问题?第三方存储 Redis • CPU 消耗问题?缓存中间结果 • 单线程 CPU 利用不足问题?多进程 • 单线程稳定性问题? Node-Cluster 20
  • 21. 实践:运维 // 异步方法中 try catch 是不靠谱 • 异常 滴 双机房 进程数量 // 异步方法的异常 • 日志 双 Redis MRedis 模块 CPU async(functionMongoSkin { 双 MongoDB 内存if (err) { (err, data) • 监控 数据源集群 Loadlogger.error(err); 磁盘 IO // TODO return; • 部署 流量} // TODO • 备份容灾 }); 21
  • 22. 实践:测试 • 测试 • 单元测试 • 自动化测试 • 性能测试 Should.js • 持续集成 WebGhost 22
  • 23. 实践: CommonJS & Node & NPM CommonJS NPM Node 23
  • 25. 实践:公司范围内共享代码 单向同步 本地 NPM 官方 NPM 私有模块 项目 公有模块 25
  • 26. 展望 • 深度发掘前端开发和用户体验 • 无需与开发沟通,节省成本 • 知晓细节,更易改进产品体验 • 感谢伟大的 github • 感谢伟大的 NPM 促成的生态圈 • 感谢 Node 这件美妙的礼物 26