Разговор о техническом инсайде cube-ui

cube-uiЭто библиотека мобильных компонентов на основе Vue.js 2.0, исходный код которой был открыт Didi в конце прошлого года.Основная основная цель — добиться максимального удобства, высокой гибкости, легкого расширения и обеспечения хорошей окружающей среды.пост-компиляция.

Прошло 5 месяцев с тех пор, как в ноябре 2017 года исходный код был открыт. В ходе этого процесса cube-ui привлек много внимания, а также получил много хороших отзывов и предложений от сообщества. Мы также периодически обновлялись, от начальной версии 1.0 до недавно выпущенной версии 1.7, в дополнение к некоторым улучшениям исходных компонентов, мы также предоставили много новых компонентов. Кроме того, окружающая экосистема технологий пост-компиляции также была оптимизирована для удовлетворения потребностей большего количества сценариев.Официальный сайтТоже сделал апгрейд.

Далее мы сосредоточимся на достижениях cube-ui в этом процессе и некоторых деталях дизайна.

Ключевые результаты

Количество компонентов cube-ui увеличилось с первоначальных 14 до 28, что удвоилось.Существующая экология компонентов:

Опыт сканирования кода:

В дополнение к вышеперечисленным компонентам cube-ui также предоставляет три модуля:

• style
• create-api
• better-scroll

А еще cube-ui уже поддерживает следующие возможности:

• пользовательская тема
• рем-макет
• поддержка ССР

Кроме того, окружающая среда куб-уи была дополнительно обогащена:

• Шаблон строительных лесов vue-clicube-template
• Учебник по быстрому стартуcube-application-guide
• посткомпилировать плагин webpackwebpack-post-compile-plugin
• Справочные плагины webpack по запросуwebpack-transform-modules-plugin, зависит от плагина babelbabel-plugin-transform-modules

планировать детали

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

компонентный модуль

• Компоненты класса Scroll & Picker

  На мобильной стороне, из-за размера и характеристик взаимодействия мобильного телефона, нам приходится иметь дело со многими требованиями прокрутки: выпадающее меню для обновления, вытягивание для большего, карусель и т. д., а также такие сценарии, как Picker. выбор. Базовые компоненты прокрутки cube-ui и класс Picker зависят от мобильного инструмента нашей команды.better-scrollРеализация, основанная на его превосходном опыте, обеспечивает превосходный интерактивный опыт наших компонентов прокрутки и средства выбора, инкапсулированных сверху.

• компонент всплывающего слоя

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

  Еще одна распространенная проблема заключается в том, что всплывающие компоненты часто находятся в полноэкранном состоянии.Если мы используем компоненты всплывающего слоя в подкомпонентах в соответствии с декларативным синтаксисом, рекомендованным Vue, на него легко влияет стиль родительских элементов. из-за проблемы с уровнем вложенности. Для этого мы разработали отдельныйcreate-apiМодуль динамически монтирует созданный компонент всплывающего слоя под элементом Body в виде API, поэтому он избавляется от влияния стиля родительского элемента и будет автоматически уничтожен с уничтожением компонента, который его использует, и чтобы уменьшить накладные расходы, в соответствии с потребностями некоторых компонентов класса всплывающего слоя разработаны как одноэлементный режим. Это очень общая возможность.Мы предоставляем такой удобный API внешнему миру.Разработчики также могут регистрировать свои разработанные компоненты через createAPI в соответствии с реальными сценариями, что также может решить вышеуказанные болевые точки.

• компонент формы

  Требования к классу формы часто довольно специфичны, и взаимодействие трудно достичь единообразия, но все же существует основное взаимодействие дизайна формы, и форма может быть установлена ​​​​в кубическом пользовательском интерфейсе.layoutчтобы определить стиль и даже взаимодействие для удовлетворения потребностей повседневных сцен. В дизайне формы есть два очень важных компонента:ValidatorиForm. Валидатор становится независимым компонентом, в основном из-за неопределенности сцены проверки, а также должен соответствовать различным формам проверки, поэтому Валидатор выполняет только две основные задачи: проверяет источник данных и отображает соответствующую информацию об ошибке. Учитывая удобство разработки форм разработчиками, мы ссылаемся наvue-form-generatorДизайн формы предназначен для автоматического создания формы в соответствии с конфигурацией Schema, благодаря чему стоимость разработки формы значительно снижается; в то же время, чтобы учесть гибкость, он также поддерживает использование слоты для настройки структурного взаимодействия, требуемого разработчиками.

пост-компиляция

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

Две функции, поддерживаемые cube-uiпользовательская темаА макет rem основан на нашей основной технологии посткомпиляции.

Далее давайте рассмотрим детали реализации этих двух функций.

пользовательская тема

Вообще говоря, библиотеки компонентов имеют темы по умолчанию и часто имеют несколько наборов тем (более распространены библиотеки компонентов типа ПК). Теперь с помощью препроцессора CSS мы можем определить некоторые переменные (обычно значения цвета) для компонента, а затем использовать их в соответствующем стиле компонента.

Для требований к пользовательским темам основными практиками являются: переопределение стиля и изменение переменных.

1. переопределение стиля

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

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

2. Изменить переменные

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

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

3. кубический пользовательский интерфейс

   Суть в том, что с помощью посткомпиляции мы можем писать компоненты так, как мы привыкли, то есть в.vueФайл содержит шаблоны, скрипты и стили. Если вам нужно настроить тему, создайте файл темы в своем собственном проекте и определите в нем переменные.Этот метод аналогичен общему методу модификации переменных, но вам не нужно импортировать все файлы ввода стилей, потому что есть такого файла нет, в то же время с помощью Webpack мы можем полностью настроить тему, не вторгаясь в исходный код.

Далее рассмотрим конкретный метод.Если это только что созданный проект, то рекомендуется использовать Vue-cli+cube-templateГенерация шаблона, а если это готовый проект, конкретная ссылкаОфициальная документация - Темыв конфигурации. Есть два основных момента:

• Создать файл темыtheme.styl, обычно помещается вsrc/Под содержанием
• Изменить элементы конфигурации о стилус-погрузчике в WebPack: добавитьimportПоля используются для использования пользовательских файлов тем.

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

Если мы хотим изменить цвет фона кнопок, используемых в проекте, мы можем изменитьtheme.stylсодержимое файла:

// 如果你需要使用 cube-ui 自带的颜色值 需要 require 进来
@require "~cube-ui/src/common/stylus/var/color.styl"

// button
$btn-bgc := #409eff
$btn-bdc := #409eff
$btn-active-bgc := #66b1ff
$btn-active-bdc := #66b1ff

С нашей конфигурацией веб-пакета обновленный вид выглядит так:

Таким образом, мы можем легко настроить нужную тему, все, что нам нужно сделать, это изменить значения переменных, уже определенные в cube-ui. Для самой библиотеки компонентов cube-ui модификации не будет, а для разработчиков приложений нет необходимости настраивать тему, да и сам исходный код модифицировать не нужно, достаточно создать файл темы (не нужно вручную импортировать) с помощью плагина webpack Настройте его.

На самом деле, для кастомизации темы можно пойти еще дальше: в будущем cube-ui рассмотрит возможность поддержки самого CSS.Переменные (настраиваемые свойства)Например, для достижения цели настройки темы переменная процессора может быть изменена на собственную переменную, и если она скомпилирована, вы можете передатьpost-css-variablesПлагин заменяет значение переменной по умолчанию, что может дать тот же эффект, что и существующая функция пост-компиляции, сохраняя при этом динамические преимущества собственных переменных CSS в случае пост-компиляции. Таким образом, может быть достигнута не только настройка темы, но и свободное переключение нескольких тем, поскольку собственные переменные CSS могут напрямую изменять значения переменных без необходимости переключения между несколькими темами путем предварительной записи, а затем переключения класса. переопределяет.

рем-макет

С мобильной стороны все еще есть много дизайнеров, продуктов или разработчиков, которые предпочитают использовать масштабирование для достижения цели адаптации к разным размерам экранов, и реализация масштабирования обычно реализуется с использованием rem для макета.Известное решение в отрасли является решением с открытым исходным кодом мобильной команды Taobao.lib-flexible.

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

Макет rem имеет два основных момента:

1. Динамически обновлять значение rem в соответствии с шириной области просмотра во время выполнения, то есть изменять HTML-код корневого элемента.font-sizeзначение
2. При компиляции (или разработке) вам необходимо преобразовать единицу px проекта проекта в единицу rem.

Для библиотеки компонентов, если вы хотите одновременно поддерживать и универсальный метод px, и метод rem, сообщество, похоже, этого не видело. Проще реализовать с посткомпиляцией.В cube-ui реализована поддержка rem.Основные решения:

1. необязательный amfe-гибкий, то естьlib-flexibleДинамический расчет обновляет значение rem (обратите внимание на версию 2.x)
2. плагин с выбранным postcsspostcss-px2remкак библиотека для преобразования px в rem

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

Давайте посмотрим на эффект cube-ui, используя rem, эффект размера iPhone 5 по умолчанию:

Когда размер становится больше, например размер iPhone 6 Plus:

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

Расширение верхнего слоя

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

Эта способность очень важна, потому что самая большая разница между библиотекой мобильных компонентов и библиотекой компонентов для ПК заключается в том, что мобильный терминал в основном предназначен для бизнес-сценариев C, а дизайн в разных бизнес-сценариях отличается, поэтому cube-ui фокусируется на общих компонентах. и построение основных возможностей, и не будет большого шума из-за компоновки и бизнес-компонентов; а библиотеки компонентов ПК обычно используются в сценариях B, таких как внутренние системы MIS, и требования к дизайну не особенно требовательны, поэтому основные стили и компоненты могут быть унифицированы. Таким образом, позиционирование cube-ui заключается не в том, чтобы предоставить «большую и всеобъемлющую» библиотеку компонентов, а в том, чтобы обеспечить возможность вторичного расширения. Цель состоит в том, чтобы любой мобильный бизнес-сценарий можно было расширить на основе возможностей, предоставляемых cube-ui. . . .

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

Нам очень удобно разрабатывать его на основе возможностей, предоставляемых cube-ui. Во-первых, компонент Popup может быть разработан на основеsubscribe-dialog.vueКомпоненты:

<template>
  <div class="subscribe-dialog-view">
    <cube-popup ref="popup" @mask-click="hide">
      <div class="subscribe-dialog-wrapper">
        <span class="close" @click="hide"><i class="cubeic-close"></i></span>
        <div class="title">开启推送通知</div>
        <img src="./subscribe.png">
        <p class="desc">第一时间获取最新鲜出炉的新闻攻略、赛事咨询、数据专题、精彩视频</p>
        <cube-button class="button" @click="start">现在开启</cube-button>
      </div>
    </cube-popup>
  </div>
</template>

<script>
export default {
  name: 'subscribe-dialog',
  methods: {
    show () {
      this.$refs.popup.show()
      this.$emit('show')
    },
    hide () {
      this.$refs.popup.hide()
      this.$emit('hide')
    },
    // ...
  }
}
</script>

Затем используйте модуль createAPI, чтобы превратить его в API-подобный компонент:

import SubscribeDialog from './components/subscribe-dialog/subscribe-dialog'
createAPI(Vue, SubscribeDialog, [], true)

Тогда это очень удобно называть:

this.subscribeDialog = this.$createSubscribeDialog()
this.subscribeDialog.show()

окружающая экология

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

• посткомпилировать плагин webpackwebpack-post-compile-plugin
• Справочные плагины webpack по запросуwebpack-transform-modules-plugin

webpack-post-compile-plugin

Этот плагин в основном читает приложение package.json вcompileDependenciesЗначение поля (используется для указания, какие зависимые пакеты приложение должно посткомпилировать), а также может решить проблему вложенных пакетов посткомпиляции, потому что разработчикам нужно обращать внимание только на те пакеты, которые им нужно опубликовать -скомпилированные, а не зависимые пакеты, чтобы можно было сформировать экологическую цепочку.

Почему пакет NPM не объявляет, нужна ли ему пост-компиляция или нет, но пользователь объявляет это?

В основном рассмотрите всю экосистему NPM, такую ​​какlodash-esЭто не в нашей власти.Чтобы лучше использовать пакеты всей экосистемы NPM, мы решили, что пользователь должен объявить пакеты NPM, которые необходимо скомпилировать.

webpack-transform-modules-plugin

Этот плагин в основном решает проблему более удобного и дружественного использования внедрения по запросу.Чтобы лучше унифицировать ситуацию компиляции и неиспользования приложения после использования, мы изначальноbabel-transform-importsНа основе обновления производительность была оптимизирована.babel-plugin-transform-modulesподключаемый модуль, но аналогично сценарию после компиляции, это не может решить проблему вложения пакетов NPM и внедрения по требованию в сценарии после компиляции, поэтому для этой цели был разработан плагин webpack-transform-modules-plugin, иcompileDependenciesПоля аналогичны, мы добавилиtransformModulesполе для объявления правил преобразования для пакетов NPM, импортируемых по запросу, например:

"transformModules": {
  "cube-ui": {
    "transform": "cube-ui/src/modules/${member}",
    "kebabCase": true
  }
}

Конечно, в сценарии после компиляции мы используем только что добавленный webpack 4 Tree Shakeside-effectsОн также может достичь цели, это направление, которое мы будем оптимизировать в будущем.

Строительные леса и учебные пособия

Любая технология имеет свою стоимость, мы добавили новый плагин webpack, и есть некоторые изменения, которые необходимо согласовать, поэтому, чтобы снизить затраты на разработчиков, мы предоставляем шаблон, подходящий для скаффолдинга vue-clicube-template, конечно, будут добавлены некоторые соответствующие элементы конфигурации, если вам интересно, вы можете узнать об этом.cube-template wiki.

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

Перспектива

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

В будущем cube-ui продолжит развиваться в следующих аспектах:

• Богатые компоненты
• Оптимизация компонентов
• Оптимизация документов
• Пример оптимизации
• окружающая конструкция

Я надеюсь, что заинтересованные студенты смогут строить вместе или присоединиться к нашей команде, чтобы вместе играть в технологии!