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
810

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

Other Decks in Programming

See All in Programming
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
180
Javaのルールをねじ曲げろ！禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
Avatar for nrs nrslib
3
1.9k
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
560
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
10
1.7k
実はすごいスピードで進化しているCSS
Avatar for Hayato Yokoyama hayato_yokoyama
0
110
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
2
470
単体テストの始め方/作り方
Avatar for toms toms74209200
0
410
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
Avatar for moznion moznion
1
130
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
1
520
漸進。
Avatar for TOMIKAWA Sotaro ssssota
0
1.7k
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
730
統一感のある Go コードを生成 AI の力で手にいれる
Avatar for Kotaro Otaka otakakot
0
2.8k

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
123
52k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
620

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]