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

Transcript

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

   View Slide

2. View Slide

3. • Ruby Developer since 2004
   • Mac Developer since 2006
   • iOS Developer since 2009
   Me! —
   Eloy Durán
   

   View Slide

4. • RubyCocoa
   • MacRuby
   • RubyMotion
   Me! —
   Eloy Durán
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Artsy —
   Open Source By Default
   

   View Slide

10. Eigen —
    Native iOS App Since 2012
    1. Drop Screenshot Here
    2. Resize to cover pink area
    

    View Slide

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

    View Slide

12. Introducing React Native Into Our Codebase —
    Why?
    

    View Slide

13. Why —
    Simpler Mental Model
    

    View Slide

14. Why —
    Spaghetti Code
    

    View Slide

15. Why —
    New Paradigm
    

    View Slide

16. Why —
    Networking
    

    View Slide

17. Why —
    Request Waterfall
    

    View Slide

18. Why —
    GraphQL
    

    View Slide

19. Why —
    GraphQL
    

    View Slide

20. Why —
    De-silo people
    

    View Slide

21. Why —
    Pair up
    

    View Slide

22. Why —
    Improve developer experience
    

    View Slide

23. Why —
    Expand platform support
    

    View Slide

24. Why —
    Android
    

    View Slide

25. Swift —
    Optimised
    

    View Slide

26. Swift —
    Developer Experience
    

    View Slide

27. Swift —
    Just a language
    

    View Slide

28. • Simpler Mental Model
    • Simpler and more efficient networking
    • De-silo people
    • Improve developer experience
    • Expand platform support
    Why React Native —
    Summary
    

    View Slide

29. Introducing React Native Into Our Codebase —
    How?!
    

    View Slide

30. How —
    Integration
    

    View Slide

31. How —
    Package
    

    View Slide

32. How —
    CocoaPods pros
    

    View Slide

33. How —
    CocoaPods cons
    

    View Slide

34. How —
    Routing
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

38. How —
    Nested Scrollviews
    

    View Slide

39. How —
    Demo time!
    

    View Slide

40. How —
    Event Forwarding
    

    View Slide

41. How —
    Shared Caching
    

    View Slide

42. How —
    Opaque Drawing
    

    View Slide

43. Introducing React Native Into Our Codebase —
    Conclusions
    

    View Slide