5 ms·

Show HN: Workflow for front end developers to create desktop applications

101 points by anonyfox 13y ago

CraigJPerry 13y ago
Is there any site for collating workflows?
- anonyfox 13y ago
  You mean something like this: http://brunch.io/skeletons.html http://brunch.io/skeletons.html ?
- Pxl_Buzzard 13y ago
  Yeoman[1] has a good browser for community-made generators. [1] - http://yeoman.io/community-generators.html http://yeoman.io/community-generators.html
ThePhysicist 13y ago
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.
- anonyfox 13y ago
  Similar spirit, different tech stack i'd say. :)
JeffJenkins 13y ago
Does this let you do anything on the host OS that you could do with a node.js library?
- anonyfox 13y ago
  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.
  - JeffJenkins 13y ago
    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 https://github.com/TooTallNate/NodObjC
CmonDev 13y ago
Now let's get rid of JS, HTML and Node and we are onto something!
hcentelles 13y ago
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.
- anonyfox 13y ago
  you may ship your app with any database you want. Easiest to use is a pure-JS datastore, like https://github.com/louischatriot/nedb 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.
- jchrisa 13y ago
  Couchbase Lite is available for Mac, and has JSON storage and offline sync. Of course it's all open source. http://mobile.couchbase.com http://mobile.couchbase.com
jjsz 13y ago
Does anyone have a similar golang workflow that they would like to share?
podperson 13y ago
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?
- anonyfox 13y ago
  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.
  - jakejake 13y ago
    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.
    - anonyfox 13y ago
adolfojp 13y ago
I just started doing something very similar but with TypeScript instead of CoffeeScript. I really appreciate you sharing your workflow with us.
- anonyfox 13y ago
  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 https://github.com/scotch/angular-brunch-seed and add the skeleton you want from http://brunch.io/skeletons.html 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. :)
nilsbunger 13y ago
I love the title: "Bootstrap a crossplatform Desktop Application using tools you probably never heard of."
rhspeer 13y ago
I just wrapped up a project not using this full workflow, but using node-webkit + grunt-node-webkit-builder. 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/ 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 ;)
- anonyfox 13y ago
  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.
  - rhspeer 13y ago
    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
- rhspeer 13y ago
  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.
nickthemagicman 13y ago
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?
- anonyfox 13y ago
  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.
  - nickthemagicman 13y ago
    That is like buttah. Thanks for the goodness.
    - anonyfox 13y ago
      Spread the word if you like it! The bigger the community around node-webkit gets, the better :)
rolleiflex 13y ago
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 http://www.getaether.net [1] http://github.com/nehbit/aether-public http://github.com/nehbit/aether-public
- anonyfox 13y ago
  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.
  - rolleiflex 13y ago
    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.
    - anonyfox 13y ago
      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.

101 points by anonyfox 13y ago

CraigJPerry 13y ago

Is there any site for collating workflows?

anonyfox 13y ago
You mean something like this: http://brunch.io/skeletons.html http://brunch.io/skeletons.html ?
Pxl_Buzzard 13y ago
Yeoman[1] has a good browser for community-made generators. [1] - http://yeoman.io/community-generators.html http://yeoman.io/community-generators.html

ThePhysicist 13y ago

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.

anonyfox 13y ago
Similar spirit, different tech stack i'd say. :)

JeffJenkins 13y ago

Does this let you do anything on the host OS that you could do with a node.js library?

anonyfox 13y ago
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.
- JeffJenkins 13y ago
  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 https://github.com/TooTallNate/NodObjC

CmonDev 13y ago

Now let's get rid of JS, HTML and Node and we are onto something!

hcentelles 13y ago

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.

anonyfox 13y ago
you may ship your app with any database you want. Easiest to use is a pure-JS datastore, like https://github.com/louischatriot/nedb 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.
jchrisa 13y ago
Couchbase Lite is available for Mac, and has JSON storage and offline sync. Of course it's all open source. http://mobile.couchbase.com http://mobile.couchbase.com

jjsz 13y ago

Does anyone have a similar golang workflow that they would like to share?

podperson 13y ago

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?

anonyfox 13y ago
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.
- jakejake 13y ago
  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.
  - anonyfox 13y ago

adolfojp 13y ago

I just started doing something very similar but with TypeScript instead of CoffeeScript. I really appreciate you sharing your workflow with us.

anonyfox 13y ago
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 https://github.com/scotch/angular-brunch-seed and add the skeleton you want from http://brunch.io/skeletons.html 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. :)

nilsbunger 13y ago

I love the title: "Bootstrap a crossplatform Desktop Application using tools you probably never heard of."

rhspeer 13y ago

I just wrapped up a project not using this full workflow, but using node-webkit + grunt-node-webkit-builder. 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/ 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 ;)

anonyfox 13y ago
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.
- rhspeer 13y ago
  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
rhspeer 13y ago
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.

nickthemagicman 13y ago

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?

anonyfox 13y ago
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.
- nickthemagicman 13y ago
  That is like buttah. Thanks for the goodness.
  - anonyfox 13y ago
    Spread the word if you like it! The bigger the community around node-webkit gets, the better :)

rolleiflex 13y ago

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 http://www.getaether.net [1] http://github.com/nehbit/aether-public http://github.com/nehbit/aether-public

anonyfox 13y ago
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.
- rolleiflex 13y ago
  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.
  - anonyfox 13y ago
    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.