Node-Webkit ...and some CSS!

I saw Richard Anaya of Evernote speak on Node-Webkit at JavaScript Austin on Thursday night. Node-Webkit is a project based upon Chromium (the open source web browser project which powers the Google Chrome browser) and runs a browser at the desktop while using Node as a backend server-side technology. When you pull down the source code you will end up with an .exe file which when run will display a "Hello World" app. A browser will spin up at your desktop pointing to an .html file kept in the stuff you downloaded. The art of using Node-Webkit is one in which one refactors the dummy app into something meaningful, bringing in more HTML and JavaScript. Mr. Anaya asserted that, every app has a manifest which specifies a name for the project and a starting point. The GitHub site for Node-Webkit seems to suggest that this is a package.json file shaped like so:

{
   "name": "nw-demo",
   "main": "index.html"
}

 
 

Here, index.html is one's starting point and it could be changed out with another file if so desired. HTML and JavaScript may be referenced locally by way of file path or remotely by way of URL. You choose. This talk came with plenty of CSS that is new to this space such as:

-webkit-app-region: drag;

 
 

...which will make an element a place you may click and then drag to drag the whole of the application about the desktop. You may hide all title bars and borders in a Node-Webkit desktop app (again with interesting desktop-flavored CSS) and just use your own handles in this manner for this functionality. On a tangent, this talk also showed off plenty everyday CSS and some of it was new to me. For example:

.whatever: nth-child(3n-7)
{
   background-size: cover;
   height: calc(20% + 100px);
}

 
 

window.close() is a JavaScript example of how you might close one of the apps. Using Node one may write to flat files locally and do file IO stuff. That is where the Node end of things comes in. The example that was on exposition really used Node sparingly in this manner when it had to but otherwise showed off how easy it was to use the frontend skills you already have (HTML/CSS/JavaScript) to make a desktop application. Flat files that got saved out just had JSON in them. One may zip up all of their HTML/CSS/JavaScript files and rename the .zip file to package.nw and set package.nw next to the .exe file to clean up the noise of lots of files surrounding the .exe. The .exe will "know" by convention to try to find and look into the package.nw. One may take things one step further by using a tool such as The Engima Protector to ball up the supporting files into the .exe itself so that the application may be handed to another with only a single file (the .exe) as a deliverable. Something else I had not seen before was a man with a bald spot split in half by a Mohawk, but I seem to have captured it in my photo.