Некая Figma над браузером на корпоративных production компонентах с VSCode и DevTools
aka yet another Visual Basic IDE for web, Web Constructor, Bret V. ecstasy, React DS Visual constructor
Быстрое code-based макетирование и несложные правки прямо в браузере в dev-окружении на существующем коде для менеджеров, пользователей и программистов для будущего мира сильных дизайн систем. В нем разработка каждой фичи уже не проходит через статическое рисование в photoshop/sketch/figma.
Заключительный шаг в эволюции когда веб Фреймворк, DevTools IDE и инструмент поототипирования сливаются вместе. Сейчас в инструменты прототипипрвания завозят реальные react компоненты и данные, а визуальные компоненты делают более похожими (Figma variants)
Визуальных и low/no-code конструкторов сайтов, CRUD’ов и других подобных инструментов очень много, но они не пригодны в продакшене, т.к. не используют подход дизайн системы, токенов, а так же либо совсем не позволяют менять руками код, либо перестают функционировать после его изменения в местах изменений (например визуальные конструкторы GUI в средах вроде Visual Basic и .NET, добавление цикла для генерации кнопок калькулятора отключает визуальное представление этого окна)
thumb
В девелоперском режиме сайта по хоткею открывается панель всех примитивных компонентов (кнопки, тултипы, контролы, и тп) с разбивкой по категориям и поиском, На странице при этом все элементы-контейнеры (те, что с children), компоненты и их render-функции плавно увеличивают отступы и подсвечивают свои границы.
Наиболее интересны контейнеры раскладки: Flow (компонент для flexbox), Grid, а так же контейнеры группировки: div, span
Shadow el. Компоненты, помеченные как теневые не разворачивают свою структуру, Например кнопки и другие базовые компоненты из библиотек (mui, sun, components/common (общие к-ты приложения), pages/*/components (общие компоненты страниц)). Общие компоненты веб-приложения и отдельных страниц редактируется в тестовом стенде (приложение в браузере сменяется тестовым стендом, на котором представлен один компонент или несколько его клонов с разными заданными пропами)
Drag’n’drop. При перетаскивании нового компонента из боковой панели, целевой элемент-контейнер дополнительно подсвечивается
Активный элемент над собой компактно отображает свое имя, goto def и несколько основных настроек: Например variant (Для Flow это будет стрелка вправо или вниз, А Для кнопки это будет формат ее отображения в виде селекта: outline|text|contained). Эти и другие пропы так же отображаются на боковой панели как в Visual Basic. Там же можно смотреть комментарии к ним или перейти в раздел живой документаций/show case+Api docs Или в гайды дизайн-системы.
Sidepanel. Пропы компонента в боковой панели Могут настраиваться исходя из типа. Например булевы переключаются чекбоксом. Доступа подстановка state и props с деревом доступных колючей с типами, примерами данных и комментариями из кода. Функциональные пропы-события (e.g. onClick) позволяют создать заглушку хендлера или прыгнуть в уже существующую (в IDE на компьютере или в интегрированный VSCode online)
В боковой панели кроме 1) банка компонентов и 2) свойств активного элемента есть 3) банк моков данных (как для всей страницы, так и фрагменты), Там же можно активный элемент изолировать, поместив в тестовый стенд, где можно гибко менять входные данные и смотреть несколько компонентов с разными состояниями одновременно
NO. Ширины и высоты элементов менять нельзя. Но можно подставлять css-переменные или state/props в боковой панели. Размещать элементы в произвольном месте через конструктор тоже нельзя. Используется браузерный поток верстки
Conds. Элементы, показываемые по условию, отображаются серыми с заглушками, в них можно посмотреть условие.
Loops. Циклы тоже показываются, Можно попросить отображать только первый элемент
Hot. При изменении кода руками модули заменяются на горячую
Проксируется createElement или используется react devtools api, чтобы соотнести DOM элементы с компонентами и элементами в коде.
Код Инструментируется (AST трансформации в Babel) чтобы находить также рендер-функции условия и циклы
Составляется маппинг от конкретных элементов в DOM до мест в коде. Для этого ищется файл компонента, В нём трассируются рендер-функции и элементы
Минимальный код, соответствующий каждому компоненту генерится исходя из его isRequired проп-тайпов. Есть возможность кастомизировать это для сложных случаев и добавлять несколько вариантов шаблонов, тогда при перетаскивании из боковой панели будет предлагаться выбор.
Все кликабельны элементы лишаются своих хендлеров, клики обрабатываются иначе: для фокусирования элементов в WYSIWYG
Компоненты могут декларировать, какие элементы можно помещать внутрь children, а так же их количество. Например это нужно в Table, Attrs, Tooltip, где children обрабатывается не стандартно
Изменения сразу транслируются в код
Библиотеки компонентов можно использовать и другие. под них надо будет адаптировать как минимум маппинг элементов в боковой панели
🦖Эпоха динозавров:
нативные: Visual Basic Studio IDE, Embarcadero C++Builder, Borland Delphy
веб: Ms Publisher, Dreamweaver
Visual Basic
Список компонентов