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
520

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
Learn Once, Write Anywhere: Intro to React Native (3)
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
0
170
Learn Once, Write Anywhere - Intro to React Native (2)
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
0
69
Learn Once, Write Anywhere: Intro to React Native
3b384ff874206aba76f5566a0b797087?s=48 aarongreenwald
3
630

Other Decks in Programming

See All in Programming
開発速度を5倍早くするVSCodeの拡張機能を作った
D7da604883d0056673358ed111aa9ec3?s=48 purp1eeeee
2
170
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
200
Power Automateドリブンのチームマネジメント
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
200
Chart実装が楽になりました。
622c25352cca9db43a10c0f3d4f73b75?s=48 keisukeyamagishi
0
120
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
3k
Angular-basierte Micro Frontends mit Module Federation @API Summit
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
120
Android Compose Component - mapping.
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
0
140
NEWT.net: Frontend Technology Selection
A2040e0e2f7a6cabf81b54e4a401c0e8?s=48 xpromx
0
280
Imperative is dead, long live Declarative! | Appdevcon
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
0
120
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
6affc38c52fa1cd2e395b3044cfb95fe?s=48 conigashima
0
190
模組化的Swift架構(二) DDD速成
A3d3b179955bdea9fc05b3251f1b1f10?s=48 haifengkao
0
390
I/O Extended 2022 in Android ~ Whats new in Android development tools
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
0
570

Featured

See All Featured
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
5
520
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k

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