Slides supporting the talk from Railsconf 2017 by Ben Dixon. Full video is available on confreaks.

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

2. @TalkingQuickly
Rails = Productivity

3. @TalkingQuickly
Mobile = Not Productivity

4. @TalkingQuickly
React (+Native) = Productivity

5. @TalkingQuickly
I’m Ben

6. @TalkingQuickly
Aim of this talk
• General Architecture
• Considerations for a shared codebase
• Practicalities & Pitfalls

7. @TalkingQuickly
React != Framework

8. @TalkingQuickly
But this is“Built In React” !?

9. @TalkingQuickly
Typical React Stack
State
React
Side Effects
Router

10. @TalkingQuickly
Typical React Stack
State
Side Effects
Router
React

11. @TalkingQuickly
Typical React Stack
Router
State
Side Effects
React

12. @TalkingQuickly
State
Typical React Stack
Router
React
Side Effects

13. @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

14. @TalkingQuickly
Side Effects
Typical React Stack
Router
React
State

15. @TalkingQuickly
Side Effects Asynchronous Stuff
{
type: 'INCREMENT',
incrementBy: 5
}
action
{
count: 6,
name: ‘Jim’,
rank: 4
}
New State
API Call
“Side Effect” (Saga)

16. @TalkingQuickly
Router
State
React
Side Effects
What should be shared

17. @TalkingQuickly
What should be shared
Router
State
Side Effects
React

18. @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)

19. @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)

20. @TalkingQuickly
In Practice: Login Flow
Issue Redirect
Send user to dashboard
(side effect)
Router

21. @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)

22. @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)

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

24. @TalkingQuickly
Start with Native
• Ignite Generator (!)
• https://github.com/infinitered/ignite

25. @TalkingQuickly
Restructure
• App/
• Shared/
• Sagas
• Redux
• …etc
• Native/
• Web/

26. @TalkingQuickly
Restructure
• App/
• Shared/
• Sagas
• Redux
• …etc
• Native/
• Web/
NPM Package

27. @TalkingQuickly
Watch out for .babelrc
—resetCache

28. @TalkingQuickly
Example Project
www.talkingquickly.co.uk/railsconf2017
ben@joincatapult.com