Эта статья является вступлением в новую библиотеку JS под названием feature-u, т.е. облегчает разработку на основе функций в вашем проекте React.

Примечание: 14.08.2018 функция-u V1 было выпущено, что переработан Cross Feature Communication, чтобы включить композицию пользовательского интерфейса как основное предложение. В этой статье говорится о выпуске V1. Первую статью, основанную на feature-u V0, можно найти здесь. Мы очень рады этому обновлению, потому что оно предлагает единое решение для совместной работы всех функций!

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

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

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

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

Просмотрите полный пакет документов, источников и npm.

функция-у открывает новые двери в увлекательный мир разработки на основе функций. Это увольняет вас к сосредоточьте свое внимание на «бизнес-конце» ваших функций!

С одной точки зрения

Для вашего удобства это Содержание (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-е)это была заметная цитата:

«Все проблемы в информатике могут быть решены другим уровнем опосредованности». Дэвид Вилер

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

Существует много рассуждений дизайна при определении пределов функций. Вы можете найти несколько статей по этой теме, которые дают представление о дизайне на основе функций.

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

Особенности сегрегации

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

При этом ваш код организуется по тому, что он выполняет (т.е. по функциям), а не по тому, что он (т.е. компоненты, маршруты, логика, действия, редукторы, селекторы и т.п.).

Разделив ваши функции в отдельные каталоги, создается схожесть изоляции.

Функциональные цели

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

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

• Как мы инкапсулируем и изолируем наши функции, позволяя им сотрудничать друг с другом?
• Как выбранные функции могут ввести инициализацию запуска (даже ввод утилиты в корневой DOM), не полагаясь на внешний процесс запуска?
• Как создать композицию пользовательского интерфейса на основе функций изолированно и автономно?
• Как настроить выбранные фреймворки сейчас, когда наш код настолько распространен?
• Как включить/выключить выбранные функции, которые необязательны или требуют обновления лицензии?

КраткоКак мы достичь запуска программы из этих изолированных функций?

Когда вы все это сварите, есть две основные характеристики что должно быть достигнуто для достижения наших целей:

1. Feature Runtime Consolidation: объединение наших функций в одну запущенную программу
2. Feature Collaboration: обеспечить механизм, посредством которого наши функции могут взаимодействовать друг с другом

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

Функция Консолидация времени исполнения

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

Эту заботу можно дальше разделить на две подгруппы:

• App Initialization
  Некоторые функции могут потребовать определенной инициализации запуска. В качестве примера функция, инкапсулирующая некоторую абстракцию БД, будет полагаться на настройки службы БД во время выполнения.
  Конечно, мы не хотим полагаться на какую-то глобальную логику программы, чтобы добиться этого (еще раз мы хотим, чтобы наши функции были инкапсулированы и самодостаточны).
• Framework Configuration
  Если ваше приложение полагается на другие фреймворки, вероятно, что в каждой функции есть ресурсы, которые необходимо накопить и ввести в процесс настройки фреймворка.
  Как это достигается?

Функция сотрудничества

Вторая характеристика (упомянутая выше). Функция сотрудничества — предоставление механизма, посредством которого наши функции могут взаимодействовать друг с другом.

А лучшая практика развития на основе функций (насколько это возможно) есть до рассматривать каждую функцию как изолированную реализацию. Большинство аспектов функции являются внутренними для реализации этой функции (например, действия обычно создаются и потребляются исключительно логикой/редукторами/компонентами, внутренними для этой функции).

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

Однако, учитывая это, мы это знаем “ни один человек не является островом”! Любая данная функция существует как часть большей программы. Есть случаи, когда функция должна продвигать ограниченное подмножество своих аспектов к другим функциям. Например, функция может потребовать:

• быть осведомленным о каком-то внешнем состоянии (через селектор)
• выдавать или контролировать действия других функций
• консолидировать ресурсы компонентов из других функций — как в Композиция пользовательского интерфейса
• вызвать API других функций
• и т.д.

Эти предметы являются основой почему Cross Feature Communication и Feature Based UI Composition нужны.

Чтобы усложнить дело, как правило, Импорт JS НЕ должен пересекать границы функций. Причина в том, что это перекрестное общение должно быть ограничено точками общего доступа — помогать способствовать настоящему подключению и работай.

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

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

Функциональное решение

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

запустить приложение()

launchApp() является важной утилитой в функция-у. Это агент, работающий от вашего имени, обеспечивающий основу для этого выполняет все цели с функция-у! Это облегчает и то, и другое Feature Runtime Consolidation и Feature Collaboration.

С помощью этой утилиты, Ваш процесс запуска основной линии чрезвычайно прост … это просто призывает launchApp()и все готово!

The launchApp() функция фактически запускает вашу программу, используя различные крючки, управляющие ОБЕМ Инициализация программы и Конфигурация Framework!

Вы можете найти launchApp() примеры в Usage раздел, и Launching Your Application.

Как это работает? К чему привязки launchApp()? … углубимся немного глубже…

Характерный объект

Чтобы добиться этого, каждая функция способствует a Feature объект (используя createFeature())что каталогизирует интересующие аспекты функция-у.

Это основной вход в launchApp().

аспекты

в функция-у«аспект» (маленькая «а») – это обобщенный термин, используемый для обозначения различных ингредиентов, которые (в сочетании) составляют вашу программу. Аспекты могут принимать разные формы: Компоненты пользовательского интерфейса • Маршруты • Государственное управление(действия, редукторы, селекторы) • Бизнес-логика • Код инициализации запуска • и т.д.

Не все аспекты интересуют feature-u … только те, которые необходимы для настройки и запуска программы … все остальные считаются внутренними деталями реализации функции. Рассмотрим в качестве диспетчера состояний Redux: хотя он использует действия, редукторы и селекторы… для настройки и настройки Redux нужны только редукторы.

The Feature Объект – это просто легкий контейнер, содержащий интересные аспекты. функция-у. Эти аспекты могут быть Built-In aspects (из ядра функция-у)или Extendable aspects (по расширениям плагинов).

Запуск программы

Давайте посмотрим как launchApp() соответствует двум целям запуска программы:

Инициализация программы

Поскольку launchApp() контролирует запуск программы, он может вводить Application Life Cycle Hooks.

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

Есть два крючка:

1. Feature.appWillStart() — вызывается один раз при запуске программы
2. Feature.appDidStart() — вызывается один раз сразу после запуска программы

Application Life Cycle Hooks значительно упростить основной процесс запуска программыпоскольку инициализация, специфичная для данной функции, может быть инкапсулирована в эту функцию..

Конфигурация Framework

Основная цель функция-у есть до автоматически настроить фреймворк(ы) используется в вашем стеке времени выполнения (за счет накопления необходимых ресурсов для всех ваших функций). Это значительно уменьшает стандартный код в вашем приложении.

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

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

Расширяющиеся аспекты можно найти во внешних пакетах NPM (обычный случай)или вы можете создать свой собственный с помощью createAspect() (более расширенная тема).

The Aspect объект содержит серию Aspect Life Cycle Hooks которые вызываются под контролем функция-у(launchApp()). В общем, ответственность Аспекта состоит в том, чтобы:

• накапливать AspectContent по всем функциям
• выполнить желаемую настройку и конфигурацию
• раскрыть его функциональность каким-то образом (как правило, интеграция с фреймворком)

An Aspect автоматически расширяет Feature объект, позволив это AspectContent быть «каталогизированный» в Feature использование Aspect.name как это ключевое. На схеме выше вы можете это увидеть

• в reducerAspect (Aspect.name: 'reducer') разрешения a Feature.reducer: reducerContent построить
• и logicAspect (Aspect.name: 'logic') разрешения a Feature.logic: logicContent построить

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

Запуск программы

в функция-у, Основная линия программы очень проста и обща. В нем нет настоящего кода для программы… даже никакой глобальной инициализации! Это потому, что каждая функция может внедрять свои собственные конструкции для программы!! Основная линия только накапливает Aspects и Featuresи запускает программу, вызвав launchApp():

Вот некоторые из них важные достопримечательности (установите соответствие между числами *n* в коде выше):

1. предоставляется Aspects (вытаскивается из отдельных пакетов npm) отражают рамки нашего стека времени выполнения (в нашем примере redux, redux-logicи feature-router) и расширить приемлемые свойства Feature (Feature.reducer, Feature.logicи Feature.route соответственно) … увидеть: Extendable aspects
2. все наши функции программы предоставляются (накоплены с features/ каталог)
3. а registerRootAppElm() обратный вызов используется для каталогизации предоставленного rootAppElm на конкретную используемую платформу React. Поскольку эта регистрация осуществляется с помощью кода вашего приложения, функция-у может работать на любой из платформ React, например: react-web, react-nativeи expo … увидеть: React Registration
4. как немного предварительный просмотрвозвращается значение launchApp() это Fassets objectкоторый способствует накопленному общему лицу всех функций и экспортируется для предоставления Cross Feature Communication.

Связь между функциями

В поддержку Функция сотрудничества это не нарушает инкапсуляцию, функция-у продвигает ресурсы на основе функций с помощью того, что называется fassets (характеристики). Вот как все Связь между функциями выполняется. Вы можете думать об этом как Общественное лицо признаки.

Боковая панель: срок fassets это игра слов. Хотя это произносится как «фасет» и мало связан с этим терминомпишется как фасет (т.е. объекты).

Функция может показывать все, что считает нужным, через встроенную функцию Feature.fassets aspect). Для этого ресурса нет реальных ограничений. Оно действительно открыто.

The fassets aspect имеет define директивы, где каталогизированы ресурсы.

Вот простой пример того, как fassets определяются:

функция-у накапливается fassets из всех активных функций и продвигает их с помощью Fassets object (выпускается из launchApp()).

Боковая панель: Есть несколько способов получить доступ к Fassets object (увидеть Obtaining fassets object).

Для ссылки на а fassets ресурса, просто разименуйте его как любую другую ссылку на объект. Существует также a Fassets.get()метод, который можно предоставить Wildcardsвозвращая массив ресурсов.

Это пример а толкать философия. Здесь поставщик просто публично рекламирует ресурс для использования других функций (принять его или оставить его). Поставщик просто говорит: «это мое публичное лицо».

Вы можете найти больше информации на эту тему в Cross Feature Communication.

Композиция пользовательского интерфейса на основе функций

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

В поддержку этого, функция-у знакомит с withFassets() Компонент высшего порядка (HoC), автоматически объединяющий свойства fasset в компонент. Это распространенный шаблон, популяризированный Redux connect() (упрощение доступа компонентов к состоянию программы).

Вот как компонент получит доступ к a company.logo (определяется другим признаком):

The withFassets() Автоматические подключения HoC назвали активы функций как свойства компонента через mapFassetsToPropsStruct крючок. В этом примере, потому что Logo свойство является компонентом, MyComponent можно просто ссылаться на него с помощью JSX.

Вы можете найти больше информации на эту тему в UI Composition.

Ресурсные контракты

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

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

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

• Данная функция может указать ряд потребностей в инъекции с помощью fassets.use директива. Это определяет набор инъекционные ключи однозначно идентифицирующие эти ресурсы.
• Другие функции обеспечат это содержимое с помощью fassets.defineUse директивы, ссылаясь на них инъекционные ключи.

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

Подстановочные знаки (*) можно использовать, чтобы добавить в процесс дополнительную динамику, позволяя функциям автономно вводить свое содержимое.

Вот а main функция, извлекающая серию подкомпонентов (ссылки и тела) из других функций:

главная особенность:

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

Вот MainPage компонент, выполняющий договор использования:

Когда withFassets() встречает символы подстановки (*), он просто накапливает все соответствующие определения и продвигает их как массивы.

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

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

функция корзины

функция поиска

Два внешних признака (тележка и Поиск) определить содержимое, которое запрашивает основной особенность.

The fassets.defineUse Директива требует, чтобы ключи ресурсов соответствовали a fassets.use запрос функции. Это договор, предусматривающий функция-у понимание при выполнении его проверки.

Боковая панель: Поскольку мы также имеем дело с навигацией, мы представляем react-router в смесь (с Link и Route компоненты). Благодаря дизайну RR V4, наши маршруты также обрабатываются с помощью компонентного состава. (увидеть Feature Based Routes для получения дополнительной информации).

Вы можете найти больше информации на эту тему в UI Composition.

Включение функций

Функции можно динамически отключить, установив параметр Feature.enabled boolean свойство (часть Built-In aspects):

В этом примере это как бы sandbox функция не существует. Иными словами он логически удален.

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

Эта динамика полезна в ряде разных ситуаций. Например:

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

Вы можете найти больше информации на эту тему в Feature Enablement.

В итоге

Следующая диаграмма подытоживает функция-уОсновные понятия (как обсуждалось выше):

Преимущества

В использовании есть много преимуществ функция-у!

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

• Формальное средство, посредством которого функции могут сотрудничать друг с другом (Cross Feature Communication)делая их по-настоящему подключи и играй
  Сюда входит способность к UI Composition пересекать границы признаков. Это даже позволяет автономно вводить содержимое пользовательского интерфейса. Это то, что надо увидеть… это кичится функция-у очень хорошо.
• Значительное сокращение стандартного кода за счет:
  Автоматическая настройка используемых фреймворков (из-за расширения плагинов — Extendable aspects)
  Инициализация запуска, инкапсулированная в функции (через Application Life Cycle Hooks)

Нижеследующий перечень преимуществ может быть непосредственно связан с соображениями, которые легли в основу причин. функция-у была разработана (увидеть: Why feature-u?).

1. Инкапсуляция функций: изоляция границ функций улучшает управляемость кода
2. Функция сотрудничества: продвигать Связь между функциями через четко определенный общедоступный интерфейс на основе функций
3. Композиция пользовательского интерфейса на основе функций: облегчить бесшовность перекрестный компонентный состав
4. Крючки жизненного цикла программы: функции могут инициализироваться сами, не полагаясь на внешний процесс
5. Включение функций: включить/выключить функции с помощью переключателя времени выполнения
6. Минимизация проблем с зависимостью порядка функций при расширении кода в строке
7. Интеграция Framework: автоматически настраивать используемые фреймворки (соответствующие стеку времени выполнения программы), накапливая все аспекты функций (используя расширяемый API)
8. Продвижение компонентов пользовательского интерфейса: функции могут автономно продвигать свои компоненты пользовательского интерфейса с помощью управления маршрутами на основе функций
9. Единственный источник истины: это облегчается несколькими способами в рамках реализации функции
10. Упрощенный запуск программы: запуск программы можно осуществить с помощью одной строки исполняемого кода!
11. Работает на любой платформе React React Web, React Native, Expo и т.д.
12. Подключи и играй: функции можно проще добавить или удалить

функция-у позволяет вам сосредоточьте свое внимание на «бизнес-конце» ваших функций!

Идите и считайте!!

Ссылки