React Native, 2 years later

How do we see React Native two years after we started moving new code to be made in JavaScript in an existing app.

Transcript

1. TWO YEARS
   OF REACT NATIVE
   IOSOHO - 12 03 18
   

   View Slide

2. TWO YEARS
   OF REACT NATIVE
   ORTA THEROX
   @ORTA
   1. WHY ARTSY MOVED
   2. DOWNSIDES
   3. OMAKASE
   4. UPSIDES
   5. BROWNFIELD
   6. DEPLOYMENT
   

   View Slide

3. ORTA THEROX
   @ORTA
   

   View Slide

4. View Slide

5. View Slide

6. TWO YEARS
   OF REACT NATIVE
   The start-up Art.sy aims to
   do for visual art what
   Pandora did for music:
   become a source of discovery,
   pleasure and education.”
   “
   

   View Slide

7. Make art as popular as music
   Richard Serra -Betwixt the Torus and the Sphere
   https://artsy.net/artwork/richard-serra-betwixt-the-torus-and-the-sphere
   

   View Slide

8. The World’s Largest Database of Contemporary Art
   2,000+ GALLERIES
   ~1,000,000 ARTWORKS 25+ AUCTION HOUSES
   80,000 ARTISTS 700 MUSEUMS
   60+ ART FAIRS
   —
   

   View Slide

9. —
   On the Internet
   

   View Slide

10. TWO YEARS
    OF REACT NATIVE
    Open
    Source
    by Default
    github.com/artsy
    

    View Slide

11. TWO YEARS
    OF REACT NATIVE
    Artsy Blog
    - React Native at Artsy
    - Intro to React Native for an iOS Developer
    - Workshop: React Native
    - Retrospective: Swift at Artsy
    - Exploration: Front-end JavaScript at Artsy in 2017
    - On our implementation of React Native
    - Open Expectations
    Talks
    - try! Swift - Building Your Own Tools
    - this one!
    

    View Slide

12. 2015: WHY MOVE?
    MOBILE
    TEAM SLOW
    NATIVE TOOLING
    QUALITY
    SEPERATION
    OF
    CONCERNS
    ARTSY.GITHUB.IO/BLOG/2016/08/15/REACT-NATIVE-AT-ARTSY/
    

    View Slide

13. ARTSY.GITHUB.IO/BLOG/2017/02/05/RETROSPECTIVE-SWIFT-AT-ARTSY/
    

    View Slide

14. ?
    

    View Slide

15. GITHUB.COM/ARTSY/MOBILE/ISSUES/22
    

    View Slide

16. View Slide

17. ANDROID
    DIFFERENT CODE FOR APP SCREEN VS HOST
    DEV TOOLS IMPROVEMENTS
    GITHUB.COM/ARTSY/MOBILE/ISSUES/22
    

    View Slide

18. COMPLEXITY
    

    View Slide

19. STATE CHANGES
    API INTERACTIONS
    STYLE
    USER INTERACTIONS
    HIERARCHY (V/VC)
    ROUTING
    

    View Slide

20. STATE CHANGES
    API INTERACTIONS
    STYLE
    USER INTERACTIONS
    HIERARCHY (V/VC)
    ROUTING
    

    View Slide

21. STATE CHANGES
    API INTERACTIONS
    STYLE
    USER INTERACTIONS
    HIERARCHY (V/VC)
    ROUTING
    

    View Slide

22. STATE CHANGES
    API INTERACTIONS
    STYLE
    USER INTERACTIONS
    HIERARCHY (V/VC)
    ROUTING
    

    View Slide

23. STATE CHANGES
    API INTERACTIONS
    STYLE
    USER INTERACTIONS
    HIERARCHY (V/VC)
    ROUTING
    

    View Slide

24. STATE CHANGES
    API INTERACTIONS
    STYLE
    

    View Slide

25. DOWNSIDES
    HOLD ON TO YOUR HAT
    NO, LIKE, SERIOUSLY, WE’RE GONNA
    TRY COVER A LOT OF THEM
    

    View Slide

26. 517
    DEPENDENCIES
    

    View Slide

27. NO ROADMAP MEH DEBUGGING ERROR REPORTING
    FOCUS ON WEB
    DEVELOPERS
    FEW NUANCED
    WRITE-UPS
    NATIVE COMPLEXITY
    +
    JS COMPLEXITY
    NEEDS NATIVE
    BUY-IN TO WIN
    JS “STIGMA”
    

    View Slide

28. LOSSY
    ABSTRACTIONS
    TESTING QUESTIONS
    UN-ANSWERED
    CHOICE PARALYSIS JS MOVES FAST
    

    View Slide

29. ARTSY OMAKASE
    - TYPESCRIPT
    - GRAPHQL
    - REACT
    - JEST
    - RELAY
    - STORYBOOKS
    - STYLED COMPONENTS
    - VS CODE
    ARTSY.GITHUB.IO/BLOG/2017/02/05/FRONT-END-JAVASCRIPT-AT-ARTSY-2017/
    

    View Slide

30. View Slide

31. OWNING YOUR DEPENDENCIES
    

    View Slide

32. RELAY CORE
    GRAPHQL
    WORKING GROUP
    JEST CORE
    STORYBOOKS
    ORG
    CONTRIBUTIONS TO
    REACT /
    REACT NATIVE
    CONTRIBUTIONS TO
    TYPESCRIPT /
    DEFINITELY TYPED
    WRITE VSCODE
    EXTENSIONS
    DANGER
    

    View Slide

33. TRANSITION
    YOU CAN RELY ON
    THIS, BECAUSE WE DO
    

    View Slide

34. UPSIDES
    

    View Slide

35. - NO MORE MOBILE TEAM
    - CONSISTENT ABSTRACTIONS WITH WEB
    - OWN YOUR ENTIRE STACK
    - JS TOOLING
    - DEV CLOSER TO THE SPEED OF THOUGHT
    

    View Slide

36. EMISSION DEMO
    ADDING EMAIL TO THE PROFILE SCREEN
    

    View Slide

37. BROWNFIELD
    artsy/emission
    artsy/eigen
    []
    emission.js
    AREmission.h
    AREmission.m
    ARSwitchBoardModule.h
    ARSwitchBoardModule.m
    ARArtistViewController.h
    ARArtistViewController.m
    payment_request@2x.png
    payment_request@3x.png
    …
    

    View Slide

38. RN FOR FULL SCREENS
    NATIVE FOR:
    - IMAGE CACHING
    - NAVIGATION + ROUTING
    - ANALYTICS
    PRINCIPALS
    

    View Slide

39. DEPLOYMENT
    

    View Slide

40. DEPLOYMENT
    

    View Slide

41. JUST IN TIME
    DEPLOYS
    ONLY FOR ADMINS
    UPDATES JS TO MASTER
    LINKED TO A PR
    

    View Slide

42. SUMMARY
    1. WHY ARTSY MOVED
    2. DOWNSIDES
    3. OMAKASE
    4. UPSIDES
    5. BROWNFIELD
    6. DEPLOYMENT
    

    View Slide

43. ORTA THEROX
    @ORTA
    

    View Slide