Хабрахабр

[Перевод] WebRTC и Electron: тренд для desktop-приложений

В блоге на хабре мы стараемся рассказывать интересные истории из собственного опыта: телефония и браузеры, телеком, автоматизация звонков, видеоконференции — все эти истории. Но наш давний знакомый Цахи, автор bloggeek.me и мировой спец по WebRTC, настолько хорошо пишет, что его просто нельзя не переводить. Его новая статья, вышедшая неделю назад, про поддельные desktop-приложения, которые на самом деле обернутые в Electron веб-страницы. Многие такое видели – Slack, Discord и прочие товарищи вешают на свои страницы огромную кнопку «Скачайте наше desktop-приложение», а там — обернутая в .exe или .dmg веб-страничка. Которая иногда сделана удобнее, чем «хардкорные» WinAPI и Cocoa решения. А еще эти штуки умеют звонить голосом и видео. Под катом, традиционно для Цахи, много картинок, ссылок и интересных выводов от опытного программиста-телекомщика, ушедшего в популисты-аналитики. Перевод мы традиционно адаптируем для Хабра, а не слово-в-слово. Цахи любит заковыристые обороты…
Для WebRTC мобильная и desktop-разработка сейчас развивается в разных направлениях. И в направлении desktop-разработки набирают популярность решения, собранные на платформе Electron.

В старые добрые времена люди жаловались, что WebRTC не поддерживается во всех браузерах. Про мобильные устройства жаловались меньше, так как библиотека от Google позволяла использовать WebRTC в нативных Android и iOS приложениях.

А что сейчас? Все современные браузеры поддерживают WebRTC. У нас есть Chrome, Firefox, Edge и Safari со своими реализациями WebRTC.

Проблемы? Ни про один из браузеров нельзя сказать, что он «100% готов» к использованию для голосовых и видеозвонков:

  • Chrome использует Plan B и собирается перейти на Unified Plan (разные варианты согласовать несколько медиапотоков, например видео с камеры и шаринг экрана);
  • у Firefox все хорошо, кроме его популярности;
  • Edge не поддерживает Data Channel (передача произвольных данных в дополнение к голосовым и видео потокам) и с популярностью еще хуже чем у Firefox;
  • Safari не поддерживает VP8 (только H.264 для видео) и глючит чаще, чем хотелось бы.

Что может сделать разработчик с этим зоопарком?

Использовать adapter.js. Или плагин. Или игнорировать несколько браузеров из списка.

А может быть использовать для desktop тот же подход, что и при мобильной разработке? Сделать не веб-страницу, а приложение? Если это то, что вы собираетесь сделать, то вы не одиноки.

Самый популярный способ сделать desktop-приложение в 2018 году — это воспользоваться Electron. Есть другие способы, такие как CEF или разработка нативного приложения, но Electron является безусловным лидером. Приведу пример трех компаний, которые используют Electron (и WebRTC) для своих desktop-приложений:

#1 — Slack

Очень популярное приложение для общения в команде. Я использовал его в браузере последние три года, но перешел на desktop-версию приложения на обоих своих компьютерах: Ubuntu desktop и Windows 10 ноутбук.

Почему я так долго не использовал приложение? Потому что я не люблю их устанавливать.

Почему я его теперь установил? Потому что теперь мне нужно все время отслеживать 3 и более Slack-аккаунтов. Это означает по вкладке на каждый аккаунт в моем браузере. А в desktop-приложении каналы не “отъедают” табы. Вопрос не в памяти или производительности, а скорее в юзабилити и когнитивной нагрузке. Я стараюсь держать Хром на диете с небольшим количеством табов.

Как к приложению относятся в компании Slack? На последнем “Kranky Geek” команда Slack выступила с интересным докладом о своих текущих планах. Примерно минута видео посвящена Electron, смотреть начиная с 2:30

В видео не попала часть доклада с вопросами и ответами. На вопрос о политике поддержки браузеров Andrew MacDonald из Slack ответил, что они сейчас сосредоточены на разработке desktop-приложения, а не браузерной версии. Конечно, проверяют что все работает в Хроме, но тратят сильно меньше усилий на поддержку остальных браузеров. И сильно больше на desktop-приложение.

Кроме “одного окна” для всех проектов, desktop-версия Slack предлагает расширенные возможности по общению во время демонстрации своего экрана. Посмотреть как оно работает стало для меня хорошим поводом попробовать desktop-версию приложения.

В том же видео Andrew отмечает, что с имеющейся у него командой разработчиков он не смог бы обновлять собственное решение так же быстро, как это делает команда Electron. Для них это “as is” решение, которое позволяет использовать WebRTC для коммуникаций и не беспокоиться с обновлениями.

#2 — Discord

Что-то вроде Slack, но по-другому. Социальная сеть для геймеров. И не для геймеров. Авторы делают все, что в их силах, чтобы пересадить вас с привычного и комфортного браузера в их desktop-приложение.

Вот так выглядит домашняя страница Discord:

Для браузера “призыв к действию” предлагает либо открыть веб-приложение, либо скачать desktop-версию. Для мобильных устройств предлагается только скачать приложение.

Но самое интересное в другом.

Яркая, зеленая кнопка призыва к действию предлагает сделать самое простое — открыть веб-приложение. Вы выбираете имя пользователя и опционально email с паролем. А теперь, когда вы “подписались на сервис”, самое время еще раз предложить скачать приложение:

И даже если вы откажетесь, то получите верхний баннер. Здоровая оранжевая штука на этом скриншоте:

Discord полностью функционален в браузере, но авторы очень, очень, ну просто очень хотят пересадить вас с чертова интернета в свое desktop-приложения.

И это у них получается.

#3 — TalkDesk

У TalkDesk собственные причины использовать Electron. Это приложение для организации контакт-центра, которое интегрируется с CRM и другими системами. Для этого вы можете:

  • использовать TalkDesk desktop-приложение (или веб-приложение);
  • установить TalkDesk расширение для Хрома для интеграции с CRM;
  • установить “Callbar” приложение Chrome для “standalone” использования без необходимости держать открытым браузер.

Третья опция скоро повторит судьбу птички Додо, вместе с другими приложениями Chrome (примечание переводчика: Google отказывается от приложений Chrome). TalkDesk решила эту проблему, выпустив Callbar Electron.

То, что мы здесь видим, несколько отличается от предыдущих двух примеров. Там, где Slack и Discord стараются всеми правдами и неправдами пересадить пользователей с веба на desktop-приложения, TalkDesk старается просто быть везде. Использование HTML5 и Electron для них — это хорошая возможность не писать с нуля еще-одно-приложение и переиспользовать части своего существующего веб-приложения.

Они не одиноки

Я знаю еще много компаний, которые используют Electron для своих WebRTC-решений с голосовыми и видеозвонками. Они делают это по следующим причинам:

  • это хороший способ поддерживать совместимость с Internet Explorer (и Safari) не делая ничего;
  • они хотят “нативное” приложение потому, что им нужен больший контроль над системой, нежели это может предложить браузер. При этом они хотят все плюсы кросс-платформенной разработки на HTML5/JS;
  • пользователи работают с их решением весь день, и браузер с его вкладками перестает быть лучшим интерфейсом;
  • они не хотят, чтобы браузер ограничивал их возможности;
  • стабильность обновлений: для desktop-приложений компания сама решает, когда предложить пользователям обновиться. Конечно, большинство компаний так же поддерживают веб-версию, так что это не самая главная причина.

Добавьте к этому вендоров CPaaS (Communication Platform as a Service), которые поддерживают Electron. Например, Vidyo.io и TokBox. Они делают это не потому, что “модно”, а потому, что этого хотят их пользователи.

Такой сдвиг в сторону Electron приложений затрудняет оценку популярности WebRTC. Если общение перетекает из Хрома (будем честны, для браузеров большинство общения через WebRTC идет через Хром) в приложения, то вся собираемая Гуглом статистика превращается в тыкву. Тем не менее, это делает Хром еще более популярным, так как Electron построен на Chromium.

Мы можем ожидать еще большую поддержку Electron среди вендоров для WebRTC коммуникаций. Это «огненный» тренд.

Показать больше

Похожие публикации

Кнопка «Наверх»