nocode
October 15, 2022

Производительность приложений на Bubble. Заметки. Часть 1.

Данная серия статей — это мои заметки по книге The Ultimate Guide to Bubble Performance. Тут изложено только то, что фиксировал я, т.к. посчитал это важным.

Слои приложения

Чтобы было понимание производительности в полной мере, нужно запомнить, что любое приложение состоит из двух слоёв:

  1. Клиентский — тот, который видят пользователи.
  2. Серверный — это слой с базами данных. Тот, который пользователь не видит.

Производительность

Существует 2 вида производительсности:

  1. Реальная
  2. Воспринимаемая пользователем

Реальная производительность — это то, как быстро работает приложение с технической точки зрения.

Например, пользователь нажимает кнопку (0мс) — запрос уходит на сервер (200 мс) — запрос обрабатывается сервером (200 мс) — запрос возвращается (200 мс) — запрос отображается на экране (50 мс).

Воспринимаемая пользователем проиозводительность — это то, как работает приложения с точки зрения пользователя.

Например, пользователь нажал на лайк, и лайк поставился через 2 секунды. Для пользователя производительность 2 секунды. Юзер не видит серверной части, он видит только иконку сердечка перед собой, которая должна меняться сразу же после нажатия на неё. Если это происходит слишком долго, то для пользователя такое приложение медленное.

Скетчи от Ивана :)
Нет разницы в том, что приложение может обработать 100к строк за 1 секунду или что оно обрабатывает 1 строку за 1 секунду, если для пользователя это выглядит одинаково.

Если пользователю показать 2 приложения:

  1. Работает медленно под капотом [сервер долго обрабатывает данные], но даёт быстрый отклик [на экране пользователь видит мгновенную реакцию на свои действия: поставил лайк, открыл картинку].
  2. Работает чертовски быстро под капотом [сервер быстро обрабатывает данные], способно обработать миллион строк в секунду, но работает лагающе и прерывисто[пользователь после каждого клика по кнопкам ждёт по 10 секунд прежде чем хотя бы что-то произойдёт на экране].

Пользователь во всех случаях выберет первое приложение, ведь ему не интересно, что под капотом, ему важно взаимодействие с приложением. Он хочет, чтобы лайки ставились быстро. Он хочет, чтобы при нажатии play на видео, оно воспроизводилось моментально, он хочет по клику на картинку открывать её сразу же.

Популярно то, что более удобно для пользователя.

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

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

Воспринимаемой производительностью можно манипулировать с помощью анимаций, экранов загрузки и других отвлекающих фишек. Они используются во всех популярных приложениях: Ebay, Gmail, Twitter, Vk.

Ради интереса попробуйте зайти в Vk и посмотрите, какой экран вы увидите первым. Вероятнее всего это будет экран загрузки.

Хочешь быстрое приложение? Купи тариф подороже.

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

Что это значит?

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

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

Чтобы приложение работало действительно быстро, нужно выполнить 2 задачи:

  1. Оптимизировать серверную часть, чтобы она работала как часы.
  2. Скрыть неровности клиентской части.

Если статья принесла вам пищу для размышлений, дайте обратную связь в комментариях и поставьте лайк.

→ Подписывайтесь на мой канал в Телеграме Иван Некодит.

В канале рассказываю о жизни разработчика и о разработке на Nocode-инструментах.