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

React Native Code Reuse: Architecture that Works

3b384ff874206aba76f5566a0b797087?s=47 Aaron Greenwald
September 13, 2016
Programming
1
390

React Native Code Reuse: Architecture that Works

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

3b384ff874206aba76f5566a0b797087?s=128

Aaron Greenwald

September 13, 2016
Tweet

More Decks by Aaron Greenwald

See All by Aaron Greenwald
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
0
160
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
0
61
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
3
500

Other Decks in Programming

See All in Programming
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
0
120
8a43d544df4886ea5ef714e78f3420a7?s=48 chimerast
0
340
Ec9465c5a5f2ea26a80db56f9d2f99b0?s=48 drumato
1
240
E7151ab8219e76672f7a7691dd2c88e6?s=48 seike460
7
2.2k
8673a339e4002704b42bc66c43c65445?s=48 scrpgil
0
110
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
1.4k
7beed3a6fa39e12c9e873b903e4d9244?s=48 samjulien
0
290
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
0
230
0e6b2b5b4861d0e4b136527c0d7d428e?s=48 imk2o
0
200
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
0
140
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
0
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
2
250

Featured

See All Featured
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
359
62k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
370
42k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
2.1k
78b475797a14c84799063c7cd073962f?s=48 holman
448
140k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
10
670
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
221
47k

Transcript

  1. Architecture that Works React Native Code Reuse Aaron Greenwald github.com/aarongreenwald

    @aaronjgreenwald aarong@wix.com

  2. 01 / The Promise

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

    Facebook

  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

  5. Is it true?

  6. Yes!

  7. (Mostly)

  8. Android & iOS

  9. Web Apps Android & iOS

  10. Web Apps Other RN Projects Android & iOS

  11. 02 / Android & iOS

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

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

  14. Composition > Inheritance

  15. Platform-Specific Code Platform Module Conditional statements in code Filename Suffixes

    Separate files per platform

  16. Architecture Matters

  17. Keep logic out of views

  18. Presenters/Dispatchers Keep logic out of views

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

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

    Small & modular views

  21. 03 / Web Apps

  22. Architecture Matters

  23. Reusable application logic

  24. Compilation gets complicated Reusable application logic

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

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

    npm link...

  27. 04 / Multiple Projects

  28. Architecture Matters

  29. Binaries

  30. Dependency Hell Binaries

  31. Is it worthwhile? Dependency Hell Binaries

  32. Architecture Matters

  33. #architecture_matters github.com/aarongreenwald @aaronjgreenwald aarong@wix.com