Adam Terlson

Lead Engineer @ InterNations

ASP
ASP.NET
.NET MVC + FE
Node + FE
FE

2.5 years

React Native

👶

InterNations

Global social network for expats

Events/activities

3 million users

100 employees

Existing Production Apps

• Developed by external contractors
• +50K iOS / +50K Android Users
• Hybrid

MISSION:

SLAY THE HYBRIDS

Objectives:

1. First class native feel & performance
2. Android & iOS simultaneously
3. Offline-first
4. Support a broad range of features

EVENTS

SEARCH

MESSAGING

USERS

GROUPS

CONTACTS

MAPS

PUSH NOTIFICATIONS

ACTIVITY FEEDS

3 FE

2 BE

Me

solid code

Write

Prettier

Fewer keystrokes

Style consistency

eslint

Error prevention

Static Type Checking

is

CRITICAL

Flow

GOOD

Prevents many classes of errors

Significantly reduces refactoring effort

BAD

Library types are missing or outdated

Error reporting is bad (but somewhat consistent)

Doesn't play well with Saga

Issues are slow to get fixed

Random $#(%*

TRY - Flow's spread annotation (instead of union)

https://github.com/facebook/flow/issues/1326

FAIL - Eslint doesn't support the syntax
https://github.com/babel/babel-eslint/issues/443

WORKAROUND - Flow's comment syntax

FAIL - Prettier strips the comments
https://github.com/prettier/prettier/issues/204

Next time: Type Script

Step 2: Release 

Nightlies

Continuous Delivery

&

Jenkins

Code Push 

Fastlane

state?

State of JS - 2017 Survey Results

Redux

Standard, most popular solution

Lots of tooling, libraries

Functional in style

Rather boring

Actions

1. Separate concerns
2. Traceable side effects

Normalized Collections

idsInsert + idsRemove

byIdInsert + byIdRemove

byIndexInsert + byIndexRemove

case "MESSAGE_RECEIVE":
    return {
        ids: idsInsert(state.ids, action.payload),
        byId: byIdInsert(state.byId, action.payload),
        byConversationId: byIndexInsert(
            state.byConversationId, 
            action.payload, 
            (message: TMessage) => message.converationId,
        ),
    }

Selector Functions

• Get a single value from state
• Type annotated
• Namespaced
• Unit Tested
• Cached

Functional UI

See medium.com/@adamterlson

Tweet

1: Presentational

UI Presentation

Stateless Functions that compute visible things:

View, Text, Styles, Animation, Static Text

No business logic!

Documented in Storybook

Not unit tested (shhh)

Code: Presentational

2: Higher Order Components

UI Behavior

• Connect
• Dispatch on mount (data bootstrapping)
• Dispatch on interval
• Pull down to refresh
• Show modal
• Show action sheet
• Placeholder
• Orientation lock
• Infinite scrolling
• Error boundary

3: Composition Layouts

compose(
    connect(mapConversationList),

    data({
        onMount: apiActions.reqConversations,
    }),

    pagination('conversations', {
        limit: 10,
        onLoadNextPage: apiActions.reqConversations,
    }),
)

Behavior

(props: ConnectProps & PaginationProps) => (

    <FlexView>
        <SwipeableList
            data={props.conversations}
            onSwipe={props.onSwipe}
            renderItem={renderItem}
            onEndReached={props.onLoadNextPage}
        />
        <FloatingButton 
            onPress={props.onCreateMessagePress} />
    </FlexView>
)

Presentation

Code: Layout

TERRIBLE

navigation is

React Native Navigation

React Navigation

Navigator experimental

React Router Flux

Navigator

Navigator iOS

WALL

/app
    /ui
        /presentational
        /layouts
        /navigation
        

import ... from 'react-native-navigation'

Higher Order Components

+
Redux Middleware

Offline First

Redux Saga

Powerful

Expressive

Awesome

Mobile

"It's too complicated"

Code: API module

Diagram

Modules named by side effect source

Saga dedicated actions

Saga Modules

Code: Saga Root

"Regular" Redux Saga Tests
Are Flawed

use
Redux Saga Test Plan

Mental

Model

Overall Diagram

import saga, { sagaMiddleware } from 'app/saga'
import makeStore from 'app/store'
import ui from 'app/ui'

const store = makeStore(sagaMiddleware)

sagaMiddleware.run(saga)

const app = ui(store)

export default app

RCTFatalException: 
Unhandled JS Exception:
TypeError: undefined is 
not an object (evaluating 'e.id') 

This error is located at: 
in t in t in t in t in 
Unknown in n in Connect(n)

Debugging

Name your components

export default function withFoo(Component) {
  function WithFoo(props) {
    // TODO: do something special here.
    return <Component {...this.props} />;
  }

  WithFoo.displayName = `withFoo(${Component.displayName || Component.name}`;
  return WithFoo;
}

Source: https://github.com/airbnb/javascript/issues/968

Use React Native Debugger

But....

• Saga stack traces source the same (wrong) line
• Hot module reloading doesn't work

Debugging API calls in Chrome

Stack traces are often in native code

React Native Performance

Android First

Optimization

• Reduce re-renders
  1. React.PureComponent
  2. shouldComponentUpdate()
  3. Getter cache (reselect)
  4. Remove arrow functions in render, notably in lists
  5. Control re-render (redux-batched-subscribe)
• Native Navigation
• Reduce time to component mount

Otherwise...

🤞

Production Monitoring

MS App Center

• Releases, builds, tests, crashes, events
• Works with Code Push
• JavaScript stack traces in crash logs
• Nice to use, but events still suck

"How much native code did you write?"

0

"How much code is reused between iOS and Android?"

+95%

so?

React Native

⭐️ ⭐️ ⭐️ ⭐️ ⭐️