This is How We Do It — The (best) practices that We at ShoutOUT Labs Follow for Front-end Developments

Before getting into the details, get to know technologies and framework we use in our dashboard.

• React JS
• Bootstrap framework
• React Redux

Front-end initial skeleton code is generated using create react app plugin. We are using the ES6 syntax.

Below are some of the practices we follow at our company for front-end developments.

Naming Conventions

• Folders — snake case. All letters are in lower case & words are separated by an underscore (‘_’).
  Eg: — admin, user_purchase
• Files — pascal case (upper camel case). All words start with a capital letter and the other characters are in lower case.
  Eg: — HomeComponents, AdminComponents
• Javascript classes — pascal case.
• Javascript class methods — camel case. There are no private, public access modifiers in Javascript. So, as a practice, we start method name with an underscore for private methods.
• Eg: _privateMethod()
  publicMethod()
• CSS class names — kebab case. All letters are in lower case. Words are separated by a hyphen (‘-’).
  Eg: — home-content, admin-content
• Constants — All capital. Words are separated by an underscore (‘_’).
  Eg:- BASE_URL

Folder structure

ShoutOUT is an SPA (Single Page Application) and both back-end and front-end codes are under the same project in different folders.

High-level folder structure inside project

As you can see in the above screenshot, we have separated codes as the back-end, front-end, table_schemas etc.. As the focus of this article is the front-end, given below is the screenshot of the front-end folder structure.

Front-end folder structure

As you can see in the screenshot,

• Public directory — index.html file and other assets like images, favicon etc.. Images stored under public/assets/images.
• Src — source files
• Index.js — entry point
• App.js — Higher order component wrapper
• Constants.js — All the global constants
• Components directory — All react components
• Redux directory — Redux data store files. All the containers are under containers sub-directory, Reducers are under reducers sub-directory, and Actions are inside actions sub-directory.
• Services directory — 3rd party API connections, utility services, and other service connectors.

Component repository

All the components are exported through Components.js file. This acts as the component repository. If any component needs to refer to another component, it has to refer through this file.

The inside of Components.js will look like this:

import Home from ‘./home/Home’;

import Header from ‘./header/Header’;

export {

Home,

Header

}

If Home.js needs to import Header.js, it has to refer to Components.js, not Header.js directly.

import { Header } from ‘./../Components’;

This has several advantages.

1. If we want to change the name or the location of Header.js file, it’s just a matter of updating the ‘export’ of Component.js.

Eg: export {

Header: HeaderNew

}

2. When it is required to refer to multiple components, we only have to import Components.js.

Eg: import { Header, Home } from ‘./../Components’;

3. You can easily see all the imports and exports in a single file.

Constants

All the global constants are stored in Constants.js file. This way we can easily manage all the constants.

Eg:

const DEFAULTS = {

BASE_URL: ‘https://api.getshoutout.com/v1/',

DEFAULT_NAME: ‘Newbie’,

}

export default DEFAULTS;

Services

All the services which connect front-end to back-end, 3rd party services, and common utility services are inside this directory. And we name the services after the service name.

Eg: Utilities — UtilServices.js
ShoutOUT API services (connections) — ShoutOUTServices.js
Google Services — GoogleServices.js

All these services are exported via a single file called Services.js which act as service repository (similar to the component repository).

Service is wrapped as a class and all the methods are static. So there’s no need to create a new object of the service when referring a method.

Eg:

class ShoutOUTService {

static submitForm(formId, formData) {

return //API call promise

}

}

export default ShoutOUTService;

We can just call the method like ShoutOUTService.submitForm().

I will stop with this for now. The second part of this post will cover the following topics

(I will only write part two of this article if I get maximum claps for this post. 😉).

• What to store in Local states
• Manage initial state
• Functions

Common function for form on change events

Using form onsubmit event

• Form validation

Use default validation as possible

• React Component & Pure Component
• Redux

Common Actions

Action split

• CSS classes

Component wise styles

If you have any thoughts or if you think there are things to be changed, please do let me know. Together, we can make it right. 🙂

Keep clapping till we meet with the 2nd part of this post. 🙂