Practice on embedding Node.js into Atom Editor

This presentation introduces techniques used on integrating node.js into atom-shell.

Transcript

1. Practice on embedding Node.js into Atom Editor Cheng Zhao https://github.com/zcbenz
2. • 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
3. Atom Shell is a Node.js programmable Chromium browser
4. 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
5. 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
6. 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.
7. How Node.js is embedded into Atom Shell?
8. 3 steps
9. 1. Initialize V8 and everything 2. Load Node.js environment 3. Entering event loop
10. Step 2. Load Node.js env
11. 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
12. allows only one global context
13. multi-context patch http://strongloop.com/strongblog/whats-new-node-js-v0-12- multiple-context-execution/
14. 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
15. multiple contexts in one process
16. 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()
17. Step 3. Entering event loop
18. 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
19. Event Loop of Native GUI Programs Main Thread [NSApp run] WaitMessage() Main Thread Windows Mac OS X
20. 2 event loops in 1 main thread
21. … Main Thread … … … … … main(int argc, char *argv[]) ?????
22. event loop integration https://github.com/atom/atom-shell/blob/master/atom/common/ node_bindings.cc
23. 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
24. Questions？