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

Slide 1

Slide 1 text

React Native & Existing iOS Projects Eloy Durán

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

• Ruby Developer since 2004 • Mac Developer since 2006 • iOS Developer since 2009 Me! — Eloy Durán

Slide 4

Slide 4 text

• RubyCocoa • MacRuby • RubyMotion Me! — Eloy Durán

Slide 5

Slide 5 text

• CocoaPods 2010-2015 Me! — Eloy Durán

Slide 6

Slide 6 text

• React Native since Valentine’s Day 2016 Me! — Eloy Durán

Slide 7

Slide 7 text

• Xcode Survivor Me! — Eloy Durán

Slide 8

Slide 8 text

Artsy — A Future Where Everyone Is Moved By Art Every Day

Slide 9

Slide 9 text

Artsy — Open Source By Default

Slide 10

Slide 10 text

Eigen — Native iOS App Since 2012 1. Drop Screenshot Here 2. Resize to cover pink area

Slide 11

Slide 11 text

Emission — React Native Views Since April 2016 1. Drop Screenshot Here 2. Resize to cover pink area

Slide 12

Slide 12 text

Introducing React Native Into Our Codebase — Why?

Slide 13

Slide 13 text

Why — Simpler Mental Model

Slide 14

Slide 14 text

Why — Spaghetti Code

Slide 15

Slide 15 text

Why — New Paradigm

Slide 16

Slide 16 text

Why — Networking

Slide 17

Slide 17 text

Why — Request Waterfall

Slide 18

Slide 18 text

Why — GraphQL

Slide 19

Slide 19 text

Why — GraphQL

Slide 20

Slide 20 text

Why — De-silo people

Slide 21

Slide 21 text

Why — Pair up

Slide 22

Slide 22 text

Why — Improve developer experience

Slide 23

Slide 23 text

Why — Expand platform support

Slide 24

Slide 24 text

Why — Android

Slide 25

Slide 25 text

Swift — Optimised

Slide 26

Slide 26 text

Swift — Developer Experience

Slide 27

Slide 27 text

Swift — Just a language

Slide 28

Slide 28 text

• Simpler Mental Model • Simpler and more eﬃcient networking • De-silo people • Improve developer experience • Expand platform support Why React Native — Summary

Slide 29

Slide 29 text

Introducing React Native Into Our Codebase — How?!

Slide 30

Slide 30 text

How — Integration

Slide 31

Slide 31 text

How — Package

Slide 32

Slide 32 text

How — CocoaPods pros

Slide 33

Slide 33 text

How — CocoaPods cons

Slide 34

Slide 34 text

How — Routing

Slide 35

Slide 35 text

How — Mixed 1. Drop Screenshot Here 2. Resize to cover pink area

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@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