Колесо индустрии инструментов для визуализации страниц
Независимо от того, большая это компания или маленькая, когда мы разрабатываем интерфейсные проекты, в проектном проекте есть много похожих функций или страниц.Разработка часто включает сверхурочную работу и перемещение кирпичей для выполнения какой-то работы, которая не растет и повторные операции.Видно что клавиша Ctrl на клавиатуре стерлась.Лак,С и В тоже белеют сразу,так как решать эти повторяющиеся задачи с машинами для разработки? В случае нехватки интерфейсных ресурсов, есть ли какой-либо инструмент, который может напрямую создать нужную мне интерфейсную страницу? Так появились отраслевые инструменты построения визуализации страниц.В этой статье будут представлены самые популярные в настоящее время инструменты построения визуализации страниц, а также представлены некоторые отраслевые проекты построения визуализации с открытым исходным кодом для ознакомления (Копия).
1 страница Визуализация Строительство Введение
страница разработки программирования: страница динамической логики разбивается на HTML-дерево, данные и динамическую логику.Процесс разработки интерфейсных страниц инженерами-разработчиками внешнего интерфейса по существу заключается в использовании инструментов программирования (IDE) для добавления, удаления и изменения дерева HTML, данных и Динамическая логика страницы.
визуализация страницы: это добавление, удаление и изменение дерева HTML, данных и динамической логики страницы путем визуального взаимодействия, чтобы реализовать создание страницы.Инструмент построения визуализации страницы представляет собой программный инструмент для реализации визуального редактирование страницы
Цель: Существование любого инструмента для более эффективного решения проблемы Инструмент построения визуализации страниц используется для решения проблемы эффективности генерации страниц. Фронтенд-инженеры могут подумать, что самый эффективный способ генерировать страницы — это набирать код, но создавать страницы нужно не только фронтенд-инженерам. инженер" для их улучшения. Эффективность генерации страниц.
| разница | страница разработки программирования | Визуально создавайте страницы |
|---|---|---|
| Требования к навыкам | Нужны основы программирования | Не может быть запрограммирован |
| Метод работы | Пишите код в редакторе кода | Перетаскивайте/заполняйте формы/пишите код в инструменте визуального построения |
2 Отраслевые исследования (20+)
| название проекта | Описание Проекта | что можно решить |
|---|---|---|
| Baidu друзья(Открытый исходный код) | Фреймворк с низким кодом интерфейса может генерировать различные внутренние страницы с помощью конфигурации JSON, что значительно снижает затраты на разработку и даже без знания внешнего интерфейса. | Вам не нужно знать внешний интерфейс, чтобы создать профессиональный и сложный внутренний интерфейс, и вы можете использовать визуальный редактор страниц для создания страниц, не подвергаясь влиянию обновления технологии внешнего интерфейса. |
| Чжэн Цайюнь-Лубань(не с открытым исходным кодом) | Luban — это система построения, которая быстро генерирует страницы на основе бизнес-компонентов (сайтов, страниц, компонентов, данных, разрешений).Схема JSON преобразует бизнес в данные → данные в определения → определяет определения в структуры | Улучшение взаимодействия с пользователем: страница принимает статическую схему, скорость рендеринга и доступа выше; Повышение стабильности: использование схемы прямой переадресации Nginx обеспечивает более выгодную гарантию доступности маршрутизации страницы и производительность ответа, и в то же время она поддерживает более надежная схема аварийного восстановления и поддерживает быстрый выпуск, откат. Быстрый отклик на потребности бизнеса: за счет повторного использования компонентов он может быстро реагировать на потребности бизнеса и повышать эффективность персонала, занимающегося исследованиями и разработками; Расширение возможностей бизнеса: создавать продукты, операции и другие студенты также могут участвовать в создании страницы, улучшая итерацию бизнеса эффективность и доступность данных. Лучшая систематическая способность: на основе конструкции системы удобно открывать горизонтальную систему и систему обнаружения производительности, систему гарантии стабильности, систему развертывания эксплуатации и обслуживания и систему онлайн-мониторинга, формируя синергию на уровне системы и сложные проценты. |
| Taobao-imgcook(не с открытым исходным кодом) | Интеллектуальное создание одним щелчком кода Skecher, PS, рисунков и диаграмм прототипов из проекта проекта Интеллектуальная идентификация выражений с помощью пользовательского интерфейса алгоритма и преобразование их в DSL, а затем анализ DSL на интерфейсных страницах | Восстановление эскизов проекта; Skecher, ps, изображения и диаграммы прототипов напрямую генерируют код; точное восстановление; генерация WYSIWYG; код можно поддерживать и настраивать; машинное интеллектуальное распознавание и понимание; DSL/плагин можно настроить |
| Али-Ичелуна, Паас | Протокол генерации и построения конфигурации — стандартная спецификация — страница регенерации схемы и логика, редактор низкого кода — экосистема разработки | Изменение производственных отношений и повышение производительности (включение) — общие строительные продукты в мидл- и бэк-офисе — все; снижение затрат на НИОКР (улучшение) — платформа разработки с низким кодом — разработчики (полная связь создания проекта, разработки, отладки и выпуска). ) ;Инкубационные продукты (экология зданий) - Платформа PaaS - разработчики (инфраструктура, производство и строительные материалы на основе стандартных протоколов строительства, а также среда эксплуатации и разработки для предоставления строительных услуг для различных бизнес-сценариев) |
| Али-Папилио(не с открытым исходным кодом)/pipeline(по аналогии с открытым исходным кодом) | Делайте предварительный веб-сайт, как PPT; редактирование данных страницы | Поддерживает редактирование данных страницы, ориентированное на работу и персонал продукта, а свобода редактирования не является вложенными компонентами. В настоящее время это лучший инструмент для создания страниц операций и действий. Он предоставляет шаблоны для создания страниц и поддерживает пользовательские шаблоны. ;Конфигурация Форма создается на основе схемы, и функция работы с формой конфигурации идеальна. |
| Али-Летающий лед(не с открытым исходным кодом)/vue-layout(по аналогии с открытым исходным кодом) | Редактор дерева компонентов; для средних и внутренних разработчиков; для компонентных страниц он в основном реализует визуальное редактирование дерева компонентов. Его основная функция заключается в разработке макета страницы: выберите соответствующий компонент в списке компонентов пользовательского интерфейса и вставьте компонент в список компонентов пользовательского интерфейса, перетаскивая страницы, создавать страницы с макетами и стилями. | Поддерживает редактирование дерева компонентов, предназначенное для средних и внутренних разработчиков, а свобода редактирования — это не вложенные компоненты; с помощью «Material-Block» разработчики, не работающие с интерфейсом, могут быстро создавать пригодные для использования и соответствующие спецификациям страницы. как исходный код .; способ внешнего обслуживания. |
| Таобао-Тяньма(не с открытым исходным кодом) | Кросс-конечная конструкция страницы | Создание страниц для терминалов; разработка schema.json для стандартных данных; описание входных параметров свойств модуля; стандартизация данных; отображение на основе данных; написание кода модуля (развязка, модуль и код); упаковка каждого модуля по отдельности; начальная динамическая загрузка; кросс -терминальная схема кеширования (копия кеша телефона tm tb, соответствующий доступ, идентификация кода); рендеринг SSR на стороне сервера |
| Таобао-Ковчег | Разработайте и внедрите маркетинговую конструкцию toC | Терминал открывается за секунды, для реализации терминала за секунды используется метод внешней оптимизации. |
| Алимама - Строительные блоки Сямэнь(не с открытым исходным кодом) | Схема построения полной маркетинговой страницы из основных компонентов | |
| Али @vich | Документация — это код; документация преобразуется в частичный код | |
| Али алист /Formily(Открытый исходный код) | Когда схема формы Formily является лучшим выбором для области поиска, благодаря интеграции этих схем можно быстро реализовать стандартизированные сценарии списка. ;В то же время AList поддерживает рендеринг протокола JSON Schema, который можно быстро развивать с помощью управления данными. | Встроенная схема области поиска Formily с высокой производительностью и функциями; поддержка системы компонентов Ant Design/Fusion Next; поддержка управляемой данными схемы JSON Schema; независимое управление логикой побочных эффектов, охватывающей различную сложную логику проверки связи; поддержка различных сложных компоновок схемы |
| JD-MPM(не с открытым исходным кодом) | Метод конфигурации данных ComData используется для анализа страницы внешнего интерфейса, которая является ядром системы.7PageData — это уровень абстрактного описания страницы. | Богатые строительные материалы: MPM имеет более 30 компонентов и более 500 шаблонов, а его бизнес-возможности охватывают несколько сценариев, таких как товары, руководства по покупкам и маркетинг. Мощная функция конфигурации: рендеринг с трех терминалов - это мощная способность MPM.Кроме того, MPM также поддерживает BI-сортировку конфигурации страницы, автоматическое отслеживание, автоматическое тестирование и измерение скорости страницы. Комплексные возможности системы: MPM сопровождает страницы, Он не только оснащен плавным редактором перетаскивания, предварительным просмотром в реальном времени и возможностями диагностики состояния страницы, но также всесторонне контролирует и ухудшает систему и схему страниц. |
| Кубик Рубика Meituan(не с открытым исходным кодом) | Схема построения полной маркетинговой страницы из основных компонентов | |
| Мейтуан Лего(не с открытым исходным кодом) | Схема построения полной маркетинговой страницы из основных компонентов | |
| esview(Имитация Lego с открытым исходным кодом) | Перетащите динамические компоненты vue для создания своей страницы, сгенерируйте код vue. | проект с открытым исходным кодом esview, имитирующий Lego of Meituan.Полный визуальный фреймворк для построения страниц для миддл и бэкенд разработчиков.Результаты макета страницы выглядят беспорядочно, а пользовательские компоненты написаны странным образом; он не интегрирует бизнес-логику, и не поддерживает запись в рамках логики кода страницы. |
| Дизайн формы пользовательского интерфейса элемента и генератор кода(Открытый исходный код) | Дизайн формы пользовательского интерфейса элемента и генератор кода, сгенерированный код может быть запущен непосредственно на основе элемента vue проекта; также может быть экспортирован в форму JSON, поддерживая использование синтаксического анализатора JSON, который преобразуется в реальную форму. | |
| Vue-Layout(Открытый исходный код) | Схема построения полной маркетинговой страницы из базовых компонентов. Инструмент для визуального макета Vue на основе компонентов пользовательского интерфейса и генерации кода .vue. https://github.com/JakHuang/форм-генератор | Поддержка редактирования дерева компонентов, для средних и внутренних разработчиков, свобода редактирования является вложенным компонентом. Генерация страницы с помощью перетаскивания очень полная. Она используется для дизайна страницы, поэтому она смещена в сторону управления стилем. элементов страницы Глубокое понимание потока данных: проектирование архитектуры визуального онлайн-редактора. |
| gaea-editor(Открытый исходный код) | Проект с открытым исходным кодом. Поддерживает редактирование дерева компонентов, для средних и внутренних разработчиков, свобода редактирования заключается в вложенных компонентах. Генерация страницы с помощью перетаскивания очень полная. Он используется для дизайна страницы, поэтому он смещен в сторону стиля управление элементами страницы Иметь глубокое понимание потока данных инструментов визуального построения: Дизайн архитектуры визуального онлайн-редактора. | |
| pipeline(Открытый исходный код) | Страница действий по эксплуатации / продукции | |
| genGEN (Открытый источник) | Создавайте страницы в соответствии с интерфейсом, чтобы уменьшить повторяющуюся работу | |
| H5.cn | https://www.ih5.cn/not-logged-in | |
| Brick Design(Открытый исходный код) | Перетащите блок, чтобы отредактировать его напрямую, создать интерфейсную страницу и просмотреть ее. | |
| Байду H5(не с открытым исходным кодом) | https://h5.bce.baidu.com/docs/intro создание страницы маркетинговой кампании | |
| Другое (из открытых источников) | 1.website-builder 2.site-builder 3.VvvebJs 4.grapesjs 5.Maha 6.Понравилась микространица 7.X-Page-Editor-Vue |
3 Краткое изложение ключевых моментов отраслевого исследования
Основываясь на исследовании инструментов построения визуализации страниц, приведенных выше, в отрасли сложилось множество мнений, и для вашего ознакомления представлены две репрезентативные статьи:
- Основываясь на современных интерфейсных фреймворках, почему нет зрелого дизайнера, который поддерживает макет элементов управления с помощью перетаскивания и может автоматически генерировать интерфейсный код?
- Интерфейсный сервис — смерть и жизнь инструментов построения страниц
Мы изучили так много лучших в отрасли фреймворков для визуализации переднего плана. Общая идея схожа. Сотни школ спорят. Хотя Feibingyun Papilio от Али идеален, все же есть следующие две проблемы:
- Логика взаимодействия не может быть сгенерирована автоматически
- Он может играть роль только в ограниченных и конкретных бизнес-сценариях.
Существование этих двух проблем заставит нас производить и проектировать вещи, требующие low code.Если low code разработчики не захотят его использовать, потому что сгенерированный код не прост в сопровождении и раздут, если он используется не- разработчики, они не будут писать код, они вообще не хотят писать код, поэтому не хотят его и использовать;
И мы стоим на плечах гигантов, можем ли мы решить две вышеупомянутые проблемы? В настоящее время у меня нет хороших решений, но мы можем сначала изучить и понять их идеи реализации, а затем решить самые сложные проблемы, описанные выше.
3.1 Обзор инструментов в отрасли
| Сходства | разница | Уроки выучены | проблем следует избегать | Открытый исходный код может учиться у |
|---|---|---|---|---|
| 1. Метод DSL анализирует и перетаскивает или настраивает псевдокод для создания необходимых интерфейсных страниц, большинство из которых имеют форму схемы JSON 2. Все этапы обработки для создания страницы из конфигурации аналогичны | 1. Различные методы обработки 2. Различные определенные поля DSL 3. Различные степени оптимизации 4. Различные бизнес-сценарии | 1. От конфигурации до псевдокода метода DSL до того, как анализировать и, наконец, генерировать общий дизайн архитектуры и идеи страницы интерфейса для справки 2. Как синхронизировать режим схемы поля DSL, как заниматься передачей, компиляцией, упаковкой, онлайн и оптимизацией | 1. Позиционирование будущей группы пользователей 2. Проблемы после технического обслуживания | 1,Baidu друзья(Открытый исходный код может учиться у реакции) 2.vue-layout(аналогично Feibing vue с открытым исходным кодом) 3.pipeline(Аналогично реакции Feibing с открытым исходным кодом) 4.Мейтуан Лего(см. vue) 5.Кубик Рубика Meituan(см. реакцию 6,esview(Имитация Lego с открытым исходным кодом) 7.Brick Design(Открытый исходный код может учиться у реакции) 8.gen(из открытых источников) 9.gaea-editor(из открытых источников) 10.Али алист/Formily(из открытых источников) 11.Любань H5(Открытый исходный код) |
3.2 Метод DSL
Особенности структуры данных схемы JSON:
- Плоский
- дендритный
демо1:
{
"type": "object",
"properties": {
"$attr": {
"type": "object",
"properties": {
"hidden": {
"type": "boolean"
}
}
},
"$theme": {
"type": "object",
"properties": {
"themeColor": {
"type": "string"
}
}
},
"items": {
"type": "array",
"items": {
"type": "object",
"properties": {
“itemId”: {
"type": "string"
}
}
}
}
}
}
демо2:
{
"type": "page",
"body": {
"title": "",
"type": "form",
"autoFocus": false,
"api": "https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=1",
"mode": "horizontal",
"controls": [
{
"type": "fieldSet",
"title": "基本配置",
"controls": [
{
"name": "a",
"type": "text",
"label": "文本1"
},
{
"name": "a",
"type": "text",
"label": "文本2"
}
]
},
{
"type": "fieldSet",
"title": "其他配置",
"collapsable": true,
"collapsed": true,
"controls": [
{
"name": "c",
"type": "text",
"label": "文本3"
},
{
"name": "d",
"type": "text",
"label": "文本4"
}
]
}
],
"submitText": null,
"actions": []
}
}
4. Описание
Примечание: Нажмите на название каждого проекта в отраслевом исследовании, чтобы просмотреть детали проекта. Вставлять изображения в документ markDown слишком сложно, поэтому Сяо Юаньэр отказался от введения изображения. Если есть студенты, которым нужно знать , я их потом составлю (скопирую) Знай структуру конструкции и детальные чертежи, хахаха.
Для получения дополнительной документации по внешнему интерфейсу см.маленькое круглое лицо[1]
использованная литература
[1]Дополнительная документация:https://juejin.cn/user/1398234520230989