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

Artsy Open Source

July 09, 2018
Tweet

More Decks by Artsy Open Source

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Artsy —
    Open Source By Default

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Introducing React Native Into Our Codebase —
    Why?

    View full-size slide

  12. Why —
    Simpler Mental Model

    View full-size slide

  13. Why —
    Spaghetti Code

    View full-size slide

  14. Why —
    New Paradigm

    View full-size slide

  15. Why —
    Networking

    View full-size slide

  16. Why —
    Request Waterfall

    View full-size slide

  17. Why —
    GraphQL

    View full-size slide

  18. Why —
    GraphQL

    View full-size slide

  19. Why —
    De-silo people

    View full-size slide

  20. Why —
    Pair up

    View full-size slide

  21. Why —
    Improve developer experience

    View full-size slide

  22. Why —
    Expand platform support

    View full-size slide

  23. Why —
    Android

    View full-size slide

  24. Swift —
    Optimised

    View full-size slide

  25. Swift —
    Developer Experience

    View full-size slide

  26. Swift —
    Just a language

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. How —
    Integration

    View full-size slide

  30. How —
    Package

    View full-size slide

  31. How —
    CocoaPods pros

    View full-size slide

  32. How —
    CocoaPods cons

    View full-size slide

  33. How —
    Routing

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. @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 full-size slide

  37. How —
    Nested Scrollviews

    View full-size slide

  38. How —
    Demo time!

    View full-size slide

  39. How —
    Event Forwarding

    View full-size slide

  40. How —
    Shared Caching

    View full-size slide

  41. How —
    Opaque Drawing

    View full-size slide

  42. Introducing React Native Into Our Codebase —
    Conclusions

    View full-size slide