Practice on embedding Node.js into Atom Editor Cheng Zhao https://github.com/zcbenz 

• Atom is a text editor written by GitHub
 https://github.com/atom/atom • Atom Shell is a desktop application shell based on Chromium and Node.js
 https://github.com/atom/atom- shell • Atom is built upon Atom Shell Atom Editor and Atom Shell 

Atom Shell is a Node.js programmable Chromium browser 

Chromium Browser Browser Window Window Window … Tray Menu Dialog Controlled by C++ Renderer HTML JavaScript (DOM) Renderer HTML JavaScript (DOM) Renderer HTML JavaScript (DOM) IPC 

Atom Shell Browser Window Window Window … Tray Menu Dialog Controlled by Node.js Renderer HTML JavaScript (DOM) Node.js Renderer HTML JavaScript (DOM) Node.js Renderer HTML JavaScript (DOM) Node.js IPC 

Node.js in Atom Shell • Atom Shell has embedded Node.js in both Chromium browser’s browser process and renderer process • JavaScript in browser process can do GUI related operations like creating windows and menus. • JavaScript in renderer process can use Node.js APIs in addition to standard DOM. 

How Node.js is embedded into Atom Shell? 

3 steps 

1. Initialize V8 and everything 2. Load Node.js environment 3. Entering event loop 

Step 2. Load Node.js env 

Node.js <= 0.10.x main(int argc, char *argv[]) context = Context::New() SetupProcessObject(argc, argv); Load(process_l); uv_run(); Load environment Event loop Create context Program entrance 

allows only one global context 

multi-context patch http://strongloop.com/strongblog/whats-new-node-js-v0-12- multiple-context-execution/ 

Node.js >= 0.11.x main(int argc, char *argv[]) context = Context::New() env = CreateEnvironment(context) uv_run(); Load environment Event loop Create context Program entrance 

multiple contexts in one process 

Node.js in Atom Shell main(int argc, char *argv[]) Context::New() CreateEnvironment() pump->Run(); Load Node.js Event loop Create context Program entrance content::xxxxx(…) Init Chromium Context::New() CreateEnvironment() 

Step 3. Entering event loop 

Event Loop of Node.js timers, idle IO poll deal with IO events uv_check uv_prepare Main Thread process.nextTick produced events setImmediate produced events 

Event Loop of Native GUI Programs Main Thread [NSApp run] WaitMessage() Main Thread Windows Mac OS X 

2 event loops in 1 main thread 

… Main Thread … … … … … main(int argc, char *argv[]) ????? 

event loop integration https://github.com/atom/atom-shell/blob/master/atom/common/ node_bindings.cc 

Event Loop of Atom Shell Main Thread Windows WaitMessage() New Thread IO poll 提 ⽰示主 线 程 有 Node.js事 件 timers, idle IO poll once deal with IO events uv_check uv_prepare 

Questions？