React Native in Production

Slide 1

Slide 1 text

React Native in Production @mariostallone myntra

Slide 2

Slide 2 text

What is React Native? React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Slide 3

Slide 3 text

Didn’t Sencha, Phonegap, Ionic and… say that you can do the same?

Slide 4

Slide 4 text

Didn’t Sencha, Phonegap, Ionic and… say that you can do the same? React Native is Native :)

Slide 5

Slide 5 text

Why React Native?

Slide 6

Slide 6 text

All our Front end Devs are now Mobile Devs JavaScript… React lets them bring the same fundamentals that they used to develop web apps to mobile

Slide 7

Slide 7 text

Developer friendly Double tap ‘R’ to Reload your view build fast… really fast

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Share code between Android and iOS

Slide 10

Slide 10 text

Instant App Updates The Play Store allows this The App Store clearly states that this is permitted

Slide 11

Slide 11 text

Why React Native? - Business Reasons

Slide 12

Slide 12 text

Why React Native? - Business Reasons Product can iterate and push out features faster

Slide 13

Slide 13 text

Why React Native? - Business Reasons Product can iterate and push out features faster Make the business guy happy by pushing out that teeny new feature just before the sale

Slide 14

Slide 14 text

Why React Native? - Business Reasons Product can iterate and push out features faster Make the business guy happy by pushing out that teeny new feature just before the sale Fix bugs really fast

Slide 15

Slide 15 text

Why React Native? - Business Reasons Product can iterate and push out features faster Make the business guy happy by pushing out that teeny new feature just before the sale Fix bugs really fast Your users needn’t update their app

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Taking the Leap of Faith Convincing our CTO One Platform at a time Put a smart and enthusiastic dev on it Release to a controlled audience Metrics…

Slide 18

Slide 18 text

Some Learnings

Slide 19

Slide 19 text

App Structure Analytics Networking Caching … Native Screens React Screens Native Modules

Slide 20

Slide 20 text

Routing

Slide 21

Slide 21 text

Routing Native Screen React Screen

Slide 22

Slide 22 text

Routing Native Screen

Slide 23

Slide 23 text

Routing Native Screen Native Screen

Slide 24

Slide 24 text

Routing Native Screen React Screen Native Screen

Slide 25

Slide 25 text

Routing Native Screen React Screen Native Screen React Screen

Slide 26

Slide 26 text

Routing Native Screen React Screen Native Screen Native Screen React Screen

Slide 27

Slide 27 text

Routing Native Screen Router React Screen

Slide 28

Slide 28 text

Move Fast Build all features henceforth with React Native Release fast

Slide 29

Slide 29 text

Update your dependencies The core team releases every 2 weeks Since its a growing framework, a lot of things change between releases We almost got ourselves in this mess, and spent an entire sprint ensuring we don't get there again

Slide 30

Slide 30 text

Get Everyone Involved…

Slide 31

Slide 31 text

Some Caveats

Slide 32

Slide 32 text

Components You might need to write your own Bridge Component for something that’s not available out of the box or in the O/S community You would probably end up writing wrapper modules to re-use a lot of your existing native code

Slide 33

Slide 33 text

Tracking Crashes Unlike Native crashes, all crashes get accumulated under the same crash - Fabric, etc. Support sourcemaps from the get go You may need a JS error tracker as well - eg. sentry Sometimes hard to debug

Slide 34

Slide 34 text

App Size Unlike iOS, Android doesn't ship with a JS runtime, and hence this needs to be packaged with the app We resorted to platform specific builds to ensure a lower size

Slide 35

Slide 35 text

Demo Time

Slide 36

Slide 36 text

Where are we with RN? More than 60% of Myntra’s iOS app is on React Native The Home Page of the Android app is on React Native We’re re-writing other parts of our app using React Native while ensuring they work across Android and iOS We push out weekly, sometimes more frequent updates to our apps Our developers are Cross Platform… Yay!

Slide 37

Slide 37 text

When not to use React Native? React Native is not a Golden Bullet for every problem It works well for apps that do not have too much of hardware interaction. Largely enterprise apps and apps that frequently get updated would benefit from React Native and… if you are a JS dev, and hate writing Native (java, objective -c or swift)