Дизайн сайтов без программирования: как работают технологии No-Code и Low-Code
Сделать сайт для крупной компании за пару дней (почти) без программирования? Вполне реально!
Что такое No-Code?
No-Code — технология создания сайтов с помощью инструментов визуальной вёрстки (ещё их называют визуальными редакторами или конструкторами сайтов). С ними можно смотреть на страницы сайта или приложения как обычный пользователь, видеть все блоки, заголовки и кнопки, но при этом иметь возможность их редактировать. Такой метод называется WYSIWYG : что видишь, то и получаешь. А программировать не нужно.
Пишет о дизайне в Skillbox, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
И сайт, собранный в конструкторе, ничем не отличается от обычного?
По функциональности и графике No-Code-разработка уступает обычной. Скажем, сложную вёрстку трудно адаптировать для разных экранов, а некоторые моушн-эффекты будут слишком медленно загружаться. Многие функции — например, создание личного кабинета — никак нельзя реализовать без кода. Зато No-Code даёт возможность сделать полноценный веб-ресурс от начала до конца без умения программировать. Нужны только знания дизайна и навыки работы в каком-нибудь конструкторе.
Можно посмотреть, как выглядит интерфейс конструктора?
Конечно. Вот так, например, работает Tilda:
Tilda — что-то знакомое. Её часто используют?
Да, пожалуй, это самый известный конструктор. Чаще всего на Tilda делают лендинги — одностраничные сайты, которые нужны в маркетинге для продвижения товаров и услуг. На лендинге размещают тексты, видео, изображения, делают формы заявки, приводят ссылки для регистрации или покупки на сторонних ресурсах.
При необходимости многостраничные сайты на Tilda тоже можно делать — даже интернет-магазины с возможностью принимать оплату. Платформа хороша тем, что в ней много готовых шаблонов: необязательно собирать свой сайт с нуля. Можно использовать готовые макеты, только слегка изменяя их под свои нужды, — поэтому Tilda часто выбирают начинающие дизайнеры.
А есть другие конструкторы?
Их очень много! Популярная альтернатива Tilda — Readymag: в нём шаблонов не так много, зато больше разных опций для вёрстки и анимации. Есть Wix — один из самых дешёвых для использования редакторов. Самый продвинутый в возможностях кастомизации — WebFlow. Ещё есть Squarespace, Jimdo и другие конструкторы.
Немало! No-Code-разработка востребована?
Да, её популяризацию подстегнула, в частности, пандемия. Компаниям потребовалось переносить бизнес в интернет и создавать несложные веб-ресурсы. Впрочем, No-Code выбирают не только малый бизнес и стартапы, но и крупные компании. Сайты, собранные в конструкторах, — это вполне серьёзный бизнес-инструмент.
А можно взглянуть на такие сайты у крупных брендов?
Почему же компании выбирают No-Сode, если в нём куча ограничений?
Функциональности вполне хватает, например, для рекламных кампаний, спецпроектов или создания простенького интернет-магазина. А плюсов довольно много:
Что касается ограничений работы в визуальных редакторах, частично эта проблема решаема — с помощью технологии Low-Code.
Что же это такое?
Основу сайта собирают в конструкторе, но для выполнения отдельных задач используют полноценное программирование. Можно дать пользователям возможность заходить в личные кабинеты, оставлять заказы с выбором разных опций. Можно организовать обработку данных, их передачу или автоматическую визуализацию в графиках на сайте. Иногда это отдельные интеграции, а бывает, что весь бэкенд прописывают кодом.
Не проще ли сразу кодить обычный сайт?
Зачастую Low-Code всё равно получается быстрее и дешевле кастомной разработки. Но, конечно, не для всех задач это подходит: если нужен сайт с очень широким функционалом для крупной компании, используют исключительно программирование.
Для Low-Code тоже есть специальные редакторы?
Да, есть редакторы, заточенные на добавление кода. В них разберётся только программист. Но в большинстве платформ, которые мы упомянули, также есть возможность интегрировать код.
Скажем, в Tilda, Readymag или Webflow можно работать в визуальном редакторе, а можно добавить программирование при необходимости. Это полезно для постепенного развития веб-ресурса: позволяет создать MVP в No-Code, а затем, по мере роста потребностей, добавлять нужные функции кодом.
Хорошо! А какие минусы у No-Code-разработки помимо того, что сложные функции недоступны без программирования?
Собранные в визуальных редакторах сайты проигрывают обычным в производительности и стабильности работы, но не слишком значительно. Ощутимый минус — тарифы на платформах обычно зависят от числа пользователей сайта: поэтому для масштабных проектов конструкторы не всегда подходят. Наконец, визуальных редакторов просто очень много — и это отчасти тоже недостаток, потому что каждый хорош для своих целей и важно не ошибиться с выбором.
Их действительно много! С какой платформы лучше начинать учиться?
Tilda наиболее дружелюбна к новичкам — у неё удобный интерфейс, много готовых шаблонов, а при необходимости есть возможности кастомизации — в том числе с помощью кода. К тому же это одна из самых известных платформ. Она на слуху у владельцев бизнеса — поэтому создание сайтов на Tilda востребовано.
обложка: Оля Ежак для Skillbox Media
Где найти и скачать QR-код о вакцинации от COVID-19 – пошаговая инструкция
Дополнительные меры противодействия COVID-19 вводят в некоторых регионах России. В Новосибирской области с 25 октября от всех граждан будут требовать QR-коды, подтверждающие прохождение вакцинации, полученные через Госуслуги.
Как найти и скачать QR-код о вакцинации на Госуслугах?
Зайдите на портал Госуслуг под своим логином и паролем. Кликните в левом верхнем углу на иконку меню и во всплывшем окошке выберите вкладку «Здоровье». Выберите в открывшемся окне «Дневник самонаблюдений и сертификат вакцинации от COVID-19».
После этого откроется окно с номером сертификата, сам QR-код находитяс на этой же странице чуть ниже. Можно открыть его и на английском языке.
Сразу под QR-кодом находится гиперссылка «Скачать сертификат в PDF». Кликаем на нее и скачиваем на мобильное устройство. Если вы зашли со стационарного компьютера, сертификат можно сразу распечатать.
Где потребуют QR-код?
QR-код попросят предъявить всех граждан старше 18 лет при посещении массовых культурных и спортивных мероприятий. Это коснется посещения театров, кинотеатров, концертов, фестивалей, официальных, торжественных мероприятий, физкультурных и спортивных мероприятий, а также Чемпионатов, Первенств, Кубков и т.д с количеством участников от 500 человек; а также посещение организаций, осуществляющих деятельность в области физкультуры и спорта, в том числе – фитнес-центров, аквапарков, аттракционов, детских развлекательных центров.
Что потребуют вместо QR-кода?
Если вы не сделали прививку, то допускается предъявление сертификата о профилактической прививке от COVID-19 на бумажном носителе, либо отрицательного результата ПЦР-теста, действительного в течение трех календарных дней с момента исследования, либо справки, подтверждающей, что гражданин перенес COVID-19, а с даты его выздоровления прошло не более шести календарных месяцев.
Какой формат должен быть у QR-кода?
QR-код можно предъявить прямо на экране своего мобильного телефона в приложении Госуслуги, или заранее скачанного и сохраненного в виде картинки. Другой вариант – распечатать с портала Госуслуг сертификат о вакцинации и носить с собой. Главное, чтобы формат QR-кода позволял сканировать его камерой смартфона или планшета.
Что такое 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 и прикрутив туда базовые платежные инструменты и почтовые рассылки с красивыми фотографиями фикусов.
Разработчики смогут заниматься интересными им проектами. Огромное количество программистов занимаются достаточно шаблонными проектами, которые No-Code пытается автоматизировать.
Программированием смогут заниматься даже дети. Визуальная разработка, даже на примере обычных конструкторов сайтов, может создать полностью обратный тренд — это может привлечь в IT людей, которые всегда считали, что программирование — очень сложно. Сначала они начнут заниматься разработкой на визуальных платформах, а после этого захотят усложнять свои продукты и изучать текстовые языки программирования.
Развитие визуального программирования. No-Code и Low-Code — достаточно яркие примеры, как можно использовать базовые принципы визуального программирования для работы с продуктом. До сих пор случаются большие холивары, есть ли будущее у визуального программирования и можно ли создавать программы путем манипулирования графическими объектами вместо написания ее кода. Пока будущее этой концепции не очень ясно, поскольку практически все программирование сейчас — текстовое.
Аргументы противников No-Code
«С 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 позволяет сформировать и всю бэкенд-составляющую — разработать форму регистрации и установить, где создается аккаунт пользователя, каким образом запоминать его данные и как отображать предыдущие заказы.
Tilda
В России Tilda, пожалуй, является самым популярным примером концепции No-Code платформ. При помощи Tilda пользователи могут создать собственный сайт без навыков программирования — в основе сервиса лежит блочный принцип создания страниц, когда пользователь может выбрать необходимый шаблон, настроить внешний вид, добавить контент и сразу же видеть, как будет выглядеть сайт.
В Tilda меньше персонализированных возможностей, чем в Bubble, при этом она намного проще в использовании и имеет более дружелюбные и интуитивно понятные интерфейсы. В библиотеке Tilda сейчас более 450 шаблонных блоков, разработанных профессиональными дизайнерами с применением UX-систем. Они разделены на 28 категорий: обложка, магазин, о проекте, услуги, контакты и многие другие.
Zapier
Zapier описывают свою платформу как клей, который связывает тысячи веб-приложений. При помощи Zapier можно интегрировать разные сервисы, например, на нашем интернет-магазине домашних растений есть форма обратной связи. После того, как пользователь писал отзыв, нам приходилось вручную добавлять его в свой файл на Hubspot, где мы храним отзывы клиентов, потому что было не ясно, как его интегрировать с нашим сайтом. Zapier автоматизирует интеграцию и, соответственно, расширение функционала сервисов.
Mendix
Все рабочие процессы происходят внутри платформы Mendix, а не сайта или сервиса заказчика, визуальный редактор позволяет описывать модели данных, быстро создавать экраны с помощью набора виджетов и даже описывать логику работы процессов.
Например, нашему интернет-магазину по продаже домашних растений необходимо добавить атрибут в карточку бизнес-объекта и указать там, помимо даты появления фикуса в горшке, еще время его продажи — это позволит узнать, сколько времени фикус находился на складе. Во время использования реляционной БД, программисты будут добавлять атрибут и реконфигурировать БД в среде разработки, блокировать доступ пользователей к системе на время переноса изменений в основную среду. При этом, если объем данных очень велик, то доступ будет заблокирован достаточно на длительное время. В Low-Code системах — в том числе и в Mendix, используются графовые БД, что позволяет обновлять эти данные через визуальные системы без привлечения программистов и блокировки доступа пользователей к системе.
Что будет с No-Code в будущем?
Похоже, что рынок No-Code-сервисов активно продолжит развиваться и дальше. Помимо увеличения инвестиционной привлекательности этой сферы, все больше людей будут использовать возможности этих технологий на фоне постепенного увеличения снижения входа в сферу программирования.
Вообще, активно развивается не только No-Code сфера, но и, например, No-Design, где все чаще бизнес использует различные сервисы, как Canva, вместо профессиональных дизайнеров.
