Автор оригинала: Kevin Bridges.
Эта статья представляет собой введение в новую библиотеку JS под названием Функция-u , что облегчает разработку на основе функций в вашем Реагировать Проект Отказ
Большинство разработчиков согласится с тем, что организация вашего проекта по функциям очень предпочтительнее на основе типовых шаблонов. Потому что Домены приложений растут В реальном мире проект Организация по типу просто не масштабируется , Это просто становится неуправляемым Действительно
Существует ряд хороших статей, которые обсуждают эту тему с пониманием на основе функций и структуры (см. Ссылки ниже). Однако, когда речь идет о реализации, вы в значительной степени оставлены для себя.
Функция-u Это коммунальная библиотека, которая управляет и оптимизирует этот процесс. Он автоматизирует мирные детали управления функциями и помогает продвигать функции, которые являются действительно Plug-and-Play Отказ
Эта статья обеспечивает основу Функция-u Концепции и терминология, здание понимания того, как вы можете продвигать человека Plug-and-Play Особенности в вашем проекте. Это имеет место для того, почему Функция-u Был разработан и дает вам лучшее понимание его преимуществ.
Проверьте Полные документы , Источник и Пакет NPM Отказ
Функция-u открывает новые двери в захватывающий мир на основе функций развития. Это освобождает тебя до Сосредоточьте свое внимание на «Бизнес-конце» ваших функций Действительно
С одного взгляда
Для вашего удобства это Оглавление (TOC) ссылки напрямую на каждый раздел. Также обратите внимание, что каждая секция заголовка ссылок обратно к TOC Отказ
Feature Based Development Segregating Features Feature Goals Feature Runtime Consolidation Feature CollaborationThe feature-u Solution launchApp() Feature Object aspects Running the App App Initialization Framework Configuration Launching Your Application Cross Feature Communication Feature Based UI Composition Resource Contracts Feature EnablementIn SummaryBenefitsReferences
Особенность на основе разработки
На уровне 30 000 футов на основе функций развитие (как в большинстве программного обеспечения) все о рассекании тяжелых проблем на более мелкие кусочки. Даже когда я начал свою карьеру (назад в 70-х) , это была выдающаяся цитата:
Разбивая вашу заявку в функции, каждая функция может сосредоточиться на более конкретном и изолированном наборе задач. В некоторых способах вы можете подумать о функции как «мини-приложение» Действительно
Существует множество дизайнерских соображений в определении ваших границ функций. Вы можете найти несколько статей по этой теме, которая обеспечивает понимание на основе функций.
По большей части эти соображения являются частью дизайна каждого отдельного проекта. В то время как Функция-u Не диктует общие соображения дизайна, оно облегчает хорошие принципы на основе функций (таких как инкапсуляция). Это будет в центре внимания этой статьи Отказ
Особенности сегрегирования
Если вы похожи на меня, когда вы думаете о разработке, основанном на особенностях, первое, что приходит к уму, это выделение вашего кода в каталоги функций.
При этом ваш код организован тем, что он выполняет (то есть функции), а не то, что оно (то есть компоненты, маршруты, логика, действия, редукторы, селекторы и т. Д.).
Разделение ваших функций в отдельных каталогах, есть подобие изоляции.
Цели объекта
Наша цель – инкапсулировать каждую функцию таким образом, чтобы сделать их по-настоящему Plug-and-Play Отказ Но как это достигнуто ?
Структура каталогов – это просто начало. Есть Несколько препятствий Это должно быть преодолено, чтобы реализовать нашу цель …
- Как мы инкапсулируем и изолируем наши особенности, пока до сих пор позволяют им сотрудничать друг с другом?
- Как выбранные функции вводят инициализацию запуска (даже утилита для инъекций в корневом DOM), не полагаясь на некоторые внешний процесс запуска?
- Как можно сделать композицию пользовательского интерфейса на основе функций в изолированном и автономном пути?
- Как мы настраиваем наши выбранные рамки теперь, когда наш код так распространен?
- Как мы включаем/отключить выбранные функции, которые либо необязательны, либо требуют обновления лицензии?
Короче Как мы достигаем бегового приложения из этих изолированных особенностей?
Когда вы кипятите все это, есть Два основных характеристики Это должно быть достигнуто для достижения наших целей:
ОСОБЕННОСТЬ ОБЪЯВЛЕНИЯ ОБЪЕДИНЕНИЯ CONSOLIDIATION: потянуть наши особенности обратно в одном запущенном приложенииОсобенность совместной работы: обеспечить механизм, с помощью которого наши функции могут взаимодействовать друг с другом
Как оказывается, Все остальное – это побочный продукт этих двух артефактов Отказ Давайте приблизимся к каждому из этих предметов.
ОСОБЕННОСТЬ ОБЪЯВЛЕНИЯ ВРЕМЕНИИ
Теперь, когда мы выделили наши функции в отдельных объектах, как мы возвращаем их вместе, чтобы они бегали как одно приложение ? Мы должны быть в состоянии вытащить и настроить различные аспекты наших индивидуальных функций и «запускать» их как одно однородное беговое приложение.
Эта проблема может быть дополнительно разделена на два подпункта:
Инициализация приложенийНекоторые функции могут потребовать определенную инициализацию запуска. В качестве примера функция, которая инкапсулирует некоторую абстрацию БД, полагается на настройку времени выполнения службы БД. Конечно, мы не хотим полагаться на какую-то глобальную логику приложения для достижения этого (еще раз, мы хотим, чтобы наши функции были инкапсулированы и самодостаточными) ОтказРамочная конфигурацияЕсли ваша заявка опирается на другие рамки, шансы существуют ресурсы, содержащиеся в каждой функции, которая должна быть накоплена и подана в процесс конфигурации рамок. Как это достигло?
Функция сотрудничества
Вторая характеристика (упомянутая выше) – Особенность совместной работы – Предоставление механизма, с помощью которого наши функции могут взаимодействовать друг с другом Отказ
А Лучшая практика на основе функций развития (в максимально возможной) это обрабатывать каждую особенность в качестве изолированной реализации . Большинство аспектов функции являются внутренними для реализации этой функции (Например, действия обычно создаются и потребляются исключительно логическими/редукторами/компонентами, которые являются внутренними для этой функции) .
С этой точки зрения вы можете подумать о каждой функции как ее Собственное изолированное мини-приложение Отказ
С этим сказанным, однако, мы знаем, что “ Ни один мужчина – это остров “ ! Любая данная функция в конечном итоге существует как часть более крупного приложения. Есть случаи, когда функция должна продвигать ограниченное подмножество его аспектов к другим функциям. Например, функция может понадобиться:
- быть осведомленным о некотором внешнем состоянии (через селектор)
- Эмит или монитор Действия других функций
- Консолидация компонентных ресурсов из других функций – как в УИ состав
- Вызвать API других функций
- и т. Д. И т. Д. И т. Д.
Эти предметы образуют основу того, почему Cross Feature Communication и На основе функций интернет-пользовательский интерфейс необходимы.
Осложнить вопросы, как общее правило, Импорт JS не должен пересекать границы функций Отказ Причина в том, что это перекрестное сообщение должно быть Ограничено общедоступным точками доступа – помогать Содействовать истинному подключаемо-воспроизведению Отказ
Учитывая все это тогда, Как достигнута коммуникация Cross Consse таким образом, который не нарушает инкапсуляцию ?
Особенности нужны способ продвижения своих Общественный интерфейс к другим функциям и потреблять других функций Общественные активы Отказ
Раствор особенности-U
Давайте посмотрим на решение Функция-u предусматривает все эти цели. Следующие разделы будут построить Функция-u концепции постепенно.
launchapp ()
launchapp () является важной полезностью в Функция-u Отказ Это агент, работающий от вашего имени, который предоставляет основу, что достигает всех целей Функция-u Действительно Это облегчает оба ОСОБЕННОСТЬ ОБЪЯВЛЕНИЯ ОБЪЕДИНЕНИЯ CONSOLIDIATION и Особенность совместной работы Отказ
С этой утилитой Ваш процесс запуска Mainline чрезвычайно прост … это просто вызывает launchapp () , и вы сделали!
launchapp () Функция на самом деле запускает ваше приложение запущено, используя различные крючки, которые управляют как Инициализация приложений и Конфигурация Framework Действительно
Вы можете найти launchapp () Примеры в Использование раздел и Запуск вашего приложения Отказ
Как это работает? Каковы привязки к launchapp () ? … Давайте немного глубже …
Объект объекта
Для достижения этого каждая функция продвигает Особенность объект (Использование CreateFeature () ) , что каталоги аспекты интереса к Функция-u Отказ
Это основной вход в launchapp () Отказ
аспекты
В Функция-u , «Аспект» (мало «а») является обобщенным термином, используемым для ссылки на различные ингредиенты, которые (при совместившемся) составляют ваше применение. Аспекты могут взять на себя много разных форм: UI Компоненты • Маршруты • Государственное управление (Действия, редукторы, селекторы) • Бизнес-логика • Код инициализации запуска • и т. Д. И т. Д. И т. Д.
Не все аспекты представляют интерес для функции – U … Только те, которые необходимы для настройки и запуска приложения … Все остальные считаются внутренней детализацией реализации функции. В качестве примера рассмотрим менеджер состояния Redux: пока он использует действия, редукторы и селекторы … Для настройки и настройки redux необходимы только редукторы.
Особенность Объект – просто легкий контейнер, который удерживает аспекты интереса к Функция-u Отказ Эти аспекты могут быть ?| Встроенные аспекты (от ядра Функция-u ) или Расширяющиеся аспекты (от расширений плагинов) Отказ
Запуск приложения
Давайте посмотрим, как launchapp () Вмещает два подкладка запуска приложения:
Инициализация приложенийРамочная конфигурация
Инициализация приложений
Потому что launchapp () контролирует запуск приложения, он может представить Крючки жизненного цикла приложений Отказ
Это позволяет каждому функции выполнять определение специальной приложения и даже вводить компоненты в корню приложения.
Есть два крючка:
- Feature.appwillstart () – вызывается один раз в приложении времени запуска
- Feature.appdidstart () – вызывается один раз сразу после начала приложения
Крючки жизненного цикла приложений В значительной степени упростите процесс запуска вашего приложения Mainline потому что Инициализация, специфичная для данной функции, может быть инкапсулирована в этой функции .
Рамочная конфигурация
Фундаментальная цель Функция-u это Автоматически настраивать рамки (ы) используется в вашем режиме прохождения (накапливая необходимые ресурсы во всех ваших особенностях) Отказ Это значительно уменьшает код BoaterPlate в вашем приложении.
Как это может быть достигнуто, когда там так много рамки … и каждый проект использует другую смесь?
Функция-u является выдвижным! Он работает на открытой архитектуре, где Расширяющиеся аспекты Интеграция Функция-u в другие рамки, соответствующие вашу конкретную стопку времени выполнения. Это хорошо, Потому что не все используют такие же рамки Действительно
Расширяющиеся аспекты можно найти во внешних пакетах NPM (нормальный случай) или вы можете создать свои собственные, используя CreateaseSpect () (более продвинутая тема) .
Аспект Объект содержит серию Крючки для жизненного цикла аспекта которые вызываются под контролем Функция-u ( LaunchApp () ). В целом ответственность аспекта заключается в:
- накапливаться АспектContent по всем особенностям
- Выполните желаемую настройку и настройку
- Окончайте это функциональность каким-то образом (обычно структурная интеграция)
Аспект автоматически расширяет Особенность Объект, позволяя это АспектContent быть «Каталогичен» В Особенность Использование Аспект как это ключ. На диаграмме выше, вы можете увидеть, что
-
Редустерасфект(Aspect.name: «Редуктор») РазрешаетФункция .eduducer: UnderContentпостроить - и
Логикасфект(Aspect.name: «Логика») позволяетFeature.logic: logiccontentпостроить
Важно понимать, что интерфейс к выбранным вами каркасам не изменяется никак. Вы используете их так же, как у вас всегда есть (Просто в пределах вашей границы функции) . Функция-u Просто содержит четко определенный организационный слой, где каркасы автоматически устанавливаются и настроены путем накапливания необходимых ресурсов во всех ваших функциях.
Запуск вашего приложения
В особенности-u, Основная линия приложения очень проста и общенаправлена. В нем нет настоящего кода, конкретного приложения … даже некая глобальная инициализация Действительно Это потому, что Каждая функция может ввести свои собственные конструирующие приложения ! Основная линия просто накапливает Аспекты и Особенности и начинает приложение, вызывая launchapp () :
Вот некоторые Важные достопримечательности (Сопоставьте номера для * n * в коде выше) :
- поставляемый Аспекты (вытащил из отдельных пакетов NPM) отражать рамки нашего стока времени работы (В нашем примере redux , redux-logic и Функционально-маршрутизатор ) и продлить приемлемые свойства функций (
Функция. Представитель,Feature.logicиФункциясоответственно) … Смотрите: Расширяющиеся аспекты - Все наши функции приложений поставляются (накапливаются из CORMECTION CARINEA |
АRecisterraterPAppelm () - Обратный вызов используется для каталога прилагаемого RootAppelm на конкретную реактивную платформу в использовании. Поскольку эта регистрация достигается вашим конкретным приложением кода,
Функция-uМожет работать в любом из реактивных платформ, таких как: React-Web , Реагистративно и Экспо … Смотрите: Регистрация реагирования Как немного превью , возвращаемое значение - launchapp () это Fassets объект , который способствует накоплению общественного лица всех функций, и экспортируется для обеспечения Cross Feature Communication Отказ
Крестная функция связи
В поддержку Особенность совместной работы который не ломает инкапсуляцию , Функция-u Продвигает ресурсы на основе функций через что-то называемое фассет (Особенности активов). Вот как все Cross Feature Communication достигнуто. Вы можете думать об этом как Публичное лицо особенности.
Боковая панель : Термин Fassets это игра на словах. Хотя он произносится «аспект» и слабо связано с этим термином , это пишется фассет (то есть активов).
Функция может разоблачить все, что он считает необходимым через встроенный Функция. Функция аспект ). На этом ресурсе нет реального ограничения. Это действительно открыто.
Аспект Fassets имеет Определить Директива, где ресурсы каталогизированы.
Вот простой пример того, как Fassets определены:
Функция-u Накопит Fassets Из всех активных функций и продвигает их через Fassets объект (испускается из LaunchApp () ) Отказ
Боковая панель : Есть несколько способов получить доступ к Fassets объект (см. Получение объекта Fassets Несомненно .
Ссылаться на Fassets Ресурс, просто разыменовать это как любую другую ссылку на объект. Есть также Fassets.get () Метод, который может быть предоставлен Подстановочные знаки Возвращая массив ресурсов.
Это пример толчок Философия. Здесь поставщик просто публично продвигает ресурс для других функций для использования (возьми или оставь его) Отказ Поставщик просто говорит: «Это мое общественное лицо» Отказ
Вы можете найти больше информации об этой теме в Cross Feature Communication Отказ
На основе функций композиция интерфейса
Для компонента интернет-пользовательского интерфейса часто распространена компонента UI накоплением подкомпонентов, которые охватывают несколько особенностей. В результате Композиция UI очень важной частью Cross Communication Отказ
В поддержку этого Функция-u вводит сфассеты () Компонент более высокого порядка (HOC), что автоматически провода фассет свойства в компонент. Это общий шаблон, популяризированный Redux Подключиться () (Упрощение доступа компонента к состоянию приложения) Отказ
Вот как компонент будет иметь доступ к логотип компании (Определяется другой особенностью) :
сфассеты () HOC Auto-Wives с именем Функциональные активы в качестве компонентных свойств через mapfassetstoprops настроить крюк. В этом примере, потому что Логотип Собственность – это компонент, MyComponent может просто ссылаться на него с помощью JSX.
Вы можете найти больше информации об этой теме в UI состав Отказ
Ресурсные контракты
Для композиции пользовательского интерфейса распространена в качестве договора, где компонент в одной особенности имеет ряд потребностей впрыска, которые должны поставляться другими функциями.
Аспект Fassets Имеет дополнительные конструкции для облегчения этой договорной договоренности, позволяя Функция-u обеспечить более валидацию в процессе.
А не просто определение ресурсов в одной области и используя их в другом:
- Данная функция может указать серию потребностей впрыска с использованием
fassets.useДиректива. Это идентифицирует набор Ключи впрыска Это однозначно идентифицирует эти ресурсы. - Другие функции будут предоставлять этот контент, используя
fassets.defineuseДиректива, обращаясь к этим же Ключи впрыска Отказ
Это представляет больше тянуть Философия. Это дает Функция-u Больше знания процесса, позволяя его проверять, что поставляемые ресурсы верны.
Подстановочные знаки ( * ) можно использовать для добавления дополнительной динамики в процесс, позволяя функциям ввести их контент автономно.
Вот a Главная Функция, которая тянется в серию подкомпонентов (Ссылки и тела) Из других особенностей:
Главная особенность:
Поскольку наша спецификация включает подстановочные знаки, серия определений будет соответствовать!
Вот Главная страница Компонент, который соответствует договору использования:
Когда сфассеты () встречает подстановочные знаки ( * ), это просто накапливает все соответствующие определения и способствует их массивам.
Благодаря этой реализации, Любая особенность может динамически вводить себя в процессе автономно Действительно Кроме того, эта динамическая неявная обрабатывает случай, когда функция динамически отключена (очень kool действительно) !
Следующие фрагменты взяты из других функций, которые поставляют определения для содержимого в INJECT:
Функция тележки
Особенность поиска
Две внешние функции ( Корзина и Поиск ) Определите контент, который запрашивается Главная характерная черта.
fassets.defineuse Директива требует, чтобы ключи ресурсов соответствовать a fassets.use Запрос на функцию. Это контракт, который обеспечивает Функция-u Insight при обеспечении его проверки.
Боковая панель : Потому что мы также имеем дело с навигацией, представим Реагистрационный маршрутизатор в смесь (с ссылка и маршрут компоненты). Из-за дизайна RR V4 RR наши маршруты также обрабатываются через компонент композиции (см. Маршруты на основе функций Для получения дополнительной информации) Отказ
Вы можете найти больше информации об этой теме в UI состав Отказ
Функция включения
Особенности могут быть динамически отключены, установив Функция Логическая недвижимость (Часть встроенных аспектов ) :
В этом примере это так же, как будто песочница функция не существует. Другими словами Это было логически удалено Отказ
Как правило, этот индикатор основан на некотором выражении работы, позволяя динамически включить/отключить упакованный код во время процесса запуска приложения:
Эта динамика полезна в ряде разных ситуаций. Например:
- Некоторые функции могут потребовать обновления лицензии
- Другие функции могут быть использованы только для диагностических целей, и по умолчанию отключены
Вы можете найти больше информации об этой теме в Функция включения Отказ
В итоге
Следующая диаграмма суммирует Функция-u Основные концепции (Как обсуждалось выше) :
Преимущества
Есть много преимуществ в использовании Функция-u Действительно
Два фундаментальных артефакта, из которых происходят большинство преимуществ:
- Формальные средства, по которым функции могут сотрудничать друг с другом ( Cross Feature Communication ) делает их по-настоящему Plug-and-Play Это включает в себя возможность UI состав пересекать границы. Это даже позволяет вводить контент UI автономно. Это то, что нужно увидеть … это показывает Функция-u очень хорошо.
- Значительное снижение кода котельной через: Авто конфигурация фреймворков в использовании (через расширения плагинов – Расширяемые аспекты ) Инициализация запуска, которая инкапсулирована в пределах функций (через Крючки жизненного цикла приложения )
Следующий список преимуществ может быть напрямую коррелирован на соображения, которые сформировали основу того, почему Функция-u был разработан (см.: Почему функция – ты? ) Отказ
- Функциональная инкапсуляция: Изолирующие границы функций улучшают управляемость кода
- Функция сотрудничества: продвигать Cross Feature Communication через четко определенный общественный интерфейс на основе функций
- На основе функций композиция интерфейса: облегчить бесшовные Компонент Cross-Happy компонент
- Крючки жизненного цикла приложений: Особенности могут инициализировать себя, не полагаясь на внешний процесс
- Функция Включение: Включить/отключить функции через переключатель времени выполнения
- Минимизируйте вопросы зависимости заказа функций Во время быстрого расширения кода
- Рамочная интеграция: Автоматически настраивайте используемые рамки (S) (сопоставление времени выполнения приложения), накапливая все аспекты функций (используя расширяемую API)
- Компонент UI Продвижение: Особенности могут автономно продвигать свои компоненты пользовательского интерфейса через управление маршрутом на основе объектов
- Один источник правды: облегчается несколькими способами реализации функции
- Упрощенное приложение Startup: Запуск приложения может быть достигнут через одну строку исполняемого кода!
- Работает на любой React Platform React Web, реагировать на родной, экспо и т. Д.
- Plug-and-Play: Особенности могут быть более легко добавлены или удалены
Функция-u позволяет вам Сосредоточьте свое внимание на «Бизнес-конце» ваших функций!
Иди и вычислить !!
использованная литература
- Подход на основе функций для развития реагирования … Райан Ланчая
- Как лучше организовать ваши приложения React? … Алексис Мангин
- Как использовать Redux на высокомасштабных приложениях JavaScript? … Алексис Мангин
- 100% правильный способ структурирования приложения RACT (или почему нет такой вещи) … Дэвид Гилбернтсон
- Redux для государственного управления в крупных веб-приложениях … Дэвид Кларк
Оригинал: “https://www.freecodecamp.org/news/feature-u-v1-b84e2372c5e6/”