Cactus 🌵

by Sirius Software SAS

This package is in progress! More useful info will be shown here.

Introduction

Cactus is mostly a generator, grounded in a convention we thought to be best practices.

Try it!

• npm install
• npm link
• cactus

IMPORTANT: Run cactus standing in the directory where you want the project be generated).
IMPORTANT: For names make sure to use kebab case format (e.g. my-project)

The idea

Fast development, with some learning of the conventions and capabilities of the tool, the developer should be able to use cactus CLI to generate code, files and folders faster.

The CLI should be runnable globally, and whenever project you are located you can run the cactus command to generate a whole project, modules, files and configurations. Everything will have a generalized application as well as customization that you can specify in a single json file, and then run accordingly to the project type.

If cactus can be compared to: Right click -> create file -> name file -> snippet set; then we are good.

Summary

1. Generators and code structure
   • 1.1 Whole project
   • 1.2 React Component
     • 1.a Class Components
     • 1.b React Hooks
   • 1.3 Redux Structure
2. Styling
   • PropTypes
   • ESLint with Google JSDoc convention
3. Testing
4. Best practices
5. Plugins and other utilities
6. Workflow examples
7. Tecnologies
8. Bibliography

1. Generators and code structure

1.1 whole project

Notes:

• We use Redux with a custom structure specification

React

• public/ ignore
  • favicon.ico
  • index.html
  • manifest.json
• src/
  • actions/ -> redux
  • assets/ -> project
  • components/ -> project
  • i18n/ -> OPT project
  • reducers/ -> redux
  • styles/ -> project
  • utils/ -> project
  • module-1/ -> module
  • module-2/
  • ...
  • module-n/
  • index.js -> project
  • routes.js ->
  • settings-dev.json -> project
  • settings-prod.json -> project
  • settings.ts -> project
  • store.js -> redux setup
• .gitignore
• README.md
• package.json

React Native

• test
• android/
  • ...
• ios/
  • ...
• src/
  • actions/ redux
    • index.js
  • assets/ icons, files
  • config/ aws, google, oauth
  • i18n
  • styles/ sass
  • utils/
  • navigation/ react-navigation
  • session/ if has login system
  • common/ components used througout the different app sections
  • app section i/ many as sections in the project
    • components/ main components renders
    • containers/ redux containers
    • appSection.actions.js redux
    • appSection.reducer.js redux
    • appSection.middleware.js redux
    • appSection.services.js redux
• .gitignore automatically generated
• App.js** follows the entry point
• README .md introduction to the project
• app.json
• babel.config.js TODO
• index.js entry point
• metro.config.js TODO
• package-lock.json TODO
• package.json list of dependencies and other configurations
• settings.json project configurations
• store.js redux
• yarn.lock same as package-lock.json

1.2 React Component

There are 3 types available: class, dumb class and functional.

1.2a Class Component

Has an internal state, in some cases are best practice to have them instead of passing them to a redux reducer. Mostly to avoid redux development hassle.

1.2b React Hooks

Gets props, which gets from redux AND parent.

• Parent prop should be documented.
• Redux prop is visible in mapState and mapDispatch (refer to: Cambio 1)

1.3 Redux Structure

• Actions -> constants and type/payload setup.
• Reducer -> initialState and action reducer management.
• Middleware -> request calls and action delivery.
• Services -> back request calling.

2. Styling

Formatters for a consistent conventional code writing.

2.1 PropTypes

In lack of Typescript, at least PropTypes should be used for type inference

2.2 ESLint with Google JSDoc convention

Linter that analyzes the code to flag patterns in Javascript. Uses Google official style convention.

Google JSDoc

3. Testing

jest unit

jest docs

jest components

jest snapshot docs

detox e2e

npm i -g detox-cli
npm i --save-dev detox
npm i --save-dev jest jest-circus
detox init -r jest

detox general configuration

iOS

detox configuration

Android

detox configuration

Ajustes generales

eslint excepcion detox / eslint-plugin-detox

4. Best practices

4.1 Why use TODOs annotation?

Used for marking things to be fixed that are not important but should be fixed in the future sometime. Examples can be need to change the logic to be more readable, like an auxiliary function.

5. Softwares configurations, plugins and tips

5.1 Plugins:

• Intellij IDEA
• Visual Studio Code
  • i18n Ally very recommended i18n manager that helps you in the internationalization part of the proyect. If correctly configured it lets you visualize whether something is traduced or is neeeded, and has a tab to navigate through the translation tree, as well as a coverage for every language.
  • ESLint
  • Path Intellisense autocompletition
  • Brack Pair Colorizer visually see matching brackets
  • Auto Close Tag write 1 tag and forget of the closing tag part 1
  • Auto Rename Tag write 1 tag and forget of the closing tag part 2
  • Todo Tree marks TODO and you can see all of the TODOs. Why having TODOS?
  • Project Manager simple launcher of all projects, very very useful to navigate through projects
  • Material Icon Theme visually see files and folders in the explorer tree, there are other themes as well.
  • Hungry Delete use 1 backspace instead of 2+
  • Git Graph visually see git commits
  • ES7 React/Redux/GraphQL/React-Native snippets code generator inside files, components, hooks, etc. cactus should replace this?

configuration enviroments

Learning keybindings and software capabilities is one more step to a faster development.

Visual Studio Code

• Keybindings:
  • MacOS
  • Windows
  • Linux
• Tips: TODO

Intellij IDEA

• Keybindings: Windows/Linux and MacOS
• Tips: TODO

6. Workflow examples

//TODO

7. Tecnologies

• Already using
  • React Hooks
  • SASS
  • React Redux
  • Firebase
  • Embrace
  • react-router-dom/react-navigation & connected-router
  • i18n
  • Reselect
  • redux-persist
  • AWS Amplify
  • whatwg-fetch
• Tecnologies to be reviewed
  • ESLint
  • Redux Saga
  • Immer
  • Styled components

8. Bibliography

• React Boilerplate: most popular boilerplate, code generator for conventions.

  Summary

  i) Structure

  • component/container -> "Presentational and Container" by Dan Abramov

  Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.

• Reselect
  • Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance
• Functions: arrow functions versus non arrow functions under the hood. Arrow functions are disrupting React.Components
• .js/.ts o .ts/.tsx? Discusión TL;DR both accepted but we will use .js/.ts
• Eslint will use Google's style guide as foundation but we will add rules as we need along the path.
• Reacti18next with redux-persist. TL;DR es mas facil guardar un codigo en localStorage y manejar i18n con eso antes que guardar en redux.
• Por que usar Prettier y ESLint a la vez?
  1. Esta de moda
  2. Prettier se ocupa del exclusivamente del estilo y ESLint del codigo (linter), y despues con eslint-config-prettier deshabilito las reglas de estilo por parte de ESLint.
  • ESLint vs Prettier
  • Prettier docs: integrating with linters
  • Streamline code reviews with ESLint + Prettier
  • Why You Should Use ESLint, Prettier & EditorConfig Nota: este habla de EditorConfig que podria estar bueno para unificar las convenciones propuestas por Prettier y ESLint olvidandose del IDE que se use, entonces si parte del equipo usa IDEA y otro vscode no van a tener problemas.