WebRTC and Electron: Trend for Desktop Applications
In a blog on Habré, we try to tell interesting stories from our own experience: telephony and browsers, telecom, call automation, video conferencing - all of these stories. But our long-time acquaintance Tzakhi, the author of bloggeek.me and a world specialist in WebRTC, writes so well that it simply cannot be translated. His new article, published a week ago, about fake desktop applications that are actually wrapped in Electron web pages. Many have seen such things - Slack, Discord and other comrades put a huge “Download our desktop application” button on their pages, and there a web page wrapped in an exe or .dmg. Which is sometimes made more convenient than the "hardcore" WinAPI and Cocoa solutions. And these things can call voice and video. Under the cut, traditionally for Tzakhi, there are a lot of pictures, links and interesting conclusions from an experienced programmer-telecommith who has gone into populist analytics. We traditionally adapt the translation for Habr, but not word-for-word. Tzakhi loves intricate turns ... For WebRTC, mobile and desktop development are currently developing in different directions. And in the direction of desktop development, solutions built on the Electron platform are gaining popularity.
In the good old days, people complained that WebRTC is not supported in all browsers. About mobile devices complained less, as the library from Google allowed to use WebRTC in native Android and iOS applications. ')
What now? All modern browsers support WebRTC. We have Chrome, Firefox, Edge and Safari with their own implementations of WebRTC.
Problems? Neither one of the browsers can be said that it is “100% ready” to use for voice and video calls:
Chrome uses Plan B and is about to switch to Unified Plan (different options match several media streams, such as video from a camera and sharing a screen);
Firefox is doing well except for its popularity;
Edge does not support the Data Channel (transferring arbitrary data in addition to voice and video streams) and is even worse in popularity than Firefox;
Safari does not support VP8 (only H.264 for video) and is buggy more often than we would like.
What can a developer do with this zoo?
Use adapter.js . Or plugin . Or ignore several browsers from the list.
Or maybe use the same approach for desktop as with mobile development? Do not make a web page, and the application? If this is what you are going to do, then you are not alone.
The most popular way to make a desktop application in 2018 is to use Electron . There are other ways, such as CEF or the development of a native application, but Electron is the clear leader. I will give an example of three companies that use Electron (and WebRTC) for their desktop applications:
# 1 - Slack
A very popular application for communication in a team. I used it in the browser for the last three years, but switched to the desktop version of the application on both my computers: the Ubuntu desktop and the Windows 10 laptop.
Why haven't I used the app for so long? Because I do not like to install them.
Why did I install it now? Because now I need to keep track of 3 or more Slack accounts all the time. This means a tab for each account in my browser. And in the desktop application, the channels do not “eat off” the tabs. The question is not in memory or performance, but rather in usability and cognitive load. I try to keep Chrome on a diet with a small amount of tabs.
How does the app relate to Slack? At the last “Kranky Geek”, the Slack team gave an interesting talk about their current plans. Approximately a minute video is devoted to Electron, watch from 2:30
The video did not include a part of the report with questions and answers. When asked about the support policy for browsers, Andrew MacDonald from Slack answered that they are now focused on developing a desktop application, not a browser version. Of course, they check that everything works in Chrome, but they spend much less effort on supporting other browsers. And much more on the desktop application.
In addition to the “one-stop shop” for all projects, the desktop version of Slack offers advanced communication features during the display of its screen. See how it works was a good reason for me to try the desktop version of the application.
In the same video, Andrew notes that with the development team he has, he would not be able to update his own solution as quickly as the Electron team does. For them, this is an “as is” solution that allows you to use WebRTC for communications and not worry with updates.
# 2 - Discord
Something like Slack, but different. Social network for gamers. And not for gamers. The authors are doing everything in their power to transplant you from a familiar and comfortable browser to their desktop application.
This is what the Discord home page looks like:
For the browser “call to action” offers either open a web application, or download the desktop version. For mobile devices is offered only to download the application.
But the most interesting thing in the other.
The bright, green call-to-action button offers to do the simplest thing - open a web application. You choose a username and optionally email with a password. And now, when you “subscribed to the service,” it's time to once again offer to download the application:
And even if you refuse, you will receive the top banner. Healthy orange stuff in this screenshot:
Discord is fully functional in the browser, but the authors are very, very, well, just really want to transplant you from the bloody Internet to their desktop applications.
And they do it.
# 3 - TalkDesk
TalkDesk has its own reasons for using Electron. This application is for organizing a contact center that integrates with CRM and other systems. To do this, you can:
use the TalkDesk desktop application (or web application);
Install TalkDesk Chrome extension for CRM integration;
Install the “Callbar” Chrome app for “standalone” use without having to keep your browser open.
The third option will soon repeat the fate of the Dodo bird, along with other Chrome apps (translator's note: Google refuses Chrome apps). TalkDesk solved this problem by releasing Callbar Electron .
What we see here is somewhat different from the previous two examples. Where Slack and Discord try to hook users from web to desktop applications by hook or by crook, TalkDesk tries to just be everywhere. Using HTML5 and Electron for them is a good opportunity not to write another one-from-one application from scratch and to re-use parts of your existing web application.
They are not alone
I know many more companies that use Electron for their WebRTC solutions with voice and video calls. They do this for the following reasons:
this is a good way to maintain compatibility with Internet Explorer (and Safari) without doing anything;
they want a “native” application because they need more control over the system than a browser can offer. At the same time, they want all the advantages of cross-platform development on HTML5 / JS;
users work with their solution all day, and the browser with its tabs ceases to be the best interface;
they do not want the browser to limit their capabilities;
stability of updates: for desktop applications, the company decides when to invite users to upgrade. Of course, most companies also support the web version, so this is not the main reason.
Add to this CPaaS (Communication Platform as a Service) vendors that support Electron. For example, Vidyo.io and TokBox . They do this not because they are “fashionable”, but because their users want it.
Such a shift towards Electron applications makes it difficult to assess the popularity of WebRTC. If the communication flows from Chrome (to be honest, for browsers most of the communication through WebRTC goes through Chrome) into applications, then all statistics collected by Google turn into a pumpkin. However, this makes Chrome even more popular, since Electron is built on Chromium.
We can expect even more Electron support among vendors for WebRTC communications. This is a "fiery" trend.