Create more manageable React applications with Features
Tags: javascript, react, features, fdd
Published: 2020-01-06 22:34:18

---
title: Create more manageable React applications with Features
published: true
tags: javascript,react,features,fdd
---

Is your [React](https://reactjs.org/) project organized by features? …  **NO?**

![](https://cdn-images-1.medium.com/max/798/1*TLYupudltbA0UBbRyB96PQ.jpeg)

You know, features are where your resources are organized by what they accomplish in your app (i.e. features), rather than lumping all files of like types into one massive blob of components, routes, logic, actions, reducers, selectors, etc.

![](https://cdn-images-1.medium.com/max/1024/1*8GHt18xe1e1tG9VQOXTMRQ.png)

**If you are using features** , _then consider this_ …

- are your features encapsulated and isolated?
- do your features collaborate in an extendable way?
- are your components using cross-feature composition?
- do your features initialize themselves?
- can you disable features at run-time?
- do your frameworks auto-configure with only active features?

In short, **do your features plug-and-play? … NO?**

I know, I know, **you’re busy**  … which is great because projects with busy teams _can’t become unwieldy_ … **OH WAIT**  … _I read that wrong_ … **THEY CAN!** _(I should have worn my glasses)_

![](https://cdn-images-1.medium.com/max/560/1*4bQkKW1Hzq5oSYIfIhOrVQ.jpeg)

**Let’s cut to the chase:**

- If your not using features - **YOU SHOULD!**
- If your features aren’t based on [**feature-u**](https://feature-u.js.org/) - **THEY SHOULD BE!**

[**feature-u**](https://feature-u.js.org/) is a utility that facilitates feature-based development in your [React](https://reactjs.org/) project. It provides tangible assistance in promoting individual **plug-and-play** features.

![](https://cdn-images-1.medium.com/max/1024/1*zYzt9w49KV-TCbuUMD_Ieg.jpeg)

There are a number of benefits in using [**feature-u**](https://feature-u.js.org/), but the two fundamental ones are:

1. A formal means by which features can collaborate with one another, making them truly **plug-and-play**.
2. A significant reduction in boilerplate code by automatically configuring your frameworks and startup initialization.

The following diagram summarizes **feature-u** ’s basic concepts:

![](https://cdn-images-1.medium.com/max/1024/1*qsohsNr9SgLca22xW6r1eQ.png)

#### **_Feature Collaboration is accomplished by:_**

- Introducing a formal means by which features can collaborate with one another ([Cross Feature Communication](https://feature-u.js.org/cur/crossCommunication.html)), making them truly **plug-and-play**.
- This includes the ability for [UI Composition](https://feature-u.js.org/cur/crossCommunication.html#ui-composition) to cross feature boundaries. It even allows UI Content to be injected autonomously. _This is something that has to be seen …_ **_it shows off the utility very well_** _._

#### **_A significant reduction in boilerplate code is accomplished through:_**

- Auto configuration of your frameworks (using [plugable extensions](https://feature-u.js.org/cur/extending.html)), and
- Allowing features to initialize themselves (through [Application Life Cycle Hooks](https://feature-u.js.org/cur/appLifeCycle.html)).

#### Features can be disabled

- through a [Feature Enablement](https://feature-u.js.org/cur/enablement.html) run-time switch.

_This foundation forms the basis of why_ **_feature-u_** _was developed, and manifests itself into a_ [_number of benefits_](https://feature-u.js.org/cur/why.html)_._

[**feature-u**](https://feature-u.js.org/) is the utility you didn’t know you needed, but subsequently can’t live without! It opens new doors into the exciting world of feature-based development and frees you up to focus your attention on the “business end” of your features!

![](https://cdn-images-1.medium.com/max/347/1*u3DlVwpWCIriyzTZXEslJg.jpeg)

Learn more about **feature-u** :

- [docs](https://feature-u.js.org/) - comprehensive **feature-u** documentation
- [presentation](https://feature-u.js.org/cur/presentation.html) - a **feature-u** presentation video to get you started **(a must see)**
- [basic concepts](https://feature-u.js.org/cur/concepts.html) - a full introduction to **feature-u** concepts and terminology **(a must read)**
- [eatery-nod-w](https://github.com/KevinAst/eatery-nod-w) - a sample web app using **feature-u**
- [repo](https://github.com/KevinAst/feature-u) - **feature-u** source