Best Of Web - Native Javascript applications with NW.JS

Native Javascript applications with NW.JS Jacopo Daeli Software Engineer Paris,
Jun 5th 2015 Best of Web

Clever.js What am I working on at this moment? It’s
a good looking and clever open source framework to help developers build web applications quickly. It's designed to give them a quick and organised way to start developing node.js based web apps with useful modules like Mongoose and Passport pre-bundled and conﬁgured.

What are we going to talk about today? - What
it is NW.JS a.k.a NodeWebkit - Implementation details - Uses cases - Debugging - Real example: Stream Booth

What is it NW.JS? (1) NW.JS is a web app
runtime based on Chromium and Node.js. It lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies. It's created and developed in Intel Open Source Technology Center.

What is it NW.JS? (2) Node-WebKit project changed name in
January 2015 to NW.JS. Since it is migrated to io.js for updated V8 engine, which helps a lot for integration with latest Chromium versions, it has been renamed because both parts of the name are irrelevant now.

What is it NW.JS? (3) It integrates Node.js functions into
Chromium <html> <head> <title>App</title> </head> <body> <script> const fs = require('fs'); fs.readdir(…, function(…) { for (let i in files) { document.write(files[i]); } }); </script> </body> </html> Applications bin cores dev etc home Library net private sbin …

What is it NW.JS? (4) Node.js functions live into the
main (renderer) thread. require process global … console documents frames … window object renderer thread

What is it NW.JS? (5) - It runs on OS
X, Windows and Linux (of course) - It is easy for packaging and distribution: O@9L AK FG<=&O=:CAL Ak `j \Xjp ]fi gXZbXg`eg Xe[ [`jki`Ylk`fe @LED(BK >`c\j J\jfliZ\j 9gg <XkXj zz 9gg'en ef[\&n\Yb`k KkXe[Xcfe\ =o\ZlkXYc\ Qfli 9gg ZXk en Xgg 6 Xgg Zfdgi\jj g`k_lY'Zfd(ifg\inXeg(ef[\&n\Yb`k [fnecfX[ App.nw nw.js $ cat nw app.zip > app Standalone Executable

What is it NW.JS? (6) It’s also available on npm.
You can run apps like this: # globally $ npm install -g nw $ nw ./my_nwjs_app # locally $ npm install nw $ node_modules/.bin/nw ./my_nwjs_app

What is it NW.JS? (6) It supports Node.js native and
third party modules. Async

What is it NW.JS? (7) - It is based on
Chromium and io.js - It is created and developed at Intel - It is open-sourced at GitHub on Dec’ 7 2011 - Get it at: https://github.com/nwjs/nw.js/ - Prebuilt binaries are available to easy development

Implementation details - Chromium uses MessagePump* family to support its
internal message loop - Node.js uses libuv for message loop - NW.JS merges Node.js and Chromium’s message loop: it implements MessagePumpForUv to use libuv for Chromium’s message loop

Implementation details: structure of an app IMA;C KL9JL KkilZkli\ f]
Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj dfy, E 9 \dfy, \dfy, IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' fy, dcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw k`Xc xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' ;C KL9JL ajfe y2 xen&[\dfy, ny 2 r y2 0)), ky2 .)), Xiy 2 ]Xcj\ 2 xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw y jg\Z`]`\j è`k`Xc \[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' KL9JL n&[\dfy, ), )), Xcj\ [\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw ]`\j è`k`Xc lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jkXiklg nè[f xn`[k_y X [\]è\ nè[fn xkffcYXiy j_fn k_\ nè[ xgfj`k`fey nè[fnwj è` x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè jkXiklg xn`[ [\]è\ xkff j_fn k_ xgf nè[fn Describes package information App HTML/CSS/JS files Node.js modules

Implementation details: manifest file (package.json) gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny
2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' [\dfy, j\ è vu('Z EXZ GK 9ggc`ZXk xnè jkXiklg IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' A;C KL9JL \'ajfe \y2 xen&[\dfy, fny 2 r k_y2 0)), g_ky2 .)), YXiy 2 ]Xcj\ y 2 xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw y jg\Z`]`\j è`k`Xc n\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' ;C KL9JL \'ajfe y2 xen&[\dfy, fny 2 r _y2 0)), _ky2 .)), YXiy 2 ]Xcj\ y 2 xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw y jg\Z`]`\j è`k`Xc n\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' ;C KL9JL \'ajfe y2 xen&[\dfy, fny 2 r _y2 0)), _ky2 .)), YXiy 2 ]Xcj\ y 2 xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw y jg\Z`]`\j è`k`Xc n\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xgg Zfe]`gliXk`fe [ì\Zkfipwj Ge Dèlo Xgg [XkX n`cc Y\ è vu('Zfe]`g(en&[\dfw EXZ GK P `k `j vu(D`YiXip 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_ jkXiklg nè[fnwj ]\Xkli\ xn`[k_y Xe[ x_\`g_k [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_ j_fn k_\ nè[fnwj kffcY xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xeXd\y jg\Z`]` Zfe]`gliXk`fe [ì\Z Ge Dèlo Xgg [XkX è vu('Zfe]`g(en&[ EXZ GK P `k `j vu( 9ggc`ZXk`fe Klggfi IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy xeXd\y Zfe]`gliXk`f Ge Dèlo Xg è vu('Zfe]` EXZ GK P `k 9ggc`ZXk`fe xnè[fn jkXiklg nè[ xn`[k_y IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xeXd\y Zfe]`gliXk` Ge Dèlo Xg è vu('Zfe EXZ GK P ` 9ggc`ZXk`fe xnè[f jkXiklg nè IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xeXd\ Zfe]`gliXk Ge Dèlo X è vu('Zfe EXZ GK P 9ggc`ZXk`f xnè[f jkXiklg nè IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xnè[fny 2 r xn`[k_y2 0)), x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj IMA;C KL9JL KkilZkli\ f] Xe Xgg 9gg s&& gXZbXg\'ajfe s&& è[\o'_kdc s&& aj( s W&& z s&& Zjj( s W&& z s&& i\jfliZ\j( s W&& z W&& ef[\Vdf[lc\j( W&& z <\jZi`Y\j gXZbXg\ è]fidXk`fe 9gg @LED(;KK(BK ]`c\j Ff[\'aj df[l\cj xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' dfy, _kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw è`k`Xc xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' MA;C KL9JL Xg\'ajfe d\y2 xen&[\dfy, e[fny 2 r `[k_y2 0)), \`g_ky2 .)), ffcYXiy 2 ]Xcj\ èy 2 xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw Xèy jg\Z`]`\j è`k`Xc _fn\[ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' ;C KL9JL jfe xen&[\dfy, y 2 r 2 0)), y2 .)), y 2 ]Xcj\ xè[\o'_kdcy xeXd\y jg\Z`]`\j Xggwj Zfe]`gliXk`fe [ì\Zkfipwj eXd\' Ge Dèlo Xgg [XkX n`cc Y\ jkfi\[ è vu('Zfe]`g(en&[\dfw, fe EXZ GK P `k `j vu(D`YiXip( 9ggc`ZXk`fe Klggfikw jg\Z`]`\j è`k`Xc [ kf lj\i xnè[fny jg\Z`]`\j k_\ jkXiklg nè[fnwj ]\Xkli\j' xn`[k_y Xe[ x_\`g_ky [\]è\ nè[fnwj j`q\' xkffcYXiy [\]è\j n_\k_\i kf j_fn k_\ nè[fnwj kffcYXi' xgfj`k`fey [\]è\j nè[fnwj è`k`Xc gfj`k`fe' x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i xnè[f jkXiklg nè xn`[k_y [\]è\ nè xkffcYX j_fn k_\ n xgfj`k`f nè[fnwj x_\`g_ky2 .)), xkffcYXiy 2 ]Xcj\ t, xdXèy 2 xè[\o'_kdcy t xdXèy jg\Z`]`\j è`k`Xc gXg\ j_fn\[ kf lj\i x jkXi x [\]` x j_fn x nè[ Specifies app’s name Specifies initial app’s page Specifies startup window’s feature

Use cases: distribution platform for games - It supports most
HTML 5 features - It’s GPU accelerated - It supports WebGL - Video and audio support

Use cases: File explorer and file editor - You can
choose between Node’s fs module or HTML5 API - You can invoke file select dialogs in JS - Direct dragging files into the window is supported

Use cases: Media applications - It supports getUserMedia - Audio
recording and camera capturing are enabled - <audio> and <video> tag are supported: it can play ogg and web formats

Use cases: PopCorn Time (R.I.P)

Use cases: PopCorn Time (R.I.P) { "name": "Popcorn-Time", "homepage": "https://popcorntime.io",
"repository": { "type": "git", "url": "https://git.popcorntime.io/popcorntime/desktop.git" }, "license": "GPL-3.0", "main": "app://host/src/app/index.html", "version": "0.3.7-2", "node-remote": "client.vpn.ht", "releaseName": "The car wont start", "scripts": { "postinstall": "node_modules/.bin/bower install && grunt setup", "postupdate": "node_modules/.bin/bower update && grunt setup", "test": "grunt --verbose" }, "window": { "title": "Popcorn Time", "icon": "src/app/images/icon.png", "toolbar": false, "frame": false, "min_width": 960, "min_height": 520, "resizable": true, "show": false, "position": "center" }, "dependencies": { "async": "0.9.0", "i18n": "0.5.0", "q": "2.0.2", "read-torrent": "1.0.0", "readdirp": "*", "request": "^2.36.0" … }, … } Manifest ﬁle (package.json):

Use cases: PopCorn Time (R.I.P) if (gui.App.fullArgv.indexOf('--reset') !== -1) {
var data_path = require('nw.gui').App.dataPath; localStorage.clear(); fs.unlinkSync(path.join(data_path, 'data/watched.db'), function (err) { if (err) { throw err; } }); fs.unlinkSync(path.join(data_path, 'data/movies.db'), function (err) { if (err) { throw err; } }); fs.unlinkSync(path.join(data_path, 'data/bookmarks.db'), function (err) { if (err) { throw err; } }); fs.unlinkSync(path.join(data_path, 'data/shows.db'), function (err) { if (err) { throw err; } }); fs.unlinkSync(path.join(data_path, 'data/settings.db'), function (err) { if (err) { throw err; } }); } // Global App skeleton for backbone var App = new Backbone.Marionette.Application(); _.extend(App, { Controller: {}, View: {}, Model: {}, Page: {}, Scrapers: {}, Providers: {}, Localization: {} }); Extract of app.js ﬁle

Use cases: PopCorn Time (R.I.P) function Cache(table) { var self
= this; this.table = table; var db = indexedDB.open(App.Config.cachev2.name, App.Config.cachev2.version); db.onsuccess = function () { self.db = this.result; }; db.onupgradeneeded = function () { var self = this; App.Config.cachev2.tables.forEach(function (tableName) { if (_.contains(self.result.objectStoreNames, tableName)) { return; } self.result.createObjectStore(tableName, { keyPath: '_id' }); }); }; this._openPromise = WrapRequest(db).promise; } Cache.prototype.set = function (key, value, options) { options = options || {}; var data = _.extend(value, { _id: key, _ttl: options.ttl || 14400000, _lastModified: +new Date() }); return WrapRequest(this.db.transaction(this.table, 'readwrite').objectStore(this.table).put(data)).promise; }; Extract of Cache class

Debugging (with devtools) // Add this to your manifest file,
then you can // open devtools from the devtools button in the toolbar. { "window": { "toolbar": true } } // or you may open devtools programmatically require('nw.gui').Window.get().showDevTools() // Alternatively you can even use the --remote-debugging-port=port // command parameter to specify which port the devtools should listen to // For example, by running nw --remote-debugging-port=9222, you can // open http://localhost:9222/ to visit the debugger remotely. Open dev tools

Real Example: Stream Booth - Fork it on GitHub: https://github.com/JacopoDaeli/bestof-web-paris-2015
- It streams from the webcam to other devices in the same LAN. - It uses express for serving the webapp ﬁles to the audience’s devices - NW.JS app and the webapp exchange messages using socket.io - It uses getUserMedia API for reading from the user webcam - It uses an hidden canvas for getting a video frame each 33ms, converting it into a base64 URL and sending it to the audience. NOW THERE IS A LIVE DEMONSTRATION :-)

Best Of Web - Native Javascript applications wi...

Best Of Web - Native Javascript applications with NW.JS

Jacopo Daeli

More Decks by Jacopo Daeli

Other Decks in Technology

Featured

Transcript

Native Javascript applications with NW.JS Jacopo Daeli Software Engineer Paris,

Clever.js What am I working on at this moment? It’s

What are we going to talk about today? - What

What is it NW.JS? (1) NW.JS is a web app

What is it NW.JS? (2) Node-WebKit project changed name in

What is it NW.JS? (3) It integrates Node.js functions into

What is it NW.JS? (4) Node.js functions live into the

What is it NW.JS? (5) - It runs on OS

What is it NW.JS? (6) It’s also available on npm.

What is it NW.JS? (6) It supports Node.js native and

What is it NW.JS? (7) - It is based on

Implementation details - Chromium uses MessagePump* family to support its

Implementation details: structure of an app IMA;C KL9JL KkilZkli\ f]

Implementation details: manifest ﬁle (package.json) gXZbXg\'ajfe r xeXd\y2 xen&[\dfy, xn`e[fny

Use cases: distribution platform for games - It supports most

Use cases: File explorer and ﬁle editor - You can

Use cases: Media applications - It supports getUserMedia - Audio

Use cases: PopCorn Time (R.I.P)

Use cases: PopCorn Time (R.I.P) { "name": "Popcorn-Time", "homepage": "https://popcorntime.io",

Use cases: PopCorn Time (R.I.P) if (gui.App.fullArgv.indexOf('--reset') !== -1) {

Use cases: PopCorn Time (R.I.P) function Cache(table) { var self

Debugging (with devtools) // Add this to your manifest file,

Real Example: Stream Booth - Fork it on GitHub: https://github.com/JacopoDaeli/bestof-web-paris-2015