Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adding React Native to an Existing App - Artsy x React Native 2018

Adding React Native to an Existing App - Artsy x React Native 2018

How and why we choose to integrate React Native into our native app

http://artsy.github.io/artsy-x-react-native.html

Fec952eb14022f55b2747510ac685591?s=128

Artsy Open Source

July 09, 2018
Tweet

Transcript

  1. React Native & Existing iOS Projects Eloy Durán

  2. None
  3. • Ruby Developer since 2004 • Mac Developer since 2006

    • iOS Developer since 2009 Me! — Eloy Durán
  4. • RubyCocoa • MacRuby • RubyMotion Me! — Eloy Durán

  5. • CocoaPods 2010-2015 Me! — Eloy Durán

  6. • React Native since Valentine’s Day 2016 Me! — Eloy

    Durán
  7. • Xcode Survivor Me! — Eloy Durán

  8. Artsy — A Future Where Everyone Is Moved By Art

    Every Day
  9. Artsy — Open Source By Default

  10. Eigen — Native iOS App Since 2012 1. Drop Screenshot

    Here 2. Resize to cover pink area
  11. Emission — React Native Views Since April 2016 1. Drop

    Screenshot Here 2. Resize to cover pink area
  12. Introducing React Native Into Our Codebase — Why?

  13. Why — Simpler Mental Model

  14. Why — Spaghetti Code

  15. Why — New Paradigm

  16. Why — Networking

  17. Why — Request Waterfall

  18. Why — GraphQL

  19. Why — GraphQL

  20. Why — De-silo people

  21. Why — Pair up

  22. Why — Improve developer experience

  23. Why — Expand platform support

  24. Why — Android

  25. Swift — Optimised

  26. Swift — Developer Experience

  27. Swift — Just a language

  28. • Simpler Mental Model • Simpler and more efficient networking

    • De-silo people • Improve developer experience • Expand platform support Why React Native — Summary
  29. Introducing React Native Into Our Codebase — How?!

  30. How — Integration

  31. How — Package

  32. How — CocoaPods pros

  33. How — CocoaPods cons

  34. How — Routing

  35. How — Mixed 1. Drop Screenshot Here 2. Resize to

    cover pink area
  36. class Artwork extends React.Component { handleTap() { SwitchBoard.presentNavigationViewController(this, this.props.artwork.href) }

    // ... } class SearchBar extends React.Component { handleTap() { Switchboard.presentModalViewController(this, "/search") } // ... } Mixed — How
  37. @implementation AREmissionSetup - (void)configureEmissionInstance:(AREmission *)emission; { emission.switchBoardModule.presentNavigationViewController = ^(UIViewController *

    _Nonnull fromViewController, NSString * _Nonnull route) { [fromViewController.navigationController pushViewController:[self viewControllerForRoute:route] animated:YES]; }; emission.switchBoardModule.presentModalViewController = ^(UIViewController * _Nonnull fromViewController, NSString * _Nonnull route) { UIViewController *viewController = [self viewControllerForRoute:route]; UINavigationController *navigationController = [self navigationControllerWithRootViewController:viewController]; [fromViewController.navigationController presentViewController:navigationController animated:YES completion:nil]; }; } // ... @end Mixed — How
  38. How — Nested Scrollviews

  39. How — Demo time!

  40. How — Event Forwarding

  41. How — Shared Caching

  42. How — Opaque Drawing

  43. Introducing React Native Into Our Codebase — Conclusions