Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную внутреннюю группу поддержки конференции и выиграйте на новой стартовой линии.

14-я сессия Front-end Growth and Promotion, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):

Текст выглядит следующим образом

Текст выглядит следующим образом

Эта статья является 37-м лектором и 7-й сессией сеанса раннего чата по интерфейсу - специальной сессии по микро-интерфейсу по интерфейсу, поделилась Юси с Флигги - краткая отредактированная версия лекции (для полной версии, включая демо, пожалуйста, посмотрите записанное видео и PPT):

предисловие

Привет всем, я Fliggy Frontend Yuxi. Тема, которой я делюсь сегодня, это "Как реализовать Micro-Frontend Integrated Operation Workbench". Прежде всего, я кратко представлюсь. Меня зовут Yuxi, и мой внешний сетевой идентификатор это Tw93.Время тратится на внешнее влияние интерфейсной технологии Fliggy, а также на публичный аккаунт Fliggy F2E, в котором работает фронтенд-команда Fliggy, иКолонка самородков, чтобы познакомить всех с конструкцией внешней системы Fliggy.

Обзор

В предыдущих 2017, 2018 и 2019 годах было выполнено строительство Fliggy Weex, Interactive и Serverless от 0 до 1. В этом году 20 лет в основном посвящены созданию интегрированного операционного рабочего места Fliggy с микроинтерфейсом, которое является тема поделилась сегодня.

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

1. Зачем Fliggy Integrated Operation Workbench

Развитие операционных атрибутов Флигги

В 2012 году, во время беспроводного процесса Ali ALLIN, в то же время было создано приложение Fliggy, которое эквивалентно атрибуту инструмента, который используется для быстрого запроса информации о билете для пользователей; примерно через 14 лет атрибут инструмента постепенно обогащалась.Популярность Double Eleven постепенно превратилась в атрибут маркетинга и продаж.В то время постепенно создавались различные маркетинговые платформы.

Примерно в 2017 году, когда основное внимание уделялось функционированию сцены, в том числе теме выездных супермаркетов, хороших мест для выходных и т. д., в это время постепенно росли платформы для шоппинга; спустя 18 лет, с популярностью Douyin/Live, Тип работы Fliggy также изменился, стал более обогащенным, эволюционировал от темы к содержанию.

С постепенным обогащением и развитием бизнеса различные внутренние операционные платформы Xiaoer также меняются с «доступный буст"Прошлое"Интенсивное земледелие«Разработка, с построением рабочей среды интеграции операций, в настоящее время находится на стрелке на рисунке ниже.

Болевые точки в процессе разработки

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

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

Во-вторых, что делать

Чтобы решить вышеуказанные болевые точки, мы запустили проект по созданию интегрированного операционного рабочего места, целью которого является предоставление более качественных и эффективных решений операционной платформы для студентов-операторов с помощью исследования и обновления новых технологий.Цель первого этапа — изучите технологическую сторону и завершите верстак.Удовлетворить использование многоплатформенных сценариев и ускорить набор микроинтерфейсных решений для универсальных операционных платформ на основе существующих предприятий..

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

Нижний уровень опирается на систему Ant Design и возможности qiankun, а средний уровень помогает инструментальным средствам интеграции со спецификациями, которые соответствуют существующим бизнес-сценариям; верхний уровень накапливает возможности составных виджетов для взаимодействия различных функций и в то же время Станьте комбинированным источником существующих подприложений; на верхнем уровне находится главное приложение верхнего уровня рабочего места Fliggy, включая общую структуру, быструю навигацию, управление входом в систему и набор сценариев работы, включая решение SOP для бизнес-операций, которое будет реализовано в будущем.

3. Как сделать

Глубина передней стороны с использованием совместного строительства qiankun

На стороне переднего плана мы глубоко используем и совместно создаем qiankun, Загрузка между базовыми приложениями qiankun использует single-spa, а верхний уровень реализует возможности верхнего уровня, такие как изоляция стилей, песочница js и предварительная загрузка, обеспечивая при этомumi-plugin-qiankunЧтобы решить проблему быстрого использования под umi, он стал нашим основным выбором.

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

Помимо микрофронтенда, на фронтенде есть роутинг, на самом деле он включает в себя еще больше вещей, которые можно сделать, в том числе интеграцию общедоступных ресурсов, таких как AntD, Loadsh, Router и других унифицированных больших версий, которые обрабатываются путем написания umi-externals-url, что позволяет сократить почти 1/3 ресурсов; в том числе с точки зрения измерения опыта, мы можем использовать внутренние возможности для проведения иерархического анализа пользователей, включая мониторинг производительности ошибок; удобно для прямого обратная связь и уведомление о прямой отправке вопроса соответствующим ответственным одноклассникам в процессе использования.

Самостоятельно построенный унифицированный шлюз на стороне бэкенда взаимодействует с основным и под-приложениями.

Что касается серверной части, мы создали промежуточное ПО Gateway на стороне Node рабочего места., основная зависимостьhttp-proxy-middlewareВозможность добиться, позаимствовать интерфейс переадресации прокси-сервера и добавить токен в запрос наРешить разрешения на вход в интерфейс и междоменныеВ то же время для прямого доступа к основному и вспомогательному приложениям будет проблема, связанная с тем, что разрешения на вход в интрасеть недоступны.Здесь мы используемАвторизация без входаВозможность входа в подприложение предоставляется самим основным приложением, поэтому мы можем предоставитьqiankun prВозможности настройки Fetch и база имен подчиненных устройствЭто может решить проблему совместимости запроса и перехода по маршруту.

Бизнес-компонентизация виджетов

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

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

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

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

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

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

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

Такое же единство: никаких метаний, общий уровень соответствует Ant Design. Отображение одного и того же типа/функционального модуля единообразно;
Удобное выравнивание: выравнивание сделает страницу или учащихся с ОКР удобными. Заголовок, кнопка, форма, классы коллекций тегов должны обеспечивать выравнивание;
Необычно убрать: убрать неважный контент, чтобы пользователи могли найти ключевые точки выполнения. Форма класса скрывает или помещает редко используемый контент в ящик;
Просто и беспрепятственно: сообщите новым пользователям о следующем шаге, не читая руководство, и не позволяйте пользователям не перейти к следующему шагу по причинам XXX.

Например, следующий дисплей:

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

Например, осаждение формы FormRender, мы можем использовать эту возможность для создания большого количества страниц формы, и в то же время отображение может полностью контролироваться серверной стороной, что может обеспечить отображение на основе протокола, более детали можно увидетьalibaba/form-render.

В-четвертых, что вы хотите сделать позже

Это то, что мы сделали на первом этапе. На следующем этапе основное внимание будет уделено развитию SOP-возможностей сцены. В то же время мы выполним безумные улучшения производительности на среднем уровне. , Нижний уровень будет более абстрактным и стандартизированным.Сформируйте унифицированные возможности инициализации и выпуска в разработке.

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

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

Добро пожаловать во Флигги

Время рекламы истекло. На самом деле, команда разработчиков Fliggy является относительно сильной командой разработчиков в Али. Команду возглавляет большой P9. В состав всех членов входят зрелые люди с высоким уровнем P и молодое свежее мясо. Все очень открыты в технических идеях.Дни рождения, команды и выезды за границу - это очень весело.

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

Ну и наконец, пожалуйста, обратите внимание на официальный аккаунт фронтенда Fliggy, в нем много статей о системном построении, которые стоит прочитать!

За последние два года Скотт заметил, что фронтенд-индустрия полностью вошла в глубокую зону конкуренции: фронтенд-ТЛ компаний всех размеров только что вступили в должность и впервые возглавили команду. Для группы фронтенд-инженеров, как они должны управлять людьми и директорами, создавать платформу для получения результатов и помогать расти. Создайте эту группу для обучения и обмена техническими директорами фронтенда, чтобы учиться и расти друг у друга в подбор и удержание людей Порог для вступления в группу это наличие у вас сплошной или пунктирной линии ведущей команды Пожалуйста добавьте Скотта WeChat: codingdreamer Пригласите вступить в группу, обратите внимание на заявку Отметка "Войти в группу управления" "

В этой статье используетсяmdniceнабор текста