Atom-Shell用HTML写桌面应用解决方案的实现原理
第1页
Atom编辑器嵌⼊入 Node.js引擎实践
赵成 https://github.com/zcbenz
第2页
Atom编辑器和Atom Shell
• Atom是GitHub出品的⽂文本编辑 器 https://github.com/atom/atom
• Atom Shell是基于Chromium和 Node.js的桌⾯面软件开发平台 https://github.com/atom/atomshell
• Atom在Atom Shell之上构建, 并使⽤用CoffeeScript编写
第3页
Atom Shell是可⽤用 Node.js编程的
最⼩小化Chromium浏览器
第4页
Chromium浏览器
Browser Window
Window
C++控制 Window … Tray
Menu
Dialog
IPC
Renderer HTML
JavaScript (DOM)
Renderer HTML
JavaScript (DOM)
Renderer HTML
JavaScript (DOM)
第5页
Atom Shell
Browser Window
Window
Node.js控制 Window … Tray
Menu
Dialog
IPC
Renderer HTML
JavaScript (DOM) Node.js
Renderer HTML
JavaScript (DOM) Node.js
Renderer HTML
JavaScript (DOM) Node.js
第6页
Atom Shell⾥里的Node.js
• Atom Shell同时在Chromium浏览器的Browser端 和Renderer端嵌⼊入了Node.js引擎
• Browser端可以⽤用JavaScript操作GUI,⽐比如创建 窗⼝口、建⽴立窗⼝口菜单等,同时也能使⽤用Node.js的 API
• Renderer端则是在DOM的基础上增加了Node.js 的API
第7页
Node.js引擎是如何 嵌⼊入到Atom Shell中的?
第8页
三步
第9页
1. 初始化V8引擎 2. 载⼊入Node.js环境 3. 进⼊入事件循环
今天的内容
第10页
2. 载⼊入Node.js环境
第11页
Node.js <= 0.10.x
main(int argc, char *argv[]) context = Context::New() SetupProcessObject(argc, argv);
Load(process_l);
程序⼊入⼝口 创建Context
载⼊入环境
uv_run();
事件循环
第12页
只允许有⼀一个 全局context
第13页
multi-context patch
http://strongloop.com/strongblog/whats-new-node-js-v0-12multiple-context-execution/
第14页
Node.js >= 0.11.x
main(int argc, char *argv[]) context = Context::New() env = CreateEnvironment(context)
程序⼊入⼝口
创建Context 创建并载⼊入 Node.js环境
uv_run();
事件循环
第15页
⼀一个线程内允许 多个context
第16页
Atom Shell中载⼊入Node.js
main(int argc, char *argv[])
content::xxxxx(…)
Context::New()
Context::New()
CreateEnvironment() CreateEnvironment()
程序⼊入⼝口 Chromium初始化 创建Context 载⼊入Node.js环境
pump->Run();
事件循环
第17页
3. 进⼊入事件循环
第18页
Node.js的事件循环
timers, idle uv_prepare
IO poll 处理IO事件 uv_check
process.nextTick 产⽣生的事件
setImmediate 产⽣生的事件 主线程
第19页
原⽣生GUI程序的事件循环
Windows
WaitMessage()
主线程
Mac OS X
[NSApp run]
主线程
第20页
⼀一个主线程, 两个事件循环
第21页
main(int argc, char *argv[])
jQuery1102015024107754812588_1429495675381jQuery1102008062816062010825_1432560880347?
… … …… … …
主线程
第22页
事件循环的融合
https://github.com/atom/atom-shell/blob/master/atom/common/ node_bindings.cc
第23页
Atom Shell的事件循环
Windows WaitMessage()
timers, idle
uv_prepare
IO poll once
IO poll
处理IO事件 uv_check
主线程
提⽰示主线程有Node.js事件 新线程
第24页
问题?