Building a social network app with over 100K users 100% in React Native — Sharing Best Practices, Performance Optimizations, and Practical Experience


(Adam Terlson) #1

In this talk, I share the experience we have gained building iOS and Android apps using React Native for over 100K global users. The talk contains best practices, tips, tools, code sample demos, and a whole ton of opinions.

I’d be happy to answer any questions you may have in the comments!

If you know of any community who might like to hear this talk live (I live in Munich, Germany), please get in touch!


(Adam Skinner) #2

I really enjoyed this presentation and actually put the { ids, byId, byComposite } idea into play recently.


(Adam Terlson) #3

I’m happy to hear you enjoyed my talk! When you say “byComposite,” this is a “pre-computed index” sort of lookup table? Or what do you mean “byComposite”?


(Adam Skinner) #4

Yeah. When I say byComposite, I mean an object whose keys are composed from properties of the object. Like identifying a row in the database by a composite key rather than a unique id.

eg { id: 1, itemType: 'a', itemId: '234' } gets popped on as { "a 234": 1 } or if multiples meet the “query” represented by the key, an array of ids.


(Adam Skinner) #5

While I don’t have any smooth generic methods yet like you do, here’s how I implemented the idea in my reducer for comments:

  const getCompositeKey = c => `${c.ItemType} ${c.ItemId}`;

  if (action.type === COMMENTS_RECEIVED) {
    const ids = map(action.data, 'Id');
    const byId = keyBy(action.data, 'Id');
    const compositeItems = groupBy(action.data, getCompositeKey);
    const byItem = transform(compositeItems, (result, value, key) => {
      result[key] = map(value, c => c.Id); // eslint-disable-line no-param-reassign
      return result;
    });
    return {
      ids: union(state.ids, ids),
      byId: merge(state.byId, byId),
      byItem,
    };
  }

(Eduardo Rabelo) #6

great talk @adamterlson, thanks for sharing your experience!

i liked the way you used race as control flow for cancelling the worker when the device is on/off!

:hugs:


(Adam Terlson) #7

@oieduardorabelo I made my saga demo into a “lightning talk”, and you can view that here: https://www.youtube.com/watch?v=Pg7LgW3TL7A

Please share with others you think might find it interesting. :slight_smile:


(Adam Terlson) #8

@demoran23 Yup, looks very similar! Nice. :slight_smile:

By the way, it looks like you’re looping through your state/action.data structure multiple times: during groupBy, transform and during merge. Not sure how big your data structures are, but you could consider using mergeWith instead to avoid that.

Thanks for sharing!