< Flock | Volunteers
Notes by Dave Crossland http://understandingfonts.com/blog/2013/08/flocktofedora-day1/
node-webkit
You know PhoneGap, that takes a HTML5 app and turns it into a iOS/Android app.
NodeWebKit does the same thing for desktops.
I’m from Jack Russel Software, we build mobile and web apps for Healthcare IT.
What is it? —————————————–
You have ChromeFrame, the Chrome browser, and its event loop is melded to the event loop in NodeJS.
Build an app with HTML/CSS and JS – anything you can do in HTML5 on the client and NodeJS on the server. It tacks a little packaging file for the manifest and it puts them together into a “NW.zip” zip archive.
NodeJS has over 30k packages, and you can also use ‘GYP’ to use native libraries as well as JS libraries.
Node-Webkit is fully cross platform – you can run package the same app for Mac and Windows and any UNIX platform that Chromium runs on.
With HTML5 you get WebRTC, WebGL, and all the other good stuff – you can make your own personal Skype with WebRTC. Its powerful.
One catch is, with GNU+Linux, you need the right codecs installed; some versions don’t have them pre-installed (h264 and MP3)
Web Cams work, the HTML5 File API means you can drag and drop files into the window. There are NPAPI plugins that can work with it too.
Why? —————————————–
There are several other things out there that do roughly the same thing.
Its all HTML5, there is no app-specific API like Adobe AIR – which they killed support for on GNU+Linux – and that had a proprietary API.
Combining the event loops of NodeJS and Chrome means that you run the server code at the same time as the client code.
Its easy and fun!
This is good for GAMES. The project founder made it for this reason. You can make apps and you don’t have to set up hosting for them; you can share the download bundle so people can use your software without a full cloud infrastructure.
When you are used to making Windows things, you make something that does what they need, bundle it, send it to them, and it runs your script :)
- Cross platform.
There are 3 platform parts. You make a NW zip file, and you cat that together with the platform part. On GNU+Linux you have the NW zip and the binary that concatenate together. On Mac OS X you put it into the normal app bundle and put it into a DMG file system image.
On Windows, you make a ZIP that contains the NW.zip+binary and some DLLs. You make the Zip a ‘executable ZIP’ that will unpack it and run it, or you can package it with a ns-installer or similar to put it in c:\program files\app-name
Setting up your dev environment in Fedora —————————————————————————
Get curl
$ sudo yum install -y curl
get the node webkit package
$
on recent GNU+Linux distributions (Fedora and Ubuntu) you need to symlink the libudev library to where Chromium expects it:
$ sudo ln -s /usr/lib64/libudev.so.1 /usr/lib64/libudev.so.0
then put nw in your path :)
$ echo ‘$PATH:/path/to/nw’ >> ~/.bashprofile $ source ~/.bashprofile
$ nw
Then you should see a browser window showing some ASCII art, and it has the normal Chromium dev tools.
So lets create a Hello World.
You need an index.html and then a package.json, and that JSON will set the name – window title – the html page to load on start – and if the toolbar should be displayed.
$ touch index.html
$ touch package.json
$ edit package.json
“
{
‘name’: ‘Help World’,
‘main’: ‘index.html’
}
“
$ edit index.html
“
<html>
<body>
Hello World
</body>
</html>
“
$ nw .
And we see it :)
We have all NodeJS method available:
$ edit index.html
“
<html>
<body>
Hello World
<script>
document.write(process.version);
</script>
</body>
</html>
“
$ edit index.html
“
<html>
<body>
Hello World
<script>
var http = require(‘http’);
http.createServer(function(req, res) {
res.end(‘Welcome’);
document.write(‘Something’);
}.
document.write(process.version);
</script>
</body>
</html>
“
So you can use this to show a web app to an end user, and this runs your web app locally in a self container server-client bundle.
Live Code a simple application —————————————–
We could do a TODO app….
$ mkdir todo; $ cd todo; $ npm install bower -g;
but lets look at a simple chat app
$ cd ~/src $ git clone git://github.com/twilson63/flockChat.git; $ cd flockChat $ npm install $ bower install
bower is a client library package manager, so you can keep all your client side libraries up to date easily.
$ vim package.json $ vim app/controllers/main.js $ nw . $
This shows you how to use Angular JS in nw. angularFire() is a ‘promise’ that simplifies the code a lot.
So you can see that this works. now start a new terminal window and run the program again, and you see that it is commencing.
Single browser means you have easy control over the browser experience.
Demos and Real World, Shipping Examples —————————————–
This is not just a toy; some people are using this in businesses for shipping applications.
LightTable is the first big NodeWebkit app – www.lighttable.com – and Brett Victor laid out a vision a year ago, at worrydream.com, to see your code execute as you write it. This guy implemented his ideas. It loads snappy, and its powerful. Its build for Closure, and a lot of Closure devs are using it for their day to day work.
How may of you use MarkDown? haroopad is for you. http://pad.haroopress.com – and it uses very nice fonts :) It has GitHub’s Markdown extension, with colour coding of MarkDown code blocks.
There is a complete list of other Real World, Shipping Examples are in the nw wiki, http://github.com/rogerwang/node-webkit/wiki
There’s a kiosk mode, to make kid-safe things (which is on my mind a lot)
References —————————————–
Wiki
Presentation
Questions —————-
Dave Crossland: Could you talk more about using non-JS libraries?
A: You can use npm to get pre-made libraries, e.g. npm install mysql; then just var mysql = require(‘mysql’); :) So you can include the MS sql library, tedious, and you have a fully native JS sql library on Windows without extra libraries. Instead of writing batch files, you can give the user a very easy to run script. You can C libraries that have to be compiled in node, but you have to take some different steps; if you have a native module, to cpmile C/C++ code, you run it against the mw-gyp version of gyp. There is LevelUp, a way to use Level DB (a popular library) inside NodeJS, which means you can use a desktop library inside a web app. CouchDB is also popular.
Q:
A: You can use Browserify to bundle all your JS into a single file:
$ browserify index.js $
Q: What do you use it for?
A: Very rich mockups. We make the HTML5 and leverage that into real applications that we host.
Q: So its for prototyping and rich demos?
A: Right. We have 1,000 feature requests, and we can use this to make little utility programs that help solve a specific need outside the main application development lifecycle. Also, we use it to deliver phone gap apps to QA teams. So they can test an app before you get to the phone testing thing; they don’t ned hardware.