Cross-desktop/mobile device is a lot more important than cross-Mac OS X/Windows. Beyond that I think it’s an absolutely terrible idea to find yourself so tied into a technology that you have to start constantly upgrading you calendar program.
About
Recently we started to evaluate Electron, this article summarize our initial evaluation and findings covering some key elements we considered important.
About Electron
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.
Electron provides a run-time to build desktop applications with pure JavaScript; Electron takes a main file defined in your package.json file and executes it. This main file (conventionally named main.js) is responsible for interacting with the native GUI of your operating system and creates the GUI of your application (or application windows.) This main.js file is also responsible of handle system events, such as mouse clicks or keyboard input.
In Electron, there are two types of process; the main process, which as stated above, runs the package.json's main script and displays GUI by creating web pages. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used, and each web page in Electron runs in its own process, called renderer process.
The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it. Since calling native GUI related APIs is not allowed when using web pages, the renderer process of the web page must communicate with the main process to request that the main process perform those operations.
Electron provides an inter-process communication (ipc) module for that kind of communication, which allows for the main process not to worry about how many renderer processes there are or which one sent a message.
- Electron applications run the same regardless of the operating system.
- It is not necessary to develop an application for each OS.
- Even that are web-based applications, can be develop to don´t look like a windows app or Mac App, so, users won’t mind or realize that HTML is behind the user interfaces - Beyond the Browser
- Electron has no browser dependency.
- Since Electron uses JavaScript to build the applications, building the desktop app is as similar as programming the web application.
- The final application may not have the same performance as a native app.
- Check also: Beyond the Browser
- A “Hello, World!” Electron app is 40 MB zipped. Besides the typical advice you follow when creating a web app (write less code, minify it, have fewer dependencies, etc.). The “Hello, World!” app is literally an app containing one HTML file; most of the weight comes from the fact that Chromium and Node.js are baked into your app. At least delta updates will reduce how much is downloaded when a user performs an update (on Windows only) - Beyond the Browser
- There is no way of exporting the Electron app to iOS or Android directly (an intermediary is required such as Ionic).
- For mobile platform, nearly all of Electron's APIs don't apply.
- Electron uses V8 which is not supported on iOS. This means Chromium and Node.js (main components of Electron) will also not work on iOS.
- iOS store prohibits the use of a different browser engine (can't use Chromium).
- While the use of Node in Android be somewhat supported, it will likely require to adequate a lot of Node modules to fit the Android ecosystem.
- If jQuery/Meteor/AngularJS or RequireJS is used alongside the app, it is necessary to add extra code for them to work. Check this link for further details.
- Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like
module
,exports
,require
. This causes problems for some libraries since they want to insert the symbols with the same names.
- Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like
- In case of choosing Electron Builder to distribute an app:
- Additional packages need to be installed.
- iOS distribution will not be possible unless building from a Mac.
- For more details abut distribution & automatic updates check: Beyond the Browser
- Electron applications tend to be big in size.
The next table show the size of an application on Electron that render a Base22 River of News Infinitive widget using XWidget and Vue.js, using Electron packager and Electron Builder:
Type of Distribution/Platform | XWidget | Vue |
---|---|---|
Electron-packager Linux AppImage | N/A | N/A |
Electron-packager Linux App(installed) | 78.8 MB | 80.4 MB |
Electron-packager Windows Setup | N/A | N/A |
Electron-packager Windows App (installed) | 57.2 MB | 57.4 MB |
Electron-packager Mac dmg | N/A | N/A |
Electron-packager Mac App (installed) | ||
Electron-builder Linux AppImage | 475.7 MB | 50.7 MB |
Electron-builder Linux App(installed) | 78.8 MB | 80.4 MB |
Electron-builder Windows Setup | 365.6 MB | 33.3 MB |
Electron-builder Windows App (installed) | 81.3 MB | 81.4 MB |
Electron-builder Mac dmg | 45.8 MB | 42.1 MB |
Electron-builder Mac App (installed) | 116.9 MB | 119.3 MB |
**Note: The applications generated with electron-packager, doesn't generate neither .AppImage, setup.exe or .dmg, that is why the size of those files is Not Available.
With Electron your app can access the hardware like the microphone and webcam (if available). In order to achieve this, you need to make use of the navigator.webkitGetUsermedia API. By specifying the constraints, the API can communicate to either the webcam or mic (or both) so you can make use of them in your app. USB is also available so you are able to interact with technologies like Arduino and Raspberry PI.
Electron Documentation doesn't specify which hardware resources are available by default, so, If you wish to use other resources that are not mentioned above, you will have to make further investigation.
Is it slow or laggy? Well, the app is essentially a web app. It’ll perform pretty much like a web app in Google Chrome. - Beyond the Browser
Windows, MacOS, Linux
There are several ways to achieve the distribution of the application; you can follow what is described on Electron's Github page or you can do it using either Electron Packager or Electron Builder. Both options will get your application distributed onto the desired OS, but Electron Builder is more friendly and it has communication with Squirrel, which allows you to manage auto-updates for Mac and Windows. If you decide to go with Electron Builder, you'll need to install additional packages according to your OS and the target OS of your applications, check this link to learn more. Here is a link that can help you understand better the functionality of Electron Builder.
Even though 32-bit and 64-bit builds are supported, you’ll get away with 64-bit Mac and Windows apps. You will need 32-bit and 64-bit Linux apps, though, for compatibility. - Beyond the Browser
For more details abut automatic updates check: Beyond the Browser
Be extra-careful when accepting user input or even trusting third-party scripts, because a malicious individual could have a lot of fun with access to Node.js. Also, never accept user input and pass it to a native API or command without proper sanitation.
Don’t trust code from vendors either. - Beyond the Browser
You will discover unexpected behavior now and again. Some of it is more obvious than the rest, but a little annoying nonetheless. - Beyond the Browser
Beyond The Browser: From Web Apps To Desktop Apps
- By Adam Lynch
- Juan Flores
The .NET Core runtime enables cross-platform development and deployment of ASP.NET 5 applications on Windows, Mac OS, and Linux. For example, one developer might begin working on an app in Visual Studio on Windows, then hand it off to another developer running Visual Studio Code for OS X on a Mac, and then deploy the app to a Linux server for testing.
The cross-platform .NET Core libraries are in an open source project hosted on GitHub: CoreCLR Developer Guide.
In the current Visual Studio 2015 RC release, only a limited set of capabilities are stable and testable. The walkthroughs linked below let you explore those capabilities.
Related Topics
Title | Description |
---|---|
Step-by-step instructions for building an ASP.NET 5 web app in Visual Studio and deploying it to a Linux server on Microsoft Azure. | |
Step-by-step instructions for building an ASP.NET 5 web app on a Mac using Visual Studio Code for OS X and deploying it to a Linux server on Microsoft Azure. |