talk/docs/_docs/03-05-client-architecture.md

title, permalink

title	permalink
Client Architecture	/docs/architecture/client

The Stack

• React
• Redux

The Architecture

Our frontend lives within talk/client folder. Every folder contains a plugin. In coral-framework you will find the core architecture of Talk. Here is where our Redux Application, translations, components, and helpers live.

Presentational and Container Components

We use a common simple pattern called Presentational and Container Components

It basically consist in having two types of components:

• Presentational
• Containers

Presentational Components

• How our UI looks like
• Are stateless components
• Render props
• Allow containment of children via this.props.children
• They have DOM Markup

Container Components

• How things work
• They don’t have markup nor styles
• They provide data and behavior to Presentational or Container Components
• They connect via react-redux’s connect() to the state.
• They mapStateToProps the state to the Presentational Container.
• They mapDispatchToProps to send actions to the Presentational Container.
• Name Convention <Name>Container.js

How a container looks like:

/*
* mapStateToProps
* We map the part of the state that we want to use
*/

const mapStateToProps = state => ({
  auth: state.auth.toJS()
});

/*
* mapDispatchToProps
* We map the actions that we want to use
*/

const mapDispatchToProps = dispatch => ({
  checkLogin: () => dispatch(checkLogin())
});


/*
* connect
* We wrap our container in a connect() function
*/

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignInContainer);

How our SignInContainer works: talk/SignInContainer.js · GitHub

Within our plugins we create two folders containers and components so we can differentiate them:

coral-sign-in/
├── containers/
│   └── SignInContainer.js
└── components/
    ├── SignInContent.js
    └── SignUpContent.js

More about this architecture:

Container Components – Learn React with chantastic – Medium

Presentational and Container Components – Dan Abramov – Medium

GraphQL

We use Apollo to handle graph requests and handle state.

Redux

We use Redux to handle the auth state.

Test

[How we do testing at Coral with Talk]({{ "/docs/development/tools" | absolute_url }})

Lint

For linting in Talk we use eslint:recommended

You can find more info about the rules and best practices here:

http://eslint.org/docs/rules/#best-practices

Lint the code

yarn lint

The Future of the Frontend

• Preact
• Reselect