qbnk // Mini Apps, Development and Me
1.36K subscribers
517 photos
98 videos
5 files
379 links
Стример, разработчик, блогер. Улучшаю платформу Telegram Mini Apps, создаю исключительные продукты, выступаю на конференциях.

Лобби: t.me/heyqbnk_chat
Twitch: twitch.tv/qbnk
Download Telegram
Этот мем отлично описывает мою неделю дежурства.

Нашел тут пару минуток пост накидать. Я начал понимать, что Павел начинает подходить вплотную к тому, от чего пытался уйти — от создания социальной сети и выбора в пользу мессенджера. Если исходить из тех обновления, которые команда Telegram привносит в рамках текущего года, складывается впечатление, что Telegram — это теперь самая что ни на есть социальная сеть. Сторисы, даты рождения, мини-приложения — это всё части чего-то куда более сложного чем просто мессенджера.

Отмечу, что я ничего против идеи ухода в русло социальной сети не имею, мне она нейтральна, а может даже ближе чем идея просто мессенджера. Тем не менее, решил обратить и ваше внимание на это.

Сегодня трансляции не будет, сорян. Ксю завтра уезжает, поэтому вечер проведу с ней.

Я начинаю подходить к завершению работы над @tma.js/sdk@3.0. Я полностью переосмыслил и переписал навигаторы для мини-приложений, написал множество дополнительных тестов. Ну и конечно не забыл помучаться в своих философских размышлениях касательно того, как "правильно".

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

Ждите анонсов 👨‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
qbnk // Mini Apps, Development and Me
Привет. Последние дни какой-то угнетенный, но при этом мотивированный хорошо работать над Telegram Mini Apps. Не знаю, что происходит, но определенные догадки, конечно, есть. По Питеру, кажется, отбой. Там какие-то рекировки происходят и без моего выступления…
Время засёк, решение проблемы заняло 2 дня. По крайней мере, этот баг я больше воспроизвести не могу, как бы не шатал элементы в боковой панели.

Держите новый баг. Если открыть любой чат и кликнуть в верхнюю половину кнопки с 3 точками, то покажется popover, который улетает за границы приложения и экрана в целом.

Второй баг. При открытии информации о группе, клик слева и справа от блока share интерпретируется как клик по самому блоку.

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

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

Сегодня включаемся. Сейчас сделаю небольшие дела, схожу за порцией кофе и запушу. Ориентируемся на 15:00. Будем допиливать BiometryManager для sdk 3.0, а потом будем править биндинги под React и Solid.

До встречи 🙂
Please open Telegram to view this post
VIEW IN TELEGRAM
Трансляция запущена!

Я улучшаю Telegram Mini Apps / Разговоры об IT и не только

— Software and Game Development
twitch.tv/qbnk
This media is not supported in your browser
VIEW IN TELEGRAM
Яндекс Cloud после того, как выдаваемый каждый месяц грант иссяк
Привет.

Сидел вчера допиливал BiometricManager и пришел к интересному умозаключению. Не могу сказать точно, но вроде как бытует мнение о том, что команда Telegram в достаточно оперативном, быстром порядке клепает новые фичи. При том, что штат достаточно маленький. Но как на крайней трансляции я уже и сказал, меньше, как и больше — не значит лучше. Иными словами, размер штата в абсолюте без контекста мало о чем говорит. Важно понимать, а чем вообще этот штат занимается. И вот если уже посмотреть на КПД такого штата, то из этого можно сделать выводы о том, достаточно его или нет.

К чему это вообще. Я начал снова работать с параметрами запуска и понял, что команда Telegram допустила 3 критических ошибки. Сугубо из моего субъективного мнения, команда решила не изучать их единственного конкурента — VK Mini Apps. А почему решила не изучать? Потому что либо сотрудников не хватило, либо времени. Либо в принципе с технической стороны на технологию ВКонтакте никто и не посмотрел, а очень зря.

Автоматический показ приложения после загрузки ресурсов

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

И тут меня до сих пор умиляет предположение о том, что разработчики каждой версии приложения Telegram будто бы работают в вакууме и не коммуницируют друг с другом. Эталоном реализации этого функционала я считаю Telegram для macOS. Тут ребята визуально сделали очень близко к платформе-эталону и показывают нормальный лоадер, на который приятно смотреть. Жаль, конечно, что привязали его к теме ботов, потому что это уже давно не про ботов, но как факт, они сделали хорошо. В Telegram Desktop лоадер — не-лоадер, а просто какой-то индикатор загрузки с огромным пустым блоком, в котором потом отобразится приложение. В Web A вообще нет никакого лоадера, показывается тупо белый блок на полхари, в нем появляется мини-приложение после загрузки. В Web K тоже пустой (но хотя бы не белый) блок и вообще без какой-либо индикации загрузки. В версии для iOS только индикация загрузки, но не лоадер.

Короче, меня вообще прямо напрягать начинает, будто у них там децентрализация и каждый делает вообще как захочет, нет никакого Quality Assurance.

Тем не менее, суть проблемы не именно в этом. Когда все ресурсы вашего приложения загрузились, приложение Telegram автоматически уберёт лоадер для того, чтобы пользователь увидел ваше приложение. Успело ли оно в этот момент загрузиться (запустить скрипты, построить DOM и так далее), нативному приложению абсолютно плевать. Там могут выполняться какие-то процессы, которые с загрузкой ресурсов никак не связаны, но которые определяют визуал приложения и требуют времени.

Тем не менее, команда Telegram придумала метод web_app_ready, который скрывает лоадер при вызове. Кейс применения такой, что даже если ваше приложение еще загружается, вы можете убрать этот лоадер. Насколько кейс применения широкий, решать уже не мне. Я никогда им не пользовался и не считаю, что его можно много где применить.

А знаете как это должно работать и работает в VK Mini Apps уже >5 лет? Нативное приложение ВКонтакте не показывает мини-приложение пока оно не вызовет этот самый метод скрытия лоадера. Если мини-приложение не вызывает его в течение 10 секунд, загрузка мини-приложения прерывается и пользователю отображается ошибка. Тайм-аут, в общем. Почему так не сделали в Telegram? Вообще ума не приложу.

В итоге надо сидеть и молиться, что приложение не будет моргать, что твой (не нативного приложения Telegram) лоадер загрузки приложения успеет отрисоваться до того момента, как скроется лоадер сверху, да и вообще придется реализовывать свой такой лоадер. Хотя, казалось бы, зачем?

Решение простое — не показывать приложение, пока оно не сообщило о том, что готово к показу.
Параметры запуска в window.location.hash

Эта проблема уже частично вытекает из выше описанной проблемы.

Параметры запуска Telegram Mini Apps расположены в hash-части URL приложения. Исходя из этого можно понять, что никакой SSR (Server-Side Rendering) работать не будет. Почему? Потому что hash-часть не отправляется на сервер, он не сможет отрисовать на основе него страницу. Получается, что от SSR нет никакого толку. Да и фиг с ним, на самом деле.

Максимальная длина URL, если не изменяет память, составляет примерно 2000 символов +-, и учитывая текущий список параметров запуска, через какое-то время поместить в URL его не выйдет. По этой причине команда Telegram решила помещать параметры запуска не в query-параметры, а в hash.

Теперь вопрос. Зачем они там? Учитывая тот факт, что hash — client side only, почему бы данные в нем просто не получать через запрос к нативному приложению? А я скажу почему. Потому что тогда загрузка приложения станет асинхронной, и оно точно будет моргать после скрытия лоадера, описанного в предыдущем разделе. В момент выполнения скрипта мини-приложению придется выполнить запросы для получения параметров запуска. Такие запросы не подпадают под категорию "загрузка ресурсов", после которой приложение автоматически показывается. То есть при их выполнении этап "загрузка ресурсов" растянут не будет, и приложение покажется раньше необходимого.

Ну и получается такая ситуация, что приложение показалось пользователю, оно там совершает какие-то запросы (которые могут быть даже по 10 ms), и просто моргает, потому что лишь спустя какое-то время получило цветовую палитру, например. Поэтому решили воткнуть костылище в виде "а давайте запихнем палитру в hash, чтобы ее асинхронно не получать". Сейчас hash — это какая-то свалка из параметров, которые передаются мини-приложению.

Рассказать решение? Угадайте, на что буду ссылаться. Правильно, на VK Mini Apps.

Что если все-таки не показывать приложение, пока оно не сообщило о готовности к показу? Что если получать параметры запуска сугубо по запросу к нативному приложению? Что если после этого можно расширять список параметров запуска вообще как влезет, и не думать о том, что вы нарушаете конвенции? А какие-то из них можно будет вообще выпилить. Что если жизненно необходимые параметры помещать в query-параметры? Init data, например, подпись которых можно проверить. Может быть серверная сторона на основе этого сможет решать, какой контент отдавать (о Боже, да это же SSR!).

Это всё невероятно просто, нужно было лишь взглянуть на VK Mini Apps и сделать буквально то же самое в Telegram. Нужно было.

Методы — как способ общаться со стеной

Опять же, ссылаясь на крайнюю трансляцию, напомню, что вся валидация параметров методов происходит на клиентской стороне, в JS-коде, в Telegram SDK. С чем есть ассоциации? Подскажу — с валидацией параметров не на серверной стороне, а на клиентской. Я даже не знаю, что тут еще добавить. Отправишь невалидный параметр — приложение Telegram либо крашнет, либо вообще просто ничего не произойдет.

Здесь же отметим, что никаких событий об ошибках не генерируется. Даже если вы попытаетесь вызвать неизвестный для текущей версии приложения Telegram метод, оно вам никак об этом не сообщит. Просто ничего не произойдет.

...а знаете где эта проблема решена уже >5 лет назад? В VK Mini Apps.

Итог

Эти проблемы всё ещё можно исправить, пока мы слишком далеко не уехали. С моей точки зрения текущие решения являются костылём, и не потому, что я с VK Mini Apps работал, и работал во ВКонтакте в принципе, а лишь потому, что реализация в VK Mini Apps действительно ощущается правильной и должна браться за референс. Над этой платформой работало просто огромное количество человек, потратило тонны человеко-часов, и игнорить их опыт — огромная ошибка.

Что-ж, пошел я за кофе и буду снова плавать в философских рассуждениях о том, как "правильно".
Влад на рабочем созвоне
А теперь перечитываем мой пост с беспокойством о помешанности на "финтифлюшках":
https://t.me/heyqbnk/1103

2030 год: при клике на реакцию 🔥, телефон начинает загораться

Сегодня включаемся. Ориентируемся на 15:00. Продолжаем заниматься разработкой + расскажу кое-что интересное.
Forwarded from Du Rove's Channel (Pavel Durov)
This media is not supported in your browser
VIEW IN TELEGRAM
While reviewing our design contest submissions, I was inspired by a message effects project. So we reused our reactions UI and animated emoji effects to put together this video demo.

Set 🫡 if you want this implemented.
Трансляция запущена!

Я улучшаю Telegram Mini Apps / Разговоры об IT и не только

— Software and Game Development
twitch.tv/qbnk
Голосование здорового человека
Forwarded from Trending Apps
While reviewing Telegram design contest submissions, we were impressed by Mini Apps navigation projects.

Set 🫡 if you want @durov to implement this.

Design Contest Submissions
1 · 2
This media is not supported in your browser
VIEW IN TELEGRAM
Влад снимает стресс после 10 месяцев без отпуска
День добрый, Господа.

Я постепенно заканчиваю работу над sdk@3.0 и очень хочу сегодня завершить работу с кодовой базой.

@tma.js/sdk
@tma.js/sdk-solid
@tma.js/sdk-react
Шаблон для Solid
Шаблон для React

Вчера как-то пытался биндинги для React добить, но в очередной раз убеждаюсь, что React по сравнению с Solid — полное г*вно. Необходимость поддерживать порядок вызова хуков и их количество, это конечно сюр полный. Этим в Solid можно не заниматься, и код становится сильно проще.

Сегодня заводимся ориентировочно в +-15:00. Еще кое-какие мелочи по TMA расскажу.