> ## Content Index > Fetch the complete content index at: https://admin.kod.ru/llms.txt > Use this file to discover other available public pages before exploring further. # Telegram Contest: обзор лучших веб-клиентов Telegram по версии «Кода Дурова» - URL: https://admin.kod.ru/obzor-web-client-telegram-contest/ - Published: 2020-06-29T17:47:15.000Z - Updated: 2020-06-29T17:57:26.000Z - Description: Заглянули в будущее и теперь рассказываем, как будет выглядеть новый веб-клиент Telegram. - Author: Кирилл Сергеев - Tags: Телеграм, Обзоры Команда Telegram активно работает над клиентами для смартфонов и компьютеров, однако уже несколько лет она не обновляла свой веб-клиент. Этой проблемой внутри мессенджера озаботились в ноябре прошлого года — именно тогда Telegram [запустил конкурс](https://contest.com/javascript-web?ref=admin.kod.ru) JavaScript Contest на создание новой веб-версии. Буквально несколько дней назад завершился [третий этап](https://contest.com/javascript-web-3?ref=admin.kod.ru) этого конкурса. Он интересен прежде всего тем, что участники уже создали более-менее рабочие прототипы, которые сейчас может протестировать любой желающий. Мы в редакции решили воспользоваться этой возможностью и немного заглянули в будущее — в то, как в ближайшее время может выглядеть новый веб-клиент Telegram. Рассказываем, что интересного мы нашли. [Интервью с Hip Hyena — участником Telegram Contests: о рисках, соперничестве и нюансах конкурсной разработки«Код Дурова» пообщался с одним из победителей многочисленных конкурсов Telegram с ником Hip Hyena и выяснил много всего интересного.![](https://kod.ru/assets/apple-touch-icon.png?v=27f324b287)Код ДуроваГайк Даллакян![](https://kod.ru/content/images/2020/06/----------3---------------4.jpg)](https://kod.ru/interview-hip-hyena-telegram-contests/?ref=admin.kod.ru) ## Задачи, над которыми работали участники На [первом этапе](https://contest.com/javascript-web?ref=admin.kod.ru) разработчикам необходимо было создать легкую веб-версию Telegram без использования сторонних фреймворков интерфейса. Она должна была включать в себя экраны входа и регистрации, а также позволять просматривать список чатов и сообщения в них. Вместе с тем работы должны были визуально соответствовать приведенным макетам. Целью [второго этапа](https://contest.com/javascript-web-2?mode=results&ref=admin.kod.ru) было продолжение работы над легким веб-клиентом. Теперь он должен был научиться отправлять и получать сообщения, отображать медиа, файлы и ссылки, иметь раздел «общие медиа», поддерживать стикеры, эмодзи и поиск сообщений по чатам. Основной упор разработчикам предлагалось сделать на скорость и размер веб-приложения, а также обратить внимание на детали. Завершившийся несколько дней назад [финальный этап](https://contest.com/javascript-web-3?ref=admin.kod.ru) предполагал дальнейшую работу на клиентом. Теперь в нем обязательно должен был появиться интерфейс для мобильных устройств, «который безупречно работает в Chrome и Safari», полная поддержка эмодзи, стикеров и «гифок», запись голосовых сообщений, а также полнофункциональные локальный и глобальный поиск. При этом основными критериями для определения победителей стали скорость, размер приложений и внимание к деталям. ![](https://admin.kod.ru/content/images/2020/06/IMG_2849.jpg) В числе дополнительных требований [были обозначены](https://t.me/contest/177?ref=admin.kod.ru): поддержка всех типов общих медиа, стриминга видео/аудио, архива, папок, опросов всех типов, а также поиска сообщений внутри чата. [Telegram завершил третий этап конкурса для разработчиков, пишущих на JavaScriptВыявлено 11 самых лучших работ. Впереди — финал.![](https://kod.ru/assets/apple-touch-icon.png?v=27f324b287)Код ДуроваВладислав Войтенко![](https://kod.ru/content/images/2020/06/SsylkiRETINA-111.png)](https://kod.ru/telegram-javascript-contest-jun-2020/?ref=admin.kod.ru) ## Критерии оценки «Кода Дурова» Не дожидаясь вердикта жюри конкурса, мы решили оценить работы финалистов по разработанному нами алгоритму. Отмечу, что в код участников мы не смотрели, а оценивали работы преимущественно с точки зрения конечного пользователя: что работает или не работает, насколько быстрый и плавный интерфейс, какие приятные или неприятные нюансы мы нашли. Вот, как выглядит наш регламент оценки. - Оценка реализации [четырех минимальных](https://t.me/contest/177?ref=admin.kod.ru) требований Telegram. Если функция есть хоть в каком-то виде — присваиваем 1 балл. Если это еще и работает хорошо — 2 балла. - Оценка реализации [шести дополнительных](https://t.me/contest/177?ref=admin.kod.ru) требований — по аналогии с прошлым пунктом. - Скорость работы и визуальный вид веб-клиента мы оценили по пятибальной шкале, то есть за каждый из этих параметров конкурсная работа могла получить до 5 баллов или до 10 баллов суммарно. - Любые фишки, которые реализованы помимо тех, что были заявлены командой Telegram, мы также оценили дополнительными баллами — от 0,5 до 1 балла за каждую. ## Обзор и оценка топ-6 работ ### Tall Tiger \[[ссылка](https://contest.com/javascript-web-3/entry1418?ref=admin.kod.ru)\] — 6 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/Tall-Tiger-1.jpg) Интерфейс с ПК Веб-клиент в целом работает на смартфоне неплохо, однако в ряде случаев при работе в Chrome на Android возникает неприятный баг, из-за которого диалоговое окно не реагирует ни на какие нажатия, приходится перезагружать страницу. Панель с эмодзи, стикерами и GIF реализована частично: даже на мощных устройствах приходится долго ждать загрузки всех эмодзи. Стикеры загружаются как-то хаотично и заметны баги при загрузке в Safari. Что касается GIF, то видны лишь последние файлы, поиска нет и отправить GIF-анимацию также не удается. Запись голосовых сообщений есть, но на iOS они никак не отображаются и их невозможно отправить. За каждый из этих пунктов мы поставили по 1 баллу. Единственное выполненное без нареканий основное требование — это поиск, который хорошо работает как на ПК, так и на смартфонах. За него — 2 балла. Итого за выполнение минимальных требований — **5 баллов**. Среди дополнительных требований претензий у нас нет также только к поиску — внутри конкретных чатов он показывает высокую скорость работы и актуальную выдачу, за него работа получает 2 балла. Общие медиа присутствуют, однако не работают в iOS. То же самое с потоковым воспроизведением: на Android и ПК работает, а на iOS — нет. Вообще нигде автоматически не загружаются голосовые сообщения. Архив реализован, но с ПК не работает архивирование чатов. При этом, во время выхода из архива страница с диалогами на смартфоне на базе Android фризится и не работает, приходится перезагружать страницу. С папками можно работать только с уже созданными, новые создать нельзя. Во время редактирования нет кнопки сохранения, клиент автоматически сохраняет изменения. Но работают в целом папки не очень интуитивно. За все эти пункты мы поставили по 1 баллу. Опросы всех типов не реализованы — видны лишь результаты опроса, а голосовать или создавать опросы нельзя, поэтому здесь работа баллов не получила. Итого за выполнение дополнительных требований — **6 баллов.** Веб-клиент часто зависает на мобильных устройствах. Не подключена плавная загрузка, поэтому приходится ждать прогрузки некоторых элементов, и только после неё можно пользоваться клиентом. Иногда загрузка просто зависает и приходится перезагружать страницу. Поэтому только **3 балла**. Что касается интерфейса, то в целом работа неплохая, но есть ряд замечаний. Большое количество кнопок не работают. Не очень понятно, что делает на верхнем сайдбаре кнопка отписки от канала. Если зайти в описание каналов, то видно, что не соблюдена верстка и весь текст формируется в один абзац. Исходя из этого, также **3 балла**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/Tall-Tiger-2.jpg) Интерфейс со смартфона Дополнительно **7,5 баллов:** - за возможности отключать уведомления — 1 балл; - за возможность смены языка — 1 балл; - за наличие Instant View — 1 балл; - за рабочие настройки кастомизации клиента — 1 балл; - за рабочие настройки приватности — 1 балл; - за рабочие настройки уведомлений — 1 балл; - за наличие глазка с просмотрами — 0,5 балла; - за попытку подключить звонки (кнопка есть, вызов идет, но разговор сбрасыватся моментально) — 0,5 балла; - за подробные комментарии со всеми нововведениями в работе — 0,5 балла. **Итого — 24,5 балла** ### Giant Parrot \[[ссылка](https://contest.com/javascript-web-3/entry1422?ref=admin.kod.ru)\] — 5 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/Giant-Parrot-1.jpg) Интерфейс с ПК Одна из немногих конкурсных работ, в которой минимум претензий к реализации обязательных требований. Мобильная версия отлично работает на всех устройствах, эмодзи, стикеры и «гифки» поддерживаются, есть даже поиск последних. Голосовые сообщения на всех платформах не только поддерживаются, но и отлично записываются. Поиск тоже работает отлично. По каждому пункту уверенные 2 балла. Итого за выполнение минимальных требований — **8 баллов**. Вместе с тем отлично реализованы практически все дополнительные требования: общие медиа, потоковое воспроизведение аудио и видео (есть небольшие проблемы с производительностью, но работает на всех платформах), поиск и архив. За эти функции — по 2 балла. Проблемы есть только во время создания папки на Android — фризы вплоть до полного отключения страницы с веб-клиентом. Кроме того, нельзя создавать опросы, хотя в уже созданных есть красивая анимация и возможность голосовать. За эти функции мы присудили по 1 баллу. Итого за выполнение дополнительных требований — **10 баллов.** Веб-клиент часто зависает на мобильных устройствах — чаще всего на Android и особенно в окне диалогов после выхода из настроек, архива и других пунктов гамбургер-меню. Поэтому за скорость работы — **3 балла**. В интерфейсе нам не понравился шрифт, а также заметно, что на визуализацию некоторых элементов автору просто не хватило времени. В Safari не реализовано выпадающее контектное меню по нажатию правой кнопки мыши. В итоге только **3 балла**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/Giant-Parrot-2.jpg) Интерфейс со смартфона Дополнительно **2 балла:** - за возможность отключать уведомления — 1 балл; - за наличие глазка с просмотрами — 0,5 балла; - за подробные комментарии со всеми нововведениями в работе — 0,5 балла. **Итого — 26 баллов** ### Ace Monkey \[[ссылка](https://contest.com/javascript-web-3/entry1417?ref=admin.kod.ru)\] — 4 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/Ace-Monkey-1.jpg) Интерфейс с ПК Минимальные требования в этой работе реализованы неплохо, веб-клиент на смартфоне выглядит правильно и работает быстро. Голосовые сообщения работают на всех платформах, качество записи удовлетворительное. Поиск есть и работает он хорошо. Единственный бал мы сняли за отсутствие поиска по «гифкам», а также невозможность поиска стикеров при вводе на кириллице. Итого за выполнение минимальных требований — **7 баллов**. Отображение и распределение общих медиа по категориям доступно для всех систем. Поиск сообщений внутри конкретного чата работает без нареканий. Это же касается и папок. За эти моменты по 2 балла. За реализацию потокового воспроизведения мы присудили 1 балл, так как оно полноценно работает только в случае с Android и ПК, а на iOS приходится ждать предзагрузки. Также 1 балл работа получает за архив, так как не получается «разархивировать» чаты на iOS. За опросы баллы мы не начислили, ибо поддерживается только один тип — классический. Итого за выполнение дополнительных требований — **8 баллов.** При открытии чатов есть небольшие фризы, подлагивания, плавности не хватает, поэтому за скорость работы мы присвоили **4 балла**. По визуальной части можем только похвалить, особенно за то, что в описании каналов работают ссылки — **5 баллов**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/Ace-Monkey-2.jpg) Интерфейс со смартфона Дополнительно **6,5 баллов:** - за возможность закреплять и откреплять диалоги — 1 балл; - за возможность создать канал и беседу — 1 балл; - за возможность отключать уведомления — 1 балл; - за возможность вести канал (публиковать сообщения) — 1 балл; - за наличие глазка с просмотрами — 0,5 балла; - за наличие синих галочек верификации — 0,5 балла; - за подробные комментарии со всеми нововведениями в работе — 0,5 балла. **Итого — 30,5 балла** ### Merry Ant \[[ссылка](https://contest.com/javascript-web-3/entry1415?ref=admin.kod.ru)\] — 3 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/Merry-Ant-2.jpg) Интерфейс с ПК Мобильная версия шустро и плавно работает на обеих платформах. Единственное нарекание относится к iOS: если войти в чат и моментально начать скроллить, то скролл не работает — нужно чуть-чуть подождать. Поиск чатов работает быстро и точно на всех устройствах. Замечание одно — не отображаются аватарки каналов и чатов в выдаче. В целом оба нарекания не критичны, поэтому за каждый из этих пунктов мы присудили по 2 балла. Стикеры и эмодзи поддерживаются, их загрузка быстрая и плавная. Однако панель с «гифками» работает не полностью: можно отправлять «гифки», которые использовались ранее, а вот поиск по ним не работает. Запись голосовых сообщений имеется, но работает полноценно только на ПК. Со смартфона в большинстве случаев записанное сообщение не отправляется. На Android-устройстве один раз записать голосовое все же получилось, но итоговая запись вышла прерывистой. Поэтому за эти два пункта мы присудили по 1 баллу. Итого за выполнение минимальных требований — **6 баллов**. Из дополнительных требований хорошо реализованы архив, папки, поиск внутри чатов и опросы, в последних проработана даже анимация. За каждый из этих пунктов — по 2 балла. Раздел общих медиа реализован, но не полностью — нет вкладок с «гифками» и голосовыми сообщениями, поэтому 1 балл. Потоковое воспроизведение аудио и видео не реализовано. Итого за выполнение дополнительных требований — **9 баллов.** Скорость работы высокая, однако при одновременной загрузке большого числа медиа или GIF-файлов начинает тормозить, поэтому только **4 балла**. Верстка в целом выполнена по гайдлайнам конкурса, но есть ряд замечаний. Во-первых, в описаниях каналов и чатов не продумана верстка и текст сливается в один абзац. Там же присутствует нерабочая кнопка приглашения в канал. На ПК наблюдаются проблемы с версткой кнопки создания каналов и бесед. Учитывая эти моменты, за интерфейс мы присудили **4 балла**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/Merry-Ant-1-1.jpg) Интерфейс со смартфона Дополнительно **9,5 балла:** - за возможность закреплять и откреплять диалоги — 1 балл; - за рабочие настройки кастомизации клиента — 1 балл; - за возможность создать канал и беседу — 1 балл; - за наличие настроек приватности и возможности их редактировать — 1 балл; - возможности отключать уведомления — 1 балл; - за возможность вести канал (публиковать сообщения) — 1 балл; - за возможность смены языка — 1 балл; - за рабочие настройки уведомлений — 1 балл; - за наличие глазка с просмотрами — 0,5 балла; - за наличие синих галочек верификации — 0,5 балла; - за подробные комментарии со всеми нововведениями в работе — 0,5 балла. **Итого — 32,5 балла** ### Posh Ram \[[ссылка](https://contest.com/javascript-web-3/entry1416?ref=admin.kod.ru)\] — 2 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/Posh-Ram-1.jpg) Интерфейс с ПК Все основные пункты так или иначе реализованы, но есть буквально пара проблем: нет возможности выбрать GIF-файл для отправки, а голосовые сообщения записываются на iOS с хрипами. Поэтому за каждый из этих пунктов мы присудили по 1 баллу. При этом на Android с «войсами» все хорошо — запись и скорость загрузки на высоком уровне. Мобильная версия шустрая и плавная, поиск работает быстро и точно. Помимо глобального поиска работает поиск по беседам/чатам и каналам. За мобильную версию и поиск мы при присудили по 2 балла. Итого за выполнение минимальных требований — **6 баллов**. Похвально, что Posh Ram справился со всеми дополнительными требованиями. Есть общие медиа и галерея, которые работают хорошо — есть разделение на все разделы. Архив и папки также реализованы полностью, нельзя лишь менять порядок папок, но это, на наш взгляд, совсем незначительный недочет. Поиск внутри чата работает без нареканий, как и опросы. За все эти фишки мы присудили по 2 балла. Единственное, за что мы дали только 1 балл — это потоковое воспроизведение аудио и видео. Оно заработало только на ПК, а на смартфоне пришлось ждать полной загрузки. Итого за выполнение дополнительных требований — **11 баллов.** С точки зрения скорости работы веб-клиент Posh Ram один из самых шустрых. Критичных фризов и зависаний за все время тестирования я не заметил. Однако при большом количестве стикеров диалог начинает подтормаживать, поэтому за скорость работы мы присудили **4 балла**. Что касается интерфейса, то он максимально соответствует заявленным гайдлайнам. Вместе с тем присутствуют дополнительные элементы, перенесенные из приложения — за это работу можно тоже похвалить. Такую заботу о мелочах мы оценили в **5 баллов**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/Posh-Ram-2.jpg) Интерфейс со смартфона Дополнительно **9 баллов**: - за возможность закреплять и откреплять диалоги — 1 балл; - за рабочие настройки кастомизации клиента — 1 балл; - за наличие Instant View — 1 балл; - за возможность создать канал и беседу — 1 балл; - за наличие настроек приватности и возможности их редактировать — 1 балл; - за возможность отключать уведомления — 1 балл; - за возможность вести канал (публиковать сообщения) — 1 балл; - за возможность смены языка — 1 балл. - за наличие синих галочек верификации — 0,5 балла; - за наличие глазка с просмотрами — 0,5 балла. **Итого — 35 баллов** ### Jolly Cobra \[[ссылка](https://contest.com/javascript-web-3/entry1412?ref=admin.kod.ru)\] — 1 место ![Интерфейс с ПК](https://admin.kod.ru/content/images/2020/06/------1--2-.jpg) Интерфейс с ПК Это одна из лучших работ с точки зрения интерфейса и скорости работы на мобильных устройствах. Лаги минимальны, авторизация и выход из учётной записи — без проблем. Поиск и запись голосовых сообщений также работают корректно на всех устройствах. Единственный бал за реализацию минимальных требований мы сняли за отсутствие поддержки добавления GIF-файлов — строчка поиска есть, но ничего не ищет. Итого за выполнение минимальных требований — **7 баллов**. Раздел общих медиа имеет разбивку по типам файлов, доступ к ним быстрый и удобный. Поддерживается потоковое воспроизведение аудио и видео, кроме того, видео начинает автоматически проигрываться без звука, как в официальном клиенте. Архив, папки, опросы и поиск сообщений внутри чата также полностью функциональны — претензий за реализацию дополнительных требований нет совсем. Итого за выполнение дополнительных требований — **12 баллов.** По скорости работы ни на одной из платформ замечаний нет — **5 баллов.** Что касается интерфейса, то кое-где проявляются совсем незначительные баги, но в целом все симпатично и соответствует гайлдайнам, поэтому тоже **5 баллов**. ![Интерфейс со смартфона](https://admin.kod.ru/content/images/2020/06/image-192.png) Интерфейс со смартфона Дополнительно **10 баллов**: - за возможность закреплять и откреплять диалоги — 1 балл; - за рабочие настройки кастомизации клиента — 1 балл; - за возможность создать канал и беседу — 1 балл; - за наличие настроек приватности и возможности их редактировать — 1 балл; - возможности отключать уведомления — 1 балл; - за возможность вести канал (публиковать сообщения) — 1 балл; - за возможность смены языка — 1 балл; - за рабочие настройки кастомизации клиента — 1 балл; - за рабочие настройки уведомлений — 1 балл; - за наличие глазка с просмотрами — 0,5 балла; - за наличие синих галочек верификации — 0,5 балла. **Итого — 39 баллов** ## Оценки другим работам Результаты тестирования работ других участников приводим кратко, только баллы без подробного разбора: ![](https://admin.kod.ru/content/images/2020/06/Screen1-2.jpg) ![](https://admin.kod.ru/content/images/2020/06/Screen-5.jpg) ![](https://admin.kod.ru/content/images/2020/06/Screen2-2.jpg) ![](https://admin.kod.ru/content/images/2020/06/Screen3-2.jpg) ![](https://admin.kod.ru/content/images/2020/06/Screen4-3.jpg) ## Заключение Теперь слово за жюри конкурса, которое уже в ближайшие дни отметит работы конкурсантов денежными призами. К слову, судьи будут смотреть еще и на код, поэтому вполне вероятно, что их оценки распределяться совсем другим образом. В итоге одна из работ наверняка будет взята за основу официального веб-клиента Telegram. Будем с нетерпением следить за развитием событий и рассказывать об этом в будущих заметках.