Rails +React + React NativeA common codebase across web and mobile

@TalkingQuickly

Rails = Productivity

@TalkingQuickly

Mobile = Not Productivity

@TalkingQuickly

React (+Native) = Productivity

@TalkingQuickly

I’m Ben

@TalkingQuickly

Aim of this talk

• General Architecture

• Considerations for a shared codebase

• Practicalities & Pitfalls

@TalkingQuickly

React != Framework

@TalkingQuickly

But this is“Built In React” !?

@TalkingQuickly

Typical React Stack

State

React

Side Effects

Router

@TalkingQuickly

Typical React Stack

State

Side Effects

Router

React

@TalkingQuickly

Typical React Stack

Router

State

Side Effects

React

@TalkingQuickly

State

Typical React Stack

Router

React

Side Effects

@TalkingQuickly

Oversimplifying Flux / Reduxfunction counterReducer(initialState = {}, action) { switch (action.type) { case 'INCREMENT': return Object.assign({}, initialState, { count: initialState.count + action.incrementBy }) case 'DECREMENT': return Object.assign({}, state, { count: initialState.count - action.decrementBy }) default: return initialState }}

{ count: 1, name: ‘Jim’, rank: 4}

initialState

{ type: 'INCREMENT', incrementBy: 1}

action

{ count: 2, name: ‘Jim’, rank: 4}

New State

@TalkingQuickly

Side Effects

Typical React Stack

Router

React

State

@TalkingQuickly

Side Effects Asynchronous Stuff

{ type: 'INCREMENT', incrementBy: 5}

action

{ count: 6, name: ‘Jim’, rank: 4}

New State

API Call

“Side Effect” (Saga)

@TalkingQuickly

Router

State

React

Side Effects

What should be shared

@TalkingQuickly

What should be shared

Router

State

Side Effects

React

@TalkingQuickly

In Practice: Login Flow

Show the login screen (Component)

Click Login (dispatch an action)

Go To Login (Router)

Update flag that we’re logging in (Store)

Make login API request (Side effect)

@TalkingQuickly

In Practice: Login Flow

Handle successful response (dispatch an

action)

Update flag that we’re now logged in (Store)

Send user to dashboard (side effect)

Make login API request (Side effect)

@TalkingQuickly

In Practice: Login Flow

Issue Redirect

Send user to dashboard (side effect)

Router

@TalkingQuickly

In Practice: Login Flow

Issue Redirect

Send user to dashboard (side effect)

Router

Send user to dashboard (side effect)

Router

Invoke Callback

Redirect (Component)

@TalkingQuickly

Business Logic is Shared

Show the login screen (Component)

Click Login (dispatch an action)

Go To Login (Router)

Update flag that we’re logging in (Store)

Make login API request (Side effect)

@TalkingQuickly

Business Logic is Shared

Components

Actions

Router

Reducers

Side Effects

Side Effects

@TalkingQuickly

Start with Native

• Ignite Generator (!)

• https://github.com/infinitered/ignite

@TalkingQuickly

Restructure• App/

• Shared/

• Sagas

• Redux

• …etc

• Native/

• Web/

@TalkingQuickly

Restructure• App/

• Shared/

• Sagas

• Redux

• …etc

• Native/

• Web/

NPM Package

@TalkingQuickly

Watch out for .babelrc

—resetCache

@TalkingQuickly

Example Project

www.talkingquickly.co.uk/railsconf2017

ben@joincatapult.com