Skip to content

Latest commit

 

History

History
78 lines (61 loc) · 3.05 KB

architecture.md

File metadata and controls

78 lines (61 loc) · 3.05 KB
Raw

Architecture

Data and state: Redux

zulip-mobile uses Redux for state management and data flow. Please read the Redux docs for more information on the Redux architecture and terminology (such as actions, reducers, and stores). Briefly:

  • Global app state is stored in a central place, the Redux store.
  • At any time, the Redux state is a large tree of objects, all treated as immutable.
  • To make changes, the whole state is replaced with a new state object. (This sounds extravagant but isn't: because everything's immutable, the old and new states can share all the sub-objects that didn't change.)

See our React/Redux architecture doc for a more detailed explanation as applied to our app.

We use selectors to extract (or select) data from the Redux store. Learn more about the concept of selectors Some selectors are memoized, using Reselect.

For the structure of our Redux state tree, see GlobalState in src/reduxTypes.js, and follow interesting types to their definitions: Message, User, Account and many others have detailed jsdoc comments.

For large parts of the Redux state tree, we persist the data to the app's local storage on the device, using redux-persist. See storeKeys and cacheKeys in src/boot/store.js for which parts of the tree we persist, which we don't, and why. See also the logic handling REHYDRATE actions in a few reducers, for additional wrinkles on the persisted data.

Code structure

Directories

  • /node_modules - dependencies installed by yarn from NPM
  • /android - auto-generated by React Native
  • /ios - auto-generated by React Native
  • /docs - developer documentation
  • /src - Javascript source code

In general most of the work will be inside of the /src directory. The only reason to touch the /ios or /android directories would be to add native modules.

Top-level files

  • package.json - specifies yarn / NPM dependencies and scripts for the project
  • .babelrc - config file for Babel transpiler (ES6 -> ES5)
  • .eslintrc - config file for linting rules (we're using Airbnb rules)
  • .flowconfig - config file for Flow static type checker (unused)
  • index.js - entry point for the app

/src directory

The source directory is broken up into subdirectories corresponding to components of the app:

  • account - login, logout, and user account
  • api - clients for the Zulip server API
  • common - common components for multiple reuse (buttons, inputs, etc.)
  • compose - composing messages
  • message - messages and groups of related messages
  • nav - navigation
  • streams - stream of messages
  • users - user display, search and selection

ZulipMobile.js contains the top-level React component for the app and boot/reducers.js contains the top-level reducer.