Embed Size (px)
Citation preview
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
