Ускорители разработки интерфейсов: как создать масштабируемый интерфейс быстро
Кодинг интерфейса - не всегда самый творческий процесс, при этом он съедает немало времени. В этой статье мы рассмотрим инструменты, которые помогут значительно ускорить процесс. Давайте разберемся, какие инструменты могут быть полезными и как они работают. Речь пойдет о двух типах платформ:
1. No-code платформы. Это самый логичный путь ускорения запуска продуктов. Но недоверие к ним связано с тем, что они не подходят для масштабирования, и что при масштабировании невозможно будет экспортировать код для самостоятельного развертывания продукта. Здесь важно оговорить, что, во-первых, не всегда no-code не способен к масштабированию. А во-вторых, иногда у no-code платформ есть опция экспорта кода (особенно когда речь идет о фронтэнде).
В части no-code рассмотрим отдельно инструменты для разработки сайтов и инструменты для разработки продуктов
2. Визуальные редакторы кода. Это инструменты, в которых можно собрать дизайн и сразу вытащить код.
1. Создаем сайты с no-code
Чем этот подход хорош:
- Качество получаемых результатов. Это действительно хорошие платформы, на которых можно забилдить действительно красивые и функциональные сайты, много возможностей для дизайна и интерактивных элементов.
- Упрощение разработки. Это no-code, а значит не нужно думать о большом количестве вещей, о которых думают разработчики, всё под одной крышей: интерфейс, хостинг, простенький бэкэнд итд.
- Возможность масштабирования. Часто на старте мы не знаем, нужно ли нам будет переехать на свою инфраструктуру, потому что именно для сайта компании - вполне приемлемо оставаться на no-code платформе, тк это визитка.
Вот примеры сайтов на Webflow: https://discord.com/ - 1.1B посещений в месяц, https://airbyte.com/ - 266K, https://daily.dev/ - 2,9M.
На Framer: https://bird.com/ - 395K, https://lottiefiles.com/ - 1,4M (цифры актуальны где-то на середину июня). - Разветвленная инфраструктура вокруг, шаблоны, качественные обучающие материалы и комьюнити.
Чем этот подход плох:
- Проблемы с импортом кода. Иногда что-то ломается из-за импортированного кода. На своем опыте: в какой-то момент мы создали юр. документы сайта (Terms, Privacy) в сервисе Termly, подключили его к Webflow и весь интерфейс к чертям поломался. Но мы отказались от Termly, а не от Webflow - настолько он крут 🙂
- Проблемы с экспортированным кодом. Если всё-таки нужно будет экспортировать код - может возникнуть ряд сложностей:
▪ возможны слишком тяжелые файлы,
▪ специфическая структура HTML элементов,
▪ избыточное количество элементов, сложная структура макетов (контейнеры внутри контейнеров внутри контейнеров)
Как итог - точно потребуется рефакторинг кода для его дальнейшего использования (то есть коррекция структуры кода без изменения его внешнего поведения) - Ограничители трафика. На начальных порах в целом - всё равно, и платить 18 баксов за 250K уникальных посещений - вполне приятно. Но при значительном масштабировании, может потребоваться переход на не очень прозрачные enterprise условия.
Вывод: no-code для создания сайтов отлично подойдет для быстрого запуска проекта с не очень понятными перспективами масштабирования (= для всех 😅). Могут возникнуть сложности с экспортируемым кодом, но прежде чем думать об этом, стоит подумать, а какова вероятность, что с такой платформы точно нужно будет уходить.
1. Создаем продуктовые интерфейсы с no-code
Переходим к созданию продуктовых интерфейсов с использованием no-code. Рассмотрим конкретный инструмент для создания фронтэнда: Weweb.
Чем подход хорош:
- Более качественный экспортируемый код: Weweb генерирует код чище, чем Webflow или Framer. Можно проверить качество кода, скачав примеры.
- Гибкие возможности интеграции бэкэнда: Поддержка Supabase, GraphQL, PostgreSQL и других сервисов через плагины. Ноукодеры часто используют в паре с Xano, который предоставляет мощные возможности для бэкэнда.
Если сравнивать использование связки Weweb + Xano или Weweb + Supabase с единой платформой для низкокодовой разработки bubble.io, то связка всегда будет более гибкая. Более маленькие и прицельные продукты всегда более гибкие, чем одно большое и всеобъемлющее решение. Поэтому если есть специфические требования к визуалу или к бэкэнду - стоит рассмотреть связку. Например, если нужна возможность выбора локации размещения серверов - в любом случае бабл не подойдёт. Нужны более серьезные возможности Xano или Supabase. - Возможности для разработчиков: Поддержка кастомного JS и кода компонентов, возможность форка компонентов на GitHub и импорта обратно (правда это стоит отдельных денег).
Чем подход плох:
- Для ноукодера проблемы использования weweb заключаются в том, что нужно постоянно переключаться между несколькими решениями, менять контекст и гонять данные между ними. Более того, в сравнении с единой платформой для no-code разработки bubble.io, использовать связку Weweb + Xano или Weweb + Supabase - значительно дороже.
- Для того кто кодит, важно понимать, что 90% пользователей weweb - не кодеры. Это вероятно влияет на стратегию и дальнейшее развитие компании
Вывод: no-code для разработки продуктового интерфейса с экспортируемым кодом весьма неплох, но с оговорочками. Всё же это не такое уверенное и универсальное решение как no-code для разработки сайтов.
3. Визуальные редакторы кода
Отличие no-code платформы для создания интерфейса от визуального редактора кода заключается в конечном продукте.
- В ноу-код платформе результат работы - сервис (или часть сервиса).
- Если же речь про редактор кода, то результат работы - код.
Рассмотрим конкретную платформу - Subframe:
- Это достаточно новый продукт, вы визуализируете ожидаемый интерфейс на канве с помощью шаблонов и визуальных элементов, а на выходе получаете код. Более техническим языком - это обертка Radix.
- В отличие от любого ноу-кода, этот инструмент генерит чистый код, готовый для продакшна. Но и создан он специально для разработчиков, чтобы забрать с них не самый творческий процесс написания кода интерфейса.
Вывод: разработчикам, кто не готов использовать no-code, можно посмотреть в сторону Subframe для ускорения разработки интерфейса
Заключение
Использование no-code инструментов и визуальных редакторов кода может значительно ускорить разработку интерфейсов. Выбор инструмента зависит от ваших потребностей и целей проекта. Главное - понять, какие задачи вы хотите решить, какие аспекты разработки для вас приоритетнее и выбрать наиболее подходящий инструмент для их реализации.
Помимо перечисленных в статье ресурсов есть целый рынок инструментов для генерирования кода искусственным интеллектом и рынок плагинов вокруг Figma. Если у вас есть рекомендации полезных инструментов - делитесь в комментариях!
В своем телеграм-канале пишу про no-code, ИИ и другие технологии, которые делают нашу жизнь проще :)
Хороший обзор