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
   

   View Slide

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
   

   View Slide

3. Atom Shell is a
   Node.js programmable
   Chromium browser
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

7. How Node.js is
   embedded into
   Atom Shell?
   

   View Slide

8. 3 steps
   

   View Slide

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

   View Slide

10. Step 2.
    Load Node.js env
    

    View Slide

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
    

    View Slide

12. allows only one
    global context
    

    View Slide

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

    View Slide

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
    

    View Slide

15. multiple contexts
    in one process
    

    View Slide

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()
    

    View Slide

17. Step 3.
    Entering event loop
    

    View Slide

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
    

    View Slide

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

    View Slide

20. 2 event loops
    in
    1 main thread
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

24. Questions？
    

    View Slide