Show HN: Workflow for front end developers to create desktop applications(github.com)
github.com
Show HN: Workflow for front end developers to create desktop applications
https://github.com/Anonyfox/node-webkit-hipster-seed
38 comments
Second that. Our app [1] is a web builder that lets you edit multiple pages at the same time and use Less to create your design - both through GUI and code editor.
Node-webkit works great. Our build process is simple: minimizing js files and copying files into a release folder. Grunt node-webkit takes care of creating binaries for Mac and Win. Making changes in development is easy. You basically just refresh the page in node-webkit and new version is loaded.
We use the same code base in the desktop app and online [2]. The only difference is that desktop app has additional code for working with local files and native windows.
At first I was doing it with Chrome packaged apps. But the security model there is more complex and working with local files and supporting the ability to open & edit pages from the internet required jumping through many loopholes and passing messages around between frames with different security privileges.
With node-webkit everything simply just worked from the start.
[1] http://pinegrow.com [2] http://pinegrow.com/edit.html?page=index.html
Node-webkit works great. Our build process is simple: minimizing js files and copying files into a release folder. Grunt node-webkit takes care of creating binaries for Mac and Win. Making changes in development is easy. You basically just refresh the page in node-webkit and new version is loaded.
We use the same code base in the desktop app and online [2]. The only difference is that desktop app has additional code for working with local files and native windows.
At first I was doing it with Chrome packaged apps. But the security model there is more complex and working with local files and supporting the ability to open & edit pages from the internet required jumping through many loopholes and passing messages around between frames with different security privileges.
With node-webkit everything simply just worked from the start.
[1] http://pinegrow.com [2] http://pinegrow.com/edit.html?page=index.html
Very interesting! Could you drop a line on the github repo how to use the phonegap build process with an app build for node-webkit? this would be awesome! I'll not have the time to make your described wonder happen, but at least truly crosscompiling apps for desktop & mobile is a thing I'd like to see happen.
the easiest way is to use build.phonegap.com and connect it to your github.com repo, as well as your src directory in the grunt build tool.
Cordova is the open source project uses the same code magic that phonegap does, and can be installed on your local machine. I have not mixed it into the grunt built tool yet, but I think the hardest part is installing cordova & ready the documentation
Cordova is the open source project uses the same code magic that phonegap does, and can be installed on your local machine. I have not mixed it into the grunt built tool yet, but I think the hardest part is installing cordova & ready the documentation
no idea why I said pretty great multiple times, after reading several posts on american stereotypes, I think I just need to drive my truck to a restaurant and tip largely to complete my day.
I am actually doing something very similar to this with Aether, but it runs on Qt, which offers far superior native platform support, Python in backend, and Angular.js in frontend. If there is any interest, I can extract this workflow from the main app and release it. Aether[0] itself is available here [1] too.
[0] http://www.getaether.net
[1] http://github.com/nehbit/aether-public
[0] http://www.getaether.net
[1] http://github.com/nehbit/aether-public
Kudos for you for similar thoughts, but you'll missing some points (or correct me if this isn't meant to be offensive...):
1. The "Trick" of the node-webkit based skeleton is, that frontend-developers must no longer think in terms of "frontend" and "backend", and therefore do not need to use different languages/libraries for different parts of the application. And: python is not that common among frontend developers.
2. NPM is just superior to pip.
3. I can't see any hint on your given links that you have a tech that is aimed at building crossplatform desktop applications without hassle and with maximized productivity. Maybe you should market your project differently.
1. The "Trick" of the node-webkit based skeleton is, that frontend-developers must no longer think in terms of "frontend" and "backend", and therefore do not need to use different languages/libraries for different parts of the application. And: python is not that common among frontend developers.
2. NPM is just superior to pip.
3. I can't see any hint on your given links that you have a tech that is aimed at building crossplatform desktop applications without hassle and with maximized productivity. Maybe you should market your project differently.
I think I phrased the parent comment badly— Aether isn't the project, it's a project on my own in which in the building process I came up with that Python + Qt + Javascript stack. I was saying that if there is enough interest, I can extract that stack from Aether, and make it an open source bootstrap framework on its own.
1) You will always need to think about the backend, whether be it in Javascript or in whatever else. Using the same language helps of course, but Python and Javascript is a nice combo, too.
2) Virtualenv + Pip is pretty magnificient, but I don't have enough experience in npm other than the usual 'npm install ...' so I won't comment on this.
1) You will always need to think about the backend, whether be it in Javascript or in whatever else. Using the same language helps of course, but Python and Javascript is a nice combo, too.
2) Virtualenv + Pip is pretty magnificient, but I don't have enough experience in npm other than the usual 'npm install ...' so I won't comment on this.
The point of node-webkit is, that you do not have to think about a backend. Really. If you are in the middle of you angular app and want to read a file, you just have to
require("fs").readFile("myfile.txt", ...
directly in-place. You can query databases, do requests, and so on without any problem and natively inside your angular app. Everything that node.js could do, which is everything a webserver could do.
And, in combination with NPM, you have everything you ever need just a `npm install ...` away for direct use in you angular app.
require("fs").readFile("myfile.txt", ...
directly in-place. You can query databases, do requests, and so on without any problem and natively inside your angular app. Everything that node.js could do, which is everything a webserver could do.
And, in combination with NPM, you have everything you ever need just a `npm install ...` away for direct use in you angular app.
This looks really awesome.
Can I just drag the app folder and drag and drop onto any supported desktop?
Or will I have to install a bunch dependencies?
Can I just drag the app folder and drag and drop onto any supported desktop?
Or will I have to install a bunch dependencies?
you just type `npm run deploy`, and for every target system there will be a application folder placed in "/dist", which you can basically just drag'n'drop.
Endusers just have to doubleclick the executable inside this folder to run your app.
Endusers just have to doubleclick the executable inside this folder to run your app.
That is like buttah. Thanks for the goodness.
Spread the word if you like it! The bigger the community around node-webkit gets, the better :)
I just started doing something very similar but with TypeScript instead of CoffeeScript. I really appreciate you sharing your workflow with us.
It's just personal choice I'd say. It should be rather trivial to fork my repo, throw out all the stuff I used from https://github.com/scotch/angular-brunch-seed and add the skeleton you want from http://brunch.io/skeletons.html since they're similar. This way you can keep all the scripts and tools for the workflow, but use the meta-languages you like. :)
I love the title: "Bootstrap a crossplatform Desktop Application using tools you probably never heard of."
Is there any site for collating workflows?
Yeoman[1] has a good browser for community-made generators.
[1] - http://yeoman.io/community-generators.html
[1] - http://yeoman.io/community-generators.html
You mean something like this: http://brunch.io/skeletons.html ?
Nice project! I recently thought a lot about how to blend web & desktop apps and currently my stack consists mostly of Qt and Python (e.g. via PySide or PyQt). Qt is a really awesome toolkit and allows me to make a cross-platform app with native look and feel. At the same time, I can integrate dynamic web pages via QWebKit and make them exchange data with my application. In addition, Qt makes it really easy to integrate custom Qt widgets into the content displayed by QWebkit, roughly like you can with ActiveX components. Also, you can make an executable via py2exe or similar packages.
Similar spirit, different tech stack i'd say. :)
Does this let you do anything on the host OS that you could do with a node.js library?
It does. File system, databases, requests, whatever. At least I am not aware of edge cases currently. Only be aware that C++ node.js modules are incompatible with node-webkit, you have to build these modules with nw-gyp. A little inconvenient, but should work fine.
Neat. An Objective C bridge to access OS X's frameworks was specifically what I was thinking of, and it looks like there is one: https://github.com/TooTallNate/NodObjC
Now let's get rid of JS, HTML and Node and we are onto something!
I'm wondering if anyone here has real experience with node-webkit, I'm looking into it to implement a desktop offline version of my app but I'm not sure if their offline DB layer is capable of handle data in the hundreds of megabytes order.
Couchbase Lite is available for Mac, and has JSON storage and offline sync. Of course it's all open source. http://mobile.couchbase.com
you may ship your app with any database you want. Easiest to use is a pure-JS datastore, like https://github.com/louischatriot/nedb or sqlite. I prefer NeDB, it should work just fine for <= 1GB of data.
If you want to use a non-embedded database, you have to build your own installer, though.
The solutions offered by the chromium part (localStorage, indexedDB) could be worth a look, too. But i have no experience with them when using bigger amounts of data.
If you want to use a non-embedded database, you have to build your own installer, though.
The solutions offered by the chromium part (localStorage, indexedDB) could be worth a look, too. But i have no experience with them when using bigger amounts of data.
Does anyone have a similar golang workflow that they would like to share?
The underlying runtime technology -- node-webkit -- seems pretty interesting.
This particular workflow would be more interesting to me if it was clearer that you could pick and choose your tools. I don't want to use Angular, Jade, or Coffeescript (for example). And (as per another thread) a workflow that included an out-of-box offline data storage option would be nice.
As I understand it, if I don't use tools that have a "compilation" phase, my workflow using node-webkit would be to save my files and restart node-webkit, right?
This particular workflow would be more interesting to me if it was clearer that you could pick and choose your tools. I don't want to use Angular, Jade, or Coffeescript (for example). And (as per another thread) a workflow that included an out-of-box offline data storage option would be nice.
As I understand it, if I don't use tools that have a "compilation" phase, my workflow using node-webkit would be to save my files and restart node-webkit, right?
It depends. At least before finally building your executables, you might want to concat & minify your assets and so on, since this will heavily increase the startup time of your app if you don't. (been there, done that, ... :D)
To generate the final executables, you'll end up hacking together some shell scripts or the like, at least if you do this on a regular basis.
Both points together: an automated asset pipeline and an easy-to-use build tool is included.
+1 for the data storage part, i'd love to hear some deeper thoughts in the github issues part...
about the chosen technologies: these are my preferences. After spreading my app skeleton idea I expect similar stuff to emerge for other personal preferences. But finally: one of my main goals of spreading the word here is to bring the idea of node-webkit to the folks, since this is an awesome open source project and could use some more helping hands.
To generate the final executables, you'll end up hacking together some shell scripts or the like, at least if you do this on a regular basis.
Both points together: an automated asset pipeline and an easy-to-use build tool is included.
+1 for the data storage part, i'd love to hear some deeper thoughts in the github issues part...
about the chosen technologies: these are my preferences. After spreading my app skeleton idea I expect similar stuff to emerge for other personal preferences. But finally: one of my main goals of spreading the word here is to bring the idea of node-webkit to the folks, since this is an awesome open source project and could use some more helping hands.
I ended up writing one app (and making significant headway on a second) using node-webkit yesterday, so many thanks for bringing it to my attention.
In general, a web app has to get pretty ridiculously bloated for javascript minification and so forth to impact launch time on a local file system. I'd call this premature optimization. (In my day job we're working on a pretty huge web app and we don't use any build process except -- just recently -- precompiling our LESS files (mainly to handle IE and mobile devices)). For us, the downside of a build-process to the debug cycle is a far bigger hit than the benefit of minification. (Perhaps we were overreacting to another project which used maven and had 2-3 minute builds...)
Of course if you're using coffeescript or clojurescript or whatever there's no avoiding some kind of build process.
It strikes me that automating and simplifying the build process is exactly the kind of thing you could wrap up in a pretty nice node-webkit application!
In general, a web app has to get pretty ridiculously bloated for javascript minification and so forth to impact launch time on a local file system. I'd call this premature optimization. (In my day job we're working on a pretty huge web app and we don't use any build process except -- just recently -- precompiling our LESS files (mainly to handle IE and mobile devices)). For us, the downside of a build-process to the debug cycle is a far bigger hit than the benefit of minification. (Perhaps we were overreacting to another project which used maven and had 2-3 minute builds...)
Of course if you're using coffeescript or clojurescript or whatever there's no avoiding some kind of build process.
It strikes me that automating and simplifying the build process is exactly the kind of thing you could wrap up in a pretty nice node-webkit application!
The sky is the limit, node-webkit is indeed very powerful when you know what you're doing.
For the build process: just try it with brunch, e.g.: with my skeleton (a simple todo app is included for playing around). It will take ~4sec to start up initially, but then work close to perceived realtime, taking 50ms or so on my machine to reflect any changes you do, plus: livereload automatically the browser window, so you actually save the "press reload" step in most cases.
And: since i'm using only meta-languages that require a compile-step (!), i have basically a useful error-checking (incl. linting!) on coding time, without time-intensive inspecting the result in-browser. Do not underestimate this. Sure, finally i have to confirm in the browser (and/or testsuite) that everything works, but typos and other common bugs are "growled" as i type.
For the build process: just try it with brunch, e.g.: with my skeleton (a simple todo app is included for playing around). It will take ~4sec to start up initially, but then work close to perceived realtime, taking 50ms or so on my machine to reflect any changes you do, plus: livereload automatically the browser window, so you actually save the "press reload" step in most cases.
And: since i'm using only meta-languages that require a compile-step (!), i have basically a useful error-checking (incl. linting!) on coding time, without time-intensive inspecting the result in-browser. Do not underestimate this. Sure, finally i have to confirm in the browser (and/or testsuite) that everything works, but typos and other common bugs are "growled" as i type.
> Do not underestimate this.
Absolutely. But don't overestimate it either! Most serious bugs compile perfectly well -- and so you're trading quick detection of simple errors for more difficulty dealing with the hard stuff.
Absolutely. But don't overestimate it either! Most serious bugs compile perfectly well -- and so you're trading quick detection of simple errors for more difficulty dealing with the hard stuff.
The nice thing is, that brunch automatically generates proper sourcemaps, so you can debug your application pretty well. Soooo, you have the little stuff catched instantly and are able to debug higher-abstraction code (!) without much hassle. Of course, this just works in my specific case that simple... :)
Thanks for putting this together! Do you have any links to scripts or examples for doing the packaging as you mention? I've been trying to keep my eye on this for a while and never seem to find anything.
I think really the holy grail for a lot of people is an app built with web utils and running on node - but having some type of packaging system to create executables that look just like any other desktop app.
I know there's various options out there but it seems like Chromium is the cleanest - Just everything I found wants you to install it as a browser "app" or plugin or whatever.
I think really the holy grail for a lot of people is an app built with web utils and running on node - but having some type of packaging system to create executables that look just like any other desktop app.
I know there's various options out there but it seems like Chromium is the cleanest - Just everything I found wants you to install it as a browser "app" or plugin or whatever.
the packaging just works, just type `npm run deploy`. It uses https://github.com/mllrsohn/grunt-node-webkit-builder behind the scenes.
You'll get a native executable for Windows, OSX and Linux32/64, ready to ship and double-click-able. Isn't this what you want? :)
You'll get a native executable for Windows, OSX and Linux32/64, ready to ship and double-click-able. Isn't this what you want? :)
ah that's fantastic - I mis-read and thought that was how you launch the app, rather than package it. thanks!
To answer a few questions posed here: 1) It worked great for me, but we were doing a very simple presentation type app
2) grunt-node-webkit-builder is pretty great, saves ~15 minutes for each build, grunt takes a little bit to get going, but is easier than most php / ruby tools I've used
3) You don't have to use Angular, Jade, or Coffescript
4) While I did not take advantage of using a database, I suspect someone else has and it's not a big deal.
Also for anyone interested the same code we ran through node-webkit, worked well with build.phonegap.com, which means it would also work with Cordova (http://cordova.apache.org/) adding mobile device support into the build process would be very impressive, as would a node-webkit GUI build tool.
If I had all the time & attention span in the world, combining a node desktop+mobile build tool with an IDE like light table into a complete package that had a simple installer & GIT integration would be pretty great, and mostly assembling parts instead of re inventing the wheel.
However, I have bills to pay so I need to get back to figuring out how a big corporations's imaginary friends will make purchasing decisions ;)