моя предыдущая статьяПрактика «разделения фронта и бэкенда» на уровне больших БУВыдвигаются некоторые проблемы и решения в нашей текущей фронтенд-команде, и подробно прописаны в ней统一视图服务идеи реализации и выгоды. Эта статья в основном написана о前端迭代及上下游协作效率Как мы решаем.
задний план
Наша цель — повысить эффективность итерации внешнего интерфейса, а также совместной работы вверх и вниз по течению Мы начинаем с четырех отправных точек:
Бизнес, за который отвечает команда, становится все более и более важным.Как повысить степень повторного использования ресурсов, компонентов и кодов, повысить общую эффективность НИОКР и повысить эффективность совместной работы над проектом, включает в себя весь процесс от От UE до UI, от FE до QA. Требуется сильная движущая сила и достаточное убеждение; улучшить соотношение человек-эффект, один человек превосходит трех человек, улучшить соотношение человека-эффекта для разработчиков интерфейса в проекте и сделать фронт - конец работы быстрее, больше и лучше; наконец, общий метод разбирается, и эта часть возможности повышения эффективности применяется к веб, wap и небольшим программам для реализации обобщения.
Решения
Во-первых, создать передовую систему материалов, переопределить и унифицировать стандарты начальной разработки и создать переднюю систему материальных ресурсов, включая такие ресурсы, как проектирование и модульное тестирование; во-вторых, внедрить управление на основе инструментов, улучшить инженерные системы, и унифицировать процессы и стек технологий фронтенд-разработки, чтобы обеспечить скорость повторного использования ресурсов; последнее и самое главное — это渐进式开发, потому что он определяет, может ли быть достигнута наилучшая скорость повторного использования после того, как материал будет завершен.
Общая структура
В: Что такое материал?
Ответ: согласно规范провести标准化构建, и может использоваться между разными проектами, разными командами и разными участниками.复用из任意资源. В совокупности мы называем эти ресурсы物料.
В производстве и потреблении материальных ресурсов участвуют четыре объекта: разработчики, пользователи, проектировщики и продукты/операции. С этой целью рынок материалов обеспечивает标准化Материальные ресурсы, в том числе базовый каркас блоков библиотеки компонентов проекта и шаблоны. Базовая структура представляет собой модельную структуру проекта, широко известную какboilerplate, библиотека компонентов основана на дизайне, предложенном студентами кафедрыUnion DesignСпецификация дизайна разрабатывает библиотеку компонентов внешнего интерфейса, которая поддерживает как веб-среды, так и среды размещения апплетов. Блок можно просто понимать как собранный набор компонентов, который обеспечивает более высокий уровень业务封装能力, но это также делает его менее чистым, чем библиотека компонентов, шаблон — это шаблон стиля различных сайтов, который объединяет вышеупомянутый базовый фреймворк + библиотека компонентов + блок и другие ресурсы. Позволяет разработчикам минимизировать рабочую нагрузку.
Средняя часть рисунка — это хост-среда, которая может поддерживаться, включая Интернет, мобильные устройства и апплеты. Веб-сторона может поддерживать режим инфраструктуры TypeScript + Vue/React для разработки, мобильная сторона поддерживает режим макета VW/REM, а также поддерживает гибридный режим для разработки.Детальный проект динамической схемы терминала. Кроме того, по деловым причинам мини-программы в настоящее время поддерживают мини-программы WeChat и смарт-мини-программы.
Внизу находится инженерная система, предоставляемая рынком материалов, которая предоставляет инструменты CLI и инструменты GUI. Инструменты CLI используются при разработке начальных проектов, так что FE может легко генерировать и потреблять материалы; кроме того, рынок материалов также предоставляет инструменты GUI, чтобы потребители материалов могли拖控件Способ быстрого создания прототипа проекта и разработки шаблона. Пожалуйста, подождите последующее обновление статьи для получения более подробной информации.
Вместе с нашими студентами-дизайнерами мы запустили ресурсы по дизайну, связанные с материалами, в том числеUnion DesignСпецификация проекта. Чтобы уменьшить сопротивление приземлению материалов в проекте, рынок материалов также предоставляет комплексные учебные ресурсы, включая документы и учебные пособия, а также регулярно организует обучение и обмен.
Наконец, функция материального рынка реализуется в целом.
Дизайн библиотеки компонентов
Когда мы разрабатываем библиотеку компонентов, мы в основном учитываем два аспекта:
-
Классификация компонентов
- Основные компоненты пользовательского интерфейса
- композитный компонент
- бизнес-компонент
-
граница компонента
- Операция вне границ
- побочный эффект
- инвазивный
- круговая зависимость
Во-первых, компоненты классифицируются и делятся на три уровня в соответствии с интрузивностью и чистотой бизнеса (степень повторного использования) в качестве разделительной точки, как показано на следующем рисунке:
Ключом к дизайну библиотеки компонентов является ограничение границ компонентов, каждый компонент является наименьшей единицей, которая очень независима и не может быть разделена снова. Во-первых, запретить работу компонента за его пределами, пусть он занимается только внутренними делами и не может вмешиваться во внешние дела; второй - побочный эффект, запретить (как можно меньше) иметь побочные эффекты. , если вы знаете функциональное программирование, вы будете знать различные преимущества и недостатки побочных эффектов; третий - навязчивость, запрещающая навязчивость чистых кукольных компонентов (каждый компонент в библиотеке компонентов - чистый марионеточный компонент) для бизнеса, потому что выше навязчивость, тем ниже уровень повторного использования, библиотеки компонентов труднее использовать другим, наконец, циклические зависимости внутри компонентов запрещены.
наконец понял
В окончательной реализации все разделено на четыре уровня: нижний — техническая реализация, верхний — зависимые ресурсы дизайна, а верхний — пять основных компонентов, предоставляемых библиотекой компонентов, включая основные операции, формы, представления, навигация и обработка данных и т.д. Верхний уровень — это бизнес-сторона доступа. Завершено решение библиотеки компонентов для всего front-end направления бизнеса снизу вверх.
Восходящее и нисходящее сотрудничество
Ядро процесса оптимизации эффективности сотрудничества вверх и вниз по течению效率提升а также物料复用.
-
Повышение эффективности
- Интерактивный дизайн
- модульный тест
- стоимость возврата
-
Повторное использование материалов
- обмен материалами
- генерировать и потреблять
- деловая миграция
- постепенное развитие
Общий процесс выглядит следующим образом:
物料管理а также物料使用.
Функция управления материалами предназначена для разработчиков материалов, отвечающих за поддержку, создание, создание и управление списками материалов для различных платформ, и может использовать загруженные материалы в списке управления.
Для потребления материалов предусмотрены функции предварительного просмотра в реальном времени, загрузки, использования и просмотра исходного кода материалов. Команды CLI генерируются автоматически при использовании материала, и материал можно использовать в проекте, выполнив команду в терминале.
Кроме того, некоторые функции в проекте также могут быть извлечены в качестве материалов для использования в других проектах. Это обеспечивает устойчивую итеративную и поэтапную разработку. Таким образом, совместное использование и повторное использование материальных ресурсов между разными командами, разными проектами и разными участниками завершается, а общая эффективность совместной работы внешнего интерфейса повышается.
общая выгода
Внутренний доступ к 6 проектам; 2 библиотеки компонентов с открытым исходным кодом во внутреннем NPM компании; запущено в общей сложности 4 продукта в рамках BU, а именно спецификация дизайна Union Design, @baidu/union-design, @baidu/union-design-wechat и мрамор- инструменты CLI/GUI;
С точки зрения скорости повторного использования кода основные рамки проекта составляет 46,1%, а бизнес-логика составляет 21,87%; итерационный цикл вновь развитого проекта сокращается на 23,8%, а итерационный проект сокращен на 21,4%;
наконец
Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь с автором