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

Node webkit

Node webkit

A small presentation about node-webkit. Created for Lunch and Learn [at] Woboinc.


Djalma Araújo

August 14, 2014


  1. Node-webkit It is an app runtime that allows developers to

    use Web technologies (i.e. HTML5, CSS and JavaScript) to develop native apps
  2. Yes, Your simple Front-End App, running on the Desktop.

  3. None
  4. What? Apps are written in: 1. HTML 2. CSS 3.

    Javascript 4. Node.js Modules You can also use: 1. Coffee/Type/Clojure 2. Angular/Ember/React 3. HTML/JADE/SLIM 4. NPM Modules 5. Bower 6. ...
  5. History / How is it possible? Creator: github.com/rogerwang/

  6. Features • Apps written in modern HTML5, CSS3, JS and

    WebGL. • Complete support for Node.js APIs and third party modules (npm). • Good performance: Node and WebKit run in the same thread: Function calls are straight-forward; objects are in the same heap and can just reference each other. • Easy to package and distribute apps. • Available on Linux, Mac OS X and Windows.
  7. None
  8. Pros Cons • HTML+CSS+JS (pwned!) • Node Modules (IO Access)

    • One code base • Multiple OS (Win, Linux, Mac) • Easy to build games, presentations, real-time apps • Access to GPU (Games!) • GUI tools (tray, context menu) • Offline storage • HUGE App size (>= 60mb) • HTML5 API Limitations* • App Crash • Different implementations of HTML5 API’s on different layers. (Browser vs Content Layer)
  9. Must know / Mixes! Mixed Message loop • Node (event-driven

    based on libuv) • Webkit (event-driven MessagePump of Chrome) • Result: Single message loop. Custom MessagePump built on top of libuv Mixed context access of each other • During initialization, node-webkit injects the Node context inside of Webkit context. • Result: Contexts together Security Model Changes / Frames • Two kinds of frames (Node frames and Web frames) • Web frames: Cross-domain AJAX problems (same-origin policy) • Node frames: No restriction. Security token is shared on all Node frames. • Result: Cross-domain access is allowed and objects in the Node's context are accessible too
  10. None
  11. Shut up and code! 1. HTML main file 2. package.json

  12. Live coding time!

  13. Apps Using / Cowdown App

  14. Apps Using / Brandon Must Die

  15. Apps Using / Light table

  16. Apps Using / Popcorn time

  17. How we can use for Wobo Inc - Deploy Apps

    (Business People) - Our own Hipchat / Customer Support Apps - Kiosk Apps integrated with our APIs (HPB/SKYO)
  18. Last but not least

  19. Links • https://github.com/rogerwang/node-webkit • http://www.slideshare.net/paulbjensen/desktop-apps-with-node-webkit • https://github.com/djalmaaraujo/cowdown (Rocks!) • http://yedingding.com/2014/08/01/node-webkit-intro-en.html

    • https://groups.google.com/forum/#!forum/node-webkit • www.brandonmustdie.com • www.lighttable.com • www.popcorntime.io • https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and- companies-using-node-webkit • https://github.com/djalmaaraujo/github-info-node-webkit-example