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

React Native Code Reuse: Architecture that Works

React Native Code Reuse: Architecture that Works

Talk from React Native Tel Aviv (RN_TLV) meetup on the Wix roof, 2016/09/13

Aaron Greenwald

September 13, 2016
Tweet

More Decks by Aaron Greenwald

Other Decks in Programming

Transcript

  1. Architecture that Works
    React Native Code Reuse
    Aaron Greenwald
    github.com/aarongreenwald
    @aaronjgreenwald
    [email protected]

    View Slide

  2. 01 / The Promise

    View Slide

  3. “...that approach yielded around 85% reuse of
    app code”
    - Facebook

    View Slide

  4. “...that approach yielded around 85% reuse of
    app code”
    - Facebook
    “Don’t repeat yourself. It’s not only repetitive,
    it’s redundant, and people have heard it before.”
    - Lemony Snicket

    View Slide

  5. Is it true?

    View Slide

  6. Yes!

    View Slide

  7. (Mostly)

    View Slide

  8. Android & iOS

    View Slide

  9. Web Apps
    Android & iOS

    View Slide

  10. Web Apps
    Other RN Projects
    Android & iOS

    View Slide

  11. 02 / Android & iOS

    View Slide

  12. Platform-Specific Code
    Platform Module
    Conditional
    statements in code

    View Slide

  13. Platform-Specific Code
    Filename Suffixes
    Separate files per
    platform

    View Slide

  14. Composition > Inheritance

    View Slide

  15. Platform-Specific Code
    Platform Module
    Conditional
    statements in code
    Filename Suffixes
    Separate files per
    platform

    View Slide

  16. Architecture Matters

    View Slide

  17. Keep logic out of views

    View Slide

  18. Presenters/Dispatchers
    Keep logic out of views

    View Slide

  19. Presenters/Dispatchers
    Logic should be cross-platform
    Keep logic out of views

    View Slide

  20. Presenters/Dispatchers
    Logic should be cross-platform
    Keep logic out of views
    Small & modular views

    View Slide

  21. 03 / Web Apps

    View Slide

  22. Architecture Matters

    View Slide

  23. Reusable application logic

    View Slide

  24. Compilation gets complicated
    Reusable application logic

    View Slide

  25. Create a separate module
    Compilation gets complicated
    Reusable application logic

    View Slide

  26. Create a separate module
    Compilation gets complicated
    Reusable application logic
    npm link...

    View Slide

  27. 04 / Multiple Projects

    View Slide

  28. Architecture Matters

    View Slide

  29. Binaries

    View Slide

  30. Dependency Hell
    Binaries

    View Slide

  31. Is it worthwhile?
    Dependency Hell
    Binaries

    View Slide

  32. Architecture Matters

    View Slide

  33. #architecture_matters
    github.com/aarongreenwald
    @aaronjgreenwald
    [email protected]

    View Slide