Save 37% off PRO during our Black Friday Sale! »

React Native Code Reuse: Architecture that Works

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

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
65
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
3
570

Other Decks in Programming

See All in Programming
67d6b5b2fdd654b6fbd49b5c7771d678?s=48 1pay
0
170
5afbf65e9e32cef9ab74e5b5347a5bce?s=48 korosuke613
0
8.1k
Bcbc80799bc32840662a366768318a9b?s=48 koba789
0
590
023b04c98f39cc041293d780352432ff?s=48 koic
11
810
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
0
160
Fe9968bc3922faa77939286afda905de?s=48 chloe463
0
800
8f4b861a5b83575337b98d144a4ef4ca?s=48 psadauskas
0
190
391d70e6cfd94b56b666f5074479202a?s=48 kikobolingas
1
150
9733730b7cb400f72ed99aa28fc1d210?s=48 karszawa
0
520
E990ee82706811d4fa5bcafa1b4eafbf?s=48 techtekt
0
290
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
150
9b600b6d2f592d0944507e989770b9b3?s=48 issei126
0
110

Featured

See All Featured
B47b288784fda77a94aeb234ca743c24?s=48 keavy
111
15k
282d599b414022eba5096510f675b6e2?s=48 chrislema
232
16k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.6k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
120
11k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.9k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
40
1.8k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
750
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
16k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.2k

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