Мощное решение среднего и фонового пользовательского интерфейса Alibaba с открытым исходным кодом Fusion

внешний интерфейс Алибаба
Автор｜Лян (технический эксперт Али) Редактор｜Тан Юнь 16 декабря 2018 года Fusion был официально открыт на церемонии в конце года конференции OSC Shenzhen Yuanchuang.Этот продукт, который работал в Alibaba в течение трех лет, наконец-то официально выпущен!

Возможно, некоторые студенты в отрасли слышали о Fusion Design Али по некоторым каналам.

  • Например, 16 лет пройдет этот самый огонь, «Али последний артефакт-фьюжн дизайн»;

  • Например, тема 17-летней Чжиху «Как работает Fusion Design от Alibaba?» ";

  • Это также может быть связано с внешним обменом Чжоу Юанем на форуме d2 2016 года.

Прошло два года с тех пор, как Fusion в последний раз делал публичное заявление, и за последние два года мы добились некоторых прорывов в технической области. На этот раз мы сосредоточимся на нашем прорыве. Но перед введением мне еще предстоит рассказать о том, что делает Fusion, ведь еще много студентов услышали о нем впервые!

1. Что делает Fusion 1.1 Решить проблему совместной работы дизайнеров и фронтенд-работы

Как правило, онлайн-процесс проекта в основном проходит этапы проверки, проектирования, разработки и тестирования.

И каждый этап может быть далее разделен на, примерно следующим образом:

  • Обзор: бизнес-взаимодействие (взаимодействие функций продукта), обзор бизнес-логики;

  • Дизайн: Спецификация дизайна (определение дизайнером всего продукта по визуальной спецификации), визуальный дизайн (отрисовка визуального эскиза), черновик аннотации (выходная аннотация отдается на фронтенд);

  • Разработка: внешний интерфейс обычно имеет набор библиотек компонентов, однако библиотека компонентов может не соответствовать бренду собственной бизнес-линии (например, Ali Orange, Sky Blue, в основном ни одна бизнес-линия не будет иметь собственного бренда), поэтому первым шагом должна быть настройка пользовательского интерфейса на уровне компонентов, за которой следует разработка бизнес-логики;

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

Здесь мы сосредоточимся на двух проблемах в этом процессе.

повторяющаяся работа

Желтая часть здесь указывает на то, что это может быть дублирование работы между различными направлениями бизнеса:

  • Например, определяется интерактивный пользовательский интерфейс в фоновом режиме;

  • Например, спецификации проекта могут быть расширены за счет интегрированной спецификации;

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

Проблема сотрудничества

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

  • Из-за разных используемых инструментов восприятие концепции разное.

Понимание теней по-разному

  • Разница между идеалами дизайнера и реальными проблемами фронтенда

Тот же margin-top:12px, но несогласованный интервал

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

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

  • Компоненты, которые были разработаны, не образуют хорошего повторного использования.

1.2 Рабочий процесс слияния

Избавьтесь от повторяющихся процессов и сосредоточьтесь только на бизнесе

  • Дизайнерам удобнее проектировать

  • ТОЛЬКО ПЕРЕДНЕГО КОНЦА необходимо сосредоточиться на бизнес-логике

Через абстрактный скелет DPL -> настройка платформы для создания настраиваемых компонентов и шаблонов пользовательского интерфейса -> прямое перетаскивание в инструмент дизайнера -> прямое использование настраиваемых компонентов во внешнем интерфейсе (не нужно обращать внимание на пользовательский интерфейс компонента)

  • Дизайнеры используют один и тот же набор стандартных компонентов, а выходные проектные проекты представляют собой один и тот же набор спецификаций. (Здесь используется имя плагина скетча FusionCool)

  • Фронтенду не нужно обращать внимание на восстановление пользовательского интерфейса компонента. (Проблема со степенью восстановления = проблема с конфигурацией проекта)

1.3 Не нужно ничего делать от 0 до 1

  • Что касается дизайна, плагин эскиза (FusionCool) можно использовать для разработки как страниц, так и шаблонов в эскизах;

  • Сторона разработки использует в проекте средства разработки (Iceworks) для использования как готовых модулей, так и осаждения уже разработанных модулей.

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

2. Очки способностей слияния

Одна платформа, два конца

платформа: фьюжн.дизайн

Два инструмента:

  • Инструменты разработчика

  • Инструменты дизайнера FusionCool

2.1 Платформа

https://fusion.design может настроить вашу собственную систему дизайна (далее DS)

Создайте свою собственную дизайн-систему:

Любой человек или команда могут создать свой собственный сайт через https://fusion.design/sites/new.

Сайт предоставляет три возможности: редактирование документов, управление темами и размещение материалов.

Редактирование документов

Храните проектную документацию и документацию по разработке.

Управление конфигурацией темы

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

Хостинг материалов

Вы можете использовать разработанные блоки и шаблоны.

блок - фрагмент кода

Опалубка - строительные леса 2.2 Два конца инструмента

Инструменты дизайнера — FusionCool

После того, как тема будет опубликована, она поступит в FusionCool, часть плагинов Sketch.Дизайнеры могут искать все материалы значков в FusionCool, использовать настроенные компоненты и использовать шаблон модуля сайта.

Инструменты разработчика — Iceworks

Iceworks - это инструмент с графическим интерфейсом для разработчиков интерфейса, разработанный командой Taobao Feibing. Разработчикам не нужно обращать внимание на окружающую среду, и доступно много материалов. В настоящее время он подключен к системе материалов Fusion, и материалы сайта Fusion можно легко использовать.

У каждого сайта свой источник материалов

Адрес источника материала можно настроить непосредственно в Iceworks.

Разработка проекта 3. Техническая реализация Fusion Следующие компоненты

Fusion Next — это набор библиотек компонентов для ПК на основе React, который уже три года работает в Alibaba.

адрес гитхаба: https://github.com/alibaba-fusion/next

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

Простота использования

По сравнению с 80+ функциями предыдущей версии выполнено 300+ оптимизаций, а общий размер кода компонента уменьшен на 30%.

  • next.min.js 910KB -> 702KB

  • next.min.css 428KB -> 337KB

Всего существует более 50 компонентов, но упаковано только более 700 тыс. В настоящее время в отрасли относительно немного компонентов, способных на это. Зависимости между компонентами понятны, а высокая степень повторного использования также является причиной небольшого размера.

стабильность

Уровень охвата компонентов одним тестом составляет почти 90%, и с момента предоставления услуги не было ни одной онлайн-аварии.

повышение способности

Интернационализация, RTL и специальные возможности полностью поддерживаются. Кроме того, было сделано большое количество оптимизаций производительности для сценариев с большими объемами данных в средней и фоновой формах, например, по мере роста данных рендеринг обычных таблиц будет становиться все медленнее и медленнее, а именно:

Далее представлен виртуальный список, который в настоящее время используется в двух часто используемых компонентах, таблице и выборе. Поскольку только те узлы, которые необходимо отобразить (например, 20), визуализируются при большом объеме данных (протестированные узлы 1w), время рендеринга можно постоянно контролировать в пределах 0,3 с.

FusionCool Восстановление кода без потерь до визуального черновика

Преодолеть недостатки html2svg и добиться восстановления без потерь

Еще год назад мы напрямую преобразовывали компоненты дизайнера на платформе настройки темы (тема компонента настраивается прямо на веб-странице) напрямую через технологию html2svg и напрямую преобразовывали компонент в svg-файл, чтобы дизайнер может использовать его прямо в эскизе. Однако недостатком этой схемы является недостаточная степень восстановления (около 95% степени восстановления).

Проблема с восстановлением степени html2svg

Основная причина в том, что преобразование html с помощью боксовой модели и svg не является взаимно-однозначным соответствием, поэтому всегда будут баги, которые уже никогда не исправить. Хотя 95% — это хорошо, это совершенно невыносимо с точки зрения дизайна.

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

HTML-код, экспортируемый из платформы конфигурации, больше не является html, а является DesignToken (переменная дизайна).Нижний слой FusionCool использует возможность реагирования на эскиз, предоставляемую Airbnb, для написания компонента Next, который напрямую переопределяет переменные по умолчанию через DesignToken, и, наконец, визуализирует его в режиме реального времени на стороне Sketch.

Тип, размер и состав компонентов можно настроить прямо в панели.

Конфигурация диаграммы может напрямую вызывать панель конфигурации

Любой щелчок на стороне эскиза может создать панель конфигурации в FusionCool посредством события.

4. Будущее фьюжн

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

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

Ссылки по теме

  • Сайт фьюжн: https://fusion.design/

  • следующий репозиторий github: https://github.com/alibaba-fusion/next

Рекомендация по активности

25-27 апреля 2019 года в Пекинском международном конференц-центре QCon встретится с вами, чтобы получить вдохновение и сосредоточиться на отраслевых тенденциях и инженерных практиках. нажмите" читать оригинал"Или определите QR-код, чтобы узнать о тщательном планировании 10-летия QCon, скидка 30% при раннем бронировании, скидка 2640 юаней. 0410

Категории