Команда Telegram активно работает над клиентами для смартфонов и компьютеров, однако уже несколько лет она не обновляла свой веб-клиент. Этой проблемой внутри мессенджера озаботились в ноябре прошлого года — именно тогда Telegram запустил конкурс JavaScript Contest на создание новой веб-версии.
Буквально несколько дней назад завершился третий этап этого конкурса. Он интересен прежде всего тем, что участники уже создали более-менее рабочие прототипы, которые сейчас может протестировать любой желающий.
Мы в редакции решили воспользоваться этой возможностью и немного заглянули в будущее — в то, как в ближайшее время может выглядеть новый веб-клиент Telegram. Рассказываем, что интересного мы нашли.
Интервью с Hip Hyena — участником Telegram Contests: о рисках, соперничестве и нюансах конкурсной разработки
«Код Дурова» пообщался с одним из победителей многочисленных конкурсов Telegram с ником Hip Hyena и выяснил много всего интересного.
Задачи, над которыми работали участники На первом этапе разработчикам необходимо было создать легкую веб-версию Telegram без использования сторонних фреймворков интерфейса. Она должна была включать в себя экраны входа и регистрации, а также позволять просматривать список чатов и сообщения в них. Вместе с тем работы должны были визуально соответствовать приведенным макетам.
Целью второго этапа было продолжение работы над легким веб-клиентом. Теперь он должен был научиться отправлять и получать сообщения, отображать медиа, файлы и ссылки, иметь раздел «общие медиа», поддерживать стикеры, эмодзи и поиск сообщений по чатам. Основной упор разработчикам предлагалось сделать на скорость и размер веб-приложения, а также обратить внимание на детали.
Завершившийся несколько дней назад финальный этап предполагал дальнейшую работу на клиентом. Теперь в нем обязательно должен был появиться интерфейс для мобильных устройств, «который безупречно работает в Chrome и Safari», полная поддержка эмодзи, стикеров и «гифок», запись голосовых сообщений, а также полнофункциональные локальный и глобальный поиск. При этом основными критериями для определения победителей стали скорость, размер приложений и внимание к деталям.
В числе дополнительных требований были обозначены : поддержка всех типов общих медиа, стриминга видео/аудио, архива, папок, опросов всех типов, а также поиска сообщений внутри чата.
Telegram завершил третий этап конкурса для разработчиков, пишущих на JavaScript
Выявлено 11 самых лучших работ. Впереди — финал.
Критерии оценки «Кода Дурова» Не дожидаясь вердикта жюри конкурса, мы решили оценить работы финалистов по разработанному нами алгоритму. Отмечу, что в код участников мы не смотрели, а оценивали работы преимущественно с точки зрения конечного пользователя: что работает или не работает, насколько быстрый и плавный интерфейс, какие приятные или неприятные нюансы мы нашли. Вот, как выглядит наш регламент оценки.
Оценка реализации четырех минимальных требований 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. Будем с нетерпением следить за развитием событий и рассказывать об этом в будущих заметках.
Комментарии