1. Введение

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

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

Мы реализовали эту идею на практике во время хакатона Meituan-Dianping. Среди более 40 команд, участвовавших в соревнованиях, заняла второе место. Это придало нам уверенности в продолжении и прояснило направление наших последующих усилий. После периода итерации LEGO сформировал относительно полный процесс разработки и производства:

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

2 пользователя используют

Применение платформы LEGO можно разделить на три части:сборочный завод, для разработчиковвзгляд на развитиеи сервисно-ориентированныйоткрытый интерфейс.

2.1 Сборочный завод

2.1.1 Макет просмотра

Сборка страницы показана на рис. 1 и состоит в основном из пяти частей:

• дерево компонентов
  Дерево компонентов — это скелет страницы (область, показанная на ①), который собирается из встроенных компонентов. Lego предоставляет множество операций (2) всплывающих окон для дерева компонентов. Помимо добавления, копирования и вставки, предварительного просмотра, удаления и других функций, вы также можете перетаскивать положение компонента в дереве компонентов (область 3), чтобы отобразить эффект в области предварительного просмотра в режиме реального времени.
• страница предварительного просмотра
  Блок предварительного просмотра (область, показанная на ④) занимает правую половину страницы. В дереве компонентов каждый компонент можно просмотреть отдельно. Предварительный просмотр компонента, показывающий эффект совместной работы этого компонента и его подкомпонентов. Предварительно просмотрите корневой компонент, чтобы увидеть всю страницу. Вы также можете просмотреть всю страницу с помощью кнопки «Предварительный просмотр страницы».
• Свойства правого модуля
  Каждый компонент имеет настраиваемые свойства (поле «Модель» в примере кода модуля, упомянутом в разделе 3.2.1).Откройте панель в области ⑤, чтобы настроить компонент, выбранный слева. Например, настройка цвета и размера компонента кнопки зависит от резервирования компонента разработчиком компонента.
• действие на главной странице
  ⑥Область содержит операции с текущим видом. Под представлением можно понимать самостоятельную страницу, включающую в себя такие функции, как открытие, публикация, переименование и т.д.
• левая навигация
  ⑦Область содержит три дополнительных метки.
  • Первый — сборочный завод, выбранный на картинке ниже.
  • Второй — фабрика по разработке компонентов.
  • Третье — мониторинг в режиме реального времени работоспособности, QPS и других оперативных данных всей системы.

2.1.2 Просмотр сценария

Сценарий на готовой странице разделен на три части в зависимости от источника.

• Область редактирования скрипта показана на рисунке 2.
• Библиотека пользовательской интерфейсы, используемая на текущей странице (далее упомянутая ниже), платформа LEGO используется по умолчанию, это вынос сами.Пользовательский интерфейс кенгуру.
• Другая часть связана с реализацией собственного интерфейса программирования в каждом компоненте (например, поле Script в примере кода модуля в Разделе 3.2.1).

2.1.3 Синхронизация данных

Концепция источников данных представлена ​​в системе LEGO. Он используется для имитации и проверки данных на странице шаблона. Иногда серверной части требуется Lego для вывода шаблонов FreeMarker или EJS вместо HTML-страниц. Для того, чтобы обеспечить нормальную разработку и предварительный просмотр страницы в Лего, нам нужна часть Mock для синхронизации (под которой можно понимать данные, записываемые в ModelView в фоновом режиме).

Данные издевания могут быть реализованы путем записи данных в формате JSON к источнику данных. Кроме того, когда бэкэнда вызывает интерфейс LEGO, источник данных также проверит достоверность входящих данных.

2.2 Вид разработки

Лего — это платформа. Разработчики могут разрабатывать собственные модули в LEGO в соответствии со своими предпочтениями, идеями и задумками.

• Редактирование компонентов
  ①Area предоставляет функции редактирования для компонентов. Разработчик, время модификации, время создания и другая информация о редактируемом в данный момент компоненте будет отображаться в области ④.
• Управление классификацией компонентов
  Когда в платформе большое количество компонентов. Нам нужно классифицировать компоненты и управлять ими (область, показанная на ③).
• Управление версиями компонентов
  Каждый компонент имеет собственное управление номером версии (показано в области ②). После того, как разработчик нажмет «Сохранить компонент», временная версия 0.username будет добавлена ​​в список версий для сохранения текущей измененной информации.

2.3 Доступ к системе

В настоящее время Lego предоставляет доступ к пакетам SDK для Java и Node.js.

2.3.1 Java

Вставьте пакет JAR в проект. Вы можете получить страницы или шаблоны из системы LEGO, вызвав интерфейс SDK.

Существует два типа получения: визуализированный код HTML и код шаблона (в настоящее время поддерживаются шаблоны FreeMarker).

/**
 * 无数据页面获取
 * @param pageId 页面id或者vurl,取决于pageIdType传入值
 * @param pageIdType，枚举类型，LegoService.PageIdType.ID，LegoService.PageIdType.NAME 前者传入页面id时使用，后者传入页面vurl时使用
 * @return 枚举类型，OK(200,"成功"), FAILED(500,"失败");
 *
 */
public static final LegoStatus getPageWithoutData(HttpServletResponse servletResponse, String pageId, PageIdType pageIdType)

/**
 * 带有页面数据的页面获取
 * @param model传入的数据
 *
 */
public static final LegoStatus getPage(HttpServletResponse servletResponse, String pageId, PageIdType pageIdType, ModelMap model)

2.3.2 Node.js

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

'use strict';

var lego = require('lego');

/**
 * 请求页面id获取页面,
 * @param data,页面渲染用数据，json格式
 * @param rootId 只获取部分页面时使用，默认为空
 * @param callback, 回调使用callback(err, body), 正常传入err为空，body为页面html内容。错误时err为错误信息。
 *
 */
lego.renderById(vid, data, rootId, callback)

/**
 * 请求页面短连接获取页面
 *
 */
lego.renderByUrl(vurl, data, rootId, callback)

3 принципа

3.1 Концепция

После того, как модульные стандарты, такие как AMD, CMD и CommonJS, стали популярными, модульный образ мышления оказал глубокое влияние на разработчиков интерфейсов в сообществе.

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

На основании общей идеи модульной разработки. Мы суммируем, суммируем и переработав кучу, казалось бы, дезорганизованные структуры DOM в отдельных компонентах. Несколько компонентов работают вместе, чтобы сделать полную страницу. Философия конструкции системы Lego получена из уравнения, как показано ниже:

здесьОписание узла,данные,функциональная логикаЭто модульная часть, которая будет предложена ниже.

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

3.2 Компоненты

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

3.2.1 Морфология

Компоненты Lego представляют собой извлечение огромной библиотеки стилей/взаимодействий, стоящей за ним (по умолчаниюПользовательский интерфейс кенгуруseries или другие внешние библиотеки ресурсов), опираясь на описание HTML-структуры компонента и интерактивные вызовы. Каждый компонент отвечает за сборку собственной HTML-структуры и использование заранее сохраненных взаимодействий в библиотеке компонентов. Поэтому рекомендуемый метод разработки компонентов не включает описание УСБ, но также допускается увеличение УСБ каждого компонента через Хак.

Каждый независимый компонент предоставляет 8 интерфейсов, которые необходимо реализовать:

/**
 * 组件基本展示及功能规则的描述，目前对外暴露了8个接口（name, pyname, desc, leaf, uilib, model, script, render）
 */

'use strict';

/**
 * 组件名称，用来标识该组件在系统中的引用名称。
 * 取值可以为汉字，大小写英文字母，数字和下划线的组合
 * [建议取名为英文，每个组件name唯一，主要供程序和RD使用]
 */
exports.name = 'Sample';

/**
 * 组件别名，只能为汉字或者字母
 * [建议取名中文，每个组件pyname唯一，主要供PM等对hmtl及组件专有英文名称不太熟悉的人使用]
 */
exports.pyname = '中文名称';

/**
 * 组件描述
 */
exports.desc = '';

/**
 * 该组件可以添加的叶子节点
 * 1.如果可包含子节点，请在数组中添加组件id，如: exports.leaf = [12,23,34]
 * 2.如果不可包含任何子节点，请将leaf置为null，即: exports.leaf = null
 * 3.如果可包含任何子节点，请将leaf置为空数组，即: exports.leaf = []
 */
exports.leaf = [];

/**
 * 当前组件需要适配的组件库
 */
exports.uilib = 'kui';

/**
 * 该接口用来描述组件配置的相关属性，其子组件可以在编程/渲染接口中读取到父组件的配置信息
 *
 * type:数据类型，目前含盖的数据类型:
 *  text: 文本输入框类型
 *     textEx: {
 *       name: '测试属性1',
 *       type: 'text',
 *       def : '默认值',
 *       desc: '属性描述'
 *   }
 *  select: 下拉选择框类型
 *     selectEx: {
 *       name: '测试属性1', //最长不超9个字，否则内容尽量放到注释里
 *       type: 'select',
 *       options:{
 *          value1: '这是值1',
 *          value2: '这是值2',
 *       },
 *       def   : 'defValue',
 *       desc: '属性描述'
 *   }
 *  textarea: 多行输入框类型(配置同text)
 *  radio: 单选选择框类型(配置同select)
 *  checkbox: 复选类型(配置同select，最终值为 value1,value2 逗号分隔)
 */
exports.model = {

}

/**
 * 组件脚本。会插入到页面html中执行，组件内部逻辑或与外部交互可放到该函数中执行
 * @param mvId 组件用到的mvId，组件唯一标识
 * @param evtMgr 页面全局事件中心，可以通过 bind(evt, handler) unbind(evt, handler) 和 trigger(evt, data, context)三个方法控制事件流的绑定和触发
 * @param modelData 组件属性数据，默认传参encode字符串，首先需要decodeURI，然后换成json对象
 */
exports.script = function (mvid, evtMgr, modelData) {
  modelData = JSON.parse(decodeURI(modelData));
}

/**
 * 该组件在用户界面的展示
 * @param {Object} node node中包括{_children:[], _parent:'', _innerHtml:'', _modelData:{}, _mid:'', _mvid:'', _mname:''},还有其他字段暂不建议使用
 */
exports.render = function (node) {
  var _modelData = node._modelData;
  var _children = node._children;
  var content = '';
  _children.map(function (child) {
    content += child._innerHtml;
  });

  return ``;
}

3.2.2 Функция

В качестве элемента интерфейсной системы компоненты LEGO необходимо учитывать в следующих пяти аспектах в начале проектирования. Благодаря этим частям постепенно сформировалось относительно полное модульное решение:

компонент связи

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

Мы передаем три параметра mvid, evtMgr и modalData интерфейсу программирования (сценарию), реализуемому каждым компонентом. Среди них evtMgr — центр событий в системе Lego. За счет связывания или запуска соответствующих событий модули лучше разъединяются при реализации связи между модулями. Образец кода:

  // 事件的触发
  evtMgr.trigger('tata', {a: 1});

  // 事件的绑定
  evtMgr.bind('tata', (params) => {

    // TODO Here.
    console.log(params)   // {a: 1}
  })

Доставка данных компонентам

Некоторые бизнес-компоненты будут иметь свои собственные данные. Данные разделены из источников, которые можно разделить на системные данные и данные конфигурации. Системные данные можно дополнительно разделить на синхронные данные и асинхронные данные:

• Данные конфигурации поступают от людей, которые используют конфигурацию LEGO для настройки информации в зарезервированном интерфейсе модуля разработки.
• Асинхронные данные в системных данных могут быть извлечены из серверной части через AJAX.
• Синхронизированные данные можно настроить в источнике данных во время сборки, что удобно для предварительного просмотра эффекта. При использовании его можно вызвать непосредственно в интерфейсе Render модуля.
  
  

  exports.render = function (node) {
    var _modelData = node._modelData;
    var _children = node._children;
    var content = '';
    _children.map(function (child) {
      content += child._innerHtml;
    });

    return `${data_from_datasource}`;   // 数据源数据字段读取
  }

Открытие интерфейсов компонентного программирования

8 интерфейсов программирования, показанные в разделе «3.2.1 Форма», открыты для разработчиков модулей.

Контроль версий компонентов

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

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

Отрисовка компонентов

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

Большинство систем навынос используют freemarker.jar в качестве механизма рендеринга страниц. Поэтому LEGO также включает механизм шаблонов freemarker.jar. Общий рабочий процесс показан на рисунке ниже:

3.3 Процесс

Lego построен с использованием инфраструктуры Node.js Express, которая существует как интерфейсная служба.

В то же время эта услуга также предоставляет интерфейс для внутренних пользователей (страниц сборщиков) для доступа. Общий рабочий процесс выглядит следующим образом:

3.4 Структура просмотра

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

В этой структуре данных, помимо описания каждого узла, _children, _parent и т. д. используются для описания положения и уровня узла в древовидной структуре текущего представления. Конкретная структура выглядит следующим образом:

{
   1_0: {
      _children: [101_1],       // children in current page
      _mvid: '1_0',             // unique id in current page
      _parent: '#',             // parent in current page
      _mid: '1',                // id
      _version: '1.0.0'         // version
      _mname: 'Page',           // name
      _xxx: ''                  // other properties
    },
    101_1: {
      _children: [5_2],
      _mvid: '101_1',
      _parent: '1_0,
      _mid: '101',
      _version: '1.0.0'
      _mname: 'Body',
      _xxx: ''
    },
    5_2: {
      _xxx: ''
    }
}

По мере создания и публикации страницы структура хранения страницы будет сохранена в полях базы данных Lego для последующих вызовов для изменения.

4. Вывод

4.1 Статус

По состоянию на крайний срок LEGO имеет 55 компонентов рамы и 77 бизнес-компонентов, всего 132. Охватывает 6 проектов отдела доставки еды и содержит 108 доступных онлайн-страниц (просмотров). Число по-прежнему быстро увеличивается.

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

4.2 Экология

В практике front-end разработки доставки еды система LEGO стала стержневым звеном в разработке большого количества бизнес-систем. справаПользовательский интерфейс кенгуруВ процессе извлечения компонентов в библиотеке ресурсов и формирования конечной видимой пользователю страницы это не только способствует постепенному улучшению общих визуальных и интерактивных характеристик выноса, но и реализует его во фронтенд-технологии — —Пользовательский интерфейс кенгуруБиблиотека ресурсов.

визуальная спецификация,Пользовательский интерфейс кенгуруВместе с Lego сформировался полный и непрерывный цикл развития экологии.

4.3 Преимущества

• Платформа стандартизирует методы взаимодействия, стили страниц и компонентов. Он очень подходит для бизнес-систем с относительно фиксированными стилями взаимодействия.
• Простая и эффективная конструкция интерфейса экономит много времени и усилий на разработку.
• Используя режим визуального редактирования, то, что вы видите, это то, что вы получаете. Значительно снижает стоимость обучения и пороговое влияние на предельное развитие. Члены других ролей в команде также могут легко начать.

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

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

Lego также активно планирует открыть исходный код, мы сделаем все возможное и надеемся скоро встретиться с вами. Наконец, прикрепите жесткий и широкий, долгосрочный набор Meituan на выносСтарший инженер по фронтенду/Технический эксперт по фронтенду, добро пожаловать, чтобы отправить свое резюме: xukai #http://meituan.com.

об авторе

Все авторы этой статьи из отдела доставки еды Meituan Dianping.

Сюй Кай, руководитель группы веб-интерфейса отдела доставки еды. В 2013 году он присоединился к Meituan в качестве первого фронтенд-инженера. Стал свидетелем быстрого роста Meituan Takeaway с более чем 10 заказов в день до более чем 9 миллионов заказов. Отвечает за формирование начальной команды Meituan на вынос, построение эшелона и обучение персонала. Он создал общую интерфейсную инфраструктуру для доставки еды и в настоящее время отвечает за проекты B, C и связанные с операциями интерфейсные проекты.

Бинбинг, старший фронтенд-инженер по исследованиям и разработкам, руководитель группы развития фронтенда отдела доставки еды. После получения степени магистра в BIT в 2010 году он работал в MTK и IBM, а позже в качестве соучредителя основал компанию Wei Mi Technology. В 2016 году он присоединился к Meituan Dianping и в качестве технического руководителя руководил запуском нескольких мероприятий и проектов, таких как торговые купоны и красные конверты.

Донг Лян, старший инженер отдела исследований и разработок Meituan Food Delivery. Окончил Даляньский технологический университет в 2012 году, работал в Domi Music, Renren.com, занимался разработкой игр и разработкой веб-интерфейса, присоединился к Meituan-Dianping в 2015 году и в настоящее время занимается исследованиями и разработками интерфейса в направлении пользователя. -ориентированная и работа по доставке еды.

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

Пожалуйста, подпишитесь на нашу официальную учетную запись WeChat «Техническая команда Meituan Dianping».