Awesome Open Source
Awesome Open Source

⛰ React Adventure

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

Known Vulnerabilities GitHub issues GitHub stars GitHub forks Awesome GitHub All Releases



themgoncalves logo


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

Feature Experimental or Beta For Development For Production
Progressive Web Application Ready
ES7 Decorators
Asynchronous Components Loading
Code Splitting & Chunks
Custom chunks name for async requests
prefetch & preload ready
Decentralized Router Configuration
Router State Synchronized with Redux
Document Head Manager (SEO)
Hashed files in Production build (e.g. [name].[hash].bundle.js)
Hoist JSX el. as value types in the highest scope
Subresource Integrity)
SVG as React Component
Remove PropTypes from Production build
Typechecking With PropTypes
Output fiiles Treemap
Assets compression served them with Content-Encoding
Style Guide Centralized & Globally available
Component Style Guide (React Styleguidist)
HTML output minified
E2E Tests
Snapshot testing
Code testing
Webpack 4 with Custom Configs (Dev & Prod.)
Redux with Custom Configs (Dev & Prod.)
Redux Saga
ES6 ready
ES7 ready
ES8 ready
React 16+
styled-components
super-query
Webpack Aliases transformation
Loads environment vars from a .env file
Airbnb JavaScript Style Guide
Git Hooks (Prevent bad git commit, git push, or whatever you want)
Image Compression
Real time update

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

Command Description
build build the application for production
start start the application
start:dev start the application with Webpack Dashboard
start:silence start the application with less output messages
lint lint the application's code
lint:fix lint the application's code & fix
cypress start e2e tests with cypress
cypress:open open cypress
cypress:record start e2e tests with cypress in the record mode
cypress:chrome start e2e tests with cypress in the chrome mode
cypress:headed start e2e tests with cypress in the headed mode
styleguide start styleguidist server
styleguide:build build styleguidist
test start jest tests
test:watch start jest tests & watch files for modifications
test:coverage check the % of tests coverage
test:e2e check the server status & start e2e tests
test:e2e:open check the server status & open cypress
test:e2e:record check the server status & start e2e tests in the record mode
test:e2e:chrome check the server status & start e2e tests in the chrome mode
test:e2e:headed check the server status & start e2e tests in the headed mode

Settings available

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

Property Description Default Value
version Application version current application version
pwa Progressive Web Application
pwa.enabled Enable or Disable. Production Only true
pwa.serviceWorkerName Service Worker File Name service-worker.js
pwa.assetsManifest Assets Manifest File
pwa.assetsManifest.enabled Enable or Disable. Production Only false
pwa.assetsManifest.fileName Assets manifest file name assets-manifest.json

Meta

Author

Marcos GonçalvesLinkedInWebsite

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 '✨ Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (67,431
redux (1,136
reactjs (1,003
pwa (311
jest (261
styled-components (220
progressive-web-app (118
redux-saga (102
decorators (88
react-router-v4 (64
cypress (64
enzyme (40
e2e-tests (34

Find Open Source By Browsing 7,000 Topics Across 59 Categories