❝Эта статья от фронтенд-команды по развитию пользователей Сямэнь — Хуан Юй.
Предыстория и болевые точки
Во внешнем интерфейсе отдела Дао у нас нет простого и эффективного решения для доступа к эксперименту AB.В прошлом большинство интерфейсов получали требования AB, и единственным вариантом был вызов библиотечных функций, предоставленных клиентом, для мы нашли некоторые болевые точки:
- Во-первых, фронтенд-разработчикам нужно много думать, чтобы разобраться с логикой АБ;
- Кроме того, объем эксперимента на стороне клиента ограничен конечной частью и не может охватывать все внешние сценарии, такие как внешние инвестиции, апплет или ПК и т. д.;
- Одной детализации данных недостаточно. Будь то эксперимент на стороне сервера или эксперимент на стороне клиента, он зависит от страницы, и бизнес-стороне часто нужно смотреть на более подробные показатели, такие как количество кликов. через скорость модуля на странице Интерфейс имеет возможности сбора данных естественное преимущество;
следовательно,Создайте стандартизированную, простую и эффективную экспериментальную ссылку AB, которая обслуживает отдел Amoy и даже внешний интерфейс группы., является нашим первоначальным намерением сделать это. В этой статье будет описан дизайн и принцип внешнего интерфейса AB.
Идеи дизайна
Что именно нужно для полной ссылки на эксперимент AB? Создание экспериментов, инженерный доступ, шунтирование, рефлоу данных экспериментов... Ну да, я могу перечислить еще много чего, но они бессмысленны, если они не организованы и систематизированы, не говоря уже об архитектурном дизайне. Итак, давайте попробуем классифицировать эти разбросанные элементы.
Полную экспериментальную ссылку AB можно разделить на две части, первая частьСсылка на экспериментальную конфигурацию, как следует из названия, он включает в себя все операции, связанные с экспериментальной конфигурацией, созданием, сохранением, группировкой, отправкой или распространением конфигурации, а также распространением в реальном времени с использованием конфигурации. Вторая частьссылка на экспериментальные данные, который содержит раскраску, фильтрацию, расчет и отображение экспериментальных данных (экспериментальный отчет). Объединение этих двух частей в замкнутый цикл является основой нашего дизайна внешнего эксперимента AB.
Следующие две модели данных вводятся отдельно.
Модель экспериментальной конфигурации
Будем экспериментировать с конфигурациейзаявлениеСоберите для размеров и отправьте в CDN. Интерфейсная среда выполнения считывает конфигурацию через JSSDK, завершает разгрузку и отображает соответствующие бизнес-компоненты.
Приложение можно понимать как интерфейсный проект, небольшая программа может быть приложением, или страница активности (например, поиск золотых монет) в ручном шоппинге также может быть приложением. Приложение содержит сцены, независимый портал трафика, который мы называем сценой., Например, главная страница приложения — это сцена, а ссылка на руководство по покупкам — тоже сцена. Сцена также является базовой моделью маневрирования.В этой части мы подробно представим внутреннюю структуру сцены в следующей главе.Здесь нам нужно только знать, что наш новый эксперимент напрямую связан со сценой.
Модель экспериментальных данных
Из приведенного выше рисунка мы можем получить, чтоБизнес - это коллекция метрик данных, и эксперименты в рамках одного и того же бизнеса могут создавать и связывать все индикаторы в этом бизнес-домене. Эти связанные показатели в конечном итоге будут отражены в отчете об эксперименте путем сбора и расчета данных.
Возьмем практический пример, бизнес золотой лихорадки в Hand Taobao, мы хотим провести эксперимент на домашней странице золотых монет (сценарий), какой модуль маркетинга AB является более эффективным? Тогда экспозиция UV и клик UV маркетингового модуля — это индикаторы, которые мы хотим создать и связать. Индикатор также будет существовать в наборе данных в рамках этой бизнес-области.На этом этапе некоторые люди могут задаться вопросом, если золотые монеты — это и приложение, и бизнес, то почему вам нужно различать эти два понятия?? Почему приложение не выдает конфигурацию и не объединяет индикаторы? причина проста,Потому что бизнес — это кросс-приложениеНапример, рука хороша для производительности, решила расширить и выходить онлайн в Taobao Special Edition. Тогда в этом бизнесе есть два приложения, и один в руке - это специальная версия рук, конфигурация отличается, но бизнес-индикаторы одинаковы, в этом случае один бизнес - одно относительное решение оптимизации.
Дизайн
Конструкция переднего экспериментального звена АВ является как бы «заглушкой» для двух вышеуказанных моделей. Мы начинаем с двух основных направлений со стороны платформы и среды выполнения, и размещаем элементы и их отношения вышеприведенных моделей один за другим и соединяем их последовательно, чтобы сформировать замкнутый цикл.
Платформа АБ
Для предприятий, впервые заходящих на платформу AB, нам необходимо зарегистрировать соответствующее рабочее пространство.
- Приложение, используемое для управления экспериментальной конфигурацией, то есть интеграции и отправки конфигурации.
- Бизнес, используемый для управления индикаторами данных, связанными с экспериментами.
- Сценарий, маневровая модель (подробности в последующих главах)
После создания рабочей области мы запускаем основную ссылку для создания эксперимента, которая включает в себя чтение основной информации об эксперименте и настройку корзины (распределение трафика). Чтобы еще больше снизить порог экспериментального доступа, сторона платформы будет автоматически генерировать код доступа к интерфейсу после этапа распределения трафика, чтобы разработчики интерфейса могли быстро получить доступ к эксперименту.
Далее следует процесс создания метрик и связывания метрик с экспериментами (см. главу «Моделирование экспериментальных данных»). Затем идет экспериментальная версия. Перед официальным выпуском есть ссылка на бета-версию. Бета-версию можно понимать как «неофициальную» версию перед запуском эксперимента. Разработчики и деловые стороны могут распространять эксперимент, данные и сопутствующие услуги. после бета-релиза.После полной проверки логики он будет официально выпущен. Само собой, эксперимент поддерживает несколько релизов, то есть в середине эксперимента бизнес-сторона может вернуться к шагу распределения трафика, заново отрегулировать соотношение трафика и повторно опубликовать эксперимент.
Время выполнения
JSSDK
Давайте рассмотрим расположение JSSDK на приведенной выше схеме модели экспериментальной конфигурации, которая выполняется во внешнем проекте.Прочитайте экспериментальную конфигурацию, разделите поток в реальном времени и верните компонент для рендеринга в соответствии с результатом разделения.. Давайте еще раз рассмотрим экспериментальную модель данных, какую работу должен выполнить JSSDK в части данных,Ответ заключается в сообщении экспериментальных данных.. Во-первых, ему нужно сообщить результаты сортировки, а во-вторых, ему нужно сообщить данные индикатора, связанные с экспериментом, то есть экспериментальные данные, которые бизнес должен видеть. Имея это в виду, становится ясно, что нам нужно делать с JSSDK.Давайте поговорим о нашем конкретном плане дизайна и плане расширения.
На следующем рисунке показана взаимосвязь между средой выполнения, JSSDK, интерфейсной разработкой и платформой AB. Начнем с внешнего проекта.Мы ввели в проект компонент бизнес-эксперимент AB. Этот компонент динамически генерируется платформой AB в соответствии с пользовательской конфигурацией, как связь между бизнес-компонентом (связанным с экспериментом AB) и страницы (или родительского контейнера). Основная работа заключается в считывании параметров, необходимых для эксперимента AB, и передаче их в SDK.Это запускает всю логику эксперимента AB SDK..
Давайте посмотрим на часть JSSDK (синяя).Прежде всего, с глобальной точки зрения, мы разделили JSSDK на два пакета:
- одинОсновной пакет, который инкапсулирует общую базовую логику, такую как экспериментальная стратегия чтения конфигурации и кэширования, управление экспериментальным циклом и алгоритм шунтирования;
- Другой - получить доступ к конкретному проекту DSL.Комплект муфт (муфта), как показано на рисунке, это как бы транзитная станция для процесса эксперимента АВ, он реализует набор интерфейсных функций, то есть в конкретной среде DSL (типа React) запрос, кеш и парсинг куки (коэффициент отклонения) , и Эти интерфейсные функции и экспериментальные параметры прозрачно передаются в Ядро,Цель нашего проекта — реализовать полное разделение Core и внешнего DSL, что значительно увеличивает масштабируемость JSSDK.
После получения экспериментальных параметров и требуемых функций интерфейса Ядро должно сначала получить экспериментальную конфигурацию.В это время Ядро не будет напрямую запрашивать экспериментальную конфигурацию, а инициируетстратегия контроля версий, эта стратегия в основном предназначена для проверки того, обновлен ли номер версии удаленной экспериментальной конфигурации.Если есть обновление, конфигурация будет запрошена.В противном случае будет прочитана конфигурация локального кеша. Эта конфигурация локального кеша запрашивается и кешируется из CDN, когда пользователь запускает эксперимент в первый раз. После каждого обновления версии кеш будет повторно запрашиваться и обновляться. После получения экспериментальной конфигурации Core подтвердит, находится ли она в настоящее время вЭкспериментальный период(Конфигурация на платформе AB), алгоритм разгрузки (см. следующую главу) официально запускается только после прохождения верификации, после чего результат разгрузки возвращается на коплер.
Затем Coupler определит, какой соответствующий бизнес-компонент следует отображать в соответствии с результатом маневрирования, и сообщит о результате маневрирования платформе.В настоящее время пользователи уже могут видеть данные об отклонении в отчете об эксперименте в реальном времени, а студенты технических специальностей могут подтвердить, нормально ли запускается эксперимент, с помощью данных в реальном времени.. Кроме того,Компоненты погребенной точкиБизнес-компонент хита будет инкапсулирован в слой, и сюда будет передан метод отчета о скрытых точках, который может быть вызван бизнес-компонентом. Конкретный вызов был сгенерирован, когда мы создавали эксперимент на платформе AB, и -end студенты должны сообщить об этом. Код экспериментального индикатора может быть развернут в соответствующем бизнесе. Эта часть данных скрытых точек — T+1, и бизнес-сторона может просмотреть соответствующий отчет об эксперименте на стороне платформы и проанализировать результаты эксперимента.
план расширения
Front-end DSL можно описать как соперничество сотен школ.Чтобы охватить все сценарии front-end, мы тщательно продумали простоту расширяемости JSSDK при разработке. Вот почему мы разделили JSSDK на два пакета, Core и Coupler, в решении Rax 1.0 в предыдущем разделе. Наша идея заключается в том, что Core инкапсулирует основную логику эксперимента AB, не полагаясь на какой-либо интерфейсный DSL. Connector" между ними, чтобы объединить всю ссылку. Таким образом, как показано на рисунке ниже, мы можем расширяться до React, апплета, Node FaaS и т. д. с очень низкими затратами благодаря такой архитектуре. Также имеет хорошую ремонтопригодность.
На самом деле, в предыдущем разделе также упоминалось, как мы полностью отделили основной пакет (Core) от этих DSL.спецификация интерфейса, а затем реализовать ряд интерфейсных функций в соответствии с этой спецификацией в пакете "Coupler". Когда Core выполняет определенную часть логики для вызова этих функций, ему не нужно заботиться о том, какой DSL API используется внизу. Например, для работы localStorage API React и апплета совершенно разные, поэтому мы реализовали такой набор функций обработки для localStorage по спецификации интерфейса в «коннекторе» React и апплета, и прозрачно передали это к ядру.
модель шунта
Ортогональные и взаимоисключающие
Когда мы говорили об экспериментальной модели трафика в первой главе, мы упомянули сценарий, мы определили независимый вход трафика как сценарий. Мы также приводим пример, домашняя страница приложения xx может быть сценой, и теперь мы могли бы также расширить этот пример, домашняя страница xx может запускать несколько экспериментов AB одновременно:
- В эксперименте 1 есть два стиля эластичного слоя красного конверта, AB, а индекс наблюдения — это рейтинг кликов двух эластичных слоев;
- В эксперименте 2 модуль продукта в заголовке страницы имеет два стиля AB, а индекс наблюдения — это частота кликов модуля;
- В эксперименте 3 есть два дизайна маркетингового баннера А и Б. Работающий и доставляемый маркетинговый индекс — показатель кликабельности баннера;
Теперь проблема заключается в том, что и Эксперимент 2, и Эксперимент 3 являются модулями на странице, мы хотим, чтобы эти два эксперимента выполнялись одновременно, но мы не хотим, чтобы они влияли друг на друга, то есть трафик, поступающий на Эксперимент 2 и Эксперимент 3 должен быть взаимоисключающим. Как это сделать? Для нас,Сцена представляет собой не только въезд, но и диверсию, эксперименты размещаются в сцене не хаотично, а черезПол(слой) для стандартизации. Мы можем понять это так,Сцена — это вертикальный контейнер, а слой — горизонтальный контейнер, и эксперименты размещаются в разных слоях по определенным правилам.. Как показано на рисунке ниже, Эксперимент 1 занимает один слой, который ортогонален Эксперименту 2 и Эксперименту 3 на следующем уровне, то есть трафик, входящий в Эксперимент 1, также будет поступать в Эксперимент 2 или Эксперимент 3. Мы поместили Эксперимент 2 и Эксперимент 3 на один и тот же слой, потому что мы хотим, чтобы трафик, поступающий в Эксперимент 2, не перекрывался с трафиком, идущим в Эксперимент 3. Это описание можно резюмировать просто так:В сценарии экспериментальный трафик между уровнями является ортогональным, а экспериментальный трафик внутри уровня взаимоисключающим.
полный эксперимент
На приведенной выше схеме модели мы также видим специальный слой Launch Layer, который используется для размещения выталкиваемых экспериментальных группировок. Например, после онлайн-проверки эффект группы А в эксперименте 1 значительно лучше, чем у группы Б. Пользователь проталкивает группу А на полную сумму на стороне платформы, в это время внутренняя структура сцены изменится , то есть группа А в эксперименте 1 изменится по сравнению с исходным слоем. Она помещена в этот специальный слой запуска. В это время весь трафик, запускающий эксперимент 1 в этом сценарии, больше не будет выполнять алгоритм шунтирования, а будет напрямую вернуться к внешним компонентам, соответствующим группе A.
Разгрузка JSSDK
Правила переадресации JSSDK следуют модели переадресации, упомянутой выше.Фактором переадресации, используемым во внешнем эксперименте AB, является поле cna в файле cookie браузера посетителя, то есть идентификатор веб-устройства пользователя. Мы используем это поле для уникальной идентификации пользователя. Преимущество заключается в том, что оно может охватывать различные сценарии, такие как внутренний, внешний, беспроводной и ПК. Недостаток заключается в том, что когда один и тот же пользователь использует разные веб-устройства для доступа к интерфейсу приложений можно отображать различные результаты группировки. Кроме того, идентификатор веб-устройства не может определить население пользователя. Шунтирующий коэффициент должен иметь свои ограничения, дизайн этой части должен быть масштабируемым, например, в будущем он может поддерживать доступ на основе идентификатора пользователя, utdid и даже различных определяемых пользователем шунтирующих коэффициентов.
перекомпоновка данных
Вернемся к ссылке на данные, в главе о дизайне платформы AB мы говорили о создании индикаторов данных и привязке индикаторов к экспериментам.Мы назначим уникальный идентификатор (UID) каждому вновь созданному индикатору данных, чтобы идентифицировать индикатор., Когда внешний проект запущен, соответствующие компоненты отображаются после шунтирования и активируются соответствующие заглубленные точки.Как показано на следующем рисунке, в параметрах заглубленных точек мы приведем ключ журнала, тип заглубленных точек , и экспериментальные параметры, то есть id экспериментального релиза и group.id, какой id экспериментального релиза? Как упоминалось выше, во время эксперимента мы позволяем бизнесу корректировать коэффициент трафика и публиковать эксперимент, что означает, что эксперимент может быть запущен несколько раз.Таким образом, идентификатор экспериментального выпуска может определить, что собранные данные являются выпуском текущего эксперимента.; конечно, мы также приводим UID, который идентифицирует индикатор.
На стороне платформы запустите задачу с синхронизированными данными, которая отфильтрует экспериментальные данные из нижней таблицы. Как упоминалось выше, мы сообщим ключ журнала при сообщении о скрытой точке. Этот ключ является ключом, согласованным между SDK и сторона данных. Используется для пометки этой записи как экспериментального сайта. Поскольку наша базовая таблица журналов ежедневно записывает большое количество журналов, этот специальный ключ журнала позволяет нам быстро отфильтровывать журналы, связанные с экспериментом, из различных журналов в базовой таблице. Затем мы классифицируем данные в соответствии с сообщаемыми параметрами.Идентификатор выпуска эксперимента используется для идентификации выпуска определенного эксперимента, UID используется для идентификации индикатора, а затем идентификатор корзины используется для идентификации группировки эксперимента. так что мы можем получить UV, соответствующий индикатору.И PV, также формируется отчет эксперимента AB.
Эпилог
Предварительный эксперимент AB все еще является участком земли, который не был полностью обработан в отделе Дао и даже в группе. Наше приложение часто выполняет итерации, но на самом деле мы редко проверяем или используем научный способ проверки истинной ценности итерации. В эпоху роста больших данных, если каждая наша итерация не может окончательно ускорить данные, может быть недостаточно полагаться только на «опыт». Front-end инженеры, отныне у нас есть позиция, мы должны проявлять научный и строгий экспериментальный дух, использовать экспериментальные данные для проверки итераций и принимать решения на основе этого. Наконец, заинтересованные друзья могут общаться дальше, вы можете добавить меня в WeChat MrMarc, с нетерпением жду ваших идей.