How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

Asked 2/9, 2012 at 1:32 Answered 15/7, 2014 at 13:17

Solved javascript html css desktop-application

197

First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).

As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.

I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.

So how does one go about this? Exactly what do I need/need to know?

Mandeville answered 2/9, 2012 at 1:32 Comment(8)

It should be noted that there are at least two non-exclusive tiers of web-app-iness. One would be client-side, single-page application style apps, and one would be an app that maintains state with a database or something. (Of course, the best apps are both.) You can learn how to do one without learning much about the other. – Freese 2/9, 2012 at 1:35

Another related thread here [Can you do Desktop Development using JavaScript?][1] [1]: #109899 Regards, Ben – Pedicle 2/9, 2012 at 1:46

You do it wrong. Web is not designed to desktop app. Period.If you want you can use QML/QtQuick, which is a good trade-off (but it remains desktop, not web !) – Saxton 8/8, 2015 at 12:43

similar here： #109899 – Mediative 5/2, 2016 at 6:35

electron.atom.io – Lovieloving 11/5, 2016 at 15:54

@tuple_cat - I guess a lot of people didn't see this because it's only a comment. Knowing that even "VS Code" is built with electron is great. Thanks! – Riorsson 22/7, 2016 at 6:52

Slack uses MacGap github.com/MacGapProject/MacGap1 and github.com/MacGapProject/MacGap2 – Mickimickie 29/12, 2016 at 18:3

Why don't you ask your friend? o.O – Satirist 17/9, 2017 at 23:29

You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.

It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.

It also allows you to create functions that can be called directly from JavaScript.

It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.

You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)

Also, as pointed out by @Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

Afford answered 2/9, 2012 at 8:48 Comment(5)

CEF has chrome dev tools built in it so you can use it to debug js. AppJS also has low level access to OS using nodejs APIs. – Navel 12/9, 2012 at 9:22

The team at Bracket.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell – Interleaf 13/8, 2013 at 18:36

I'm currently using CEF, and Eclipse as dev tools, and it's possible to link CEF to Chrome Developper Tools by passing --remote-debugging-port=8080 to the run configurations for program args, then go to localhost:8080 in Chrome. So please remove the part - t's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug. - – Jessabell 18/6, 2015 at 7:19

Also, I'm starting to develop Kontena コンテナ github.com/jhg/kontena for development a solution for Win32, Linux, Unix like, Mac and SmartPhone that will be based in CEF, PhoneGap, Backet.io of Adobe, AppJS, etc. It is so unstable and only is a prototype now for get a MVP, is writed in Python for test concept but will be translate code to C++/C with QT5 (now use QT4) and when be in C++/C start translation for mobil support. – Frederick 7/2, 2016 at 16:21

@JHG good job.. Let us know when its officially released and bug-fixed – Afford 8/2, 2016 at 16:52

NW.js

(Previously known as node-webkit)

I would suggest NW.js if you are familiar with Node or experienced with JavaScript.

NW.js is an app runtime based on Chromium and node.js.

Features

Apps written in modern HTML5, CSS3, JS and WebGL

Complete support for Node.js APIs and all its third party modules.

Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other

Easy to package and distribute apps

Available on Linux, Mac OS X and Windows

You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.

Holding answered 15/7, 2014 at 13:17 Comment(3)

Seconded. Great tool. – Jasperjaspers 5/9, 2014 at 11:40

But this cant be distributed between people without asking them to install node and node-webkit, right? – Doone 27/6, 2015 at 11:2

@JānisGruzis No, you shipped your app with NW.js binaries. – Indite 16/3, 2016 at 14:4

~~Awesomium makes it easy to use HTML UI in your C++ or .NET app~~

Update

My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.

Towney answered 1/7, 2014 at 13:49 Comment(0)

NOTE: AppJS is deprecated and not recommended anymore.

Take a look at NW.js instead.

Wentzel answered 2/9, 2012 at 1:43 Comment(2)

This appears to have been deprecated by the appjs creators – Axinomancy 14/7, 2014 at 14:50

@DanEsparza thanks, I improved my answer – Wentzel 18/5, 2015 at 1:21

It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.

One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.

You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.

Liturgics answered 29/11, 2013 at 6:24 Comment(2)

Looked promising, but not being developed anymore it looks like. The core team is now working on something call TideKit but it takes forever for them to release it - PLUS it will cost money :( – Glossography 22/6, 2015 at 20:29

Yes, pity. It did look promising at the time I answered though. I guess that's one reason why they frown on questions regarding recommendations for stuff. – Liturgics 19/10, 2015 at 4:20

Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.

What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.

I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)

Tollmann answered 2/9, 2012 at 7:45 Comment(1)

It uses webkit for application but the main soft is not based on html/js – Anelace 12/11, 2012 at 11:8

I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.

In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:

Google Chrome Frame is a plug-in designed for Internet Explorer based on the open-source Chromium project; it brings Google Chrome's open web technologies to Internet Explorer.

You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.

I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.

Epicycloid answered 2/9, 2012 at 1:42 Comment(0)

You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html

Foetor answered 21/5, 2013 at 19:4 Comment(0)

CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.

If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

Saragossa answered 24/11, 2013 at 14:49 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

NW.js

Update

Recommended topics

Hot tags