AshaFusionCross

Set up

See Wiki

Coding style

Follow Airbnb JavaScript Style Guide

ESLint is used as linter.

It is recommended to install linter plugin for your editor.

Flow

flow for static type checking. Basically, all files are targets except tests and mocks.

Test

Jest as testing framework. Place tests in **/__tests__/*, mocks in **/__mocks__/* if necessary.

CI

Wercker as CI service.

• npm test
• static type checking by flow
• coding rule checking by eslint

are executed.

Structure

├── __mocks__          // Mocks of external libraries for Jest
├── android            // Source codes for android generated by react-native
├── assets             // Assets
├── data               // Resources
├── flow  
│   └── types          // Type definitions for flow
├── ios                // Source codes for iOS generated by react-native
├── src
│   ├── actions        // Action
│   ├── common         // Components used on both web and native
│   ├── connects       // Connect methods used on both web and native
│   ├── data           // Fixed data provided as js objects
│   ├── form-styles    // Form definitions
│   ├── native         // Source codes for native app
│   │   ├── components
│   │   ├── containers
│   │   └── forms
│   ├── sagas          // redux-saga
│   ├── selectors      // reselect
│   ├── store          // store
│   │   └── reducers   // reducers
│   ├── utils
│   └── web            // Source codes for web app
│       ├── components
│       ├── containers
│       ├── forms
│       ├── sass
│       └── static     // Static files for web app which are copied into 'public' dir at build
├── test               // For Jest
└── utils              // Utility scripts

• actions, store, store/reducers: redux
• sagas: redux-saga files which handle async logics
• selectors: Selector methods which extract subtree from redux's state tree. These are basically used mapStateToProps() of container components (described below). Data transformations are also included adding to extractions and reselect is used to memoize selectors which calculates large data or runs frequently.

components / containers

• components / containers under web / native are Presentational components / Container components．
• See http://redux.js.org/docs/basics/UsageWithReact.html

Web / Native

• Sources contained by web / native are platform-specific codes. Basically, web are written with React and native with React Native.
• Others are commonly used for both web / native.
• Basically, (web|native)/containers/* imports files under connects/ and apply them to Presentational components. Logics using connect() are basically placed under connects/.
• c.f.) http://qiita.com/yuichiroTCY/items/7c66691fe6cc244053de (Japanese)

Form

react-redux-form is used.

Forms are dynamically constructed based on the definitions stored in form-styles.

web/forms/fields/*, native/forms/fields/* are form components.