Фронтенд заранее заговорил о конференции и провел ее совместно с Nuggets. Добавьте codingdreamer в техническую группу конференции и побеждайте на новом стартовом рубеже.
28-я | Специальная сессия Front-end WebGL, стоит ли делать ставки на обгон углов WebGL в 2021 году, прямая трансляция 6-26 в течение всего дня, 9 лекторов (Alibaba Cloud/Ant/Meituan/Xiaomi и т. д.),Зарегистрируйтесь, чтобы сесть на автобус 👉 ):
Все предыдущие серии полностью записаны и транслируются.Начните и разблокируйте все сразу
Текст выглядит следующим образом
Эта статья представляет собой 16-ю сессию утренней предварительной сессии по компонентизации и 114-ю сессию сессии от Alibaba — Youlu.
1. Представление себя
Привет всем, меня зовут Юлу, я пришел из бизнес-платформы Alibaba Business-Experience Technology-Fusion Middle and Back Office, и теперь я отвечаю за систему компонентов Fusion. С тех пор как он присоединился к Alibaba в 2018 году, он сосредоточился на совместной работе дизайнера и фронтенда в области среднего и бэкенда, в основном для повышения эффективности НИОКР. Сосредоточьтесь на дизайне DPI, доступности, интернационализации, сквозных исследованиях и разработках и т. д. компонентов.
Сегодня я в основном поделюсь тремя аспектами, а именно:История развития эффективности фронтенда,Стандартная спецификация внешнего интерфейса,служба управления материальными потоками.
Во-вторых, история развития повышения эффективности переднего плана.
Сегодняшняя тема — «Как заимствовать активы команды управления сервис-ориентированной системой». Прежде чем говорить о том, «как», давайте посмотрим, как Али идет по этому пути.
Подводя итог развитию мидл- и бэк-офисов Alibaba за эти годы, я лично разделяю их на 4 пункта: унифицированный стек технологий, унифицированные технологические компоненты, продвижение материалов и обмен материалами:
- 1. Во-первых, унифицируйте стек технологий: каждый должен знать, что передняя технологическая система Alibaba — это React, здесь нет ни Vue, ни Angular, это единый стек технологий.
- 2. Унифицированные базовые компоненты: у Ali есть BU, такие как Taobao, Tmall, Hema, Supply Chain, Fliggy, Alipay и т. д. На самом деле, есть только две библиотеки в среднем и внутреннем направлении из такого количества BU, одна из которых Fusion. а другой - Antd. Кроме этого, никто другой или команда не делали строительство первого этажа снова и снова.
- 3. Унифицированный хостинг материалов: унификация технических компонентов может решить только проблемы основных частей, таких как кнопка и ввод. Тем не менее, есть некоторые компоненты с очевидными бизнес-атрибутами и распространенные в небольшом диапазоне, такие как устройство ввода номера банковской карты.Хотя он не подходит в качестве общего базового компонента, он подходит в качестве бизнес-компонента для использования бизнес-командой . Если есть бизнес, должны быть и бизнес-компоненты.Эти бизнес-компоненты должны (или могут) управляться унифицированным и систематическим образом, вместо того, чтобы каждая команда выполняла повторяющуюся инженерную обработку самостоятельно. Это проблема, которую необходимо решить с точки зрения размещения материалов.
- 4. Последним шагом является совместное использование материалов.Когда материальная экология развивается в определенной степени, на самом деле, в определенной степени, не должно появляться никаких новых материалов, и все новые требования могут быть предъявлены к существующим материалам для достижения. Поэтому в данном случае вполне можно рассмотреть разделение между командами, что, наверное, так и есть.
Единая библиотека компонентов
Давайте сосредоточимся на унификации базовой библиотеки компонентов и сначала рассмотрим, почему унификация необходима. На самом деле, чтобы не повторять создание колес и экономить энергию бизнеса. Для самого бизнеса нехорошо тратить много времени на создание базовой инфраструктуры, а базовая инфраструктура во внешнем интерфейсе аналогична, и повторное построение разными командами привело к большой трате ресурсов. .
На данный момент мы в основном смотрим на то, как Али может «использовать набор библиотек для решения почти всех потребностей БУ». Здесь мы в основном представляем Fusion. Его основные возможности на начальном этапе — это в основном функции + скины. Как вы понимаете, он предоставляет два пакета:
- Во-первых, скелетный пакет является базовым компонентом, который содержит такие компоненты, как Button и Table;
- Одним из них является пакет скинов, который содержит различные стили CSS.
То есть скелет, используемый для каждого бизнеса, одинаков, но используемый пакет скинов отличается.Благодаря сочетанию пакета скина + компонента скелета пользователи могут получить набор компонентов системы, подходящий для текущего BU. Мы также предоставляем услуги на основе платформы, так что дизайнеры и разработчики каждого BU могут напрямую настраивать отдельные компоненты на веб-сайте для создания пакетов скинов, отвечающих требованиям бизнеса.Возможности конфигурации включают края, углы, линии и цвета. , тени и другие базовая конфигурация, включая детальную настройку каждого компонента.
Это две основные точки сравнения.Конечно, есть и другие возможности, такие как генерация одним щелчком соответствующих материалов Sketch для непосредственного использования дизайнерами.
Это диаграмма архитектуры версии 1.0. Нижний уровень этого набора возможностей опирается на абстракцию теории проектирования. На основе схемы проектирования абстрагируются два набора скелетных компонентов — сторона ПК и мобильная сторона. Теперь ПК сторона — это стек технологий React, а мобильная сторона — это стек технологий React. Это стек технологий Rax. Эта система компонентов является ядром всего Fusion. Мы называем ее скелетным компонентом. , который в основном используется дизайнерами.
Предоставьте видео, чтобы все могли понять процесс этой онлайн-настройки. Например, цветные углы, тени, линии и т. д., это относительно унифицированный дизайн, и дизайн стандартизирован.Помимо этих общих стилей, вы также можете настроить некоторые стили компонентов. Например, если я спроектирую кнопку отдельно и изменю ее углы с прямого угла на стиль с закругленными углами, это можно сделать на этой платформе. Я только что упомянул, что возможности этой платформы зависят от абстракции базового дизайна, а это означает, что она на самом деле ограничена, но этого ограничения на самом деле достаточно в промежуточных и закулисных сценариях.
Следите за видео, чтобы оно в конечном итоге создало пакет темы в формате npm. Этот пакет будет записывать всю информацию о стиле, импортировать ресурсы стиля этого пакета темы в бизнес-проект, а затем посещать страницу, вы можете видеть, что стиль страницы изменился.Это демонстрация основных возможностей скинов Fusion и это еще и набор библиотек компонентов, которые поддерживают али.Основа для очень многих БУ.
Объясните принцип, способность скининга использует Sass (эти способности есть у Sass и Less). «Компонент скелета», предоставляемый Fusion, включает раздел «Логика JS» и раздел «Тело стиля Sass», а «Пакет пользовательских скинов» включает раздел «Переменные Sass». Мы компилируем «тело стиля Sass» и «переменные Sass», а также компилируем файл CSS файла стиля, который браузер может анализировать и получать к нему доступ. Бизнес-проект представляет два файла, JS и CSS, чтобы, наконец, удовлетворить требования различных систем дизайна BU. .
По сути, 4 года назад у Fusion уже была эта возможность, она не статична, мы продолжаем внедрять инновации на их основе, продолжаем итерации и поддерживаем некоторые другие функции одну за другой:
- Доступность: это в основном для некоторых людей, у которых есть трудности с доступом к веб-страницам, таких как слепые люди и т. д., и поддерживает программы чтения с экрана. В основном он следует некоторым спецификациям W3C и оптимизирует сам компонент.
- Интернационализация: возможности интернационализации компонентов также были значительно улучшены, в основном за счет относительно хорошей поддержки режима RTL (справа налево). В некоторых арабских странах читается справа налево.
- Переменная CSS: в то же время, в этом году он поддерживает возможность онлайн-скина переменной CSS.С помощью возможностей браузера переменные CSS можно использовать для скина, а автономная конфигурация изменена на онлайн-переключение.
- Возможность работы с несколькими терминалами на одном дворе: это относится к однократной разработке, ее можно просматривать как на ПК, так и на H5, а опыт версии H5 близок к собственному опыту. Поскольку Fusion в основном обслуживает мидл и бэк-офисы, хотя все по-прежнему пользуются компьютерами, когда идут на работу, например, когда товары закладываются на склад, товары выставляются на полки и заполняется информация по товарам в открытом доступе, это может быть более удобным на стороне компьютера, но в некоторых особых сценариях также будут требования H5. Например, сотрудники Hema используют больше мобильных устройств, таких как устройства для сбора и POS-машины, при работе с некоторыми продуктами на полках и вне их.
Возможность создания скинов в версии Fusion1.0 требует сотрудничества с Sass, а браузер на самом деле не распознает синтаксис Sass, поэтому необходимо генерировать файлы CSS путем компиляции. Переменные CSS вообще не имеют к этому никакого отношения: они распознаются браузерами, и их синтаксис распознается спецификацией W3C. Таким образом, нам нужно только заменить часть стиля, от полного файла CSS до двух файлов CSS, один из которых является телом стиля, а другой — файлом определения переменных CSS. Это может удовлетворить потребности онлайн-конфигурации, в то время как переменные CSS более эффективны и быстрее.
Из заголовка видно, что «система Sass модернизирована для поддержки системы переменных CSS», а это значит, что самому Fusion по-прежнему нужна система Sass, а система переменных CSS не может полностью заменить Sass (пользователи могут избавиться от Sass) . Основная причина в том, что Sass имеет некоторые возможности, которых в настоящее время нет у переменных CSS.
- Первая проблема, с которой мы столкнулись при поддержке переменных CSS, заключается в том, что изменения должны быть небольшими, мы не хотим проводить рефакторинг, и цель не состоит в том, чтобы заменить весь код Sass в среде разработки на CSS, поэтому наше окончательное решение:Изменить вывод только скриптом. Потому что пользователю важны только файлы, которые он использует, например, раньше мы предоставляли ему CSS и даже предоставляли Sass и Less (конечно, мы не рекомендуем Less с точки зрения унификации экосистемы Alibaba). Таким образом, при разработке базовой библиотеки компонентов по-прежнему используется схема переменных Sass, но на этапе упаковки сопоставление переменных Sass с переменными CSS создается с помощью сценариев, а сопоставление и код используются для компиляции нового файла с переменными CSS. .
- Когда вы сталкиваетесь со второй проблемой, если вы используете компиляцию скриптов, вы столкнетесь с такой проблемой, то есть хотя переменные CSS и переменные Sass являются переменными, они фактически управляют разными областями видимости, а переменные CSS имеют более ограниченные возможности. Например, более точным именем для переменной CSS должно быть «настраиваемый атрибут», что означает, что ее позиционирование на самом деле похоже на фон, цвет, шрифт и т. д. Он не может изменить имя класса, например
.next-buttonТакое имя класса на самом деле нельзя изменить, поэтому с точки зрения контроля он не может этого сделать, что является ямой. - Третий сложный момент это метод функции.В Sass есть много функций которых нет в CSS вообще.Функции которых не существует проще решить.Есть яма которая является одноименной функцией например
rgba()Метод, в CSS, он думает, что RGBA (№ 000, 0,5) является незаконным, и особенность CSS является незаконной и не сообщит об ошибке, не более того, она не вступит в силу. И SASS может правильно распознавать его как черный с непрозрачностью 0,5. Это также их разница. - Наконец, будет некоторая часть, связанная с математическими вычислениями в процессе преобразования, и математические вычисления SASS могут в основном соответствовать нативным CSS.
calc()Есть некоторые ямы, чтобы представить вам:-
calc()До и после операторов сложения и вычитания должен быть зарезервирован пробел, в противном случае он недействителен, но есть некоторые места, которые легко игнорировать, например, перед calc() не допускается знак минус,-calc(1px)нужно записать какcalc(0px - 1px); -
calc()Если есть конкретное значение, пожалуйста, четко напишите единицу измерения, напримерpx, не писать единицы измерения запрещено в большинстве свойств css (кроме высоты строки).
-
Вот несколько интересных моментов, которыми можно поделиться с вами. Если вам интересно узнать больше, вы можете обратиться к статье Zhihu. Здесь описан весь процесс преобразования, который поддерживает скин переменных CSS во время выполнения.«✨Настраиваемая способность FusionNext обновлена из системы Sass для поддержки переменной Css».
Теперь, если по консервативным оценкам Alibaba, существует более 7000 проектов, использующих Fusion, а затем охватывающих более 300 команд.Это всего лишь консервативная статистика.На самом деле их должно быть больше. Вы можете видеть, что на картинке выше 4. Стили каждой команды на самом деле разные, но на самом деле они используют набор библиотек, который является унифицированными базовыми компонентами.
Хостинг материалов
Третьим в истории развития повышения эффективности фронтенда является хранение материалов Что такое хранение материалов и зачем оно существует? Для бизнеса недостаточно иметь базовые компоненты.Каждая команда имеет некоторые компоненты с сильными бизнес-атрибутами.Например, финансовой команде могут потребоваться компоненты для конвертации валюты.Это совсем не для складской команды Cainiao Это необходимо, поэтому каждая команда будет строить свою библиотеку бизнес-компонентов на основе унифицированных базовых компонентов.Это мелкомасштабный план повышения эффективности, и этот план, безусловно, правильный.
Но на уровне группы, что мы можем сделать для бизнес-команды, чтобы они могли лучше поддерживать этот набор компонентов? Таким образом, третья точка размещения материалов на самом деле является расширением построения инфраструктуры верхнего уровня.Мы надеемся предоставить некоторые такие базовые услуги верхнего уровня для достижения цели здоровой итерации материалов.
- Обеспечьте здоровую итерацию активов компонентов: бизнес-компоненты должны иметь демонстрационные примеры, документы API, часто задаваемые вопросы и т. д. Не только разработчики знают, как их использовать;
- Все активы могут быть проверены и доступны: новые студенты могут быстро ознакомиться с существующими активами через платформу после присоединения и ускорить скорость новичков, чтобы начать работу;
- Опрометчивое использование других типов активов: блоков, бизнес-компонентов, шаблонов и т. д. (таких как чистые исходные проекты, вместо прихода и ухода новых проектов, копирование старых проектов и их последующее удаление);
- И так далее по другим вопросам...
Это технические возможности нижнего уровня.Чтобы избежать повторного ввода персонала, мы только сейчас добавили набор возможностей, называемый размещением материалов на основе архитектуры Fusion, чтобы гарантировать, что материалы являются здоровыми, итеративными, доступными и всеобъемлющими. . . .
обмен материалами
Четвертый момент - это обмен материалами, который также идет как мы сейчас идем. Когда пользователь использовал возможность размещенной мощности материалов, он использует унифицированный разработок инструмента в соответствии с указанным форматом, который представляет материал. Он может видеть материал в общественной платформе и даже классифицировать в соответствии с командой. Когда эти материалы находятся на одной платформе, мы можем сделать больше вещей, таких как обмен материалами, общий раздел скрещивания команд.
Совместное использование материалов не означает, что их можно использовать при их принесении, например, команда мерчанта Ele.me получает запрос на систему управления товарами, которая может включать в себя перечисление товаров, заполнение информации для удаления их и так далее. Возможно, эти функции уже реализованы в командах Taobao и Fliggy, логика аналогична: добавлять, удалять, изменять и проверять. По сути, этот бизнес-одноклассник, который подходит для Ele.me, может стоять на плечах своих предшественников: когда он обнаруживает, что другие команды уже сделали эти функции, он может принести материалы, подкорректировать детали и быстро повторно использовать их в сети.
Поскольку предпосылка совместного использования материалов на самом деле является характеристиками миддл и бэкэнд полей, то есть спецификация дизайна унифицирована, а логика начального этапа очень похожа, потому что миддл и бэкенд добавляют друг к другу, удаление, изменение и проверка макета формы.Если мы построим экологию в достаточной мере, в дополнение к тому, что я только что сказал, строительство между командами может быть быстрее, тогда можно даже сказать позже, что дизайнеры и фронтенды могут быть не нужны.PD может выбрать некоторые из существующих экосистем, которые он хочет использовать. Мы создадим более комплексные возможности. На строительной платформе PD можно напрямую настроить в соответствии с параметрами, и его можно будет выпустить в Интернете.
Это то направление, над которым мы работаем.Согласно этому направлению мы разделили его на три сервиса,локальные сервисы,стандартные онлайн-сервисы и экологические сервисы.Эти три сервиса отвечают за разные этапы.Это можно сказать текущий обслуживание.Система является общей структурой нашей управленческой команды для создания активов.
Суммировать
Это путь Alibaba для повышения эффективности в мидл- и бэк-офисах. Я считаю, что методология последовательна. Этот путь также характерен для компаний, которые не так велики, как Alibaba. Уточнить два момента, которые я считаю более важными, и поделиться ими с вами, а именно «стандартная унификация» и «конструкция платформы».
3. Стандартные технические характеристики внешнего интерфейса
нормативная система
На приведенном выше рисунке показаны отношения включения от поверхности к точке: стандартизированная система > средние и базовые спецификации > спецификация бизнес-компонента. Это совместное использование также является кратким введением от поверхности к точке в соответствии с этим путем.
Что может содержать всеобъемлющая стандартная спецификация внешнего интерфейса? Кратко разобравшись, обратимся к картинке выше.
- Соглашение о кодировании, наличие точки с запятой в конце инструкции, перенос последней строки, отступ 4 или 2 пробела и т. д. Конечно, есть также некоторые очень полезные инструменты, такие как Prettier, ESLint и т. д., которые помогут нам в этом. Предпосылкой использования этих подключаемых модулей инструментов является наличие спецификаций.
- Технические спецификации, например, как пользователи отправляют код, будь то Git или SVN, какой формат является форматом отправки, как писать информацию о коммите, на китайском или английском языке, исправлять ли ошибку с адресом задачи, в каком формате и т. д. .
- Спецификация документа, как должен быть написан документ? Как написать Чанлог?
- Согласно различным бизнес-атрибутам, также есть спецификация моста JS (страница H5 и возможность звонить каждому приложению) SupplyAgent Speciation (как определить ли я на Taobao, Taobao на iOS или Taobao на Android).
- Спецификация материала для среднего и заднего офиса (может быть уникальна для ALI).
- Все в мидл- и бэк-офисе описывают протокол (который может быть уникальным для Али).
Для такой стандартной спецификации внешнего интерфейса у каждой команды может быть свое содержание спецификации. Например, вашей команде может не понадобиться спецификация JS Bridge, поэтому она не будет включена. Некоторые команды могут захотеть поместить эту спецификацию API во внешний и внутренний интерфейсы, так что вставьте ее. Вышеупомянутые спецификации относятся к системе спецификаций внешнего интерфейса.Такое соглашение в определенном диапазоне является основой для повышения эффективности, а также необходимой предпосылкой для крупномасштабного и систематического внешнего интерфейса.
Технические характеристики среднего и бэкстейджа
Сегодня я действительно хочу поговорить о ключевом моменте, который является спецификацией материалов в мидл- и бэк-офисах.Эти новые спецификации материалов, которые мы добавили, являются системами спецификаций внешнего интерфейса.Такого рода соглашение в определенном диапазоне является основой для материального хранения и обращения, а также требования к интерфейсу.Хотите сделать предпосылку крупномасштабной систематизации. У Alibaba слишком много мидл- и бэк-офисов, у Tmall — мидл- и бэк-офисов, у Taobao — мидл- и бэк-офисов, в цепочке поставок — мидл- и бэк-офисов, у Hema — мидл- и бэк-офисов, у Ele.me — мидл- и бэк-офисов... Все Унификация «средних и внутренних спецификаций» является основой для общения и диалога между средними и внутренними научно-исследовательскими платформами Alibaba Group.
Какие проблемы решают средние и внутренние спецификации Ali и каково их содержание? Размещение материалов и совместное использование материалов неотделимы от материалов, а материалы составляют страницу.многоразовый блок, которые можно разделить на базовые компоненты, бизнес-компоненты, блоки и шаблоны в соответствии с разной степенью детализации, а также на: материалы ProCode и материалы LowCode в соответствии с различными моделями исследований и разработок.
Спецификация в основном подробно описывает материал из раздела определения содержания и структуры:
- Разделительные элементы: в спецификации материала Ali для промежуточной и конечной частей структуры, обычно используемые во внешнем интерфейсе, разделены, и определены некоторые общие термины, такие как бизнес-компоненты, блоки, шаблоны и т. д.;
- Структура исходного кода: каждый тип материала имеет определение структуры исходного кода. Как правило, это относится к некоторым файловым структурам, спецификациям каталогов и т. д. в рамках традиционного метода разработки интерфейса;
- Структура с низким кодом: каждый тип материала имеет определение структуры с низким кодом, которое обычно относится к набору спецификаций описания схемы.
Схема разделения элементов структуры страницы.
Спецификация бизнес-компонента
Взяв за отправную точку «бизнес-компоненты», дается краткое введение в текущее состояние нормативного исходного кода и конструкции.
Прежде чем стандартизировать исходный код бизнес-компонентов, добавьте балл знаний, стандартную оценку. Со ссылкой на спецификацию, указанную W3C, стандарты делятся на три категории:
- A: Обязательная спецификация, должна быть реализована;
- AA: рекомендуемая спецификация, рекомендуемая реализация;
- AAA: обратитесь к спецификации и внедрите ее в соответствии с фактическими требованиями бизнес-сценария.
На уровне бизнес-компонентов, таких как «Спецификация каталога», «Спецификация API» и т. д., все стандарты уровня A и должны быть реализованы; «Спецификация интернационализации» и «Спецификация переключения тем» являются стандартами уровня AA, которые являются рекомендуемыми, но не обязательными. «Спецификации доступности», «Технические характеристики проекта эскиза» и «Спецификации кросс-конца» — все это стандарты AAA, которые реализуются в соответствии с потребностями бизнеса. Эти спецификации не реализованы в максимально возможной степени, но должны относиться к реальному бизнесу.Если бизнесу это не нужно, нет необходимости тратить усилия на разработку для его реализации.
Описание вращается около двух классов спецификаций:
- Спецификация каталога: Спецификация каталога исходного кода бизнес-компонента Alibaba показана на рисунке выше Он требует, чтобы существовала структура для создания продуктов (
build/lib), должен иметь документацию (README.md), должен иметь демо-версию с возможностью предварительного просмотра и т. д. Эта структура может быть использована в качестве эталона для всех. - Спецификации API: перечислите некоторые спецификации API, как показано на рисунке.
| стандартный | Парафраз |
|---|---|
| Основные правила | API использует маленький верблюжий регистр, например defaultVisible ; имена компонентов используют большой верблюжий регистр, например Menu, DatePicker |
| общее наименование | Обычные соглашения об именах, такие как размер, направление, видимое, отключенное, htmlType |
| мероприятие | Стандартные события или пользовательские события, совместимые с w3c, должны начинаться с on, например onExpand. |
| спецификация формы | Поддержка контролируемого режима: значение управляет отображением данных компонента; onChange — это функция обратного вызова, когда происходят изменения |
| передача собственности | Неосновные атомарные компоненты в составных компонентах должны передавать параметры через xxProps, например Select поддерживает popupProps. |
| Перечисление с множественным выбором | Реализовано перечислением массивов, например, Dialog поддерживает closeMode={['close', 'mask', 'esc']} |
Это спецификации структуры исходного кода бизнес-компонентов.Преимущество унификации спецификаций заключается в том, что компоненты, разработанные студентами факультета Дао, могут напрямую использоваться студентами Ele.me.Поскольку спецификации компонентов унифицированы, они могут полностью соответствуют среде разработки всех БУ, при этом привычки использования компонентов полностью совпадают, не будет конфликтов в названиях и вообще не будет дискомфортных ощущений при их использовании.
В дополнение к спецификациям исходного кода, спецификации Ali для внешнего, среднего и внутреннего интерфейса также включают спецификации конструкции.Строительство не является предметом сегодняшнего обсуждения.Если есть компании, которые хотят разработать свои собственные системы построения, вы можете обратиться им.
Существует три типа спецификаций бизнес-компонентов:
- Основная информация (A): основная информация, описывающая компонент, обычно включает информацию о пакете, имя компонента, заголовок, описание и т. д.;
- Информация описания атрибута (A): описывает информацию атрибута компонента, обычно включает 4 элемента параметров, описание, тип и значение по умолчанию;
- Конфигурация возможностей/расширение возможностей (A/AA): рекомендуется оптимизировать процесс редактирования при создании продуктов и настраивать информацию о конфигурации возможностей редактирования.
Суммировать
По сути, стандарты и нормы фронтенда подобны законам, они развиваются и отвечают интересам большинства людей. При построении собственных командных норм вы можете ссылаться на следующие комментарии:
- Во-первых, должна быть стандартная спецификация, но само собой разумеется, что она должна дополняться на одном дыхании, ее можно дорабатывать постепенно, например, средние и фоновые стандарты добавляются позже.
- Стандарты учитывают существующие реалии бизнеса. Например, если проект в команде разрабатывается с помощью Vue, то не форсируйте изменения в React, а учитывайте бизнес-реальность вашей команды. При выполнении спроса бизнес ограничен, и технология не может быть обновлена ради обновления.
- Последний момент заключается в том, что для реализации стандарта требуются инструменты для обеспечения, то есть служба управления материальными потоками в следующей главе.
В-четвертых, служба управления материальными потоками
История и преимущества
Нормы, упомянутые в предыдущей главе, — это всего лишь мягкие ограничения, как заставить всех следовать этим нормам? Лучший способ - использовать инструменты.Как этот инструмент сделан под систему Али, и почему он в его нынешнем виде?
- Строительство цокольных этажей,Помогите стандартизировать лендинг: Набор систематизированных и непосредственно доступных сервисов поможет спецификации лучше реализоваться, иначе спецификация - это просто пустой треп;
- Единое управление группой,Исследования и разработки на основе данных повышают эффективность: Чтобы создать унифицированный интерфейсный сервис для группы, вы можете оценить статус материалов группы с глобальной точки зрения. Все данные о производстве материалов, данные о потреблении и т. Д., Анализ данных может способствовать обновлению материалов и повышению эффективности НИОКР, а также обратной связи для бизнеса.
Лучшие практики
Вот видео, демонстрирующее результаты:
- Создать материал (локальный сервис): создать склад материалов, выбрать свойства склада, например React или Rax, выбрать тип материала, например бизнес-компоненты, шаблоны блоков и т. д. Затем установите некоторую информацию, чтобы получить инициализированный проект, а затем выполните разработку в этом проекте.
- Релизный материал (локальный сервис): релиз на самом деле является релизом npm после завершения релиза.
- Синхронизация материалов (локальная служба, стандартная служба материалов): нам нужно связать только что выпущенный материал с командой. После ассоциации вы можете увидеть компоненты, только что выпущенные на платформе под вашей собственной командой. Ссылаясь на видео, вы можете увидеть систематизированную страницу для хранения всех материалов команды.
- Выбор материалов (экологические услуги): На основе материалов вашей собственной команды вы можете использовать свои собственные материалы или выбирать материалы, разработанные другими на рынке материалов. Например, я искал компонент HelloWorld, и мне очень понравилась красная версия, я могу добавить его в свою систему материалов и использовать как часть материала моей команды.
- Используйте материалы (материальные стандартные услуги, экологические услуги): просматривайте документы на странице, используйте инструменты ледяных работ и т. д. и устанавливайте их в локальные проекты для использования одним щелчком мыши.
Это полный демонстрационный процесс.
как построить
Целью всей компонентизации интерфейса является повышение эффективности, а последующее развитие фактически основано на повышении эффективности использования материалов, а управление материалами, естественно, стало частью повышения эффективности.
- Для команд, у которых нет плана и энергии для создания собственных служб управления материалами, рекомендуется напрямую использовать возможности управления материалами, которые Али открыл для внешнего мира —fusion.design
- Для студентов, которые планируют строить или хотят понять принцип, лежащий в основе этого, вы можете обратиться к приведенной выше архитектуре. В целом, он предоставляет два типа возможностей: один — это сервисы SaaS на платформе, пользователи могут напрямую создавать и поддерживать свои собственные командные страницы на платформе; другой — возможности SDK, которые предоставляют различные открытые API для сильных сторон. используется обращение.
V. Обзор и резюме
Резюме с вами, резюмировать сегодняшнюю долю, в основном, как показано на рисунке три содержание.
6. Время рекламы
Настало время рекламы, давайте вместе строить и улучшать эту систему обслуживания и создавать больше возможностей~ 💃
представление команды
Техническая команда Alibaba Business Platform Division Experience, влюбленная в технологии, стремится продвигать бизнес, смело встречает вызов большой передовой команде ~ 👉Знай колонку.
Наш стыковочный бизнес: транзакции, товары, участники, оценки, магазины. Короче говоря, это основная бизнес-платформа замкнутой системы электронной коммерции. Помимо предоставления десяткам миллионов потребителей возможности использовать разработанную вами страницу транзакций для покупки, покупки и еще раз покупки, у вас также есть возможность позволить миллионам разработчиков разрабатывать более интересные продукты с использованием предоставленной вами библиотеки с открытым исходным кодом. быстро и онлайн создавать страницы десятков миллионов продавцов? Если вы хотите знать, как ссылка для транзакции за Double Eleven может выдержать огромный трафик, вы правы ~
В то же время у нас также есть несколько продуктов с открытым исходным кодом и их активные сообщества:
- Fusion: решение для среднего и фонового пользовательского интерфейса корпоративного уровня;
- ARMS: Служба мониторинга приложений в режиме реального времени;
- BizCharts: Визуальные решения для мидл- и бэк-офиса предприятия.
одноклассники, которых вы можете знать
- Ziqian: мастер команды опытных технологийпонять больше;
- Цинь Юэ: знаменитость сообщества Node, евангелистпонять больше;
- У Цзы (Ронг Сяньцянь): руководитель центра дизайна Alibaba и центра разработки технологий бизнес-платформыпонять больше;
- Six Monkeys: Углубленное развитие системы безопасности на протяжении многих лет.понять больше;
- Temptress Moon: Женщина из выпускника переднего медицинского университета, отвечает за команду службыпонять больше;
- Лянлян (Чэнь Цянь): руководитель группы Fusion Designпонять больше.
ждать тебя
- Отдел бизнес-платформы — Технический эксперт по внешнему виду — Ханчжоу;
- Наша команда на протяжении многих лет набирает студентов для фронтенда и клиентской стороны на должности P6/P7/P8 Мы с нетерпением ждем встречи с вами в будущем, кто любит технологии и использует технологии для упрощения бизнес-инноваций! !
- Адрес доставки резюме:youlu.zgy@alibaba-inc.com.
Книга Рекомендации
"потрясенный! Philosophy is So Good" Учебник по философии, он объясняет многие философские термины, как словарь, с умными картинками, и вы можете получить много советов по рисованию~
Не забудьте 28-ю | Специальную сессию Front-end WebGL, делать ли ставку на обгон WebGL в 2021 году, прямая трансляция весь день с 6-26, 9 лекторов (Alibaba Cloud/Ant/Meituan/Xiaomi и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Все предыдущие эпизоды полностью записаны и доступны для покупкигод проходитРазблокировать все сразу
Типа, Марк.