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/

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