Telegram Contest: обзор лучших веб-клиентов Telegram по версии «Кода Дурова»

Команда Telegram активно работает над клиентами для смартфонов и компьютеров, однако уже несколько лет она не обновляла свой веб-клиент. Этой проблемой внутри мессенджера озаботились в ноябре прошлого года — именно тогда Telegram запустил конкурс JavaScript Contest на создание новой веб-версии.

Буквально несколько дней назад завершился третий этап этого конкурса. Он интересен прежде всего тем, что участники уже создали более-менее рабочие прототипы, которые сейчас может протестировать любой желающий.

Мы в редакции решили воспользоваться этой возможностью и немного заглянули в будущее — в то, как в ближайшее время может выглядеть новый веб-клиент Telegram. Рассказываем, что интересного мы нашли.

Задачи, над которыми работали участники

На первом этапе разработчикам необходимо было создать легкую веб-версию Telegram без использования сторонних фреймворков интерфейса. Она должна была включать в себя экраны входа и регистрации, а также позволять просматривать список чатов и сообщения в них. Вместе с тем работы должны были визуально соответствовать приведенным макетам.

Целью второго этапа было продолжение работы над легким веб-клиентом. Теперь он должен был научиться отправлять и получать сообщения, отображать медиа, файлы и ссылки, иметь раздел «общие медиа», поддерживать стикеры, эмодзи и поиск сообщений по чатам. Основной упор разработчикам предлагалось сделать на скорость и размер веб-приложения, а также обратить внимание на детали.

Завершившийся несколько дней назад финальный этап предполагал дальнейшую работу на клиентом. Теперь в нем обязательно должен был появиться интерфейс для мобильных устройств, «который безупречно работает в Chrome и Safari», полная поддержка эмодзи, стикеров и «гифок», запись голосовых сообщений, а также полнофункциональные локальный и глобальный поиск. При этом основными критериями для определения победителей стали скорость, размер приложений и внимание к деталям.

В числе дополнительных требований были обозначены: поддержка всех типов общих медиа, стриминга видео/аудио, архива, папок, опросов всех типов, а также поиска сообщений внутри чата.

Критерии оценки «Кода Дурова»

Не дожидаясь вердикта жюри конкурса, мы решили оценить работы финалистов по разработанному нами алгоритму. Отмечу, что в код участников мы не смотрели, а оценивали работы преимущественно с точки зрения конечного пользователя: что работает или не работает, насколько быстрый и плавный интерфейс, какие приятные или неприятные нюансы мы нашли. Вот, как выглядит наш регламент оценки.

• Оценка реализации четырех минимальных требований Telegram. Если функция есть хоть в каком-то виде — присваиваем 1 балл. Если это еще и работает хорошо — 2 балла.
• Оценка реализации шести дополнительных требований — по аналогии с прошлым пунктом.
• Скорость работы и визуальный вид веб-клиента мы оценили по пятибальной шкале, то есть за каждый из этих параметров конкурсная работа могла получить до 5 баллов или до 10 баллов суммарно.
• Любые фишки, которые реализованы помимо тех, что были заявлены командой Telegram, мы также оценили дополнительными баллами — от 0,5 до 1 балла за каждую.

Обзор и оценка топ-6 работ

Tall Tiger [ссылка] — 6 место

Веб-клиент в целом работает на смартфоне неплохо, однако в ряде случаев  при работе в Chrome на Android возникает неприятный баг, из-за которого диалоговое окно не реагирует ни на какие нажатия, приходится перезагружать страницу. Панель с эмодзи, стикерами и GIF реализована частично: даже на мощных устройствах приходится долго ждать загрузки всех эмодзи. Стикеры загружаются как-то хаотично и заметны баги при загрузке в Safari. Что касается GIF, то видны лишь последние файлы, поиска нет и отправить GIF-анимацию также не удается. Запись голосовых сообщений есть, но на iOS они никак не отображаются и их невозможно отправить. За каждый из этих пунктов мы поставили по 1 баллу.

Единственное выполненное без нареканий основное требование — это поиск, который хорошо работает как на ПК, так и на смартфонах. За него — 2 балла.

Итого за выполнение минимальных требований — 5 баллов.

Среди дополнительных требований претензий у нас нет также только к поиску — внутри конкретных чатов он показывает высокую скорость работы и актуальную выдачу, за него работа получает 2 балла.

Общие медиа присутствуют, однако не работают в iOS. То же самое с потоковым воспроизведением: на Android и ПК работает, а на iOS — нет. Вообще нигде автоматически не загружаются голосовые сообщения. Архив реализован, но с ПК не работает архивирование чатов. При этом, во время выхода из архива страница с диалогами на смартфоне на базе Android фризится и не работает, приходится перезагружать страницу. С папками можно работать только с уже созданными, новые создать нельзя. Во время редактирования нет кнопки сохранения, клиент автоматически сохраняет изменения. Но работают в целом папки не очень интуитивно. За все эти пункты мы поставили по 1 баллу. Опросы всех типов не реализованы — видны лишь результаты опроса, а голосовать или создавать опросы нельзя, поэтому здесь работа баллов не получила.

Итого за выполнение дополнительных требований — 6 баллов.

Веб-клиент часто зависает на мобильных устройствах. Не подключена плавная загрузка, поэтому приходится ждать прогрузки некоторых элементов, и только после неё можно пользоваться клиентом. Иногда загрузка просто зависает и приходится перезагружать страницу. Поэтому только 3 балла.

Что касается интерфейса, то в целом работа неплохая, но есть ряд замечаний. Большое количество кнопок не работают. Не очень понятно, что делает на верхнем сайдбаре кнопка отписки от канала. Если зайти в описание каналов, то видно, что не соблюдена верстка и весь текст формируется в один абзац. Исходя из этого, также 3 балла.

Дополнительно 7,5 баллов:

• за возможности отключать уведомления — 1 балл;
• за возможность смены языка — 1 балл;
• за наличие Instant View — 1 балл;
• за рабочие настройки кастомизации клиента — 1 балл;
• за рабочие настройки приватности — 1 балл;
• за рабочие настройки уведомлений — 1 балл;
• за наличие глазка с просмотрами — 0,5 балла;
• за попытку подключить звонки (кнопка есть, вызов идет, но разговор сбрасыватся моментально) — 0,5 балла;
• за подробные комментарии со всеми нововведениями в работе — 0,5 балла.

Итого — 24,5 балла

Giant Parrot [ссылка] — 5 место

Одна из немногих конкурсных работ, в которой минимум претензий к реализации обязательных требований. Мобильная версия отлично работает на всех устройствах, эмодзи, стикеры и «гифки» поддерживаются, есть даже поиск последних. Голосовые сообщения на всех платформах не только поддерживаются, но и отлично записываются. Поиск тоже работает отлично. По каждому пункту уверенные 2 балла.

Итого за выполнение минимальных требований — 8 баллов.

Вместе с тем отлично реализованы практически все дополнительные требования: общие медиа, потоковое воспроизведение аудио и видео (есть небольшие проблемы с производительностью, но работает на всех платформах), поиск и архив. За эти функции — по 2 балла.

Проблемы есть только во время создания папки на Android — фризы вплоть до полного отключения страницы с веб-клиентом. Кроме того, нельзя создавать опросы, хотя в уже созданных есть красивая анимация и возможность голосовать. За эти функции мы присудили по 1 баллу.

Итого за выполнение дополнительных требований — 10 баллов.

Веб-клиент часто зависает на мобильных устройствах — чаще всего на Android и особенно в окне диалогов после выхода из настроек, архива и других пунктов гамбургер-меню. Поэтому за скорость работы — 3 балла. В интерфейсе нам не понравился шрифт, а также заметно, что на визуализацию некоторых элементов автору просто не хватило времени. В Safari не реализовано выпадающее контектное меню по нажатию правой кнопки мыши. В итоге только 3 балла.

Дополнительно 2 балла:

• за возможность отключать уведомления — 1 балл;
• за наличие глазка с просмотрами — 0,5 балла;
• за подробные комментарии со всеми нововведениями в работе — 0,5 балла.

Итого — 26 баллов

Ace Monkey [ссылка] — 4 место

Минимальные требования в этой работе реализованы неплохо, веб-клиент на смартфоне выглядит правильно и работает быстро. Голосовые сообщения работают на всех платформах, качество записи удовлетворительное. Поиск есть и работает он хорошо. Единственный бал мы сняли за отсутствие поиска по «гифкам», а также невозможность поиска стикеров при вводе на кириллице.

Итого за выполнение минимальных требований — 7 баллов.

Отображение и распределение общих медиа по категориям доступно для всех систем. Поиск сообщений внутри конкретного чата работает без нареканий. Это же касается и папок. За эти моменты по 2 балла.

За реализацию потокового воспроизведения мы присудили 1 балл, так как оно полноценно работает только в случае с Android и ПК, а на iOS приходится ждать предзагрузки. Также 1 балл работа получает за архив, так как не получается «разархивировать» чаты на iOS. За опросы баллы мы не начислили, ибо поддерживается только один тип — классический.

Итого за выполнение дополнительных требований — 8 баллов.

При открытии чатов есть небольшие фризы, подлагивания, плавности не хватает, поэтому за скорость работы мы присвоили 4 балла. По визуальной части можем только похвалить, особенно за то, что в описании каналов работают ссылки — 5 баллов.

Дополнительно 6,5 баллов:

• за возможность закреплять и откреплять диалоги — 1 балл;
• за возможность создать канал и беседу — 1 балл;
• за возможность отключать уведомления — 1 балл;
• за возможность вести канал (публиковать сообщения) — 1 балл;
• за наличие глазка с просмотрами — 0,5 балла;
• за наличие синих галочек верификации — 0,5 балла;
• за подробные комментарии со всеми нововведениями в работе — 0,5 балла.

Итого — 30,5 балла

Merry Ant [ссылка] — 3 место

Мобильная версия шустро и плавно работает на обеих платформах. Единственное нарекание относится к iOS: если войти в чат и моментально начать скроллить, то скролл не работает — нужно чуть-чуть подождать. Поиск чатов работает быстро и точно на всех устройствах. Замечание одно — не отображаются аватарки каналов и чатов в выдаче. В целом оба нарекания не критичны, поэтому за каждый из этих пунктов мы присудили по 2 балла.

Стикеры и эмодзи поддерживаются, их загрузка быстрая и плавная. Однако панель с «гифками» работает не полностью: можно отправлять «гифки», которые использовались ранее, а вот поиск по ним не работает. Запись голосовых сообщений имеется, но работает полноценно только на ПК. Со смартфона в большинстве случаев записанное сообщение не отправляется. На Android-устройстве один раз записать голосовое все же получилось, но итоговая запись вышла прерывистой. Поэтому за эти два пункта мы присудили по 1 баллу.

Итого за выполнение минимальных требований — 6 баллов.

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

Раздел общих медиа реализован, но не полностью — нет вкладок с «гифками» и голосовыми сообщениями, поэтому 1 балл. Потоковое воспроизведение аудио и видео не реализовано.

Итого за выполнение дополнительных требований — 9 баллов.

Скорость работы высокая, однако при одновременной загрузке большого числа медиа или GIF-файлов начинает тормозить, поэтому только 4 балла. Верстка в целом выполнена по гайдлайнам конкурса, но есть ряд замечаний. Во-первых, в описаниях каналов и чатов не продумана верстка и текст сливается в один абзац. Там же присутствует нерабочая кнопка приглашения в канал. На ПК наблюдаются проблемы с версткой кнопки создания каналов и бесед. Учитывая эти моменты, за интерфейс мы присудили 4 балла.

Дополнительно 9,5 балла:

• за возможность закреплять и откреплять диалоги — 1 балл;
• за рабочие настройки кастомизации клиента — 1 балл;
• за возможность создать канал и беседу — 1 балл;
• за наличие настроек приватности и возможности их редактировать — 1 балл;
• возможности отключать уведомления — 1 балл;
• за возможность вести канал (публиковать сообщения) — 1 балл;
• за возможность смены языка — 1 балл;
• за рабочие настройки уведомлений — 1 балл;
• за наличие глазка с просмотрами — 0,5 балла;
• за наличие синих галочек верификации — 0,5 балла;
• за подробные комментарии со всеми нововведениями в работе — 0,5 балла.

Итого — 32,5 балла

Posh Ram [ссылка] — 2 место

Все основные пункты так или иначе реализованы, но есть буквально пара проблем: нет возможности выбрать GIF-файл для отправки, а голосовые сообщения записываются на iOS с хрипами. Поэтому за каждый из этих пунктов мы присудили по 1 баллу.

При этом на Android с «войсами» все хорошо — запись и скорость загрузки на высоком уровне. Мобильная версия шустрая и плавная, поиск работает быстро и точно. Помимо глобального поиска работает поиск по беседам/чатам и каналам. За мобильную версию и поиск мы при присудили по 2 балла.

Итого за выполнение минимальных требований — 6 баллов.

Похвально, что Posh Ram справился со всеми дополнительными требованиями. Есть общие медиа и галерея, которые работают хорошо — есть разделение на все разделы. Архив и папки также реализованы полностью, нельзя лишь менять порядок папок, но это, на наш взгляд, совсем незначительный недочет. Поиск внутри чата работает без нареканий, как и опросы. За все эти фишки мы присудили по 2 балла.

Единственное, за что мы дали только 1 балл — это потоковое воспроизведение аудио и видео. Оно заработало только на ПК, а на смартфоне пришлось ждать полной загрузки.

Итого за выполнение дополнительных требований — 11 баллов.

С точки зрения скорости работы веб-клиент Posh Ram один из самых шустрых. Критичных фризов и зависаний за все время тестирования я не заметил. Однако при большом количестве стикеров диалог начинает подтормаживать, поэтому за скорость работы мы присудили 4 балла.

Что касается интерфейса, то он максимально соответствует заявленным гайдлайнам. Вместе с тем присутствуют дополнительные элементы, перенесенные из приложения — за это работу можно тоже похвалить. Такую заботу о мелочах мы оценили в 5 баллов.

Дополнительно 9 баллов:

• за возможность закреплять и откреплять диалоги — 1 балл;
• за рабочие настройки кастомизации клиента — 1 балл;
• за наличие Instant View — 1 балл;
• за возможность создать канал и беседу — 1 балл;
• за наличие настроек приватности и возможности их редактировать — 1 балл;
• за возможность отключать уведомления — 1 балл;
• за возможность вести канал (публиковать сообщения) — 1 балл;
• за возможность смены языка — 1 балл.
• за наличие синих галочек верификации — 0,5 балла;
• за наличие глазка с просмотрами — 0,5 балла.

Итого — 35 баллов

Jolly Cobra [ссылка] — 1 место

Это одна из лучших работ с точки зрения интерфейса и скорости работы на мобильных устройствах. Лаги минимальны, авторизация и выход из учётной записи — без проблем. Поиск и запись голосовых сообщений также работают корректно на всех устройствах.

Единственный бал за реализацию минимальных требований мы сняли за отсутствие поддержки добавления GIF-файлов —  строчка поиска есть, но ничего не ищет.

Итого за выполнение минимальных требований — 7 баллов.

Раздел общих медиа имеет разбивку по типам файлов, доступ к ним быстрый и удобный. Поддерживается потоковое воспроизведение аудио и видео, кроме того, видео начинает автоматически проигрываться без звука, как в официальном клиенте. Архив, папки, опросы и поиск сообщений внутри чата также полностью функциональны — претензий за реализацию дополнительных требований нет совсем.

Итого за выполнение дополнительных требований — 12 баллов.

По скорости работы ни на одной из платформ замечаний нет — 5 баллов. Что касается интерфейса, то кое-где проявляются совсем незначительные баги, но в целом все симпатично и соответствует гайлдайнам, поэтому тоже 5 баллов.

Дополнительно 10 баллов:

• за возможность закреплять и откреплять диалоги — 1 балл;
• за рабочие настройки кастомизации клиента — 1 балл;
• за возможность создать канал и беседу — 1 балл;
• за наличие настроек приватности и возможности их редактировать — 1 балл;
• возможности отключать уведомления — 1 балл;
• за возможность вести канал (публиковать сообщения) — 1 балл;
• за возможность смены языка — 1 балл;
• за рабочие настройки кастомизации клиента — 1 балл;
• за рабочие настройки уведомлений — 1 балл;
• за наличие глазка с просмотрами — 0,5 балла;
• за наличие синих галочек верификации — 0,5 балла.

Итого — 39 баллов

Оценки другим работам

Результаты тестирования работ других участников приводим кратко, только баллы без подробного разбора:

Заключение

Теперь слово за жюри конкурса, которое уже в ближайшие дни отметит работы конкурсантов денежными призами. К слову, судьи будут смотреть еще и на код, поэтому вполне вероятно, что их оценки распределяться совсем другим образом. В итоге одна из работ наверняка будет взята за основу официального веб-клиента Telegram. Будем с нетерпением следить за развитием событий и рассказывать об этом в будущих заметках.