Explorations of using node-webkit + ExtJS4 to build a desktop application

Since the demise of Sencha Desktop Packager and the non-arrival of any examples or clues about how TideKit might actually work I decided to have a look at node-webkit and see whether or not it would work as a desktop packager for ExtJS4. What I say below might work with ExtJS5 but I havent upgraded yet since it is still quite new.

Node-webkit is an executable (one each for Win, OSX, Linux). It is a chromium webkit browser wrapped by a “shell” that adds JavaScript libraries so that you can access the local file system, memory, native windows and menus, system tray, etc etc of the computer it is running on. Hence, it creates the opportunity to turn HTML5/JS/CSS into a desktop application. The extra JavaScript is provided by NodeJS (well the V8 JS engine actually, but via NodeJS libraries). Hence the name “node-webkit”.

The first observation is that there was a lack of any “Using node-webkit with ExtJS4” information. Lots of little bits and clues but no overall approach. So, I thought I would share my exploration to make the trail easier for the next person.

The second observation is that you can make a desktop app with just node-webkit. However, unless you want to re-invent the wheel in terms of making Http requests or direct remoting (for example) you will also need to install NodeJS separately so you can use the NPM packager to easily download the various NodeJS libraries that you might want to use. There are nearly 90,000 of them!

And, of course, you will need to be familiar with ExtJS4 and Sencha Cmd. I wont be explaining any of that.

Useful resources

These are the things that helped me get my head around the concept:

https://www.youtube.com/watch?v=lNpjx4BJlH4 – A series of 6 videos for beginners. Very helpful.

https://www.youtube.com/watch?v=XmHh4RrlpIk – An introduction by Roger Wang, the guy that made node-webkit.

http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit–net-36296

http://www.amazon.com.au/Windows-Desktop-App-Creation-node-webkit-ebook/dp/B00EEYFFVC/ – a short, inexpensive eBook that covers the main aspects clearly. Great for beginners. Even though the book is for Windows users, OSX and Linux users will also find the info useful.

(I will add more resources as I find them).

Installation

Installing node-webkit went without a hitch. Just download the installer for your OS from the GitHub page and follow the dots.

First tests

I then used the above mentioned resources to make my first desktop app. I followed the tuts introductory tutorial. That all worked without a hitch. Very excited by now.

With ExtJS4:
To test the ExtJS compatability I created a new ExtJS app using Sencha Cmd generate, built the default production app, then ran it in node-webkit and ….. it worked! More excitement.

Some learnings here:

1. To test your app you basically pass the folder containing your app (ie the folder with the main html file in it) to nw.exe. You *can* drag and drop it but I found the fasted way was to create a batch file (I am using Win7) in the same folder as the app and then run that. The batch file contents (for my machine) looks like:
..\..\node-webkit-v0.10.2-win-ia32\nw ./
which basically says (go back up to the folder containing the nw.exe and run it with the current folder as the parameter. You could also add the node-webkit folder to your PATH (on windows) to avoid needing the path in the batch file.
Edit: And/or of course maybe rename the folder to (say) NW so the folder or path doesnt need updating when you update your version of node-webkt!

Executing nw opens the window and displays your app (as you would have seen in the video series above.

2. Note that my initial testing built the ExtJS app first then passed that to NW. Also at this stage there is no NodeJS library being used, It is just my ExtJS app. It gets a bit more complicated when you want to pass the unbuilt version (so you can debug your app via the NW chrome debugger). More on that below – I am still exploring all that.

NodeJS

Now, installing NodeJS so I can require the appropriate extra libraries. This wasn’t as simple initially. The default installation folder is C:\Program files\nodejs. That seems fair enough. However, even though I am logged in as Adminstrator on my computer file permission problems meant that I couldn’t run npm (the package installer). See this post for details of errors. My solution was to uninstall NodeJS and reinstall in C:\nodejs. That worked perfectly and I could run npm without errors.

Using NodeJS packages (modules)

To use the downloaded NodeJS packages you need to install them in the node_modules folder at the root of your app. It must be called node_modules. So, one way to install a module is to run npm install {package name} from a command line in the root of your app’s folder. The node_modules folder will be created if necessary and the module will be saved in that folder. For me I just ran  C:\nodejs\npm install httpreq from a terminal / command line (to load the httpreq module, for example).

More tests: Adding Node to ExtJS4

This is preliminary. Starting with the default ExtJS app generated by Sencha Cmd I added the following:
1. The require() statements which I placed above Ext.define(‘App.view.Main’, {:

var gui = require('nw.gui');
var httpreq = require('httpreq');

2. a toolbar to the centre Tab panel with some test buttons

{
        region: 'center',
        xtype: 'tabpanel',
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                text: 'Open file',
                handler: function(btn, e) {
                    // Test opening a Word Doc
                    console.log('Pressed open file');
                    gui.Shell.openItem('Test1.doc');
                }
            }, {
                xtype: 'button',
                text: 'Http request',
                handler: function(btn, e) {
                    // Test making a http request
                    // Using https://www.npmjs.org/package/httpreq
                    var url = "http://www.google.com";
                    console.log(url);
                    httpreq.get(url, function(err, res) {
                        if (err) return console.log(err);
                        console.log(res);
                    });
                }
            }]
        }],
        items: [

            {
                title: 'Center Tab 1',
                html: 'Hello first app'
            }
        ]
    }

I then built the production app and loaded it into NW as described above and yes! it works!

Next steps

My next task is to work out the best way to integrate ExtJS4 and node-webkit so that it is possible to run the uncompressed version of my app in NW so I can debug it using the chrome developer tools in NW. I will report back when I have done that!

Edit: Done. See Part 1

Advertisements

5 thoughts on “Explorations of using node-webkit + ExtJS4 to build a desktop application

  1. Hi Murray – thanks for sharing. While I was never a user of Sencha’s desktop packaging application, I am a long-time Sencha ExtJS developer. I’m very interested in the prospect of using this framework to package a desktop application. I wish to create a form of developer tool that interacts with files on the file system (in the form of meta data) but does it in a user friendly way for the end user. This seems like a good fit – although not sure how it might compare to TideSDK or others.

    Once thing you touched on was the challenge to run your application in an uncompressed manner inside NW. How are you going on that front. Is it possible, do you need to run it outside first to ensure it works??

    It would seem a showstopper if you had to bundle the application first before testing etc. Have you by chance tried building a project with Sencha Architect and using its bootstrap mechanism (although similar to Sencha Cmd) to leave the files in their uncompressed/minified form?

  2. Hi Jason, thanks for your message.

    I am very pleased to say that yes, it works brilliantly. I say that because when I run my unminified app via nwk it completes launching in about 2 seconds, with the debugger open and ready to go. The app I am developing has dozens of js files and I too have added local file system interaction as well as noSQL (neDB) and other node bits.

    I stopped using Sencha Architect – it didnt add much value for my work. Instead I cobbled together a component generator that takes a db table and builds tempate code (including the serverside bits). That works better for me and is another story!

    Since you are interested I will complete Part 2 of this blog post where I will describe the complete process from “sencha generate app App” right through to myApp.exe. I have only done this for Windows so far since that is my environment (although now I have a reason to buy a Mac and dual boot it with Linux for testing – another adventure!)

    I intend to write all that up over the next few days so maybe early next week I will post part 2.

    Thanks again for your interest.
    Murray

  3. Looking forward to your next installment Murray. I’d also be interested to discuss at some point your approach on the component generation from tables – interestingly I have done something similar. I have developed a framework extension to rails and extjs that allows me to read tables or metadata and build out the server side services and client-side components, all wired together with Ext.direct – fun times.

    • Thanks Jason. I am using ColdFusion and REST but the idea is the same. I find that approach saves lots of time. I generate specific instances of common design MVC patterns (eg populate a form with validations, make a grid or tree etc) for both client and server side then just delete the ones I dont need later. At some stage I will build a configuration widget – for now I just pass it the table name. I dont know about you, but my experience was that connecting and configuring the actual components was not the developmental bottleneck – configuring all the components (client and server) for a given table was. Hence this “table up” approach rather than “view down”.

      Anyway, I will write up the next installment of this nwk exploration next week.
      Cheers,
      Murray

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s