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

React Native, 2 years later

Orta
March 12, 2018

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.

Orta

March 12, 2018
Tweet

More Decks by Orta

Other Decks in Programming

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
    [email protected]
    [email protected]

    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