Let's go back in time

The "Can you get the page to appear faster?" era

• Creating database indexes
• Caching everything
• Compressing stuff

The "The carousel widget is broken again" era

• Finding weird jQuery widgets on the internet
• Fixing regressions due to untested JS code

The "The app doesn't work in the subway" era

• Writing cool React/RN components
• Doing fancy state management
• Expecting the app to always behave as expected

Some made up Stats

for App Usages

12% - Dentist Waiting Room - Poor 3G

Some made up Stats

for App Usages

12% - Dentist Waiting Room - Poor 3G

27% - Your Office's toilets - Great Wifi

Some made up Stats

for App Usages

12% - Dentist Waiting Room - Poor 3G

27% - Your Office's toilets - Great Wifi

29% - Awful Tinder date at restaurant - Good 4G

Some made up Stats

for App Usages

12% - Dentist Waiting Room - Poor 3G

27% - Your Office's toilets - Great Wifi

29% - Awful Tinder date at restaurant - Good 4G

78% - The Subway - ?

An App:

• Must handle failure
• Should avoid failure

Must handle failure

Implementing each feature for 3 states

• Expected State
• Loading State
• Blank State

Defensive Design

Should avoid failure

Decreasing the probability for a user to encounter loading and blank states

Reading

Strategies
 

Start Defensive

• Start with an ActivityIndicator
• Facebook strategy: showing final layout with no content
• For long requests: show progress and ease waiting (Postman strategy)

Loading state

Start Defensive

• Fill the space!
• Saving the day: Provide a Call to Action to get back to the normal state
• Hijacking: Distract the user from their original desire

Blank State

Keep persisting

Store level

Server

Data

Redux Store

• Foreground persistance 
• App resuming persistance
• Default with Redux

Keep persisting

Store level

// request the boards
export const boardsRequest = (state: Object) => state.merge({ error: false, fetching: true })
}

// successful boards lookup
export const boardsSuccess = (state: Object, action: Object) => {
  return state.merge({ fetching: false, error: false, boards: action.boards });
};

// failed to get the boards
export const boardsFailure = (state: Object) => state.merge({ error: true, fetching: false })

Keep persisting

Redux persist level

Server

Data

Redux Store

• Restart persistance 
• redux-persist

AsyncStorage

Persist

Rehydrate

Keep persisting

Size issues

• redux-persist-transform-compress for compressing
• redux-persist-transform-filter for filtering

AsyncStorage

Limit: Your device space on iOS, 6MB by default on Android

Keep persisting

Handling updates

const datingApps = [
    { id: 1, name: 'Tinder' },
    { id: 2, name: 'Bumble' },
];

const datingApps = {
    data: [
        { id: 1, name: 'Tinder' },
        { id: 2, name: 'Bumble' },
    ],
    fetching: false
};

const manifest = {
 1: (state) => state
 2: (state) => ({ ...state, datingApps: { data: state.datingApps, fetching: false }}),
};

Current manifest version

redux-persist-migrate

AsyncStorage

Keep persisting

Warning the user

import { NetInfo } from 'react-native';

function handleConnectivityChange(isConnected) {
  // Dispatch action to change the status in the state
}
NetInfo.isConnected.addEventListener(
  'change',
  handleFirstConnectivityChange
);

Finish by optimizing

Writing

Strategies
 

Start Defensive

Warning the user

react-native-dropdown-alert

Take risks

Be Optimistic

• Change your UI when the request is attempted rather than waiting for the server response
• Trigger a commit action when the server responds with a success
• Trigger a rollback when the server responds with a failure

redux-optimist

Take risks

Be Optimistic

BLACK_REQUEST

BLUE_REQUEST

BLACK_ROLLBACK

BLUE_COMMIT

Redux Store

1

2

3

4

5

Take risks

Be Optimistic

Jani Eväkallio

• Handles your read issues by wrapping redux-persist
• Handles your write issues by implementing optimistic behavior and the queuing mecanism

const followUser = userId => ({
  type: 'FOLLOW_USER_REQUEST',
  payload: { userId },
  meta: {
    offline: {
      // the network action to execute:
      effect: { url: '/api/follow', method: 'POST', body: { userId } },
      // action to dispatch when effect succeeds:
      commit: { type: 'FOLLOW_USER_COMMIT', meta: { userId } },
      // action to dispatch if network action fails permanently:
      rollback: { type: 'FOLLOW_USER_ROLLBACK', meta: { userId } }
    }
  }
});

const followingUsersReducer = (state, action) {
  switch(action.type) {
    case 'FOLLOW_USER':
      return { ...state, [action.payload.userId]: true };
    case 'FOLLOW_USER_ROLLBACK':
      return omit(state, [action.payload.userId]);
    default:
      return state;
  }
}

Take risks

Be Optimistic

• Change how network requests are made
• Change the detection of network
• Change the detection of irreconciable errors
• Change the retry strategy

Take risks

... but warn your users!

Strategy:

• Make the warning appear when requesting
• Make the warning disappear on its own or if connexion is restored
• Prevent next warning before a delay

export function * handleNetworkRequiringAction (action) {
  const onlineStatus = yield select(state => state.offline.online);
  if (!onlineStatus) {
    yield put({ type: 'SHOW_CONNEXION_ALERT' });
    const { connexionRestored, timeout } = yield race({
      connexionRestored: take(action => {
          return action.type === 'Offline/STATUS_CHANGED' && action.payload.online;
      }),
      timeout: call(delay, 4000),
    });
    yield put({ type: 'HIDE_CONNEXION_ALERT' });
  }
}

export function * watchNetworkRequiringActions () {
  while (true) {
    const action = yield take([
      BoardsTypes.SUBSCRIBE_TO_BOARD_REQUEST,
      BoardsTypes.UNSUBSCRIBE_TO_BOARD_REQUEST,
    ]);
    yield call(handleNetworkRequiringAction, action);
    yield call(delay, 6000);
  }
}

@connect(state => ({
  connexionAlert: state.connexionAlert,
}), mapDispatchToProps)
export default class BoardsScreen extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (this.dropdown) {
      if (!this.props.connexionAlert && nextProps.connexionAlert) {
        this.dropdown.alertWithType('info', 'Info', 'Offline device');
      } else if (this.props.connexionAlert && !nextProps.connexionAlert) {
        this.dropdown.dismiss();
      }
    }
  }
  render() {
    return (
      <View>
        ...
        <DropdownAlert
          ref={(ref) => this.dropdown = ref}
        />
      </View>
    );
  }
};

Take risks

... but warn your users!

react-redux-saga-offline in preparation ;)

https://twitter.com/WoodyRousseau

Take risks

... and prepare for the worst

What if there is a conflict for PUT and PATCH requests?

BACK-END DEVELOPER ???

Take risks

... and prepare for the worst

DB

F1

F2

F3

UA3

UA2

UA1

U1

U3

U2

Take risks

... and prepare for the worst

https://github.com/theodo-UK/offline-goodies

4 strategies
The idea: reject with a 409 if the update is rejected

Take risks

... and prepare for the worst

const rejectLaterAttemptedUpdate = (options = {}) => (hook) => {
  const updateAttemptDateLabel = options.updateAttemptDateLabel || 'updateAttemptedAt';
  return hook.app.service(hook.path).get(hook.id)
  .then(serverObject => {
    if (serverObject[updateAttemptDateLabel] < new Date(hook.data[updateAttemptDateLabel])) {
      const error = new errors.Conflict('There was a earlier modify attempt');
      return Promise.reject(error);
    }
    return Promise.resolve(hook);
  });
};