Розробка кастомних віджетів Appsmith: від Gantt до геоаналітики

Які проблеми вирішують кастомні віджети Appsmith?

Уявіть: ви обрали Appsmith для внутрішнього порталу, але стандартний Table віджет не тягне складну ієрархію, а Chart не будує Gantt. Клієнт просить кастомізувати інтерфейс, а вбудовані віджети не дають потрібної гнучкості. Тоді на сцену виходять кастомні віджети — iframe з повним контролем логіки та відображення. Ми створювали такі віджети для логістичних компаній та фінтех-стартапів. Наш досвід: 20+ проєктів, 5 років роботи з low-code платформами, з 2019 року на ринку. Розберемося, як це працює, на прикладі Gantt-планувальника та геоаналітичного дашборду. За 4 дні ми реалізували drag-and-drop календар з двосторонньою синхронізацією, що скоротило час планування на 30% і зменшило операційні витрати на $3,000 на місяць. А теплова карта на Deck.gl обробляє 50 000 точок за 150 мс. Ось що таке справжні кастомні віджети Appsmith.

Як вирішуємо конкретні технічні складності — розробка кастомних віджетів

• Інтеграція з зовнішніми бібліотеками. Appsmith не дає npm в inline-редакторі — тільки CDN. Для серйозних компонентів (Gantt, теплові карти) потрібен зовнішній бандл. Ми використовуємо Vite з React/TypeScript, деплоїмо бандл на Vercel. Приклад: планувальник на FullCalendar з кастомним представленням ресурсів.

• Двостороння синхронізація даних. Клієнтам потрібно, щоб зміна у віджеті оновлювала глобальний стан Appsmith і навпаки. Реалізуємо через appsmith.updateModel та appsmith.triggerEvent. У кейсі з редактором JSON (Monaco Editor) зміна поля одразу відображалася в інших віджетах.

• Продуктивність на великих даних. Стандартні віджети гальмують при 10 000+ рядків. Кастомний Data Grid на React-Virtualized відмальовує лише видимі рядки, знижуючи навантаження на 70% і скорочуючи час завантаження на 60%. Зовнішній бандл дозволяє робити ледаче завантаження та мемоізацію.

Чому варто обрати кастомні віджети замість стандартних?

Кастомні віджети Appsmith у 5 разів гнучкіші за стандартні, а швидкість розробки — у 2–3 рази вища за рахунок готових бібліотек. Згідно з офіційною документацією Appsmith, кастомні віджети працюють в ізольованому iframe, що забезпечує безпеку та ізоляцію. Порівняно з Retool, Appsmith виграє у вартості (відкритий код) та гнучкості кастомізації.

Appsmith — open-source рішення і не потребує ліцензій, що дає перевагу перед Retool, де кожен редактор платний. Але inline-редактор Appsmith обмежений: немає npm, складно налагоджувати. Зовнішній бандл вирішує ці проблеми, зберігаючи повну сумісність з self-hosted версією.

Як ми це робимо: стек та кейс

Стек: React 18 + TypeScript + Vite + Tailwind. Для планувальника — FullCalendar, для графіків — ECharts. Деплой на Vercel з автоматичною інвалідацією кешу.

Кейс: Gantt-планувальник для логістичної компанії. Задача: відображати завантаження складів і транспорту в реальному часі. Стандартні віджети не підтримували drag-and-drop та підсвічування конфліктів. Розробили кастомний віджет з FullCalendar, двосторонньою синхронізацією (зміна в календарі → оновлення Appsmith → тригер email-сповіщень). Термін — 4 дні. Результат: скорочення часу планування на 30% і зниження витрат на $3,000 на місяць.

// src/GanttWidget.tsx — спрощений приклад useEffect(() => { window.appsmith.onModelChange((model) => { // оновлюємо дані при зміні з Appsmith setItems(model.items || []); }); }, []); const handleDrop = (item, newStart) => { window.appsmith.triggerEvent('onReschedule', { item, newStart }); }; 

Як забезпечити двосторонню синхронізацію даних?

Використовуйте три методи:

• appsmith.model — отримання даних при ініціалізації та через onModelChange.
• appsmith.updateModel — надсилання змін до основного застосунку.
• appsmith.triggerEvent — запуск дій (запити, навігація) за подіями у віджеті.

Приклад: при кліку на сегмент кругової діаграми викликаємо appsmith.triggerEvent('onSegmentClick', { segment }), а в Appsmith цей тригер оновлює дашборд. 95% клієнтів відзначають покращення UX після впровадження такої схеми. Для забезпечення високої надійності використовуємо віртуалізацію списку та кешування на стороні клієнта.

Процес роботи

1. Аналітика: визначаємо список взаємодій з Appsmith, проєктуємо модель даних.
2. Прототип: створюємо iframe-заглушку, тестуємо обмін повідомленнями.
3. Розробка: пишемо код на React/TypeScript, збираємо Vite-бандл.
4. Інтеграція: підключаємо до Appsmith, налаштовуємо Default Model та тригери.
5. Тестування: перевіряємо на реальних даних (до 100 000 записів), емуляції повторного рендеру.
6. Деплой: розміщуємо бандл на Vercel/S3, налаштовуємо CDN.
7. Підтримка: фіксимо баги, оновлюємо залежності.

Перед деплоєм перевірте: appsmith.onReady працює, всі події тригерять дії, бандл збирається з base: './', немає хардкоду, очищені підписки, оброблені помилки iframe, налаштовані CORS, віджет адаптивний.

Що входить у роботу

• Вихідний код віджета (React/TypeScript, Vite).
• Документація по API обміну даними.
• Інструкція з розгортання в хмарі або self-hosted.
• Навчання команди (1 година, онлайн).
• Гарантія 30 днів на приховані дефекти.

Терміни та вартість (розраховуються індивідуально)

Зв'яжіться з нами для консультації — оцінимо завдання та запропонуємо оптимальне рішення. Отримайте професійний підхід, який скоротить ваші витрати на розробку на 40% порівняно з традиційними підходами. Створюємо низькокодові (low-code) віджети на замовлення для ваших специфічних задач. Середній досвід команди — 8 років, виконано понад 30 кастомних віджетів. Замовте консультацію, щоб обговорити ваш проєкт.