Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

295 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Rails +React + React Native A common codebase across web and mobile
  2. 2. @TalkingQuickly Rails = Productivity
  3. 3. @TalkingQuickly Mobile = Not Productivity
  4. 4. @TalkingQuickly React (+Native) = Productivity
  5. 5. @TalkingQuickly I’m Ben
  6. 6. @TalkingQuickly Aim of this talk • General Architecture • Considerations for a shared codebase • Practicalities & Pitfalls
  7. 7. @TalkingQuickly React != Framework
  8. 8. @TalkingQuickly But this is“Built In React” !?
  9. 9. @TalkingQuickly Typical React Stack State React Side Effects Router
  10. 10. @TalkingQuickly Typical React Stack State Side Effects Router React
  11. 11. @TalkingQuickly Typical React Stack Router State Side Effects React
  12. 12. @TalkingQuickly State Typical React Stack Router React Side Effects
  13. 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. 14. @TalkingQuickly Side Effects Typical React Stack Router React State
  15. 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. 16. @TalkingQuickly Router State React Side Effects What should be shared
  17. 17. @TalkingQuickly What should be shared Router State Side Effects React
  18. 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. 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. 20. @TalkingQuickly In Practice: Login Flow Issue Redirect Send user to dashboard (side effect) Router
  21. 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. 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. 23. @TalkingQuickly Business Logic is Shared Components Actions Router Reducers Side Effects Side Effects
  24. 24. @TalkingQuickly Start with Native • Ignite Generator (!) • https://github.com/infinitered/ignite
  25. 25. @TalkingQuickly Restructure • App/ • Shared/ • Sagas • Redux • …etc • Native/ • Web/
  26. 26. @TalkingQuickly Restructure • App/ • Shared/ • Sagas • Redux • …etc • Native/ • Web/ NPM Package
  27. 27. @TalkingQuickly Watch out for .babelrc —resetCache
  28. 28. @TalkingQuickly Example Project www.talkingquickly.co.uk/railsconf2017 ben@joincatapult.com

×