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

https://github.com/Anonyfox/node-webkit-hipster-seed

by anonyfox • 13 years ago

101 38 13 years ago

github.com

CraigJPerry• 13 years ago

Is there any site for collating workflows?

anonyfox14• 13 years ago

You mean something like this: http://brunch.io/skeletons.html ?

Pxl_Buzzard• 13 years ago

Yeoman[1] has a good browser for community-made generators.

[1] http://yeoman.io/community-generators.html

ThePhysicist• 13 years 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.

anonyfox14• 13 years ago

Similar spirit, different tech stack i'd say. :)

JeffJenkins2• 13 years ago

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

anonyfox14• 13 years 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.

JeffJenkins2• 13 years 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

CmonDev• 13 years ago

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

hcentelles• 13 years 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.

anonyfox14• 13 years 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 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• 13 years 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

jjsz• 13 years ago

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

podperson3• 13 years 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?

anonyfox14• 13 years 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.

jakejake2• 13 years 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.

podperson3• 13 years ago

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!

adolfojp• 13 years ago

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

anonyfox14• 13 years 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 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. :)

nilsbunger• 13 years ago

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

rhspeer3• 13 years 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/) 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 ;)

anonyfox14• 13 years 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.

rhspeer3• 13 years 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

rhspeer3• 13 years 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.

mattront• 13 years ago

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

nickthemagicman2• 13 years 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?

anonyfox14• 13 years 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.

nickthemagicman2• 13 years ago

That is like buttah. Thanks for the goodness.

rolleiflex2• 13 years 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

[1] http://github.com/nehbit/aether-public

anonyfox14• 13 years 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.

rolleiflex2• 13 years 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.

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

Related Stories