React Native Code Reuse: Architecture that Works

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

Transcript

1. Architecture that Works
   React Native Code Reuse
   Aaron Greenwald
   github.com/aarongreenwald
   @aaronjgreenwald
   aarong@wix.com
   

   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
    aarong@wix.com
    

    View Slide