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
880
1

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

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

Other Decks in Programming

See All in Programming
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
280
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
180
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
390
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
790
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
210
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
500
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
250
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
470
仕様駆動開発の消費期限
Avatar for watany watany
20
8.1k
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
180
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
1k

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
460
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
430
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
660
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
370
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200

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]