mirror of
https://github.com/bpmbpm/doc.git
synced 2026-04-28 19:42:06 +00:00
128 lines
16 KiB
Markdown
128 lines
16 KiB
Markdown
## JS
|
||
Популярные платформы no-code, которые используют JavaScript под капотом или позволяют добавлять кастомный JS
|
||
|
||
Платформы: Bubble (хотя он использует свой язык, но есть JS элементы), Webflow (с возможностью добавления кода), Retool (для внутренних инструментов, позволяет JS), AppGyver (композити, использует JS), OutSystems (low-code, но тоже), Noodl, Budibase, ToolJet, Appsmith, и др. Также можно упомянуть Google AppSheet, Airtable, но они не столько на JS ориентированы. Фокус на системы, где можно писать JS или которые генерируют JS.
|
||
|
||
Поскольку запрос широкий, дадим обзор, выделив ключевые особенности и примеры использования.
|
||
|
||
## Обзор no-code систем с поддержкой JavaScript
|
||
|
||
В последние годы платформы no-code (программирование без кода) стремительно набирают популярность. Они позволяют создавать веб-приложения, дашборды, внутренние инструменты и даже мобильные приложения без традиционного написания кода. Однако большинство профессиональных no-code решений предоставляют возможность расширения функциональности с помощью JavaScript — это даёт гибкость, когда готовых блоков недостаточно.
|
||
|
||
Ниже приведён обзор ключевых систем, ориентированных на экосистему JavaScript, с акцентом на их возможности, способы интеграции JS и типичные сценарии использования.
|
||
|
||
---
|
||
|
||
### 1. **Bubble**
|
||
Bubble — одна из самых мощных визуальных платформ для создания веб-приложений.
|
||
- **Подход**: полностью визуальное проектирование интерфейса, логика строится через “воркфлоу” (действия, условия, триггеры).
|
||
- **JavaScript**: поддерживает выполнение пользовательского JS через элементы **“HTML/JS”** и **“Tooltip”**, а также позволяет подключать внешние библиотеки. Можно встраивать код для сложных вычислений, работы с DOM, интеграции со сторонними API.
|
||
- **Плюсы**: огромное сообщество, маркетплейс плагинов, масштабируемость, возможность создавать сложные бизнес-логики без кода.
|
||
- **Минусы**: крутая кривая обучения, ограниченная производительность при очень высоких нагрузках, отсутствие полноценного доступа к исходному коду.
|
||
|
||
---
|
||
|
||
### 2. **Webflow**
|
||
Webflow позиционируется как визуальный конструктор сайтов, но позволяет создавать и сложные веб-приложения (Webflow + Memberships, логика через “Webflow Interactions”).
|
||
- **JavaScript**: поддерживает вставку произвольного кода (`</> Embed`), а также кастомный код в секциях `Before </body>` и `After <body>`. Это даёт возможность подключать библиотеки (React, Vue и др.), реализовывать анимации, отправку данных на внешние сервисы.
|
||
- **Плюсы**: высокое качество генерируемого HTML/CSS, удобный визуальный редактор, встроенная CMS.
|
||
- **Минусы**: не является полноценным low-code для бизнес-логики (требуется интеграция с внешними инструментами вроде Airtable, Xano). Сложные бэкенд-операции приходится выносить в код.
|
||
|
||
---
|
||
|
||
### 3. **Retool**
|
||
Retool — платформа для быстрого создания внутренних инструментов (админ-панели, дашборды, CRUD-приложения).
|
||
- **JavaScript**: JS используется повсеместно — для написания запросов к базам данных, трансформации данных, построения условной логики, управления состоянием компонентов. Есть встроенный редактор с автодополнением, поддержка async/await, возможность работы с lodash, moment и др.
|
||
- **Плюсы**: отличная интеграция с базами данных и API, богатая библиотека компонентов, высокая скорость разработки.
|
||
- **Минусы**: ориентирован на внутренние инструменты, не подходит для публичных клиентских приложений; лицензирование может быть дорогим для больших команд.
|
||
|
||
---
|
||
|
||
### 4. **Appsmith**
|
||
Appsmith — open-source low-code платформа для создания внутренних приложений.
|
||
- **JavaScript**: весь код в Appsmith — это JS. Вы можете писать выражения для свойств компонентов, запросов, валидации. Поддерживаются объекты, массивы, функции, библиотеки (например, Lodash, Moment). Можно создавать сложные цепочки запросов и управлять состоянием.
|
||
- **Плюсы**: open-source, возможность self-hosting, активное сообщество, полный контроль над кодом.
|
||
- **Минусы**: интерфейс менее “глянцевый”, чем у Retool; для сложных интерфейсов требуется больше ручной настройки.
|
||
|
||
---
|
||
|
||
### 5. **Budibase**
|
||
Budibase — open-source low-code платформа с акцентом на создание внутренних инструментов и веб-приложений.
|
||
- **JavaScript**: поддерживает встраивание JS в формулы, автоматизации (automations), кастомные компоненты. Можно писать JS-код для преобразования данных, валидации, отправки запросов, а также расширять функциональность через пользовательские компоненты на Svelte.
|
||
- **Плюсы**: простота использования, гибкая модель данных (SQL, Airtable, REST), встроенный билдер автоматизаций.
|
||
- **Минусы**: экосистема пока меньше, чем у конкурентов; сложные сценарии могут требовать написания кастомных компонентов.
|
||
|
||
---
|
||
|
||
### 6. **ToolJet**
|
||
ToolJet — ещё одна open-source low-code платформа для внутренних приложений.
|
||
- **JavaScript**: широкое использование JS — в запросах, трансформациях данных, условном рендеринге. Можно подключать внешние библиотеки через “Custom Component” (React-компоненты), писать свои виджеты.
|
||
- **Плюсы**: поддержка множества источников данных, активное развитие, возможность развертывания на своём сервере.
|
||
- **Минусы**: интерфейс менее отполирован, чем у коммерческих аналогов; сложность некоторых операций выше для непрограммистов.
|
||
|
||
---
|
||
|
||
### 7. **AppGyver (SAP)**
|
||
AppGyver — мощный конструктор, созданный для профессиональных разработчиков, которые хотят ускорить процесс.
|
||
- **JavaScript**: позволяет писать JS-формулы для свойств компонентов и бизнес-логики. Поддерживаются сложные выражения, вызовы функций, работа с API. В основе лежит реактивная модель данных.
|
||
- **Плюсы**: бесплатный (на момент написания), мощная визуальная среда, поддержка сложной логики.
|
||
- **Минусы**: интерфейс может показаться перегруженным, меньше готовых интеграций, чем у коммерческих платформ.
|
||
|
||
---
|
||
|
||
### 8. **Noodl**
|
||
Noodl — визуальная среда разработки, которая генерирует чистый React-код.
|
||
- **JavaScript**: нативное использование JS — вы можете писать функции, выражения, встраивать кастомный код в любом месте приложения. Noodl фактически создаёт React-приложение, поэтому разработчик может выгрузить исходный код и дальше развивать его традиционными средствами.
|
||
- **Плюсы**: полный доступ к исходному коду, возможность экспорта, хорошая производительность.
|
||
- **Минусы**: менее известен, сообщество небольшое; требует понимания реактивного программирования.
|
||
|
||
---
|
||
|
||
### 9. **OutSystems**
|
||
OutSystems — enterprise low-code платформа, которая позволяет создавать сложные приложения с возможностью добавления кастомного кода.
|
||
- **JavaScript**: поддерживает вставку JS-кода в клиентскую часть, создание собственных React-компонентов, использование внешних библиотек.
|
||
- **Плюсы**: масштабируемость, безопасность, инструменты для DevOps, подходит для крупных компаний.
|
||
- **Минусы**: высокая стоимость, сложность для небольших проектов, проприетарный язык логики (OutSystems Language).
|
||
|
||
---
|
||
|
||
### 10. **Airtable / Google AppSheet** (с оговорками)
|
||
Эти платформы не ориентированы на JavaScript напрямую, но предоставляют возможности для автоматизации через скрипты.
|
||
- **Airtable**: позволяет писать JavaScript-скрипты в “Scripting block” для сложной обработки данных.
|
||
- **AppSheet**: использует собственный язык выражений, но можно вызывать внешние API через actions, что косвенно связано с JS.
|
||
|
||
Они подходят для быстрого создания прототипов, но при сложных интерфейсах или специфической логике требуют дополнения другими инструментами.
|
||
|
||
---
|
||
|
||
## Сравнительная таблица
|
||
|
||
| Платформа | Тип | Open Source | JS для логики | Экспорт кода | Основное назначение |
|
||
|-------------|------------------------|-------------|---------------|--------------|------------------------------------|
|
||
| Bubble | No-code | Нет | Частично | Нет | Веб-приложения, MVP |
|
||
| Webflow | No-code | Нет | Через вставку | HTML/CSS/JS | Сайты, CMS, лендинги |
|
||
| Retool | Low-code | Нет | Да (полно) | Нет | Внутренние инструменты |
|
||
| Appsmith | Low-code | Да (MIT) | Да (полно) | Нет | Внутренние инструменты |
|
||
| Budibase | Low-code | Да (GPL) | Да (полно) | Нет | Внутренние инструменты, веб-приложения |
|
||
| ToolJet | Low-code | Да (GPL) | Да (полно) | Нет | Внутренние инструменты |
|
||
| AppGyver | No-code / Low-code | Нет | Да (формулы) | Нет | Веб и мобильные приложения |
|
||
| Noodl | Low-code | Нет | Да (полно) | Да (React) | Веб-приложения, прототипы |
|
||
| OutSystems | Low-code (enterprise) | Нет | Да (через компоненты) | Частично | Корпоративные приложения |
|
||
|
||
---
|
||
|
||
## Как выбрать?
|
||
|
||
- **Для публичного веб-приложения с высокой кастомизацией** → Bubble (если готовы мириться с vendor lock-in) или Noodl (если нужен экспорт кода).
|
||
- **Для внутренних админ-панелей и дашбордов** → Retool (быстро, но платно), Appsmith или Budibase (open-source, можно развернуть у себя).
|
||
- **Для маркетингового сайта с элементами логики** → Webflow + встраиваемый JS.
|
||
- **Для корпоративного масштаба** → OutSystems (если бюджет позволяет).
|
||
- **Для быстрого прототипирования и работы с данными** → Airtable + скрипты.
|
||
|
||
---
|
||
|
||
## Заключение
|
||
|
||
Современные no-code/low-code системы уже давно не ограничиваются «просто конструкторами». JavaScript проник в них как универсальный язык для расширения логики, интеграций и тонкой настройки. Выбор конкретной платформы зависит от ваших требований: нужен ли полный контроль над кодом, планируется ли масштабирование, важна ли open-source модель, а также от целевой аудитории — внутренние сотрудники или внешние пользователи.
|
||
|
||
В любом случае, наличие возможности писать JS-код превращает no-code инструменты в гибридные среды, где можно быстро создавать 80% функциональности визуально, а оставшиеся 20% — дорабатывать кодом, не теряя в скорости разработки.
|