Платформа операций Renrendai — это система, разработанная и поддерживаемая большой командой разработчиков Renrendai и используемая для автоматизации и визуализации построения рутинных действий Renrendai. В этой статье мы поделимся дизайнерскими идеями и некоторыми техническими реализациями «Платформы операций Renrendai Activity Operation Platform», надеясь помочь всем.
1. Предпосылки
За последние несколько лет отдел маркетинга Renrendai получил большой спрос на развитие деятельности, которая в основном делится на 4 категории:
- Активность LP (целевая страница, страница руководства), страница активности для регистрации новичков, в основном представляет собой регистрационное поле + несколько карточек продуктов.
- Событие MGM (члены получают членство), которое используется для приглашения друзей открывать новые страницы событий, обычно включая записи приглашений, рейтинги приглашений, обмен и другие функции.
- Регулярные мероприятия, как правило, включающие розыгрыши лотереи, карточки товаров, ранжирование, совместное использование и другие функции, используются для стимулирования продаж.
- Специальные события, обычно игровые страницы, одна и та же форма будет использоваться только один раз.
1.1 Узкое место в рабочей силе по развитию деятельности и длительный цикл запуска
Сколько времени требуется для разработки общего вида деятельности (включая вышеупомянутые действия LP, действия MGM и обычные действия)?
При нормальных обстоятельствах простая деятельность, включающая оба конца H5 и ПК, начиная с требований к продукту, необходима дизайнерам.2人*2天Для завершения проектных работ в разработке необходимо3人*2天(включая H5, страницу на стороне ПК, разработку внутреннего интерфейса, совместную отладку интерфейса), тестовые потребности2人*2天вставить.
Таким образом, от запроса до запуска страницы требуются общие инвестиции.14人*天человеческие ресурсы,7 рабочих днейзавершить.
При возникновении более срочных потребностей в развитии деятельности онлайн-цикл должен быть сжат, и каждый должен работать сверхурочно, чтобы завершить его.
Кроме того, из-за специфики финансовых расчетов компании многие мероприятия обычно начинаются рано утром, поэтому разработчикам и тестировщикам необходимо убедиться, что мероприятия проходят в режиме онлайн, прежде чем они смогут уйти с работы.
1.2 Повторение функции деятельности и повторная модификация
С развитием бизнеса компании возрастают потребности в развитии деятельности. В команде фронтенда треть рабочей силы, которая давно вложена в развитие активной страницы.
На самом деле, в большинстве наших общих действий функции не сложны, и большинство функций относительно повторяющиеся.
Такое повторяющееся развитие страниц не имеет большого значения для роста отдельных лиц и команд. Более того, после запуска мероприятия часто приходится модифицировать код и запускать заново из-за взаимосвязи стиля и копирайтинга, из-за чего члены команды вообще не любят разработку таких рядовых ивентов.
В течение этого периода команда также предложила компонентный метод разработки, пытаясь извлечь различные функциональные модули и ссылаться на них на разных страницах действий, чтобы сэкономить время разработки. Однако из-за неопределенности схемы проектирования и участия разных разработчиков возможность повторного использования этого извлеченного функционального модуля не очень высока, и эффект не особенно идеален. И это не может решить проблему модификации стиля и копирайтинга, которую нужно запускать заново.
Короче говоря, характеристики обычных действий таковы: функции страниц схожи, время разработки короткое, автономный режим быстрый, технический рост низкий.
По мере того, как техническая система команды становилась все более и более зрелой, мы, наконец, высвободили свою энергию, чтобы попытаться решить различные болевые точки в разработке обычных видов деятельности.
2. Операционная платформа Renrendai
Еще десять лет назад с помощьюDreamweaverВы можете визуально создавать внешние статические страницы. несмотря на то чтоDreamweaverОно стало прошедшим временем, но широко используется идея визуального построения.
В нашем исследовании распространенных решений в отрасли мы обнаружили, что многие компании имеют свои собственные системы управления событиями, которые можно использовать для эффективной и визуальной настройки событий, а также для мониторинга данных операций событий. Мы надеемся принять эту идею визуального построения страниц действий, и операторы смогут добавлять действия и настраивать соответствующие страницы действий в соответствии с фактическими операционными потребностями.
2.1 Общая структура
Во-первых, кратко введите модель интерфейса разработки Renrendai.
С появлением Node.js в 2016 году мы преобразовали исходную модель разработки интерфейса на основе JSP в модель, использующую Node.js в качестве среднего уровня и разделяющую интерфейс и серверную часть.
Фронтенд Renrendai использует режим разработки с разделением фронтенда и бэкенда, как показано на рисунке (изображение изЭволюция веб-моделей НИОКР), в этом режиме разработки обязанности внешнего и внутреннего интерфейса ясны. Для внешнего интерфейса два слоя пользовательского интерфейса выполняют свои обязанности:Front-end UI layerОбрабатывает логику представления уровня браузера,Back-end UI layerМожет использоваться для обработки маршрутизации, шаблонов, выборки данных, файлов cookie, рендеринга на стороне сервера и т. д.
В соответствии с этой моделью разработки внешнего и внутреннего интерфейса схема архитектуры всей операционной платформы Renrendai выглядит следующим образом:
Вся система операционной платформы разделена на четыре части.
1. Библиотека компонентов. Операционная платформа использует общепринятые в отрасли组件化схему и выбратьReact.jsВ качестве библиотеки для разработки компонентов. Режим разделения и разработки библиотеки компонентов будет подробно описан ниже.
2. Интерфейсная система. Вся операционная платформа включает в себя积木系统,rrd-h5,rrd-pcТри передние системы. в积木系统Это внутренняя система, предназначенная для создания, редактирования и публикации страниц событий. а такжеrrd-h5а такжеrrd-pcориентированный на пользователяBack-end UI layer, которые основаны на сгенерированных данных конфигурации действия, отображают страницу действия и предоставляют асинхронный интерфейс для доступа пользователя.
3. Внутренний интерфейс. В фоновом сервисе, поскольку действия не особенно сложны, у нас есть большая часть интерфейса, такая как лотерея, запись адреса урожая, просто выполнение простого хранения или вычисления и использование его напрямую.Node.jsРеализация, то есть приведенный выше рисунокnode-market-serviceСлужить. А некоторые интерфейсы, относящиеся к основному бизнесу компании, такие как инвестиционный кэшбэк, по-прежнему напрямую используют Java-интерфейс, предоставляемый бэкендом.
4, уровень данных. Используется для хранения данных, связанных с активной конфигурацией, и некоторых рабочих данных.
2.2 Библиотека компонентов
Мы разделили предыдущие страницы действий на разные компоненты в соответствии с функциональными модулями.
кСтраница приглашения друзей на мобильном телефонеНапример, эта страница включает в себя: компонент изображения (баннер), компонент правила активности, компонент записи приглашения, компонент списка команд, компонент увеличения платформы и компоненты кнопки приглашения друзей.
После разделения компонентов мы получаем библиотеку компонентов.
Чтобы облегчить управление библиотекой компонентов, мы разделили библиотеку компонентов наjm-common,jm-mobile,jm-pcСуществует три типа, соответствующие общим компонентам на обоих концах, компонентам H5 и компонентам на стороне ПК.
Как было сказано выше, наша积木系统позиционируется какПлатформа визуального редактирования, после настройки компонента его нужно отображать в режиме реального времени на странице редактирования.rrd-h5а такжеrrd-pcСервис также должен отображать компонент в соответствии с данными конфигурации страницы.
Все три системы должны использовать библиотеку компонентов.Чтобы облегчить разработку и предварительный просмотр компонента, мы интегрировали исходный код библиотеки компонентов в积木系统в хранилище кода.
积木系统Библиотека компонентов загружается через исходный код библиотеки компонентов в коде проекта.积木系统Путем перекомпиляции, обновления страницы и предварительного просмотра новых стилей компонентов.
Библиотека компонентов также будет оцениваться средой разработки и будет автоматически编辑系统中Использование фиктивных данных облегчает тестирование во время разработки компонентов.
Чтобы облегчить управление версиями и доступ к библиотеке компонентов, когда разработка компонента будет завершена, мы опубликуем библиотеку компонентов в частном репозитории npm, и в то же времяrrd-h5а такжеrrd-pc, обновите номер версии соответствующей библиотеки компонентов, чтобы загрузить новый компонент.
2.3 Конфигурация активности и конфигурация страницы
В системе стандартных блоков вам необходимо создать действия, прежде чем вы сможете создать мобильную часть соответствующего действия, страницы на стороне ПК, а не непосредственно создавать страницу события.
Это связано с тем, что в соответствии с прошлым опытом работы событие может соответствовать нескольким страницам продвижения (по крайней мере, две страницы на стороне H5 и ПК), и эти страницы продвижения должны иметь общие конфигурации действий.
Что касается хранения данных, мы создали новыйactivity,page,page_recordТри таблицы используются для хранения данных, связанных с активной конфигурацией, конфигурацией страницы и конфигурацией компонента.
-
activityЭто таблица конфигурации действий, которая отвечает за запись имени действия, времени действия в сети и в автономном режиме, конфигурации действий, связанных с бизнесом, иОбщая активная конфигурацияЖдать. Конфигурация общедоступного компонента относится к странице действия, для которой требуются элементы конфигурации общедоступного компонента. Например, для получения компонента купона количество, тип, партия и т. д. купона будут помещены в общую конфигурацию компонента, что может эффективно избежать ошибок или несоответствий конфигурации при настройке компонентов на нескольких страницах по отдельности.
-
pageявляется таблицей страниц. При создании новой страницы данные вставляются в таблицу. Информация будет записывать имя страницы, идентификатор действия, к которому принадлежит страница, платформу, к которой принадлежит страница (мобильный терминал или терминал ПК), время выпуска и т. д. Следует отметить, что в этой таблице не записываются конкретные данные о конфигурации компонентов. Это необходимо для отделения данных страницы от данных конфигурации компонента. Однако в таблице страниц будет записан идентификатор online_record_id, используемый онлайн-страницей, который используется для связывания и запроса данных компонента, используемых онлайн-страницей. После публикации каждой страницы мы обновим последний online_record_id до соответствующих данных страницы. -
page_recordЭто таблица записи конфигурации компонента, которая в основном отвечает за запись идентификатора страницы, которой она принадлежит, конкретных данных компонента, редактора, времени публикации и т. д. При активном редактировании страниц системы строительных блоков при каждом сохранении страницы в эту таблицу будет вставляться кусок данных, что удобно для поиска записей редактирования, а также для отката.
2.4 Конфигурация компонента и анализ данных конфигурации
Согласно нашему запланированному рабочему процессу, работа студентов в积木系统После создания страницы необходимо добавить компоненты на страницу и изменить конфигурацию компонента.После завершения настройки сохраните конфигурацию компонента на странице и, наконец, опубликуйте страницу.
Разные компоненты требуют разных элементов конфигурации. Итак, как мы должны быть积木系统Как насчет предоставления разных элементов конфигурации для разных компонентов?
Прежде всего, мы должны ввести режим разработки компонентов.
Перед разработкой компонента мы заранее подтвердим необходимую конфигурацию компонента с нашими коллегами по продукту, включая конфигурацию стиля компонента, конфигурацию копии компонента и конфигурацию бизнес-атрибутов компонента.
При разработке компонентов мы обычно добавляем три файла. Взяв за пример компонент изображения, мы добавимimage.jsx,image.scss,spec.js, которые представляют собой конкретный код реализации компонента, файл стиля компонента и данные файла конфигурации компонента.
При настройке компонента система стандартных блоков считываетspec.jsфайл, который предоставляет различные всплывающие окна конфигурации.
Ниже приведен компонент изображенияspec.jsсодержание документа:
import Image from './image.js';
export default {
Component: Image,
type: Image.type,
_name: '图片', //组件列表使用的名称
_platform: 'common', //该组件属于公共组件
_acceptChild: false, //是否允许嵌套其他组件
_dataSchema: { //组件配置项需要的JSON Schema
type: "object",
required: ["src"],
properties: {
src: {
type: "string",
title: "请填写图片地址",
},
alt: {
type: "string",
title: "图片无法加载时的文案",
},
title: {
type: "string",
title: "鼠标移到图片上的提示文案",
}
}
},
data: { //默认数据
src: 'https://www.we.com/cms/5864b0d6a24d131067ef7956/jimu/default-img.jpg',
alt: '',
title: ''
},
style: { //样式配置项
width: '',
height: '',
position: 'static',
display: 'block',
margin: '',
padding: ''
},
_defaultStyle: { //默认样式
mobile: {
width: '100%'
},
pc: {
maxWidth: '1080px',
height: 'auto'
}
}
}
В приведенных выше файлах конфигурации некоторые атрибуты начинаются со знака подчеркивания _, которые принадлежат积木系统Выделенные атрибуты будут отфильтровывать эти выделенные атрибуты при передаче данных конфигурации компонента на страницу внешнего интерфейса, чтобы избежать слишком большого количества данных конфигурации и избежать утечки внутренних данных.
Активная страница обычно добавляет несколько компонентов, и между компонентами могут быть вложенные отношения.Как организовать и проанализировать данные конфигурации компонента на странице, также является проблемой, которую необходимо решить.
Мы определяем данные компонента на странице следующим образом:
{
"dataMap":{
"id1":{
"cid":"id1", // 组件id
"type":"pc_component_1", //组件类型
"name":"组件一", //组件名
"platform":"pc", //组件所属的平台
"acceptChild":true, //是否能添加子组件
"data":{},//组件数据
"style":{},//组件样式
"childs":['id3'] //子组件id
},
"id2":{
"cid":"id2", // 组件id
"type":"pc_component_2", //组件类型
"name":"组件二", //组件名
"platform":"pc", //组件所属的平台
"acceptChild":false, //是否能添加子组件
"data":{},//组件数据
"style":{},//组件样式
"childs":[] //子组件id
},
"id3":{
"cid":"id3", // 组件id
"type":"pc_component_3", //组件类型
"name":"组件三", //组件名
"platform":"pc", //组件所属的平台
"acceptChild":false, //是否能添加子组件
"data":{},//组件数据
"style":{},//组件样式
"childs":[] //子组件id
},
...
},
"childs": ["id1","id2"] //第一层级的组件id
}
Данные конфигурации компонента страницыdataMapа такжеchildsдва поля.
Когда вам нужно отобразить страницу через данные компонентов этих конфигураций, сначала используйте элемент конфигурации вmainполе для получения идентификаторов всех подкомпонентов первого уровня, а затем вdataMapСогласно идентификатору компонента, чтобы найти соответствующую конкретную конфигурацию и рендеринг.
Если данные конфигурации компонентаchildsЕсли поле не является пустым массивом, это означает, что другие компоненты вложены в компонент, поэтому продолжайте передаватьchildsзначение идентификатора в , вdataMapНайдите данные конфигурации соответствующего компонента в и визуализируйте дочерний компонент.
Кроме того, данные конфигурации общедоступного компонента, о которых мы упоминали ранее, перед рендерингом компонента также будут объединены сdataMapСоответствующая конфигурация компонента в данных объединяется.
2.5 Как рендерить в rrd-h5 и rrd-pc?
Так积木系统Как отображаются данные конфигурации компонента страницы, сгенерированные в rrd-h5 и rrd-pc?
Фактически, в настоящее время существует три основных метода рендеринга компонентов:
- Загрузите все определения компонентов, затем получите данные конфигурации страницы с помощью идентификатора действия и идентификатора страницы, а затем динамически отобразите страницу.
- Сначала получите данные конфигурации страницы с помощью идентификатора действия и идентификатора страницы, затем загрузите компоненты по запросу и отобразите страницу.
- Сервер генерирует статические страницы непосредственно во время публикации посредством конфигурации страниц и определений компонентов.
Различные схемы имеют свои преимущества и недостатки. В системах rrd-h5 и rrd-pc мы используем первое решение для рендеринга: наш онлайн-шаблон страницы, который загружает все компоненты по умолчанию.
кrrd-h5Например, мы будем ссылаться на всеjm-common(общественный компонент) иjm-mobileКод библиотеки компонентов. Затем используйте идентификатор активности и идентификатор страницы, содержащиеся в URL-адресе страницы активности, чтобы передатьnode-market-serviceСлужба получает данные об активности и данные о конфигурации компонента страницы. Затем нажмите выше2.4 组件的配置与配置数据解析Метод анализа данных конфигурации компонента, описанный в разделе , отображает всю активную страницу.
Таким образом, пользователь может увидеть настроенную страницу активности.
3. ЗАДАЧИ
Текущая операционная платформа на самом деле в основном основана на编辑系统В основном, и предоставляет небольшое количество функций запроса.
Мы продолжим итерацию в будущем и продолжим интеграцию运营监控,报警,自动生成活动数据报表и другие функции.
В то же время, чтобы улучшить скорость загрузки страницы, учитывая проблему, заключающуюся в том, что на активной странице много картинок, а вырезанные картинки, как правило, большие, мыrrd-h5,rrd-pcвведен вwebp,http2,service-workerЖдать.
4. Резюме
Все в кредитовании деятельности операционных платформ в сентябре 2018 года на линии, эффект очень очевиден:
- Платформа управления событиями может автоматизировать и визуализировать создание событий и страниц событий.
- Платформа управления мероприятием сократила онлайн-цикл мероприятия с предыдущих 6 дней до 2 дней. После того, как дизайнер вырезает чертеж, оператор может его настроить и выйти в онлайн.
- Действия могут быть настроены с онлайн и оффлайн временем, и разработчики в основном не будут работать сверхурочно из-за разработки действий.
- Операционная платформа регулирует форму функций деятельности.В то же время дизайнер также будет проектировать в редактируемом диапазоне компонента, и компонент может быть настроен с помощью богатых элементов.
- Модификацию стиля и копирайтинг страницы мероприятия больше не нужно перезапускать.
- Освобожденные разработчики интерфейсов и серверов могут уделять больше внимания исследованию новых технологий.
Из-за ограниченного места многие конкретные детали реализации платформы управления событиями не описываются слишком подробно. Если у вас есть вопросы, которые вас интересуют, вы можете оставить сообщение для связи.
Наконец, приглашаем всех отметить нашБлог фронтенд-команды Renrendai, все статьи также будут обновляться синхронно сЗнай колонкуа такжеСчет наггетсМы делимся несколькими высококачественными крупными техническими статусами на переднем углу каждую неделю.
Справочная статья
- Каковы секреты эффективного развития Чжуаньчжуаньской оперативной деятельности?
- Практика развития операционной платформы деятельности членства QQ
- Инструменты построения визуализации страниц в прошлом и настоящем
- Фронтенд-сервис — жизнь и смерть инструментов для создания страниц
- Система строительных блоков для максимизации операционной системы
- Платформа для сборки визуального интерфейса Meituan на вынос — LEGO