Bubble io что это

Обзор Bubble: мощный конструктор веб-приложений без кода

Несмотря на то, что зерокодинг в России только набирает обороты, в распоряжении зерокодера десятки платформ под разные задачи и вкусы. Есть довольно простые, как iBuildApp, и многофункциональные — как Bubble. Последний — один из лидеров среди конструкторов веб-приложений. Ему и посвящен этот обзор.

Общая информация

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

Из-за обилия возможностей разобраться в Bubble чуть сложнее, чем в Glide, Adalo или Webflow. Зато возможностей куда больше. Разработчики создают как простые приложения для личного применения, так и сложные системы на десятки−сотни тысяч пользователей. Например, на основе встроенных шаблонов можно построить онлайн-школу, CRM-систему или клон Uber.

Основное понятие в Bubble-разработке — рабочий процесс (workflow). Сначала вы собираете интерфейс из форм, кнопок, иконок и текста, перетаскивая их в рабочее пространство. А затем «оживляете» каждый элемент — закрепляете за ним события и связываете с другими элементами и данными. Мы ещё расскажем подробно о процессе разработки.

Как Bubble спасает от рутины

Иногда программисты пишут приложения или части приложений, которые уже реализованы в других проектах. Вот самые распространенные из них:

• страница авторизации/регистрации
• онлайн−магазин с каталогом товаров и корзиной
• сайт−блог
• корпоративная CRM−система.

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

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

Ограничения Bubble

Есть 3 вещи, которые Bubble не может или может, но не очень хорошо.

На Bubble нельзя создавать мощные игры. В платформе нет инструментов для работы со сложной графикой и физикой. Зато можно собирать игрушки с примитивной механикой: «крестики−нолики», казино, судоку и др. Все-таки Bubble — это про бизнес-приложения, а не про развлечения.

На Bubble по умолчанию нельзя сделать нативное мобильное приложение. Это значит, что его не получится установить на Android и iOS. Но не спешите расстраиваться. Проблему можно обойти с помощью двух инструментов:

• Web View — обертка для размещения веб-приложений в Play Market и App Store
• PWA (Progressive Web App) — веб-приложение, которое имитирует работу нативного. Оно запускается в браузере, но позволяет установить на экран телефона иконку для быстрого доступа.

Даже при работе через мобильный браузер с UI нет проблем: кнопки, вкладки и ссылки открываются легко.

С адаптивностью в Bubble сложновато. Чтобы сделать адаптивное веб−приложение, нужно погружаться в нюансы платформы и потратить время. Поэтому собрать лендинг или простую страницу удобнее в Тильде, а приложения с базами данных и сложной логикой — в Bubble. Затем их можно объединить на одном домене.

Во всем остальном Bubble — полноценный инструмент для разработки полезных и работающих веб-приложений.

Сколько денег экономит Bubble по сравнению с традиционной разработкой

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

Допустим, есть задача: разработать личный кабинет ученика для оффлайн-школы с обучающими материалами, домашними заданиями и контрольным работами. В школе зарегистрировано 15 тыс учеников. В этом году компания планирует привлечь еще 10 тыс.

Вот из чего складывается стоимость заказа:

• возможности приложения, функциональность
• оптимизация UX/UI
• оригинальный дизайн
• подключение сторонних сервисов
• тестирование и отладка
• публикация в App Store и Play Market
• поддержка и развитие.

Если заказываем в студии на цену также влияют репутация, город и наличие офиса. Московская студия с офисом в «Сити» попросит за работу в 1.5-2 раза больше, чем группа специалистов из Красноярска на удаленке. Цена за решение нашей задачи «под ключ» начинается от 1 млн рублей. То есть за эти деньги студия разработает для школы уникальный дизайн, напишет код с админкой и ролями ученик/преподаватель и опубликует приложение в сторах. Часто студии гарантируют бесплатную техническую поддержку от нескольких месяцев.

Если создаём на Bubble — цена зависит от тарифа. Так как компания планирует привлекать новых пользователей, нужно масштабируемое решение. В нашем случае подходит тариф Professional за 129$ или 115$ в месяц, если оплачиваем на год вперед (подробнее о тарифах ниже).

Допустим, зерокодер напишет приложение за месяц. Тогда себестоимость работы — около 130$. По нынешнему курсу — 10 тыс рублей. Прибавим сюда вознаграждение за работу — примерно 100 тыс рублей. Итого: 110 тыс.

Получается, что зерокодер выполнит заказ на Bubble примерно в 10 раз дешевле, чем студия. Самостоятельная разработка вообще обойдётся 100 раз дешевле, но тогда нужно четко понимать структуру приложения и нанимать дизайнера. В любом случае, когда необходимо написать стандартное бизнес−приложение, есть смысл обратиться к Bubble.

Тарифы: какие есть и как подобрать подходящий?

В Bubble есть 4 основных тарифных плана. Один базовый, для знакомства с платформой и три для разработки.
Тарифные планы и некоторые опции перечислены в таблице. Подробнее с ними можно ознакомиться на странице bubble.io.

Но это еще не все. Для крупных проектов Bubble предлагает специальные тарифы с премиальным обслуживанием и техподдержкой. Их нельзя найти на сайте — доступ предоставляется по запросу.

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

История Bubble: как появился и стал платформой разработки номер один

Идея Bubble пришла в голову Джошу Хаасу, когда он работал в Share Point. Тогда ему удалось разработать платформу, на которой сотрудники без технического бэкграунда могли создавать свое ПО. Увидев перспективы, Джош решает построить нечто более масштабное и открывает компанию. Через пару месяцев он знакомится с Эммануэлем Страшновым — будущим соучредителем Bubble.

Первые пользователи появились у Bubble в декабре 2012 года. По словам Страшнова, на тот момент у платформы не было многих важных функций, и она частенько лагала. По сути это был MVP для создания MVP. Но даже в таком виде клиенты были в восторге от Bubble. После презентации на ProductHunt на платформе зарегистрировалось 3000 новых пользователей. С тех пор трафик только растет.

На начало 2020 года Bubble приносил создателям более 100 000$ в месяц. Уверены, что после глобальной миграции бизнеса в интернет сумма только выросла. Компания продолжает расти, привлекает разработчиков, маркетологов и планирует стать сервисом для создания нативных приложений.

Знакомимся поближе

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

Регистрация и первые шаги в зерокодинге

Зарегистрироваться на платформе довольно просто — достаточно ввести email и пароль или, что проще, залогиниться через Google или Github.

Домашняя страница Bubble

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

Что умеет Bubble?

Основа построения визуала в Bubble — технология drag-and-drop. Зерокодеры перетаскивают графические элементы в рабочую область и собирают из них интерфейс. Для каждого элемента можно настроить параметры отображения: длину и ширину, цвет и толщину границы, размер шрифта и т.д. Помимо общих параметров, есть и индивидуальные. И те и другие отображаются в соответствующем диалоговом окне. Позиция элемента задается через координаты или вручную.

После компоновки — формы, кнопки и ссылки «оживляют» — закрепляют за ними события и связывают с данными. Как мы уже сказали ранее, зерокодеры выстраивают рабочий процесс (он же workflow), который представляет собой цепочку действий и событий. Например, чтобы кнопка Save сохраняла пользовательские данные и сбрасывала содержимое полей, на нее последовательно навешивают действия «Create a new thing» и «Reset inputs».

Create a new thing — создает запись в БД. Например, можно создать запись user и прописать поля name, surname, birth и пр. Для каждого поля указываем источник данных. В нашем случае name берет информацию из инпута «Имя», а surname — из «Фамилия». Reset inputs — сбрасывает все, что ввел пользователь.

В панели Workflow более 50 действий, с которыми можно построить любой популярный сценарий. Вот некоторые из них:

• зарегистрировать/авторизовать пользователя
• создать новый объект (thing) в БД
• экспортировать/импортировать данные из CSV
• отправить email
• произвести оплату через подключенный сервис.

А еще там с десяток опций для работы с пользовательскими событиями и API сторонних приложений.

В Bubble предустановлены только необходимые функции. Этого ядра хватит, чтобы позерокодить «для себя». Серьезные проекты и работа на заказ требуют более широкого функционала. К счастью у зерокодера под рукой есть библиотека модулей. Там найдутся инструменты для работы с базами SQL, платежными системами, сервисами аналитики и многое другое.

Окно установки плагинов в Bubble

Чтобы найти подходящий модуль, достаточно в панели Install new plugins выбрать тип (работа с API, фоновые сервисы и т.д.) и категорию. В окне появится список платных и бесплатных плагинов, которые можно отсортировать, например, по рейтингу или цене. Если ничего стоящего не нашли, можно загрузить свой js-код через панель My plugins.

В общем функций в Bubble — уйма. Во всем нужно разбираться и желательно с опытным наставником или хорошим мануалом. База знаний по Bubble пока не такая обширная, как по языкам программирования или Тильде. Но познакомиться с основами есть где.

Примеры приложений на Bubble

«Тильда для ресторанов»

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

Тогда он решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги. Результатом стал Ornum.

Автоматически сгенерированный мини-сайт ресторана

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

Дашборды со статистикой по среднему чеку, количеству посетителей и выручке

Также администратор может просматривать статистику по среднему чеку, выручке и количеству посетителей. Есть возможность отмечать рекомендованные блюда и публиковать акции и скидки.

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

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

Карьерный цех. Сервис для найма продактов

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

Основная часть воронки найма — тестовое задание. «Карьерный цех» дает одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.

В «Цехе» много разных страниц, в том числе регистрация с анкетой, загрузка выполненного тестового, рейтинг работ других ребят и оценка. Все пришлось делать через эксперименты. Самая интересная часть бизнес-логики — оценка работ других участников. Их надо перетаскивать в специальную область и ранжировать. Тут пришлось добавлять свой код и разные функции, размечать поля, между которыми перетаскивались тестовые.

Анкета, которую пользователи заполняют после регистрации

Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга загружались довольно долго.

Паша собирал приложение для «Карьерного цеха» полтора месяца и тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.

Ornum. Мобильное приложение для геймификации обучения и личного развития

Еще одно приложение Евгения Спорыхина. На этот раз вместе с ребятами из WeLoveNoCode он сделал мобильное приложение под iOS и Android — Ornum. Оно помогает осознанно выстраивать карьеру и прокачивать нужные навыки с использованием геймификации. Пока это самое крутое мобильное приложение на Bubble от российских разработчиков, которое мы встречали.

Экран Ornum с дашбордами и статистика по выполнению задач

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

Экраны регистрации, входа в приложение и карта компетенций

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

Каждый день надо выполнять задания и зарабатывать баллы. Если выполняешь все дневные задачи — получаешь дополнительный балл, если пропускаешь день, не получаешь «страйк».

Что внутри приложения:

• Уровни и должности по 49 навыкам и направлениям развития — 3000 комбинаций для расчета карьерного трека
• Игровые механики, система начисления баллов за выполненные задания и «страйк»-баллов при выполнении всех дневных заданий
• Задачи на разные горизонты планирования: краткосрочный, среднесрочный, долгосрочный
• Ачивки
• Дашборды
• Страница с подробной статистикой по каждому навыку и количеством баллов, которое еще предстоит набрать
• Система оценки текущих компетенций.

Евгений делал приложение один. В традиционной разработке нужна была бы команда из пяти человек и 1−2 млн рублей (при готовом ТЗ), а с итерациями и добавлением функций это в итоге могло бы обойтись в 4−5 млн рублей.

Где поучиться и что почитать?

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

Обучающий курс есть на сайте самого сервиса. Это мини-экскурсия по интерфейсу и основным возможностям платформы. Чтобы начать, просто зарегистрируйтесь. Дальше — Bubble сам все покажет с помощью стрелочек и всплывающих подсказок. Когда разберетесь в интерфейсе, можно попробовать силы в разработке приложений-клонов. В разделе How to build — 50 туториалов, в которых вы научитесь создавать Instagram, Netflix, Spotify и другие крупные приложения.

Полезные материалы о Bubble и зерокодинге в целом есть на портале no code.tech. Их можно найти в разделе nocode.tech/learn. В обозримом будущем сайт планирует запустить платную подписку с премиум-контентом и скидками на Bubble за 40£ в месяц. Подписаться можно уже сейчас.

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

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

Вывод

Bubble отлично подходит для разработки как MVP, так и «боевых» веб-приложений. Он гибкий, расширяемый и постоянно развивается. Конечно, у платформы хватает ограничений, но в своих задачах — это лучший инструмент. Стать профессионалом здесь непросто: нужно разобраться в особенностях построения рабочих процессов, работе с БД и API сторонних сайтов, понимать, как элементы будут отображаться на экране устройств и т.д. Но если всему научитесь, то станете востребованным зерокодером. Ведь клиенту не столь важно, на чем написано приложение. Гораздо важнее сэкономленное время и успешное решение поставленной задачи.

Сервис для найма продактов с нуля на Bubble: что в платформе не так и почему она все равно крутая

Паша Шишкин из «Карьерного цеха» рассказал о своем кейсе на Bubble — без цензуры. Он продакт, в бэкграунде — разработка и даже победа в Чемпионате мира по программированию. Паша собрал приложение на Bubble для проекта, который он делает вместе с Глебом Кудрявцевым из Skyeng. Приложение создавал в одиночку и Bubble до этого не знал — изучал всё самостоятельно.

Что такое «Карьерный цех»

«Карьерный цех» берёт на себя первую половину воронки найма, чтобы компаниям не надо было проводить по 30 собеседований на одну позицию, а кандидатам — каждый раз проходить всю воронку найма. Основная часть воронки найма — тестовое задание. Мы даем одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.

Вторая особенность «Цеха» — продакты могут сравнить себя с рынком, понять и оценить свой уровень, посмотреть на других, откалибровать план своего развития.

Рейтинг продактов

Как начали делать «Карьерный цех» и почему выбрали Bubble

Я закончил работать в «Авито» и решил делать свой проект — и вышел на Глеба. У него была идея проекта для упрощения найма продактов. Проработали идею и я стал выбирать техническое решение — на чем делать «Карьерный цех». Кодить вручную — долго, нанимать разработчиков — дорого, а Bubble показался отличным вариантом. Правда, изучить его оказалось непросто — уровень самостоятельного вхождения в Bubble очень «кровавый».

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

Бизнес-логика в интерфейсе Bubble

Решил собирать «Цех» самостоятельно, чтобы понять всю внутрянку и получить уверенность, что все работает без ошибок и проблем. Например, в Bubble есть workflows. И надо разобраться: страница считается загруженной, только когда загрузились все элементы или раньше? Или пользователь нажимает кнопку: насколько быстро при этом перезагрузится страница и успеет ли отработать дополнительный JS-код. Если проект сложный — однозначно надо проводить эксперименты, чтобы понимать, как работают все компоненты и как протекают все процессы. То есть выбирая разработчика на Bubble, лучше отдать предпочтение тому, кто понимает внутреннее устройство веба, принципы работы браузеров.

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

Анкета, которую пользователи заполняют после регистрации

Что под капотом «Карьерного цеха»

В «Цехе» много разных страниц. Самое интересное: регистрация с анкетой, загрузка выполненного тестового, рейтинг работ других ребят и оценка. Все пришлось делать через эксперименты. Мне очень понравились настройки приватности — они гибкие, удобные и обеспечивают хорошую защиту. Например, нельзя задебажить API, подставить какой-то ID и посмотреть чужие работы. Есть и проблемы — те же поля в формах не могут принимать пустые значения, обязательно надо что-то выбрать, хотя бы дефолтные значения.

Настройки приватности в Bubble

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

Сортировка заданий интерфейс

Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга у нас загружались довольно долго.

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

Сортировка тестовых заданий бэкенд

Но в Bubble есть и очень крутые фичи.

Динамика изменения полей обработки состояний. На этом экономится куча времени.

Некоторые участники хотели скрыть свои профили — тут Bubble тоже показал себя отлично, настройки очень удобные, причем никакими подменами ID это не хакнуть.

Еще у нас есть страничка для экспорта данных о кандидатах в Google Sheets, такая мини-CRM для эйчаров, на Bubble реализовать ее было довольно просто.

Сколько времени заняла разработка

Я собирал приложение для «Карьерного цеха» полтора месяца, тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.

Если бы мы нанимали для этой задачи программиста, пришлось бы искать его, тестировать, делать ТЗ, описания, заплатить пару сотен тысяч рублей — и все равно конечное решение было бы менее гибким, а я потратил бы порядка 60 часов. Команда разработчиков с исследователями, UX-дизайнерами, бизнес-аналитиками, системным архитектором, тимлдидом и разработчиком вообще обошлась бы в миллион рублей и пилила бы приложение полгода.

Выгрузка данных по кандидатам — страница для представителей компаний

Итоги

Если в вашем продукте ключевая вещь — технологии, то не стоит собирать решение на Bubble. Например, игру, какое-то премиальное приложение и т.п. Bubble грузится дольше. А вот бизнес-логику, админки круто собирать на Bubble.

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

В общем, если бы я снова начал разрабатывать такой проект, я бы точно выбрал Bubble. Только я очень надеюсь, что у них появятся конкуренты и он исправят свои недоработки. Хотя скоро обещали выкатить вторую версию, возможно, там большую часть проблем устранят.

Bubble — это платформа для создания веб-приложений, не требующие навыков программирования. Bubble — это инструмент all-in-one. В нем есть визуальный редактор, базы данных, инструменты для бизнес-логики и работы с разными API. Позволяет создавать полнофункциональные чаты, форумы, системы сбора и обработки заявок, таск-трекеры, маркетплейсы, CRM и дашборды. Присоединяйтесь к нашему сообществу Bubble Chat & Community и каналу «Зерокодер».

Что такое No-Code и как он устроен

За последние годы концепции No-Code и Low-Code стали одними из самых трендовых на технологическом рынке, наряду с искусственным интеллектом, VR/AR, блокчейном и дата сайнс. В эту сферу инвестируют огромное количество денег (по прогнозам — в 2020 году этот рынок привлечет минимум $500 млн инвестиций), а количество стартапов, которые разрабатывают платформы для работы с No-Code, увеличивается практически ежедневно. Подробно рассказываем, что такое No-Code и как устроена эта технология.

Что такое No-Code и Low-Code?

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

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

Например, чтобы при помощи Low-Code технологий внести изменения в бизнес-процессы, аналитику не требуется привлекать разработку — все эти системы работают с нотациями BPMN 2.0 для описания бизнес-процессов, чтобы аналитики работали с привычными элементами. Это решает одну из ключевых проблем цифровой трансформации бизнеса — ускоряет процедуры от идеи на бумаге до работающего бизнес-процесса. Кроме того, использование графовых баз данных через Low-Code позволяет вносить изменения в бизнес-процессы без остановки работы или блокирования доступа.

Продолжайте учиться На Хекслете есть блок «Треки», где собраны курсы для опытных разработчиков, которые хотят новых знаний про разработку.

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

История появления No-Code

Первые No-Code сервисы появились еще в 90-х годах на волне популярности визуального программирования, которое использовало графические объекты для разработки, вместо привычного нам текстового кода. Тогда появились Dreamweaver от Macromedia, который сейчас выпускает Adobe, и уже устаревший редактор Frontpage, входивший в состав пакета приложений Microsoft Office. Эти инструменты тогда были новаторскими и стали первыми No-Code сервисами.

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

Какие есть плюсы у No-Code и Low-Code?

Упрощение проверки гипотезы и модели работы бизнеса. Запуск продукта при помощи No-Code для стартапа обойдется в четыре-пять раз дешевле, чем с привлечением разработчиков, и еще в три раза быстрее. Это позволит малой кровью протестировать работу бизнес-модели, например, сервиса по доставке домашних растений, создав его сайт в Tilda и прикрутив туда базовые платежные инструменты и почтовые рассылки с красивыми фотографиями фикусов.

Снижение стоимости запуска продукта. Это вытекает из предыдущего пункта — программисты стоят достаточно дорого и редко какой малый бизнес может себе их позволить. Например, что бы собрать наш интернет-магазин по доставке домашних растений с автоматической системой почтовой рассылки, согласно даже ценам на биржах фриланса, нашему маленькому магазину по продаже домашних цветов придется отдать как минимум в $5 тыс. Тогда как No-Code платформы стоят в десятки раз дешевле, например, сделать свой сайт на Tilda обойдется в $20 в месяц.

Разработчики смогут заниматься интересными им проектами. Огромное количество программистов занимаются достаточно шаблонными проектами, которые No-Code пытается автоматизировать.

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

Развитие визуального программирования. No-Code и Low-Code — достаточно яркие примеры, как можно использовать базовые принципы визуального программирования для работы с продуктом. До сих пор случаются большие холивары, есть ли будущее у визуального программирования и можно ли создавать программы путем манипулирования графическими объектами вместо написания ее кода. Пока будущее этой концепции не очень ясно, поскольку практически все программирование сейчас — текстовое.

Аргументы противников No-Code

«No-Code — это дорого». Да, No-Code — это дешевле, чем группа разработчиков, которые два месяца будут делать интернет-магазин для продажи домашних растений, но все-равно платформы тоже стоят каких-то денег. При этом No-Code решения стоят мало, когда они работают с совсем малым бизнесом. В случае, если клиентов становится больше 10 тысяч — дешевле разработать собственные решения, чем платить ежемесячно по $150 за автоматическую рассылку предложений с цветами, например, по $450 — за работу сервиса, где вы создали сайт, по $60 — за интеграцию с внешними платформами и так далее.

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

Читайте также Как устроен функциональный диалект Лиспа Clojure и почему использующие его программисты восхищаются им

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

«Невозможно создавать вещи, которые еще никто не создавал»: технология No-Code все-таки достаточно шаблонная и редко позволяет создавать уникальные решения, которых еще никогда не было. Просто для этого пока еще нет шаблона.

Топ No-Code сервисов

Bubble

Bubble — сервис для создания веб- или мобильного приложения при помощи No-Code. В основу сервиса заложена концепция визуального программирования — технология Drag&Drop позволяет добавлять на страницу любой элемент, который хочется no-code-разработчику или создателю сервиса — настройке поддается все, начиная с расположения видео и текста, заканчивая иконками, кнопками, их параметрами.

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

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

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

Tilda

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

В Tilda меньше персонализированных возможностей, чем в Bubble, при этом она намного проще в использовании и имеет более дружелюбные и интуитивно понятные интерфейсы. В библиотеке Tilda сейчас более 450 шаблонных блоков, разработанных профессиональными дизайнерами с применением UX-систем. Они разделены на 28 категорий: обложка, магазин, о проекте, услуги, контакты и многие другие.

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

Zapier

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

Сейчас Zapier теперь имеет более 2 тыс. возможностей интеграций, включая веб-приложения, такие как Google Sheets, Mailchimp, Hubspot. Стоимость Zapier — около $20 в месяц.

Mendix

Согласно исследованию агентства Gartner, одним из самых известных игроков в области Low-Code является сервис Mendix, который недавно был куплен Siemens за космические $700 млн. С его помощью простые пользователи смогут самостоятельно делать бизнес-приложения, создавать прототипы продуктов и автоматизировать рабочие процессы.

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

Например, нашему интернет-магазину по продаже домашних растений необходимо добавить атрибут в карточку бизнес-объекта и указать там, помимо даты появления фикуса в горшке, еще время его продажи — это позволит узнать, сколько времени фикус находился на складе. Во время использования реляционной БД, программисты будут добавлять атрибут и реконфигурировать БД в среде разработки, блокировать доступ пользователей к системе на время переноса изменений в основную среду. При этом, если объем данных очень велик, то доступ будет заблокирован достаточно на длительное время. В Low-Code системах — в том числе и в Mendix, используются графовые БД, что позволяет обновлять эти данные через визуальные системы без привлечения программистов и блокировки доступа пользователей к системе.

Что будет с No-Code в будущем?

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

Вообще, активно развивается не только No-Code сфера, но и, например, No-Design, где все чаще бизнес использует различные сервисы, как Canva, вместо профессиональных дизайнеров.