Adding React Native to an Existing App - Artsy x React Native 2018

How and why we choose to integrate React Native into our native app

http://artsy.github.io/artsy-x-react-native.html

Transcript

1. React Native & Existing iOS Projects Eloy Durán
3. • Ruby Developer since 2004 • Mac Developer since 2006 • iOS Developer since 2009 Me! — Eloy Durán
4. • RubyCocoa • MacRuby • RubyMotion Me! — Eloy Durán
5. • CocoaPods 2010-2015 Me! — Eloy Durán
6. • React Native since Valentine’s Day 2016 Me! — Eloy Durán
7. • Xcode Survivor Me! — Eloy Durán
8. Artsy — A Future Where Everyone Is Moved By Art Every Day
9. Artsy — Open Source By Default
10. Eigen — Native iOS App Since 2012 1. Drop Screenshot Here 2. Resize to cover pink area
11. Emission — React Native Views Since April 2016 1. Drop Screenshot Here 2. Resize to cover pink area
12. Introducing React Native Into Our Codebase — Why?
13. Why — Simpler Mental Model
14. Why — Spaghetti Code
15. Why — New Paradigm
16. Why — Networking
17. Why — Request Waterfall
18. Why — GraphQL
19. Why — GraphQL
20. Why — De-silo people
21. Why — Pair up
22. Why — Improve developer experience
23. Why — Expand platform support
24. Why — Android
25. Swift — Optimised
26. Swift — Developer Experience
27. Swift — Just a language
28. • Simpler Mental Model • Simpler and more efficient networking • De-silo people • Improve developer experience • Expand platform support Why React Native — Summary
29. Introducing React Native Into Our Codebase — How?!
30. How — Integration
31. How — Package
32. How — CocoaPods pros
33. How — CocoaPods cons
34. How — Routing
35. How — Mixed 1. Drop Screenshot Here 2. Resize to cover pink area
36. class Artwork extends React.Component { handleTap() { SwitchBoard.presentNavigationViewController(this, this.props.artwork.href) } // ... } class SearchBar extends React.Component { handleTap() { Switchboard.presentModalViewController(this, "/search") } // ... } Mixed — How
37. @implementation AREmissionSetup - (void)configureEmissionInstance:(AREmission *)emission; { emission.switchBoardModule.presentNavigationViewController = ^(UIViewController * _Nonnull fromViewController, NSString * _Nonnull route) { [fromViewController.navigationController pushViewController:[self viewControllerForRoute:route] animated:YES]; }; emission.switchBoardModule.presentModalViewController = ^(UIViewController * _Nonnull fromViewController, NSString * _Nonnull route) { UIViewController *viewController = [self viewControllerForRoute:route]; UINavigationController *navigationController = [self navigationControllerWithRootViewController:viewController]; [fromViewController.navigationController presentViewController:navigationController animated:YES completion:nil]; }; } // ... @end Mixed — How
38. How — Nested Scrollviews
39. How — Demo time!
40. How — Event Forwarding
41. How — Shared Caching
42. How — Opaque Drawing
43. Introducing React Native Into Our Codebase — Conclusions