Система построения визуализации активности - ваш KPI был мной законтрактован

предисловие

Для компаний с большим количеством C-end бизнеса яма, которую невозможно избежать из-за разрушительного роста, эксплуатации и других сторон, — это разработка большого количества страниц H5, которые могут быть загрузками, уведомлением о спросе, представлением продукта. , маркетинговая деятельность и т.п. стр. Такие требования имеют несколько явных недостатков:

Показатели затрат на разработку крайне низкие, а сроки запуска сжаты, каждый раз на поддержку нужно назначать отдельного студента.
Затраты на связь высоки, а бизнес-логика очень похожа.
высокая частота спроса

Есть поговорка, что мир создают «ленивые люди» Когда мы устаем от бесконечной монотонной работы, появляются какие-то «ленивые» идеи. Для НИОКР мы не хотим тратить слишком много времени на такую простую и повторяющуюся работу; для операций нужны более быстрые итерации, релизы и освобождение от ограничений планирования НИОКР; для компаний это экономия трудозатрат Это экономия финансовых затрат , а более высокая эффективность может поддерживать больше маркетинговых стратегий роста.

Таким образом, с точки зрения технологического бизнеса, система визуального редактирования деятельности является необходимым производственным инструментом для каждой средней и крупной компании.

Во-первых, давайте выберем несколько репрезентативных страниц для краткого анализа...

Как показано ниже:

Сначала проанализируем страницу:

Рисунки 1 и 3 оба простыеСтраница загрузки дренажа
Рисунки 2 и 4 принадлежатСтраница общей активности
Рис. 5 Никакой логики взаимодействия, только простаяСтатическая информационная страница
Рисунок 6 относится к структуре страницы и бизнес-логике.Страница сложной активности

Далее я оставлю в стороне детали пользовательского интерфейса и разберу страницу.

Рис. 1, 3 Комбинированный метод(фоновое изображение + кнопка + [ios, android] ссылка для скачивания)

Рисунок 2, 4 Метод комбинации( фон + кнопка + правила активности + логика купона )

Рисунок 5 Комбинированный метод( фон + правила активности )

Рисунок 6 Комбинация( Фон + Бизнес-модуль + Правила деятельности )

Из приведенного выше анализа видно, что каждая страница состоит из нескольких небольших модулей, которые могут быть базовыми компонентами пользовательского интерфейса или сложными бизнес-компонентами и могут комбинироваться различными способами.Можно ожидать, что при использовании этих различных компонентов, таких как библиотеки компонентов Когда он интегрирован и может быть визуально отредактирован на странице, различные компоненты могут быть расположены по-разному для создания нового действия. Как и строительные блоки, есть бесконечные возможности, и эффективность разработки будет значительно повышена. Эта статья сосредоточимся на этих двух месяцах.Поработайте с системой визуального конструирования лего-деятельности (далее именуемой лего), чтобы разобраться в умственном путешествии от 0 до 1 для справки всех друзей, у которых есть соответствующие потребности, и приветствует обмены и исправления.

основная программа

Lego разработан с использованием фреймворка Vue, а редактируемая библиотека компонентов формируется путем разделения и унифицированного управления материалами компонентов. Схема JSON определяет спецификацию JSON компонента и взаимодействует с функцией динамического компонента Vue для достижения динамического рендеринга страницы. Динамические формы используются для создания соответствующих форм конфигурации в соответствии с характеристиками различных компонентов. Наконец, несколько страниц упакованы и оптимизированы.Каждая страница настроена с отдельным доменным именем, одно для внутреннего редактирования и одно для внешнего отображения. Получите соответствующие данные активности JSON через идентификатор активности и динамически визуализируйте их на странице отображения активности.

Процесс рендеринга: Многостраничный процесс: Что касается окончательного отображения страницы события, помимо нескольких страниц, на самом деле существует множество вариантов выбора. Просто выберите тот, который наиболее подходит для вашего бизнеса. В следующем содержании подробно описаны эти варианты отображения.

Ключевые слова: схема JSON, динамическое отображение, динамическая форма, управление компонентами, несколько страниц.

Технические решения

Динамический рендеринг

Как разбить различные компоненты, а затем снова собрать и отобразить их на странице, является основным моментом всего технического решения. К счастью, Vue предоставляет решение для компонентов динамического рендеринга. Через встроенный компонент компонента визуализируется «метакомпонент». как динамический компонент и В зависимости от значения is, какой компонент визуализируется.

props

Настраиваемые элементы большинства компонентов — это не что иное, как стили, ссылки, события и копирайтинг, мы извлекаем их в объект конфигурации и передаем в подкомпоненты через пропсы для стилей рендеринга или добавления некоторых событий щелчка, таких как Bind связывает входящий стиль стиля. Конечно, перед этим должна быть определена базовая спецификация конфига.

функция рендеринга

По некоторым бизнес-причинам Lego не имеет высокой степени свободы, за исключением основных компонентов, поэтому решение реквизита в настоящее время может удовлетворить наши потребности, но если вы хотите открыть более высокую степень свободы и высвободить полные возможности программирования система, например, настройка некоторых событий кликов, взаимодействий при выполнении событий и т. д. Затем вы можете попробовать функцию рендеринга Render. Судя по описанию на официальном сайте, он ближе к компилятору, чем к шаблону. И его настраиваемых объектов достаточно, чтобы вы могли делать все, что захотите.

План размещения

План для визуальной планировки оставит большой завод и не разговаривает. Согласно пропорции компании, рекомендуется только для того, чтобы большинство МСП понадобится только один из следующих двух программ. Выберите идеальные костюмы для вас в соответствии с различными преимуществами и недостатками, если условие позволяет осуществлять его в сочетании.

выдвижной ящик

Располагаются по порядку сверху вниз, положение компонентов может быть изменено, но позиционирование элементов не может быть реализовано.Отсутствует концепция иерархии.Она недостаточно гибкая при столкновении со сложными макетами или когда элементы должны быть сложены.Если вам нужно добиться эффекта сложных страниц, вам нужно ввести концепцию составных компонентов пользовательского интерфейса, для этого требуется много готовых компонентов пользовательского интерфейса. Преимущество заключается в том, что степень работоспособности ограничена контролируемым диапазоном.Для недизайнеров им нужно только собрать существующие компоненты пользовательского интерфейса для создания страницы с высокой эстетикой.Это решение принято лего.

фристайл

Положение элементов можно перетаскивать по желанию с высокой степенью свободы. Требуется всего несколько основных компонентов пользовательского интерфейса. Существует иерархическая концепция, которую можно складывать и собирать по желанию, а сложные страницы можно создавать своими руками без готовые компоненты пользовательского интерфейса. Однако страница неуправляема и требует от оператора более высокой эстетики. Это больше подходит для студентов пользовательского интерфейса. На рисунке ниже показан пример сложного макета, просто сосредоточьтесь на макете и не обращайте внимания на то, как реализована бизнес-логика.

О степенях свободы

Поговорим о редактируемых степенях свободы в сочетании с планом компоновки, степени свободы редактирования следует рассматривать исходя из реальной ситуации.

Для Lego одноклассник пользовательского интерфейса участвует только в работе конструкции компонентов, не используя эту систему для редактирования активности публикации, и когда одноклассник пользовательского пользования не участвует непосредственно в финальной сборке, операция редакции высокой свободы на самом деле является вопросом Факт. Куриные ребра открываются непосредственно к оператору. Поскольку есть уровень, сложенный и свободный, он столкнется с большим количеством неконтролируемых стилей страницы, даже после редактирования одноклассников пользовательских пользователей, эффект страницы, но время Стоимость и активность изменений не компенсируются по сравнению с качеством времени. Кроме того, высокая степень свободы приносит более технические соображения и затраты, вложенные правила уровня компонентов, перетаскивание, позиционирование компонентов и т. Д., Поэтому, когда ваша команда технологии прочности и ресурсы, которые вы можете поддерживать, не настолько достаточны, возможно, выдвижная программа Semi-Freedom. больше подходит для вас.

Полустепень свободы ограничена от настраиваемого элемента схемы компоновки до компонента, и компонент является открытым относительно высоким элементом редактирования конфигурации для базового компонента пользовательского интерфейса, при этом накапливая большое количество готовых компонентов пользовательского интерфейса по желанию. Не думайте о слишком подробном стиле при редактировании, чтобы обеспечить качество страницы.

Когда развитие человеческих ресурсов и ресурсов и координация отделов, а также рабочий процесс налажены и стандартизированы, сочетание двух методов на самом деле является лучшим решением. Различные режимы могут быть предоставлены для использования разными людьми, и даже онлайн-редактор может быть реализован для разработчиков, чтобы напрямую корректировать код.

Классификация компонентов

Lego делит компоненты на две категории:Компоненты пользовательского интерфейса, бизнес-компоненты

Компоненты пользовательского интерфейсаПодразделяясь на базовые компоненты и составные компоненты, компоненты пользовательского интерфейса используются только для статического отображения. Принцип заключается в том, что он не содержит никакой бизнес-логики.Благодаря полуоткрытой схеме макета для сложных стилей мы инкапсулируем множество составных компонентов пользовательского интерфейса с различными функциями и различным использованием на основе базовых компонентов для удовлетворения потребностей более сложных страниц. Например, заголовки и кнопки разных тем можно упаковать по отдельности и использовать непосредственно для сборки.

бизнес-компонентОтносится к тем компонентам, которые взаимодействуют с сервером и имеют в себе бизнес-логику, относятся к самостоятельным функциональным модулям, можно понимать, что каждый бизнес-компонент представляет собой отдельную деятельность, такую как покупка карты, лотерея, обмен и т. д. Единственный принцип Lego для бизнес-компонентов заключается в том, чтобы не предоставлять в системе настраиваемые записи, связанные с бизнесом, а только открывать базовые конфигурации стиля, такие как размер, цвет темы и т. д. Разрешения возвращаются в руки отдела исследований и разработок, и каждый бизнес-компонент настраивает данные в фоновом режиме маркетинга, а также различает и отображает с помощью разных идентификаторов действий. Поскольку каждый бизнес-компонент прошел полный процесс тестирования QA перед его выпуском, стабильность деятельности может быть обеспечена в максимальной степени, не влияя на бизнес.

элемент конфигурации

Каждый компонент имеет различные элементы конфигурации в соответствии со своими характеристиками.После выбора компонента соответствующая форма конфигурации отображается через динамическую форму.Система Lego использует библиотеку компонентов IView.В дополнение к собственным атрибутам, каждый компонент также будет соответствуют объекту конфигурации, описывающему структуру формы путем сопоставления с объектом конфигурации, и, наконец, компоненты формы циклически отображаются через компонент.

коммуникация

Все отредактированные изменения, такие как конфигурация страницы, добавление и удаление компонентов, а также элементы конфигурации определенного элемента, уведомляются через унифицированное управление Vuex. Следует отметить, что во многих случаях изменяется только свойство под объектом, и часы не могут отслеживать изменение этого свойства объекта, но одно из свойств определенного стиля часто меняется, поэтому вы можете добавить changeStatus, добавив статус changeStatus, после изменения каждого свойства вы можете изменить статус мониторинга changeStatus, чтобы уведомить Vuex о необходимости соответствующего обновления, но обратите внимание на защиту от сотрясений.

выходная страница

При редактировании компонентов и сборка всей страницы, как наконец выдержать эту страницу пользователю, мы разработали два варианта по этому вопросу:

План А:

Создайте новую страницу из существующего проекта активности компании, упакуйте библиотеку компонентов и опубликуйте ее в частном репозитории npm для управления и вставьте ее здесь, предоставьте интерфейс для получения конфигурации активности и используйте эту страницу в качестве целевой страницы для всех активностей. , Различные идентификаторы активности для получения различной информации о конфигурации активности для динамического рендеринга. Преимущество в том, что выходить в интернет удобно, если вы получите опубликованный идентификатор активности после выпуска системы лего, вы можете склеить его без необходимости развертывания страницы. Недостаток также очевиден: перед рендерингом нужно дождаться успешного запроса интерфейса, после того как интерфейсный сервис сообщит об ошибке, все действия на линии будут недействительны, а скорость рендеринга обязательно будет ниже, чем у статического. страницы. В итоге мы отказались от этого плана, так как помимо вышеперечисленных проблем, самое главное, что с технической стороны у нас мало опыта в разработке нод-сервисов, и мы относительно слабы в плане технических решений и архитектуры, и мы сделали не рассматривать услуги с самого начала проектирования.Параллелизм и нагрузка на базу данных и т. д., как только действие проталкивается через официальную учетную запись, параллелизм, который он несет, очень и очень высок. Таким образом, эта схема не была легко принята без участия серверных одноклассников.

План б

Общая идея та же, что и выше, или страница отображается путем получения информации о конфигурации из идентификатора действия. Однако метод запроса сервиса узла для настройки был изменен на доступ к локальному файлу json, а также были внесены некоторые коррективы в атрибуцию целевой страницы. Действуйте следующим образом:

Разделите лего на две части: система редактирования, лендинг и настройка многостраничной упаковки.
Оптимизируйте многостраничную упаковку, хорошо поработайте над сегментацией файлов, и каждая часть ссылается на свои собственные необходимые файлы, чтобы повысить скорость загрузки страницы.
Каждая из двух страниц настроена с доменным именем, одна отвечает за внутреннее редактирование, а другая выставляется как целевая страница.
Перед упаковкой каждого онлайн-события извлеките данные конфигурации в локальное хранилище в виде json и получите доступ к локальным статическим ресурсам на целевой странице.

Это решение реализует общее использование библиотек компонентов и общедоступных методов и разделяет каждую страницу для обеспечения загрузки по требованию и обеспечения производительности страницы. Измените службу узла сетевых запросов на локальный json, чтобы решить проблему параллельной производительности. Недостаток в том, что когда активностей становится все больше и больше, локальный json будет становиться все больше и больше, и если ненужные данные вовремя не очищать, то загрузка страницы будет становиться все медленнее и медленнее. Это решение в настоящее время используется лего и будет оптимизировано в будущем.

Многостраничная оптимизация

Об оптимизации нескольких страниц с помощьюsplitChunkОтдельные файлы и отдельные ресурсы, используемые системой. Таким образом, каждая страница должна загрузить только то, что ей нужно.

удалить конфигурацию по умолчанию
Экспорт фрагментов по отдельности
Укажите страницу с несколькими входами, чтобы настроить чанк отдельно

оптимизированная скорость страницы

Суммировать

Что касается этой системы, то здесь еще много недостатков, но ее можно использовать на практике. Такие решения, как целевые страницы, все еще имеют явные недостатки, то есть локальное сохранение данных конфигурации будет в определенной степени замедлять скорость загрузки. Можно попробовать решение для рендеринга сервера SSR в сообществе и решение упаковки каждого действия в виде отдельной статической страницы. Но опять же, в зависимости от технической мощи текущей команды и ресурсов, которые вы можете использовать для всестороннего сравнения планов, иногда лучший план может не подходить для вашей текущей ситуации.
Система создания действий может решить 90% простых страниц в определенном смысле, но сложные многостраничные действия все еще не могут быть выполнены.
Накопление компонентов является главным приоритетом.При отсутствии обильных материалов повышение эффективности разработки ограничено.Как только библиотека компонентов будет обогащена после полутора лет работы, эффективность будет заметно повышена.
Не думайте, что ваше решение должно быть хуже других, вы можете ссылаться на отличные технические решения и идеи больших парней в сообществе, но вам нужно найти нужные вам моменты.
Придерживаться независимого мышления, придавать большое значение инфраструктуре и позволять технологиям расширять возможности бизнеса — это качество, которым должен обладать каждый разработчик. Это не имеет ничего общего с компанией или командой. Пока у вас есть идея, всегда будет способ способствовать реализации задуманного В процессе собственного обдумывания и реализации Накопление опыта является самым ценным активом.