Это материал летучего льда

внешний интерфейс React.js

image | left

введение

При недавнем обсуждении «Материалов Feibing» эксперт по дизайну вызвала разногласия по поводу концепции «блока» в Feibing, полагая, что, по ее мнению, слово «блок» нелегко понять. Мнение состоит в том, что сообщество не имеет концепция блока, только я слышал о блокчейне, но никогда не слышал о блоке. Предлагается заменить «блок» на «сценарий». Поскольку в то время мы были на встрече, мы не тратили слишком много времени на обсуждение этого вопроса. . Итак, здесь возникает вопрос: когда разработчики или дизайнеры говорят о Feibing, о чем они говорят, что такое блоки, что такое Feibing и каковы применимые сценарии.

На главной странице официального сайта Feibing вы можете увидеть слоган с размером шрифта 46px:«Сделайте фронтенд-разработку простой и удобной». Сопровождается текстовым описанием:«Массовые многоразовые материалы, поддерживающие настольные инструменты для быстрого создания клиентских приложений, повышают эффективность на 100 %».

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

  • что за материал
  • какая проблема была решена
  • Какие планы на будущее

что за материал

Эра компонентов: до 2018 года, с нуля, с абстракцией компонентов и использованием компонентов в качестве этапа разработки.

Как упоминалось во введении, философия FeiBing заключается в том, чтобы сделать фронтенд-разработку простой и удобной.В Taobao существует большое количество промежуточных и серверных систем, которые необходимо разработать.Каждое направление бизнеса и каждая команда имеют разные потребности Однако разработка этих систем Не все сотрудники являются профессиональными фронтенд-разработчиками, большинство из них — бэкенд-разработчики, инженеры по тестированию и т. д. -завершать системы простым и удобным способом? Примерно в 2016 году команда FeiBing запустила набор библиотек базовых компонентов FeiBing на основе React в рамках Taobao, которые были предоставлены различным командам Taobao. В то же время компонент пользовательского интерфейса сообщества на основе React библиотеки Material UI и Ant Design также начали внешний вид и открытый исходный код, появление библиотеки основных компонентов в определенной степени улучшило дизайн и эффективность разработки продукта, а также качество пользовательского интерфейса промежуточных и фоновых систем.

image | left

Изображение предоставлено: fusion.design

Эпоха построения пользовательского интерфейса: 2018 ~ xxxx, отмеченный небольшим количеством прямого использования компонентов и большим количеством прямого использования блоков и шаблонов.

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

  • материалы
    • Компонент: самый маленький элемент страницы.
    • Блоки: многократно используемые фрагменты кода
    • Шаблоны: шаблоны инженерных лесов для разных сфер
  • проект
    • Iceworks: визуальное управление проектами
    • лед-скрипты: сборка проекта

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

BLOCKS | left

PAGHS | left

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

TEMPLATES | left

проект:Для непрофессиональной фронтенд-разработки нужно не только предоставить материалы для выполнения задач по разработке мидл- и бэкенд-системы.С развитием фронтенд-сообщества, ES6, Babel, Webpack и различные проекты вокруг библиотеки управления состоянием React.Появляется и может быть сбит с толку различными сложными конфигурациями и концепциями перед запуском проекта. Для непрофессиональных разработчиков интерфейса создание инженерного проекта React — непростая задача. Как объединить методы разработки средних и внутренних проектов Taobao и предоставить набор общих решений и лучший опыт разработки, стало проблемой, над которой нужно подумать команде.

Основываясь на идее построения пользовательского интерфейса, мы запустили инструмент визуального построения графического интерфейса пользователя Iceworks, который несет в себе функции построения страницы и CLI вместо использования командной строки и процесса написания страниц и превращает его в визуальный интерфейс работы. .

ICEWORKS | left

какая проблема была решена

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

  • Предоставляя базовые компоненты, богатые материалы, шаблоны из разных отраслей и инструменты графического интерфейса Iceworks, вы можете использовать передовые методы разработки интерфейса без установки и настройки какой-либо среды разработки интерфейса (например, установки узла и т. д.), без написания создавать скрипты и т. д. Процесс прост и удобен в эксплуатации.
  • Бэкенд-разработчики обладают возможностями логического программирования, но их возможности фронтенд-разработки относительно слабы.При разработке мидл- и бэкенд-систем, благодаря официальным материалам веб-сайта, предоставленным командой FeiBing, нет необходимости в тяжелой фронтенд-странице. развитие структуры и стиля, и они могут сосредоточиться на логике и обработке данных.
  • В дополнение к официальным материалам веб-сайта, предоставленным командой Feibing, он также предоставляет инструменты для разработки материалов, которые могут быть основаны на бизнес-осадках и создавать частные материалы. иметь доступ и разработку собственных материалов.

image | left

Каков будущий план материальной системы?

  • Инструмент разработчика материалов версии 2.0 вот-вот завершит внутреннее тестирование, что позволит компаниям настраивать частные материалы.
  • Визуально предоставьте функцию стандартных блоков и визуально объедините блоки для вывода базовой страницы внешнего интерфейса, а также предоставьте точки ввода для написания бизнес-логики в инструментах построения страниц или экспортируйте исходный код основных страниц внешнего интерфейса в IDE для среднего и back-end разработка Люди разрабатывают бизнес-логику.
  • В будущем мы продолжим фокусироваться на простоте использования и конструкции материалов. В сочетании с инструментами графического интерфейса пользователя Iceworks для проведения некоторых исследований снижаются затраты на разработку промежуточной и фоновой системы.«Сделайте фронтенд-разработку простой и удобной»Это будет нашим постоянным усилием.

ICE | left

Источник изображения: @ Юань Ян

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

Категории