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
370

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
460

Other Decks in Programming

See All in Programming
51ae114c2809ff0d2945c751efa7cffc?s=48 canon1ky
3
340
A7a5efde86e0137d32a93d8609b7a022?s=48 yumcyawiz
4
610
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
370
Aa97a6ad2c4c8422f5580f4f9d5b5744?s=48 dulltz
0
410
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
1
1k
4d40d82cc3c676e8a67ffc2a473bf423?s=48 kyoheig3
0
410
E4acf8d83d816ef2ff215fb99401469f?s=48 pdone
0
210
E1db053f2c2f3d3b49a5f5b9b0c7f20f?s=48 kazaman97
0
170
96803ea99eef888c7f6637f1d3858766?s=48 attsumi
1
350
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
130
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
550

Featured

See All Featured
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
740
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
368
42k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
17
1.8k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
52
3.4k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
308
17k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
192
8.5k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.5k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
165
19k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
111
9.9k

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