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

Migrating to React Native: A Long-Term Retrospective

Migrating to React Native: A Long-Term Retrospective

Presented June 25, 2020 remotely for the Mobius conference based in St Petersburg: https://mobius-piter.ru/en/2020/spb/talks/5rurofsaorksrtqprfpqsm/

Ash Furrow

June 25, 2020
Tweet

More Decks by Ash Furrow

Other Decks in Programming

Transcript

  1. Ash Furrow, Mobile Experience Tech Lead @ Artsy
    Migrating to React Native
    A Long-Term Retrospective

    View Slide

  2. Story Time

    View Slide

  3. View Slide

  4. Mobile Web
    3 Engineers
    Objective-C and Ruby
    7 Engineers
    Ruby, CoffeeScript/JS
    UIKit Mostly Backbone
    2014

    View Slide

  5. Eigen
    https://github.com/artsy/eigen

    View Slide

  6. /artist/banksy
    Router View Controller
    /artist/:id
    URL
    https://artsy.github.io/blog/2015/08/19/Cocoa-Architecture-Switchboard-Pattern/

    View Slide

  7. https://artsy.github.io/blog/2015/08/24/Cocoa-Architecture-Hybrid-Apps/
    Native Web Native
    *TAP*
    *TAP*

    View Slide

  8. Swift

    View Slide

  9. Eidolon
    https://github.com/artsy/eidolon

    View Slide

  10. View Slide

  11. Add Swift to Eigen
    2016

    View Slide

  12. Let’s try out React Native
    2016
    https://artsy.github.io/blog/2017/07/06/React-Native-for-iOS-devs/

    View Slide

  13. Swift: a new approach to building
    software in an old way.
    React Native: a totally new, better way
    of building software.

    View Slide

  14. Most Apps Are Only a UI
    For an API

    View Slide

  15. Emission
    https://github.com/artsy/emission

    View Slide

  16. https://artsy.github.io/blog/2018/04/17/making-a-components-pod/
    Emission
    Eigen
    Podfile

    View Slide

  17. /inbox
    Router View Controller
    /inbox
    URL

    View Slide

  18. JavaScript
    TypeScript

    View Slide

  19. Re-org
    2016
    https://artsy.github.io/blog/2016/03/28/artsy-engineering-organization-stack/

    View Slide

  20. Product Team
    3–6 Engineers (web, mobile)
    1 Designer
    1 Product Manager
    1 Data Analyst

    View Slide

  21. Pausing on Swift & Objective-C
    2016 2017
    https://artsy.github.io/blog/2017/02/05/Retrospective-Swift-at-Artsy/

    View Slide

  22. GraphQL, Relay
    2016 2017
    https://artsy.github.io/blog/2019/04/10/omakase-relay/

    View Slide

  23. Relay
    GraphQL
    Request
    https://ashfurrow.com/blog/the-spirit-of-moya/

    View Slide

  24. X React Native
    https://artsy.github.io/artsy-x-react-native

    View Slide

  25. Changing My Mind on RN
    https://ashfurrow.com/blog/swift-vs-react-native-feels/

    View Slide

  26. Palette: Artsy’s Shared
    Component Library
    2016 2017 2018
    https://github.com/artsy/palette

    View Slide

  27. name="Christopher Wool"
    meta="American, b. 1955"
    imageURL={…}
    FollowButton={…}
    />

    View Slide

  28. Continuing New Work in
    React Native
    2016 2017 2018

    View Slide

  29. Invest in Training
    2016 2017 2018 2019
    https://github.com/artsy/README/tree/master/resources/mobile/learning-group

    View Slide

  30. Created MX Team
    2016 2017 2018 2019

    View Slide

  31. Combining Repos
    2016 2017 2018 2019 2020

    View Slide

  32. Five Teams Building
    iOS Software

    View Slide

  33. View Slide

  34. App ranking hits 4.7
    2016 2017 2018 2019 2020

    View Slide

  35. View Slide

  36. 2016 2017 2018 2019 2020

    View Slide

  37. Lessons
    1. React Native: Effective, When Used Well
    2. You Still Need Native Experts
    3. “Incremental Revolution”
    4. Use Culture to Drive Tech Decisions
    5. You Need an Empowered Team
    6. Technical / Cultural Debt

    View Slide

  38. React Native: Effective When
    Used Well

    View Slide

  39. You Still Need Native Experts

    View Slide

  40. Incremental Revolution

    View Slide

  41. Use Culture to Drive Tech
    Decisions

    View Slide

  42. Decide What You Want
    Your Culture To Be
    Make Tech Decisions
    To Support That Culture
    The Tech Choices
    Influence Your Culture

    View Slide

  43. You Need an Empowered Team

    View Slide

  44. Technical / Cultural Debt

    View Slide

  45. What’s Next?

    View Slide

  46. “Tout comprendre, c’est tout pardonner.”
    “To understand is to forgive.”

    View Slide