Вайб-кодинг: третья неделя эксперимента. Табличный редактор, автокомплит и несколько экспериментов
Этот выпуск — уже третий подряд об одном и том же проекте, что само по себе неожиданность. Обычно мои эксперименты укладываются в один-два дня, но этот проект живет и развивается уже третью неделю. Вайб-кодинг — это навык, который только формируется. Мы находимся в совершенно новой, неисследованной области, где многое познается методом проб и ошибок. Один из главных выводов, к которому я прихожу: прежде чем давать задачу модели, стоит самостоятельно провести ресерч и выбрать подходящий фреймворк, потому что решение, которое ИИ предлагает по умолчанию, далеко не всегда оказывается оптимальным. Главная фича этой недели — табличный редактор. Нодовое представление отлично подходит для работы со связями и логикой, но когда нужно массово редактировать значения переменных, прыгать по каждому узлу неудобно. Табличный редактор решает эту проблему: он объединяет узлы, переменные и связи в нескольких таблицах, поддерживает редактирование значений и формул, быстрый поиск, работу с несколькими сценариями и сквозной нейминг. Для раборы со сковзным неймингом создана отдельная функция. Архитектурно решение не слишком удачное, но уже сейчас при переименовании узла или переменной название автоматически обновляется везде, где оно используется. Пока это экперимент, можно использоать не самый совершенный подход. Перед тем как внедрить табличный вид в основной проект, я запустил отдельный эксперимент в Google AI Studio, специально посвященный поиску подходящего фреймворка. С самого начала я использовал TanStack Table. Потом попробовал React Data Grid и он не подошел. Наиболее интересным оказался AG Grid, продвинутая система с большим количеством функций из коробки. Пока он не перенесен в основной проект из-за одной особенности поведения дочерних элементов при движении колонок, но эксперимент был полезным. Второе нововведение — автокомплит для формул. Теперь при вводе формулы система подсказывает доступные названия нодов и переменных, что заметно упрощает работу. Из не совсем удачных экспериментов — попытка добавить светлую тему. Тема в целом сгенерировалась, но из-за большого количества элементов с явно прописанными цветами переключение между светлой и темной темой работает нестабильно. Думаю, этим стоит заняться позже, когда основной функционал устоится, и нужно будет двигаться в полуавтоматическом режиме, автогенерация дает хороший старт, но финальная доводка все равно требует ручного вмешательства. Впереди еще полный бэклог идей. В том числе планируется пересмотреть подход к аналитике, сейчас она существует отдельно от проекта, а хотелось бы, чтобы эта информация органично вписывалась в общую структуру нодов. Проект продолжает развиваться, и это по-прежнему для меня интересно. Используемые технологии: - AG Grid, - React Datagrid, - Google AI Studio, - Google Cloud Ссылки на проект: - Пример файла проекта https://nodeflow.podluzny.com/p/nT-4xCm8jCZ7OOMVamJygNeA?scene=1&zoom=fit - Больше примеров https://nodeflow.podluzny.com/examples Основные обновления: 26.03 - При смене названией в переменных и нодах, меняется их название в формулах. - Добавлена возможность при переходе по URL передавать переменную в части GET, чтобы переходить к определенному режиму. Сейчас, передается переменная scenario, например, scenario=1 - открыть первый сценарий после загрузки файла. 28.03 - Добавлен автокомплит при редактировании формул. Используются ключевые слова, ноды, переменные. - Добавлено табличное представление данных. 29.03 - Экспорт проекта в CSV, XLSX. 29.03 - Провел эксперимент по замене табличного редактора на React Data Grid, результат неудачный, потерялся контроль над отображением сложных данных. Возможно, если надо чистые таблицы, то этот фреймворк хорошо, но для сложных связей не очень подходит. 30.03 - Провел эксперимент по замене табличного редактора на AG Grid, результат хороший, но отображение требует настройки. Можно в следующем проекте попробовать использовать. 1.04 - Добавить возможность в ссылке на проект указывать ?zoom=fit. Обновлена страница справки.
Этот выпуск — уже третий подряд об одном и том же проекте, что само по себе неожиданность. Обычно мои эксперименты укладываются в один-два дня, но этот проект живет и развивается уже третью неделю. Вайб-кодинг — это навык, который только формируется. Мы находимся в совершенно новой, неисследованной области, где многое познается методом проб и ошибок. Один из главных выводов, к которому я прихожу: прежде чем давать задачу модели, стоит самостоятельно провести ресерч и выбрать подходящий фреймворк, потому что решение, которое ИИ предлагает по умолчанию, далеко не всегда оказывается оптимальным. Главная фича этой недели — табличный редактор. Нодовое представление отлично подходит для работы со связями и логикой, но когда нужно массово редактировать значения переменных, прыгать по каждому узлу неудобно. Табличный редактор решает эту проблему: он объединяет узлы, переменные и связи в нескольких таблицах, поддерживает редактирование значений и формул, быстрый поиск, работу с несколькими сценариями и сквозной нейминг. Для раборы со сковзным неймингом создана отдельная функция. Архитектурно решение не слишком удачное, но уже сейчас при переименовании узла или переменной название автоматически обновляется везде, где оно используется. Пока это экперимент, можно использоать не самый совершенный подход. Перед тем как внедрить табличный вид в основной проект, я запустил отдельный эксперимент в Google AI Studio, специально посвященный поиску подходящего фреймворка. С самого начала я использовал TanStack Table. Потом попробовал React Data Grid и он не подошел. Наиболее интересным оказался AG Grid, продвинутая система с большим количеством функций из коробки. Пока он не перенесен в основной проект из-за одной особенности поведения дочерних элементов при движении колонок, но эксперимент был полезным. Второе нововведение — автокомплит для формул. Теперь при вводе формулы система подсказывает доступные названия нодов и переменных, что заметно упрощает работу. Из не совсем удачных экспериментов — попытка добавить светлую тему. Тема в целом сгенерировалась, но из-за большого количества элементов с явно прописанными цветами переключение между светлой и темной темой работает нестабильно. Думаю, этим стоит заняться позже, когда основной функционал устоится, и нужно будет двигаться в полуавтоматическом режиме, автогенерация дает хороший старт, но финальная доводка все равно требует ручного вмешательства. Впереди еще полный бэклог идей. В том числе планируется пересмотреть подход к аналитике, сейчас она существует отдельно от проекта, а хотелось бы, чтобы эта информация органично вписывалась в общую структуру нодов. Проект продолжает развиваться, и это по-прежнему для меня интересно. Используемые технологии: - AG Grid, - React Datagrid, - Google AI Studio, - Google Cloud Ссылки на проект: - Пример файла проекта https://nodeflow.podluzny.com/p/nT-4xCm8jCZ7OOMVamJygNeA?scene=1&zoom=fit - Больше примеров https://nodeflow.podluzny.com/examples Основные обновления: 26.03 - При смене названией в переменных и нодах, меняется их название в формулах. - Добавлена возможность при переходе по URL передавать переменную в части GET, чтобы переходить к определенному режиму. Сейчас, передается переменная scenario, например, scenario=1 - открыть первый сценарий после загрузки файла. 28.03 - Добавлен автокомплит при редактировании формул. Используются ключевые слова, ноды, переменные. - Добавлено табличное представление данных. 29.03 - Экспорт проекта в CSV, XLSX. 29.03 - Провел эксперимент по замене табличного редактора на React Data Grid, результат неудачный, потерялся контроль над отображением сложных данных. Возможно, если надо чистые таблицы, то этот фреймворк хорошо, но для сложных связей не очень подходит. 30.03 - Провел эксперимент по замене табличного редактора на AG Grid, результат хороший, но отображение требует настройки. Можно в следующем проекте попробовать использовать. 1.04 - Добавить возможность в ссылке на проект указывать ?zoom=fit. Обновлена страница справки.