node-webkit

View Github Repository Open presentation in a new window

necccc

See all presentation from necccc

node-webkit

1 0

talk-node-webkit

My slides from the Budapest Nodejs meetup in 2014 january

On Github necccc / talk-node-webkit

node-webkit

Desktop application developmentwith node+js / html / css

Szabolcsi-Tóth Szabolcs @_Nec

What we needed

Ustream embed player

  • iframe
  • supports several platforms
  • live video playback with Flash/HTML5
  • 60 million visits per month
Ustream embed player iframe based viewer - we have control over code deployment and versions (desktop, mobile, smart tv's, game consoles) live video with Flash/HTML5 approx 60 million visits per month, key part of the product, sales and marketing are pretty sensitive to its functionality problem affect several teams quick debugging is a key

Debug can be problematic

  • desktop - dev console
  • mobile:
    • native remote debug (osx safari, android sdk + chrome)
    • Adobe Edge Inspect (weinre)

All these are for developers

native debug is tied to OS versions (older OS'es are out of the question) weinre is a small http and websocket server with a frontend console additional code needed in your application to enable it

But usually, error reports are not from developers...

some errors are noticed quickly by client, and/or sales and marketing - in our case, this means colleagues in US/JP/KR momoclo currently the most popular girl band in japan, hiperactive J-pop Once they had a 24 hour long live event, they even had the whole japanese ustream site re-skinned in their theme Imagine that we try to explain a japanese manager how to natively debug over osx safari the odds are high that it wont happen, even if the japanese are the one of the best error-reporters

Debugging LIVE content

"When" and "Where" are also factors in debugging

because it's live, it's important to have logs from first hand and we can restrict content to show up on specific sites, or geographical locations

Summary

  • debug tool
  • on every possible platform
  • in house
  • quick logging
  • as much information in bugreports as possible
so we needed a debug tool, that is available on every platform our people use osx or windows or even linux in-house, so we dont want to put the app on any appstore, or make it available for publick download goal is to have logs quickly, and have as much information in our error tickets as possible

player > debug console

WebRTC "Chrome/FF only" debug website, to connect the clients But mobile has no WebRTC yet :(

WebSocket

WebSocket server on the desktop

  • not in browsers
  • maybe a custom NPAPI plugin for Chrome...
so we've the task to transfer log messages from the iframe player on a device to a desktop error log console webrtc would be ideal for this so we have websocket, put a websocket server on the desktop a remote debugging service is out of the question our devops/netops have enough on their plate

Alternatives

easy start, good tools, has desktop build

no WebSocket server module

AS3 SocketServer over JS API

WebSocket protocol has to be implemented by you, complicated build

ha webes alapokon kozelitjuk a problemat, mik a lehetosegek? cordova / phonegap cli alapu eszkoztar, kenyelmes az airnel a vegen sikerult osszerakni egy elvileg-protokoll-helyes implementaciot, reszben sajat, reszben talalt kodbol - de fura volt a mukodese, kimaradtak framek
https://npmjs.org/package/ws “The ws module works fine, can't we just put that behind some frontend, and we're done?”

node-webkit

web application runtime

chromium + nodejs

Developed and maintained by Intel

maintain: notification api is a big one, because it operates near the OS level, outside chromium itself but it has most features of chrome

Features

Chrome HTML5

GPU acceleration

video/audio

most usecases and examples are small games, or even editors
node core
DOM api
node 3rd party modules
web libs
odd couples can occur with node in the browser imagine a jquery with node, sounds absurd or you've been there if you used browserify

Sandbox

Chromium security sandbox "downgrade"

file operations, cross-origin requests

as a packaged application, we are a bit safer from 3rd party scripts running amok

Node

Node symbols are injected into the window context right after DOM init

Node stays async, but in a browser

Configuration

package.json node packages, deps + runtime config

assets (like CSS, JS libs, images): referenced in HTML, loaded by Chromium

Run

nw C:\path\to\app\dir-with-package-json nw /path/to/app/dir-with-package-json open -n -a node-webkit "/path/to/app/dir-with-package-json"

Build

Zip the application folder, .zip ➔ .nw

Attach nw runtime and done!

Fully distributable app

Automated build: grunt-node-webkit-builder

emphasise: it's a fully distributeable app, the ones who use it, dont have to install any runtimes

Build

Be aware! It does not:

  • protect
  • obfuscate
  • digitally sign
  • secure

Demo time!

Odd couples

os, http, crypto, url, tls ...
File, Blob, URL
ws
jquery, bootstrap

grunt-node-webkit-builder

mteconsole: {
  options : {
    version: "0.8.1", // node-webkit version to build with
    mac_icns: "../mtec/icons/mtec.icns",
    build_dir: '../mtec/build', 
    mac: true, 
    win: true, 
    linux32: false, 
    linux64: false 
  },
  src: ['../mtec/src/**/*'] 
}

grunt-node-webkit-builder

SUMMARIZE!! this is quite new, actually you're among the first ones to see it, it will be introduced to our QA team soon, and the rest of the company afterwards

GitHub

https://github.com/rogerwang/node-webkit

Q&A

Thank you