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

[Alvaros]

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

You must be registered for see links

JavaScript Contest на создание новой веб-версии.

Буквально несколько дней назад завершился

You must be registered for see links

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

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

You must be registered for see links

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


На

You must be registered for see links

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

Целью

You must be registered for see links

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

Завершившийся несколько дней назад

You must be registered for see links

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

В числе дополнительных требований

You must be registered for see links

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

You must be registered for see links

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


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

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

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

Tall Tiger [

You must be registered for see links

] — 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 [

You must be registered for see links

] — 5 место

Интерфейс с ПК

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

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

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

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

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

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

Интерфейс со смартфона

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

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

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

Ace Monkey [

You must be registered for see links

] — 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 [

You must be registered for see links

] — 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 [

You must be registered for see links

] — 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 [

You must be registered for see links

] — 1 место

Интерфейс с ПК

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

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

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

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

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

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

Интерфейс со смартфона

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

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

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

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


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

Заключение


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

You must be registered for see links