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

React Native Code Reuse: Architecture that Works

Avatar for Aaron Greenwald Aaron Greenwald
September 13, 2016
Programming
1
830

React Native Code Reuse: Architecture that Works

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

Avatar for Aaron Greenwald

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)
Avatar for Aaron Greenwald aarongreenwald
0
430
Learn Once, Write Anywhere - Intro to React Native (2)
Avatar for Aaron Greenwald aarongreenwald
0
120
Learn Once, Write Anywhere: Intro to React Native
Avatar for Aaron Greenwald aarongreenwald
4
960

Other Decks in Programming

See All in Programming
CloudflareのSandbox SDKを試してみた
Avatar for syumai syumai
0
130
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
140
Kotlinで実装するCPU/GPU 「協調的」パフォーマンス管理
Avatar for matuyuhi matuyuhi
0
360
What’s Fair is FAIR: A Decentralised Future for WordPress Distribution
Avatar for Ryan McCue rmccue
0
150
Nitro v3
Avatar for kazupon kazupon
2
250
Introducing RemoteCompose: break your UI out of the app sandbox.
Avatar for Nicolas Roard camaelon
2
540
Phronetic Team with AI - Agile Japan 2025 closing
Avatar for Kenji Hiranabe hiranabe
1
270
Verilator + Rust + gRPC と Efinix の RISC-V でAIアクセラレータをAIで作ってる話 RTLを語る会(18) 2025/11/08
Avatar for Ryuji Fuchikami ryuz88
0
330
What's New in Web AI?
Avatar for Christian Liebel christianliebel
PRO
0
120
高単価案件で働くための心構え
Avatar for Katsuma Narisawa nullnull
0
110
オフライン対応！Flutterアプリに全文検索エンジンを実装する @FlutterKaigi2025
Avatar for JaiChangPark itsmedreamwalker
1
150
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
Avatar for Kotaro7750 kotaro7750
0
240

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.1k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k

Transcript

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

    @aaronjgreenwald [email protected]

  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 [email protected]