Что такое No-code

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

Каждый дизайнер мечтает создавать сайты, не углубляясь в код — это простой способ визуализировать созданные макеты и увидеть, как они будут работать в реальности. Сегодня это стало возможным. Мы видим, как развивается подход no-code, который позволяет разрабатывать сайты и приложения любому пользователю самостоятельно, не погружаясь в тему программирования.

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

No-code (от англ. «без кода») — это создание IT-продуктов, таких как сайты и приложения, без написания кода при помощи визуальных редакторов, их также называют конструкторами. Это можно назвать альтернативным способом разработки с интуитивно понятным графическим интерфейсом, где пользователю будут предложены готовые шаблоны и возможность самостоятельно редактировать расположение блоков, заголовков, кнопок и других элементов без навыков программирования.

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

Важно отметить, что для создания самих no-code платформ разработчики пишут все тот же код, но пользователям этого делать уже не придется. Достаточно открыть готовые шаблоны и при помощи функции «перетаскивания» перемещать по экрану элементы, меняя их местами и моделируя свою идеальную картинку.

Самые первые no-code платформы появились в середине 90-х. Основная причина их появления — потребность самостоятельно вносить изменения в сайт, не обращаясь каждый раз к разработчикам. Популярными сервисами были Dreamweaver от Macromedia (сейчас от Adobe) и редактор Frontpage, который входил в пакет приложений Microsoft Office.

В 2000-х годах на смену перечисленным платформам пришли новые: WordPress для создания блогов, Shopify для создания интернет-магазинов, а также Wix и Drupal. Они были более усовершенствованы и позволяли работать с готовыми шаблонами сайтов.

Сам термин "no-code" изначально назывался "zero code" и стал узнаваем в широких кругах только к 2018 году. Разрабатывался новый функционал, появилась возможность комбинировать блоки друг с другом, и постепенно no-code стал способен решать конкретные программные задачи при помощи реальных инструментов.

Сегодня самыми популярными no-code сервисами являются Tilda, Bubble.io, Webflow, Glide, Zapier, Airtable. Благодаря им можно создавать уникальные полуфункциональные веб-ресурсы, а не просто шаблонные сайты, похожие между собой.

Общепринятых стандартов о том, что именно должен представлять из себя no-code, как правило, не существует. Но институт исследования рынка Forrester Research выделил 4 характеристики, которым должны соответствовать сервисы no-code:

1. Полная визуализация

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

2. Повторное использование

Благодаря готовым шаблонам, компонентам и виджетам, которые доступны в формате строительных блоков, можно практиковать повторное использование для разработки нового продукта.

3. Управление жизненным циклом веб-ресурсов

No-code должен оптимизировать все этапы разработки программного обеспечения: отладка, тестирование, развертывание.

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

4. Управление веб-ресурсом через облако или в виде локальной системы

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

1. Оптимизация рабочих процессов

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

2. Быстрый запуск нового продукта или MVP (тестовая версия продукта)

Как правило, больше половины стартапов оказываются убыточными и не вызывают спрос у потребителей. Для того, чтобы не уйти в минус на старте, можно своими силами, без команды разработчиков, создать тестовую версию продукта и запустить. C этим технология no-code справится быстро и эффективно. Если будет достаточное количество откликов и большой интерес у пользователей — есть смысл работать над стартапом дальше.

3. Создание внутренних инструментов работы

No-code дает возможность создавать собственные CRM-системы, чек-листы, формы для опросов, корпоративные системы.

4. Сокращение затрат

Благодаря no-code можно снизить стоимость разработки до 80%. Технология не подразумевает дополнительные затраты на команду разработчиков.

Любые стартапы

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

На профессиональный кодинг могут уходить месяцы работы, в то время как no-code по времени занимает несколько дней или пару недель.

Digital-специалисты

Если сотрудник компании разбирается в no-code сервисах, ему не нужно ждать свою задачу, он может самостоятельно со всем справиться: запустить с нуля какую-то идею, протестировать сервис. А также эти навыки помогут оперативно продемонстрировать собственные идеи руководству, не прибегая к сторонней помощи.

Средний и малый бизнес

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

Ниже разберем продукты, которые можно создать без кодирования.

Веб-сайты и порталы: социальные сети, целевые страницы, интернет-магазины, чат-боты, лендинги.

Рассмотрим на примере шаблона лендинга на платформе Wix:

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

Здесь тоже можно шаблоны подстраивать под себя, насколько это возможно, менять фразы, шрифты, цвета и так далее.

Мобильные приложения: онлайн-игры, платежные сервисы, онлайн-школы, мессенджеры и т.д.

Как выглядит процесс создания мобильного приложения на платформе Adalo:

Пользователь может полностью менять интерфейс, перетаскивать по экрану все элементы и устанавливать их в нужных местах.

Серверные приложения: электронная почта, хранилища файлов, системы онлайн-документов, базы данных.

Пример разработки базы данных в визуальном конструкторе Airtable:

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

Бизнес-приложения: закупки, управление службой поддержки, разработка CRM-системы.

Пример CRM-системы:

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

No-code платформы отличаются между собой шаблонами, вариантами наполнения и количеством свободы, которую предоставляют пользователю в работе над продуктом. Выше мы разобрали продукты, которые можно создать при помощи no-code разработки.

Теперь выделим 3 основных направления no-code: конструкторы сайтов, мобильные и веб-приложения и автоматизация процессов (или базы данных).

Рассмотрим подробнее каждое направление и инструменты для работы с разными областями.

Конструкторы сайтов

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

Инструменты, которыми можно воспользоваться:

• Tilda. Самая популярная зарубежная платформа, где представлены сотни шаблонов для лендингов и интернет-магазинов, а также встроенная CRM-система. Если не нашлось нужного шаблона, есть возможность отрисовать его самостоятельно на платформе.
• Ghost. Платформа для создания блогов, где также можно выбрать готовый шаблон или разработать свой дизайн.
• Notion. Еще один инструмент в этом блоке, он отличается тем, что позволяет вести заметки и управлять задачами. Благодаря ему можно собрать мудборд для дизайн-проекта, CRM-систему или вести корпоративный блог внутри компании.

Мобильные и веб-приложения

Благодаря инструментам для мобильных приложений можно создать MVP и протестировать запуск продукта.

Так выглядит создание приложения на no-code платформе AppGyver:

Инструменты для мобильного приложения:

• Glide. Платформа для сборки приложений. Здесь достаточно построить таблицу, загрузить в нее данные, и на основе этих данных платформа сама создаст красивый интерфейс.
• Adalo. Одна из немногих платформ, которая позволяет добавлять приложения в App Store и Google Play, а также настраивать пуши.

Инструменты для веб-приложения:

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

Автоматизация процессов

No-code дает возможность освободиться от рутинных задач и сэкономить массу времени, например, позволяет настроить автоматическое заполнение баз данных, а также возможность отслеживать личные доходы и расходы.

Инструменты:

• Airtable. Сервис позволяет создавать большие базы данных, на основе которых другие платформы могут собирать приложения. С помощью этого сервиса удобно анализировать финансовую отчетность компании, а также создавать демоверсию продукта.

Отчасти все платформы между собой похожи и обладают стандартным набором инструментов:

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

Рабочая область. Область, которая имитирует размеры экрана смартфона или десктопа.

Список страниц. Страницы, из которых складывается приложение. Например, экран регистрации, основная страница, каталог, личный кабинет и так далее.

База данных. Таблицы, в которых размещаются все данные о продукте.

Воркфлоу. Место, где разрабатывается вся логика веб-ресурса — все события, которые происходят во время его использования.

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

Разберем основные этапы, которые необходимо пройти пользователю при работе с no-code разработкой:

1. Определите потребности и итоговый результат

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

2. Составьте MVP (раннюю версию продукта)

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

3. Опишите техническое задание

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

4. Продумайте базу данных

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

Объясним на наглядном примере, каким образом происходит строительство базы данных.

Например, вы создаете интернет-магазин натурального кофе.

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

Теперь необходимо выделить их черты, иначе говоря — атрибуты, которые мы также пропишем в таблице. Например, атрибуты кофе могут быть следующими: название, описание, цена. Атрибуты клиента: ФИО, номер телефона, адрес.

Теперь, когда есть готовые макеты, базы данных и желаемый результат, можно всю эту информацию переносить на выбранную no-code платформу. Необходимо создать страницы, из которых будет состоять веб-ресурс, — для этого no-code платформы предлагают готовые шаблоны.

5. Приступите к разработке

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

Например: для кнопки «Войти в систему» нужно прописать последовательность событий — окно авторизации — запрос на ввод данных — закрытие окна — переход в профиль и так далее. Это нужно повторить для каждого элемента.

6. Протестируйте проект

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

7. Разверните проект

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

Плюсы:

— Программирование для всех. Разобраться в no-code платформах гораздо легче и быстрее, чем погружаться в программирование с нуля, и самое главное — это может сделать каждый пользователь, заинтересованный в данной теме.

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

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

— Адаптивность. В ручном кодировании невозможно моментально изменить функциональность, в то время как в no-code достаточно внедрить новую логику, чтобы запустить нужные изменения.

— Безопасность. No-code платформы предоставляют функции безопасности: контроль доступа, проверку угроз, инструменты администрирования. Благодаря этому пользователи могут контролировать и настраивать безопасность системы.

— Автоматизация. No-code позволяет автоматизировать потоки операции, которые в дальнейшем можно внедрять в другие информационные системы.

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

Минусы:

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

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

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

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

No-code и традиционная разработка

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

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

No-code и готовое ПО

Разработка no-code предоставляет пользователям возможность свободно настраивать нужные параметры в отличие от готовых ПО. Что такое готовое ПО — это программное обеспечение, которое разработано для большого количества клиентов и в основном поставляется в одинаковой конфигурации. То есть внести собственные изменения становится очень сложно, потому что может просто не хватить гибкости для добавления функций, которые нужны именно вам.

No-code и low-code

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

Low-code — это технология программирования с элементами ручного кода, в то время как в no-code полностью отсутствует кодирование.

Основные отличия no-code и low-code

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

Кодирование

No-code не требует знаний о кодировании и дает возможность создавать проекты при помощи шаблонов и блоков, которые можно перетаскивать и выстраивать в нужную цепочку.

Low-code все же требует минимальные знания в разработке и программировании.

Скорость

Инструменты no-code позволяют выполнять задачи на высокой скорости, потому что разработаны на основе быстрого программирования.

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

Применение

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

Low-code больше подходит для создания IT-продуктов со сложным функционалом. Его же можно использовать для разработки прототипа, который станет основой для дальнейшего программирования.

Ошибки

Работа с no-code не требует ручного кодирования, соответственно, эта система не подвержена ошибкам в данной области.

Что нельзя сказать о low-code. Эта технология гораздо уязвимее для ошибок, потому что идет параллельная работа с кодом, где зачастую допускаются дефекты — срабатывает человеческий фактор.

Настройка

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

Low-code предоставляет огромный функционал настроек, потому что пользователи способны самостоятельно кодировать.

Выбирая между no-code и low-code необходимо ориентироваться на потребности и задачи бизнеса.

Несмотря на то, что технология no-code идеально подходит для стартапов и малого бизнеса, зачастую ее выбирают и крупные компании.

Сайты, созданные в конструкторах, — достаточно серьезный и эффективный бизнес-инструмент.

Для разработки всех сайтов школы Uprock мы тоже используем no-code, потому что это наиболее удобный вариант, который подходит под нашу задачу.

Как пример — база ресурсов Uprock:

Так выглядит проект ВТБ банка — просто, понятно и без лишних элементов:

Какими навыками нужно обладать дизайнеру, чтобы работать с no-code

Мало кто об этом знает, но существуют отдельные специалисты, которые профессионально владеют no-code сервисами — ноукодеры. Это отдельная профессия со своей спецификой.

Но сегодня мы акцентируем внимание на дизайнерах, которые стремятся освоить данное направление, и остановимся на навыках, которыми важно для этого овладеть.

В основном дизайнер отвечает за визуальную часть, за саму картинку. No-coding — это отдельное направление, которое требует следующих навыков:

— Разбираться в логике сайта и понимать, как функционирует каждый элемент.

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

— Уметь работать с таблицами Excel или Google, это необходимо для создания базы данных вроде CRM.

— Практиковаться и учиться постоянно. Направление no-code растет и расширяется с каждым годом, поэтому важно не отставать от новой информации.

Заключение

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

Исходя из этого, можно предположить, что за no-code — будущее. No-code платформы помогают гораздо быстрее принимать решения, проводить тестирование всех гипотез и опережать конкурентов. Но не стоит списывать со счетов традиционную разработку, потому что пользователь так или иначе столкнется с ограничениями платформы и будет вынужден обратиться к разработчикам.

Как говорил экс-генеральный директор GitHub: «Будущее кодирования — это вообще не кодирование». Но это еще нескоро, классическое программирование пока ничем нельзя заменить, можно лишь облегчить — для этого и созданы no-code платформы.