How to develop Desktop Apps using HTML CSS JavaScript

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

NOTE  AppJS is deprecated and not recommended anymore   Take a look at NW js instead

User · Answer

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

User · Answer

You can build Javascript apps with Adobe AIR    http   www adobe com products air html

User · Answer

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

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

Examples related to javascript

Examples related to html

Examples related to css

Examples related to desktop-application