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
420

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
63
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
3
530

Other Decks in Programming

See All in Programming
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
2
260
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
3
170
35b15d1ae17fa8c0f004b4b5e1378a12?s=48 nickcheng
0
1.3k
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
560
347b7e6efc62b633d37a5d0a8d62ae86?s=48 junghyeonjae
0
170
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
2
190
Ed1c6624f2db8712b418d5449f8e55bd?s=48 acquiajp1
0
140
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
2
400
Cc6c9e1dcb8e40af8dd1d49b78c0c720?s=48 tompenguin
0
180
2c0947c6a28e7f771ebd9859ecf54e5c?s=48 shinyorke
0
480
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
310
Aa5b922fefbf18bea89972521971dfea?s=48 yoshikiiida
20
7.8k

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
33
2.3k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
7.9k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
29
1.5k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
Ba530e786553390f3fb271848485681c?s=48 3n
167
22k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
34
4k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
98
5.6k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
117
26k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
128
21k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
653
120k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.6k

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