В конце прошлого года команда Didi WebApp провела рефакторинг бизнеса с помощью Vue.js 2.0 и разработала кубический интерфейс библиотеки мобильных компонентов для поддержки развития бизнеса. После более чем года бизнес-тестов кубический пользовательский интерфейс также становится все более и более зрелым, и мы считаем, что кубический пользовательский интерфейс также должен иметь свое место в дополнение к внутренней части Didi. С вами нужно делиться хорошими вещами, поэтому мы очень рады сообщить вам, что сегодня cube-ui официально является открытым исходным кодом, адресGitHub.com/brother/cube-U….
cube-ui заимствован из бизнеса Didi, разработан и поддерживается командой разработчиков интерфейсной архитектуры Didi WebApp. Цель кубического пользовательского интерфейса — упростить разработку для мобильных устройств, позволить разработчикам больше сосредоточиться на разработке бизнес-логики и повысить эффективность исследований и разработок.
характеристика
-
надежное качество
Он упрощен и улучшен на основе внутренней библиотеки компонентов Didi, которая тестировалась бизнесом более года, и каждый компонент имеет достаточно модульных тестов, чтобы гарантировать последующую интеграцию.
-
Испытайте непревзойденное
Благодаря быстрому отклику, плавной анимации и приближению к оригиналу он обеспечивает максимальный интерактивный опыт.
-
Стандартная спецификация
Следуя единому стандарту взаимодействия при проектировании, эффект дизайна в высокой степени восстанавливается; интерфейс стандартизирован, использование стандартизировано, а разработка становится проще и эффективнее.
-
Сильная масштабируемость
Поддержка импорта по запросу и пост-компиляции, легкая и гибкая, мощная расширяемость, позволяющая легко реализовывать вторичную разработку на основе существующих компонентов.
Преимущество
Каковы преимущества cube-ui по сравнению с библиотекой мобильных компонентов того же типа?
-
Стремитесь к максимальному опыту
Я часто говорю: «Хорошо ли написана библиотека мобильных компонентов, зависит от того, хорошо ли написан компонент Picker», потому что для того, чтобы хорошо написать этот компонент, требуется определенный объем работы. Средство выбора cube-ui — это наиболее подробная реализация всех библиотек мобильных компонентов, а также лучший опыт, близкий к эффекту родного средства выбора iOS. Как и в случае с компонентом индексного списка IndexList, мы очень тщательно рассмотрели некоторые детали взаимодействия, такие как обработка верхнего заголовка, обработка состояния нажатия и т. д. -
технология посткомпиляции
Технология пост-компиляции — это набор оптимизаций, над которыми фронтенд-команда Didi думает и резюмирует проблему «цитирования нескольких модулей, разработанных на ES6, в одном проекте и генерации нескольких дополнительных кодов из-за компиляции Babel».Технические решения. Библиотека компонентов cube-ui также использует это техническое решение, которое уменьшает размер кода, сгенерированного конечным пользователем, компилирующим библиотеку компонентов cube-ui, и в определенной степени оптимизирует производительность.
компоненты
Компонент кубического пользовательского интерфейса в основном состоит из 3 частей: базового компонента, компонента всплывающего слоя и компонента прокрутки. В настоящее время в общей сложности 14 компонентов являются открытыми, и наш принцип заключается в том, чтобы использовать только компоненты с открытым исходным кодом с сильной универсальностью. Хотя в настоящее время не так много компонентов, мы стремимся к максимальному опыту и взаимодействию компонентов, включая простоту использования.
использовать
cube-ui поддерживает 2 способа использования,декларативныйа такжеСтиль API.
<template>
<cube-button @click="showToast">show toast</cube-button>
</template>
<script>
export default {
data() {
return {
toastTxt: 'toast content'
}
},
methods: {
showToast() {
this.$createToast({
txt: this.toastTxt
}).show()
}
}
}
</script>Как показано в приведенном выше коде, здесь фактически используются 2 компонента cube-ui,cube-buttonа такжеcube-toast. можно увидеть,cube-buttonМы используем декларативное создание иcube-toastчерез экземпляр$createToastвызовы API.
Vue.js — это расслабляющий метод, основанный на состоянии, который использует компоненты, но учитывает более глубокую сцену, стиль подкомпонентов может зависеть от родительского стиля, поэтому мы нацеленытип всплывающего окнаКомпоненты API предназначены для вызова способом API, и в конечном итоге они будут подключены кbodyПод элементом стиль защищен от влияния родительского элемента.
расширять
Некоторые компоненты Cube-UI имеют хорошую масштабируемость. Мы можем расширить функции в соответствии с фактическими требованиями сцены. Например:
-
Popup
Базовый класс компонентов всплывающих окон, все встроенные компоненты всплывающих окон (Toast, Picker, TimePicker, Dialog, ActionSheet) реализованы на основе компонентов Popup.Конечно, мы также можем разрабатывать более богатые компоненты всплывающих окон на его основе.
-
Picker
Компонент мобильного селектора TimePicker — это компонент, инкапсулированный на основе Picker.Конечно, мы также можем расширить компонент селектора городов на основе Picker.
демо
демонстрационный адрес, рекомендуется просматривать на мобильном телефоне.
Опыт сканирования кода:
Архитектурный дизайн
cube-ui опирается на базовыйVueа такжеbetter-scroll, и опирается на ряд инструментов для построения, развертывания, модульного тестирования и т. д. На их основе cube-ui реализует ряд компонентов, как показано на рисунке:
Перспектива
В дальнейшем мы продолжим итерацию и оптимизацию cube-ui, включая, но не ограничиваясь следующими направлениями:
-
Богатая библиотека компонентов
Мы рассмотрим возможность разработки более общих компонентов на основе внутренних потребностей Didi и отзывов сообщества.
-
Поддержка функции изменения кожи
Мы будем очень хорошо поддерживать функцию создания скинов и сотрудничать с командой пользовательского интерфейса для разработки нескольких наборов скинов, а также поддерживать возможность настройки скинов.
-
Поддержка TypeScript/Flow
Статическая проверка типов — это будущая тенденция, и cube-ui также рассмотрит возможность их поддержки.