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
850

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

Other Decks in Programming

See All in Programming
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
110
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
230
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
MUSUBIXとは
Avatar for Hisaho nahisaho
0
130
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.6k
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
120
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.3k

Featured

See All Featured
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
320
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
57
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k

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]