Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practice on embedding Node.js into Atom Editor

Practice on embedding Node.js into Atom Editor

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

Dc13d329db98a4ff44d52013b80e3bf4?s=128

Cheng Zhao

June 21, 2014
Tweet

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?