Related
I want to program a desktop app in javascript (with web technologies) and looked for a comparison between Electron and Chrome Apps.
Everything I need seems to be possible with Chrome Apps, but there's a big hype around Electron/NW.js. What are the advantages of Electron? Is it due to the large amount of Node packages?
I think the functional differences are clear to me.
Pros and cons like:
+ Chrome Apps can run on Chrome OS
- Chrome Apps needs an installed Chrome Browser
...
UPDATE 2016-08-20:
As Eduardo pointed out, Google announced that they'll discontinue Chrome Apps for all platforms except ChromeOS. So I think the answer to this question is obvious now.
For all of you who developed a Chrome App and are interested in migrating it to the web here's a guide from Google: https://developers.chrome.com/apps/migration
Or, as Google also mentioned, you migrate it to Electron or NW.js.
You can totally compare electron and chrome packaged Apps. They are very similar. For both of them you get:
Develop your Desktop App using Web Technologies
App runs on top of Chrome
Automatic updates. Though in Chrome you get it for free, for Electron you need to do some work.
OS Integration - Both have better integrations with the OS than a normal website, but Electron supports a wider range of OS integration.
Work offline or online.
Both work on Linux, OSX and Windows. Chrome Web Apps also work on Chromebooks.
Here are the differences:
Electron uses node.js. So you can import many modules not easily available in Chrome Apps.
Distribution, with electron you package and distribute the app yourself. With Chrome Apps you distribute them through Chrome Webstore.
Environment. An Electron App is packaged with its full environment. Chrome Apps just use Chrome environment so they are lighter, but may behave differently for different users depending on the Chrome version they use.
Chrome Apps require the user to have Chrome installed, Electron doesn't.
Electron has better developer tools for testing and debugging.
Electron is an open source platform. Chrome Apps is also built on top of multiple open technologies but specially distribution is controlled by Google.
Electron documentation is much better even though it's a much younger platform.
Adoption: There are quite a lot of big and successful apps built on top of Electron such as Visual Studio Code, GitHub client, Slack. Chrome Apps just never picked up as much momentum.
Chrome Apps can be tightly integrated into Google Drive
UPDATE 2016-08-19:
It seems Google recently deprecated Chrome Apps on any platform other than ChromeOS. So I'd say it's no longer a valid option.
http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html
I think it is not really possible to compare electron and chrome-apps. It depends on, what your program should do.
So, when should I use electron?
On the first look electron looks like chrome, because the views of electron is based on the chrome browser. But electron is a full node.js environment with a chrome view on top. So the powerful features are not just insight the chrome part.
Like you mentioned there are a lot of node modules (over 1.700.000), which you can very easy install or update. You should also take a look at the node.js api (https://nodejs.org/api/). All that allows you to write complex apps, which are fully integrated on your desktop. For nearly all problems are some modules available.
With node you can first make your program with a command line interface and after that you can use electron to make a gui.
So, when you already have a online app which is written in JS, maybe a chrome-app is better. Chrome-apps are great for a google drive use. Or if you want to have a full integration in chrome-os.
So my pros for electron:
more than 1.700.000 modules over npm available
very easy integration of jQuery, Angular, React, ...
first make a program with a CLI and then make a gui
works perfect with github
very good desktop integration
provide windows installers
I would like to chime in on Electron vs nw.js.
I have a very popular Chrome App which cannot be converted to neither a web app nor an extension because it uses several unsupported APIs, most notably the chrome.fileSystem API.
The app is still only accessible on Chrome's webstore since app support will be abandoned not before early 2018. Nevertheless, I have already spent lots of thoughts and time on deciding what to do about Google's move.
Until now I have been mainly aiming at Electron since that seems to get most attention, but I have just recently found that nw.js can actually run Chrome apps out of the box because it implements all Chrome's APIs whereas Electron only implements a subset of them.
Simply run your Chrome app like this:
/path/to/nw.exe <folder path of the manifest.json file>
Except for a very few things such as intercommunication between my app and a helper extension, everything works as expected with zero changes even though it is an advanced app with nearly 3000 lines of JS code.
For new cross platform apps, Electron might be the better choice (I have actually no idea) but for existing Chrome apps I would say that nw.js is really something you should consider.
Hope this can help someone in the same position.
This question already has answers here:
In JavaScript, what code executes at runtime and what code executes at parsetime?
(5 answers)
Closed 7 years ago.
As per the definition mentioned on https://nodejs.org/
Node.js is a platform built on Chrome's JavaScript run-time for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Can any one please help me understand what the JavaScript run-time exactly means?
Maybe it's referring to Google's V8 engine.
It is an engine for processing JavaScript in the browser and is used by Google Chrome.
It's open source.
And it's written in C++.
It works on several platforms including mobile and embedded devices.
For more information see: https://code.google.com/p/v8/
If you google for "chrome javascript runtime", you will get all these links to V8.
Chrome's javascript runtime is Google's V8 engine which was developed by Google to be used with Google Chrome.
It compiles the javascript code to native machine code instead of interpreting bytecode which gives a major performance boost to javascript (which is traditionally very slow compared to other high level languages).
Node.js contains libuv to handle asynchronous events. V8 provides the run-time for JavaScript.
It is a virtual machine which interprets and executes JavaScript mostly on browser. In fact Node.js is a javascript runtime based library.
The JavaScript Runtime (JsRT) APIs provide a way for desktop, Windows Store, and server-side applications running on the Windows operating system to add scripting capabilities to an app by using the standards-based Chakra JavaScript engine that is also utilized by Microsoft Edge and Internet Explorer. These APIs are available on Windows 10 and any version of the Windows operating system that has Internet Explorer version 11.0 installed on the machine.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this 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?
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
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.
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.
NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.
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.
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 ;)
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.
You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html
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.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
What are some solutions for distributing an HTML5 based desktop application?
I want to be able to distribute my HTML5 app as a standalone desktop application on Windows, OSX, and Linux. I would like for people to be able to double click my app icon shortcut to run my program.
I don't want the browser window showing at all, just my app. Is this possible?
HTML5 Apps in 2014
Frames by chrome/webkit
Electron (former Atom Shell)
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. (source)
The folks at github use this to provide their code editor Atom as an app. It has an documented api and a help channel on the official atom forums.
Node-Webkit, the most minimal approach
node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
Intel is behind this (?). I've been told it's very rough around the edges.
Brackets Shell, the sandbox of Adobes code editor (and base of Adobe Edge)
Note: The brackets-shell is only maintained for use by the Brackets project. Although some people have definitely had success using it as an app shell for other projects, we don't provide any official support for that and we haven't done a ton of work to make the app shell easily reusable. Many people will likely find it easier to use a project like node-webkit, which is more generic by design.
says the readme, but there are quite a lot of folks out there who did it nevertheless.
Frameworks + Tools
Adobe AIR, as another answers suggested.
The Adobe® AIR® runtime enables developers to package the same code into native apps for Windows and Mac OS desktops as well as iPhone, iPad, Kindle Fire, Nook Tablet, and other Android™ devices, reaching the mobile app stores for over 500 million devices.
Sencha is a company which sells tools for app developers, including html5 app development and distribution.
Inactive approaches
Tide SDK (archived on 2015-07-12 at archive.org), beta version, discontinued on 12th Jul 2015
http://www.tidesdk.org/
XULRunner from Mozilla may do the trick for you but adds some overhead.
app.js ended at 28th Oct 2013 for being surpassed by (https://github.com/rogerwang/node-webkit)[node-webkit].
Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and JavaScript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So and focus on the task your application should do.
Mozilla Prism is decomissioned, their slugline was:
Bringing web applications to your Desktop
Prism is an application that lets users split web applications out of their browser and run them directly on their desktop.
You can use AppJS which uses Nodejs and Chromium to build html5 apps for desktop. check it out: http://appjs.com
Github Link: https://github.com/appjs/appjs
Definitely check out Titanium. Just today I took a functional HTML5 app and with a few minor modifications was able to drop it into Titanium and package it up for Mac, Windows and Linux.
And it also supports PHP, Python and Ruby if your app requires "server-side" processing.
You might want to look at XULRunner from Mozilla. At a 10000 foot level, the FireFox browser is a XULRunner application (obviously a very sophisticated one, but...). But XULRunner lets you use Javascript and XML to create applications, and the browser window is one of those components, so you once you get your basic window up, you can likely do pretty much anything you want.
Also, depending on the sophistication of your application, there are several "widget" frameworks (like Dashboard on the Mac, Yahoo Widgets, Windows Gadgets) which are basically HTML runtimes as well.
chrome can do what prism does See -- Tools-> Create application Shortcut
You can try Phonegap, there is a Windows Desktop Port: https://github.com/davejohnson/phonegap-windows
I tried the mac-port, it worked well. I didn't try the windows version yet.
[On Windows only] try HTML Application (HTA) approach - simply save your .html file with .hta extension. It also provides some additonal settings to get rid of browser window, set level of trust for the app, etc. Read more here: http://en.wikipedia.org/wiki/HTML_Application and here http://technet.microsoft.com/en-ca/scriptcenter/dd742317.aspx
Adobe AIR is meant to let you work primarily in HTML, CSS, and JavaScript while providing a desktop application. (Caveat: I haven't actually used it myself.)
Check this new project from Mozilla. You can create desktop apps too : https://developer.mozilla.org/en/Apps
Detail here: http://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/
Hmmm... a virtual machine for HTML5/CSS/JS... sounds like a browser. :)
Maybe Adobe AIR would do the trick, because it's based on the idea of bringing rich Internet apps to the desktop. I've never used it, however.
One thing you could do is develop a very basic desktop app that uses some kind of prepackaged web browser control (e.g. if you're developing for a Mac, just drop a WebView in the window and add some basic code to load your html upon app startup).
For mobile phones you can use PhoneGap http://www.phonegap.com/ . Probable with some more coding you can use it for desktop.
Sencha http://www.sencha.com/
Pokki http://www.pokki.com/
Currently the answer is that are different solutions of each platform.
For MAC OSX You will create a Cocoa Desktop App with a UIWebView
For Windows you will make a .NET desktop app with a browser component.
You can use a embedded server like Tomcat or maybe Apache.
I use tomcat for a complete java web application. Run inside browser, but the application need be installed. The shortcut to start the app, start the service and open the browser.
Or try use webkit
A bit late, but you can use a portable version of google chrome, and then create a small windows app to install it, and create a .ink shortcut to its --kiosk and app mode.
Kinda like chrome application shortcuts, but where you install chrome for them.
If you just need it for Windows, you should consider HTML Applications (HTA), it's been part of Internet Explorer since IE 5 (10+ years).
No server required, full HTML formatting, full access to local resources (even COM / USB ports), awesome. Also, easy to debug with Visual Studio, just bind to MSHTA.exe
You can enable HTML 5 in HTA's with the following meta tag:
<!-- enable html5 features -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
I built a PHP / JavaScript website for a customer. Then they asked me to replicate it except as a standalone Mac application. I did this with an app that combined an embedded web server, PHP, and 'WebView' - a Cocoa-ish version of the WebKit web browser that I can embed in a standard app window. This all worked great - I got to reuse 10,000+ lines of PHP/JS code, which saved months off of re-implementing it all again in 'native' code.
Now they want a Windows equivalent. I'm reasonably confident I can get PHP and the web server to work. And I know embedding basic IE functionality is pretty easy.
However...in my Mac setup, WebView (via the windowScriptObject stuff) gave me the ability to call JavaScript methods from C++. For instance, I might call a JavaScript method from C++ to update the screen. Likewise I could set things up so that a JavaScript call in the browser could trigger a C++ method - I used this, for instance, to let a user click 'BROWSE' and pick a file path using a real, standard file browser.
So my question is, is there a Windows-based embedded browser setup that would let me interact with JavaScript in this same way?
(the JavaScript <--> WebKit interface is described in much better detail here: http://lipidity.com/apple/javascript-cocoa-webkit/)
Maybe try using something like Appcelerator Titanium so you'll be ready when your client says they want it to work on Linux, or iPhone, or Android.
Quoting Wikipedia: "Appcelerator Titanium is a platform
for developing mobile and desktop
applications using web technologies.
[...] Support for standards-based web
technologies: HTML, CSS and Javascript
on all platforms along with PHP,
Python and Ruby for desktop platforms.
Integrated support for popular
JavaScript and AJAX Frameworks
including jQuery, YUI, MooTools,
Scriptaculous and others."
Sounds like a perfect tool for the job.
When you embed the Web Browser Control (IE), your application code can simply call execScript (http://msdn.microsoft.com/en-us/library/ms536420(v=vs.85).aspx) on the window object. You can have your script call out to the application by using the window.external object from the script, and by using the ObjectForScripting (or C++ equivalent) from the application.
maybe Qt will be good for your case, also you have QtScript and can inject javascript with evaluateJavaScript
I found a great example on the web for invoking JS in my embedded browser from C...basically using COM-ish methods that let you get a DISPID from a script object, and then using the Invoke() method with that. This works great.
But it turns out I need to also call C++ funcs from my JS code. It appears this is possible, and after hours of messing around I think I almost had it - it's like the above in reverse - you create a COM object, then hook it to the browser's script object - but in the end I could not close the deal - I kept getting "library not registered" errors. Honestly I don't know COM well enough to do this right.
So then I, for the heck of it, tried building my first C# app. In about 20 minutes I had an app running with a browser where I could both invoke JS inside of it and have the browser invoke C# methods. Geesh. I'm a believer in .NET after this experience, and a confirmed non-believer in 90's Microsoft technology.
In the interest of completeness, I'd like to mention my Windows port of WebKit, which includes the various cross-layer features of WebKit on the Mac.
I posted some example code showing how to embed WebKit in a native WinAPI application, complete with JavaScript->C++ and C++->JavaScript examples.
The example is a tiny test case for a much larger application using embedded WebViews for major UI components. I can confirm that what you are doing is not only possible, but a great way to build an application.