Development Best Practice

improvement_list.md

After few hours read susan source code. These are my suggestions for now:

Table of Content

• Use Eslint
• Don't put anonymous function inside render
• Separate big function into smaller function
• Separate files into smaller chunk
• Do write unit tests
• Create documentation
• Enable editorconfig
• Enable CI/CD
• Use extensions for easier life

Use Eslint

Do enable Eslint on the project for better code. You could follow airbnb style, for convenience install vscode extension will help a lot while writing code directly.

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://hackernoon.com/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213

Don't put anonymous function inside render

every re-render, the anonymous function will always be re-created and it cost some memories and performance. Comparing:

render() {
  return (
    <View onLayout={() => {console.log('test')}>
  );
}

Please do like this instead:

_onLayoutCallback = () => { console.log('test'); };

render() {
  return (
    <View onLayout={this._onLayoutCallback}>
  );
}

Separate big function into smaller function

For easier test, ease of debugging and minimize future bug because some changes won't impact the other. For example, if you feel inside render function is to big, lets try move the content to several functions and would be like this:

render() {
    return (
      <View>
        {this._renderHeader()}
        {this._renderContent()}
        {this._renderFooter()}
      </View>
    );
  }

Separate files into smaller chunk

Separate config, component, or style into different files. Also try make smallest component as possible, for easier to test and mock.

Do write Unit Test

Beside functional unit test, please consider snapshot test also you can measure how much the test coverage and be pretty confident with your changes. If you think your tests getting slower, consider mocking each component also. reference:

• https://facebook.github.io/jest/docs/en/snapshot-testing.html
• https://facebook.github.io/jest/docs/en/mock-functions.html

Create Documentation

A lot of method, class missing its documentation. Please consider using a full doc on each method, what it's purpose and do. You will be thanked by next maintainer of the project for such generous doc. Example:

/**
 * Sort contact comparator by alphabet A to Z
 * @param {object} contact1 first contact object
 * @param {object} contact2 sencond contact object
 */
export const sortContactByTitle = (contact1, contact2) => {
  const contactTitle1 = contact1.title.toLowerCase();
  const contactTitle2 = contact2.title.toLowerCase();
  return contactTitle1.localeCompare(contactTitle2);
};

Enable EditorConfig

With editor config, you can use consistent style across editor including indent space, end of new line, etc. Example of .editorconfig:

# http://editorconfig.org

# A special property that should be specified at the top of the file outside of
# any sections. Set to true to stop .editorconfig file search
root = true

[*]
# STYLES FOR ALL FILES: *
# Indentation
# Possible values - tab, space
indent_style = space

# Indentation size in single-spaced characters
# Possible values - an integer, tab
indent_size = 2

# Line ending file format
# Possible values - lf, crlf, cr
end_of_line = lf

# File character encoding
# Possible values - latin1, utf-8, utf-16be, utf-16le
charset = utf-8

# Denotes whether to trim whitespace at the end of lines
# Possible values - true, false
trim_trailing_whitespace = true

# Denotes whether file should end with a newline
# Possible values - true, false
insert_final_newline = true


[Makefile]
# STYLES JUST FOR MAKEFILES
# Indentation style
# Possible values - tab, space
indent_style = tab

Enable CI/CD

Gitlabs has it's own CI/CD implementation called pipeline. Instead Jenkins, for generating apk, i believen it could be done easier and faster for QA to test by enabled it. reference (nb: some CLI/scripting skill may required):

• https://docs.gitlab.com/ee/ci/yaml/
• https://facebook.github.io/react-native/docs/signed-apk-android.html

Use Extension for Easier Life

If you are using VSCODE, please re-consider these extensionn:

• EditorConfig
• ESLint
• GitLens
• Document This