Railsconf 2017 - React & React Native a common codebase across native and web

Rails +React + React Native
A common codebase across web and mobile

@TalkingQuickly
Rails = Productivity

@TalkingQuickly
Mobile = Not Productivity

@TalkingQuickly
React (+Native) = Productivity

@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 / Redux
function 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 ﬂag that we’re
logging in (Store)
Make login API request
(Side effect)

@TalkingQuickly
Handle successful
response (dispatch an
action)
Update ﬂag that we’re now
logged in (Store)
Send user to dashboard
(side effect)
(Side effect)

@TalkingQuickly
Issue Redirect
(side effect)
Router

@TalkingQuickly
Issue Redirect
(side effect)
Router
(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 ﬂag that we’re
logging in (Store)
(Side effect)

@TalkingQuickly
Business Logic is Shared
Components
Actions
Router
Reducers
Side Effects
Side Effects

@TalkingQuickly
Start with Native
• Ignite Generator (!)
• https://github.com/inﬁnitered/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

Railsconf 2017 - React & React Native a common codebase across native and web

More Related Content

What's hot (20)

Similar to Railsconf 2017 - React & React Native a common codebase across native and web (20)

Recently uploaded (20)

Railsconf 2017 - React & React Native a common codebase across native and web