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.

Cheng Zhao

June 21, 2014
Tweet

More Decks by Cheng Zhao

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Step 2.
    Load Node.js env

    View full-size slide

  10. 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 full-size slide

  11. allows only one
    global context

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. multiple contexts
    in one process

    View full-size slide

  15. 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 full-size slide

  16. Step 3.
    Entering event loop

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. 2 event loops
    in
    1 main thread

    View full-size slide


  20. Main Thread





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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. Questions?

    View full-size slide