если я фронтенд-лидер, расскажите о построении системы фронтенд-фреймворка

внешний интерфейс внешний фреймворк
если я фронтенд-лидер, расскажите о построении системы фронтенд-фреймворка

В этом выпуске поговорим о фронтенд-фреймворке.

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


Схема статьи




Что такое кадр?

Это не первый раз, когда я говорю о «фреймворке». Является ли React фреймворком? Является ли Vue фреймворком? Строго говоря, нет, это просто решение для представления, и единственное, что здесь можно считать фреймворком, — это Angular.

Если внутренняя структура вращается вокруг数据存储’, то основой фронтенд-фреймворка является библиотека представлений, ведь основная работа фронтенда — это представление. Вот почему внешняя экосистема обычно вращается вокруг библиотек представлений. так,Основой внешнего интерфейса является библиотека «представления»..

По сравнению с бэкенд-фреймворками (Rails, Django, Laravel...) зрелых интерфейсных фреймворков не так много.


Что такое кадр?


См. пример. ОткрытымUmiJS, который описывает себя как:

Подключаемая платформа корпоративных приложений React

ключевое словоПредприятие. Что такое бизнес-класс, я сам не знаю. Все, что я знаю, это то, что React не говорит, что это корпоративный уровень, как и Koa, Express, ноEggjsиUmijsговорят, что ониКорпоративная структураAngular также часто ассоциируется с понятием уровня предприятия, есть Java на уровне языка.

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


  • Это интеграция эффективных + зрелых решений
  • Сосредоточьтесь на всей производственной цепочке, а не на отдельном звене
  • Есть более сильные ограничения и ограничения
  • более жесткие требования. Производительность, масштабируемость (для удовлетворения различных потребностей), надежность, стабильность, доступность, безопасность
  • стандартизация
  • Проверено в производственной среде, есть многочисленные гарантии дела

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


Дайте определение.


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


выгода:

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

вред:

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


История развития фронтенд-фреймворка

Стадия просветления фреймворка

До того, как React и Vue стали популярными, уже существовало множество «интерфейсных фреймворков», таких как Angular, Ember, Backbone...

Большинство из них были вдохновлены бэкенд-фреймворками, которые были самыми популярными бэкэнд-фреймворками, такими как Rails. Так что вы увидите на них множество теней back-end фреймворков.

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



дикий период роста

С ростом популярности NodeJS и все более мощного языка JavaScript фронтенд-инжиниринг постепенно углубляется. После появления такой библиотеки представлений, как React, многие вещи были сломаны и переработаны.

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

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



Период интеграции с фреймворком

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

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

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

Изображение выше взято из PPT.

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



Каковы существующие рамки?

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

Давайте взглянем на существующие «интерфейсные фреймворки» Сейчас наиболее популярными «фреймворками» в сообществе являются Angular, Next.js, Nuxt и Umi. Мы сравним некоторые из их функций по горизонтали и обнаружим, что они в основном содержат следующие вещи:


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

В ответ на эти потребности разные системы имеют разные стратегии выживания:

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

У нас также есть собственная стратегия выбора:

  • Сделай сам. Например, у команды Dachang есть ресурсы и богатый практический опыт. У них есть возможность систематизировать свой «лучший опыт». Они решат создать свою собственную структуру. При этом они также с удовольствием делятся своим опытом, а также могут использовать сообщество для улучшения своей работы. Отдельные лица, исходя из цели обучения и подбрасывания, также могут составить набор.
  • На основе расширений фреймворка с открытым исходным кодом. Вы можете использовать платформу с открытым исходным кодом в качестве основы для расширения и развития в соответствии с ситуацией в вашей команде.
  • Используйте фреймворк с открытым исходным кодом. Платформа с открытым исходным кодом может удовлетворить многие универсальные потребности, подходящие для простых сценариев приложений.Мы выбираем фреймворк по двум основным причинам: ① мы хотим повысить эффективность работы; ② нам нужен стандарт. Ради стандартов некоторые вещи действительно могут быть скомпрометированы. Что еще более важно, эти фреймворки постоянно развиваются и развиваются, так что технология нашей команды также может развиваться и развиваться вместе с ними бесплатно. Считайте стандартную передовую практику разработки фреймворков с открытым исходным кодом стандартом.

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



Расскажите о построении фреймворка фронтенд-команды

Где время, потраченное на переднее развитие?

Изображение выше взято из PPT.


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

Теперь поговорим об «обобщенной» фреймворковой системе, которая интегрирует собственный бизнес и включает в себя полное звено фронтенд-разработки.Фокус переместился с фронтенд-приложений на фронтенд-командные R&D-системы..



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

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


Фаза 1: Начальная часть / Инфраструктура

На самом базовом этапе основное внимание уделяется созданию начальной инфраструктуры. Этот этап относительно зрел, и в сообществе есть много готовых решений, таких как Umi, Next.js, Vue-CLI, Create-React-App и т. д. Основное содержание:


Этап 2: Интеграция решения для разработки приложений

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


Этап 3: Компонентная архитектура

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

Вся система компонентов также представляет собой многоуровневую структуру:

  • Основные компоненты. Дно, он показывает более высокую степень многоразовой, тем более распространенным. Ant-Design, Element-UI, IView, Material-ui принадлежит к этой базовой библиотеке компонентов, способность команды может разработать линию со своим собственным стилем библиотеки компонентов дизайна.
  • компоненты бизнеса. Компонент, инкапсулированный поверх базового компонента и связанный с собственным бизнесом. Обычно они абстрагируются от повторяющихся бизнес-сценариев.
  • блокировать. Далее становится сложно организовать с помощью модульных компонентов. Так кто-то (Али фронтенд) предложил концепцию 'блока',Вы можете думать о «блоках» как об фрагментах кода, образцах кода, шаблонах кода...Так это не новая концепция? Это еще не конец!Блок также должен быть сопоставлен с «рынком блоков», чтобы показать его полезность. Рынок блоков — это платформа для обмена фрагментами кода, которая поддерживает большое количество блоков, пытаясь охватить наиболее распространенные сценарии использования. Для разработчиков это найти блок, максимально соответствующий их собственной сцене, скопировать его и немного изменить. Это идеальная практика философии программирования 'Ctrl+C, Ctrl+V'..
  • страница. И блок почти, быстро генерировать страницы и маршрутизацию. Маршрутизация стилей конвенции может создать автоматизацию страницы, чтобы принести некоторое удобство.
  • макет. Например, общий макет фона.
  • проект. Общая структура проекта. Шаблоны проектов можно быстро создать с помощью «скаффолдинга».

летающий лед


Такие операции, как создание блоков и страниц, требуют некоторой помощи инструментов. Например:

  • Строитель. Создание компонентов на разных уровнях
    • проект (шаблон проекта). Обычно известный как скаффолдинг, он поддерживает различные типы проектов: приложения, библиотеки компонентов, программные библиотеки, плагины.
    • страница/маршрут
    • блокировать
    • компоненты
    • модель данных
  • инструмент визуализации. Инструменты визуальной оркестровки проектов, такие как Fly Ice.

Четвертый этап: открыть вверх по течению и вниз по течению

Фронтенд — это только часть процесса НИОКР, просто фронтенд самодостаточен, без поддержки вышестоящих и нижестоящих ресурсов сложно далеко уйти.

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

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

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

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


Будущее: ИИ?

ИИ автоматически генерирует интерфейсный код? Он слишком высокий, давайте дадим ему микрофон:Как разумно генерируется 79,34% кода модуля Double 11? 》, поскользнулся



Расширенная информация

Категории