Awesome

⛰ React Adventure

React high-ending architecture & patterns ready for use. Made for big and small projects. PWA Ready.

Description

We all know the struggle about Frontend patterns, specially when it comes to big projects, it become a mess over the time.

For this reason we created the React Adventure in order to provide a workable, maintainable and scalable environment overtime, built based on React Adventure Pattern Proposal, providing a high-ending modular architecture with screen centric development for building SPAs with clean separation of concerns, high cohesion and maintainability.

Features

React Adventure Pattern

Motivation

We all have or will work with outdated/monolith project, hard to code, maintain and to implement new stacks of technology.

Usually in those projects, we face huge JavaScripts files, sometimes with over than 1MB! This is a huge issue, especially for mobile uses.

According to Sam Saccone from Google, this file would take to be read by the browser on Samsung Galaxy S7 ~850 ms and Nexus 5 in ~1700 ms!

Besides that, we would have scalability penalty for such environment, costing more server power and money! to deliver the same expected behavior.

In other words, this would be an unsustainable environment we would be facing, with our resources being drained each time more, and by resources, I mean both financial and human.

Because of such actual possibility, we build React Adventure.

The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy.

Martin Luther King Jr.

Goal

As Engineers, we're constantly looking for new ways to improve and add new features to our code without have to refactor it.

By this reason, we came up with this approach, which give us the ability to:

Paraphrasing Steve Krug:

"Making every component, function or screen self-evident is like having good lighting in a store: it just makes everything seem better."

So we defined as a goal:

• Make every component, function or screen self-evident.
• To create a readable code.
• To safely delete legacy/unused code without effort or break the application.
• To easily create or update different part of the application, in the shortest possible time.
• Be able to implement new techs with minimum refactory effort.

Structure Pattern

The bellow structure is the result of a several patterns studies and implementations over the time.

react-adventure
├── configuration                         # Configuration folder
│   ├── jest
│   │   ├── __mocks__
│   │   │   ├── file.js                   # file mock
│   │   │   ├── react.js                  # react mock
│   │   │   └── react-router-dom.js       # react-router-dom mock (BrowserRouter)
│   │   ├── helpers
│   │   │   └── theme.js                  # theme (_vars.scss) parsed into object
│   │   ├── setup.env.js                  # jest env setup
│   │   ├── setup.framework.js            # test framework jest setup
│   │   └── setup.styled-components.js    # styled-component custom render functions
│   ├── application
│   │   └── settings.js                   # Application settings file
├── cypress                               # cypress E2E directory
│   ├── styleguidist
│   │   ├── styles                        # CSS styles to be loaded into the style guide
│   │   ├── wrappers
│   │   │   └──styled-components          # Wrappers for Styled-Components
│   │   │      └── ThemeWrapper.js        # Insert styled-components' theme into styleguidist env.
│   │   └── settings.js                     # Styleguidist config
│   ├── webpack
│   │   ├── config.dev.js                 # Webpack development config
│   │   ├── config.production.js          # Webpack production config
│   │   └── rules.js                      # Webpack rules
├── cypress                               # cypress E2E directory
├── node_modules
├── scripts                               # custom scripts (.sh)
│   └── server-check.sh                   # check if dev server is online
├── source                                # source folder
│   ├── app                               # app source
│   │   ├── components                    # react components (dumb components) for universal use
│   │   │   └── v1                        # component's version
│   │   │      ├── button                 # button component
│   │   │      ├── input                  # input component
│   │   │      └── loading                # loading screen component
│   │   │          ├── index.jsx
│   │   │          └── styles.js
│   │   ├── enhancers                     # class/function/method/property enhancers
│   │   │   ├── animate                   # @animate ⟶ screen entrance animation
│   │   │   │   └── index.jsx
│   │   │   ├── auth                      # @auth ⟶ require authentication for given component
│   │   │   │   └── index.jsx
│   │   │   └── bindme                    # @bindme ⟶ automatically bind function to the main scope (replaces this.fooBar.bind(this))
│   │   │       └── index.js
│   │   │   ├── loadable                  # custom react-loadable wrapper
│   │   │   │   └── index.js
│   │   ├── screens                       # screen components
│   │   │   ├── errors                    # base screen name
│   │   │   │   └── not-found             # screen name
│   │   │   │       ├── route.js          # route configurations
│   │   │   │       ├── screen.jsx        # React Screen Component
│   │   │   │       └── styles.js         # component's styles
│   │   │   ├── home                      # screen component
│   │   │   │   ├── route.js              # route configurations
│   │   │   │   ├── screen.jsx            # React Screen Component
│   │   │   │   └── styles.js             # component's styles
│   │   │   ├── restricted
│   │   │   │   ├── route.js
│   │   │   │   ├── screen.jsx
│   │   │   │   └── styles.js
│   │   │   └── root
│   │   │       ├── route.js              # main app. route ⟶ import all used route into a main route
│   │   │       └── screen.jsx            # Root Component ⟶ application setup
│   │   ├── state                         # application data state
│   │   │   ├── actions                       # Redux Actions
│   │   │   │   ├── index.js                  # main actions
│   │   │   │   └── types.js                  # actions types
│   │   │   ├──reducers                   # Redux Reducer
│   │   │   │   ├── auth.js               # authentication reducer
│   │   │   │   └── index.js              # root reducer ⟶ combine all reducers
│   │   │   ├── sagas                     # sagas (redux-saga middleware)
│   │   │   │   ├── auth.js               # authentication saga
│   │   │   │   └── index.jsx             # root saga ⟶ export all sagas
│   │   │   ├── store
│   │   │   │   ├── index.js
│   │   │   │   ├── store.config.dev.js   # redux-store config for development
│   │   │   │   └── store.config.prod.js  # redux-store config for production
│   │   ├── styles                        # styles folder
│   │   │   ├── _vars.scss                # style-guide settings
│   │   │   ├── base.scss                 # global styles, e.g. body, html, etc.
│   │   │   ├── reset.scss                # css reset/reboot, imported from bootstrap
│   │   │   └── responsive-grid.scss      # bootstrap layout system import
│   │   ├── utils                         # global code snippets
│   │   │   └── index.js                  # application services
│   ├── application.jsx                   # index application file - main imports & setup
│   └── index.hbs                         # base application html
├── static
│   ├── images
│   └── robots.txt

Note that in the components folder, there's a folder called v1, which is to represent the current components versions.

Asynchronous Component Preview

One of the React Adventure features is the component loading by demand (asynchronous loading)., which give us the power of really small JavaScript files, splitted into chunks.

Take a peek on the network tab and see the files being loaded by demand.

Installation

Since we have experience some issues with NPM along the time, we strongly recomment the use of YARN Package Manage;

Familiar with Git?

Clone this repository with the following commands:

> git clone https://github.com/themgoncalves/react-adventure.git
> cd react-adventure

Install the Dependencies

yarn install

Run the Application

yarn start

Or With Webpack Dashboard

yarn start:dev

Linting the code

yarn lint

Run the Tests Suites

Jest

yarn test

Or with watch options:

yarn test:watch

E2E

yarn test:e2e

Commands available

Settings available

To access the application settings go to configurations/application/settings.js

Meta

Author

Marcos Gonçalves – LinkedIn – Website

License

Distributed under the MIT license. Click here for more information.

https://github.com/themgoncalves/react-adventure

Contributing

1. Fork it (https://github.com/themgoncalves/react-adventure/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am ':sparkles: Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request