A journey into React Native development 🌴 - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

@KENNETH_SKOVHUS A JOURNEY INTO REACT NATIVE DEVELOPMENT LESSONS LEARNED & BATTLES FOUGHT @KENNETH_SKOVHUS REACT MEETUP AT LEO INNOVATION LAB MAY 2019

Slide 2

Slide 2 text

@KENNETH_SKOVHUS

Slide 3

Slide 3 text

@KENNETH_SKOVHUS HI! I'M KENNETH FULLSTACK DEVELOPER HAVING FUN WITH REACT SINCE 2015

Slide 4

Slide 4 text

@KENNETH_SKOVHUS REACT WEB REACT WEB & NATIVE

Slide 5

Slide 5 text

@KENNETH_SKOVHUS !

Slide 6

Slide 6 text

@KENNETH_SKOVHUS “IMAGINE CODING YOUR MOBILE APPS ONCE, AND IT RUNS ON BOTH ANDROID AND IOS”

Slide 7

Slide 7 text

@KENNETH_SKOVHUS FACEBOOK / REACT-NATIVE INITIAL RELEASE 2015

Slide 8

Slide 8 text

@KENNETH_SKOVHUS SINGLE PLATFORM MOBILE APP ARCHITECTURE ANDROID ANDROID SDK IOS IOS SDK YOUR APP CODE (KOTLIN) YOUR CODE APP (SWIFT)

Slide 9

Slide 9 text

@KENNETH_SKOVHUS REACT NATIVE ARCHITECTURE ANDROID ANDROID SDK RN RUNTIME AND GLUE REACT NATIVE JAVASCRIPT API IOS IOS SDK RN RUNTIME AND GLUE YOUR APP CODE (TRANSPILED TO JAVASCRIPT)

Slide 10

Slide 10 text

@KENNETH_SKOVHUS PLATFORM PLATFORM UI REACT NATIVE GLUE YOUR APPLICATION (JS) REACT NATIVE FACEBOOK FLUTTER GOOGLE PLATFORM YOUR APPLICATION (DART) FLUTTER ENGINE (C++) FLUTTER PLATFORM UI CROSS-PLATFORM FRAMEWORKS WITH NATIVE LOOK AND FEEL XAMARIN MICROSOFT PLATFORM YOUR APPLICATION (C#) PLATFORM UI XAMARIN BACKEND

Slide 11

Slide 11 text

@KENNETH_SKOVHUS YOU CAN DO A LOT WITH PROGRESSIVE WEB APPS (ESPECIALLY ON ANDROID)

Slide 12

Slide 12 text

@KENNETH_SKOVHUS LET’S GET GOING!

Slide 13

Slide 13 text

@KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!

Slide 14

Slide 14 text

@KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!

Slide 15

Slide 15 text

@KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!

Slide 16

Slide 16 text

@KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!

Slide 17

Slide 17 text

@KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!

Slide 18

Slide 18 text

@KENNETH_SKOVHUS EXPO.IO EVEN DOCUMENTS HOW TO DEPLOY!

Slide 19

Slide 19 text

@KENNETH_SKOVHUS BUT, YOU CANNOT USE EXPO IF USE UNSUPPORTED NATIVE MODULES (EXPO SHIPS WITH AN SDK) YOU HAVE SPECIFIC NATIVE REQUIREMENTS OR USING LOWER LEVEL FEATURES

Slide 20

Slide 20 text

@KENNETH_SKOVHUS SO FAR, IT LOOKS FAIRLY EASY LET US SEE SOME CODE!

Slide 21

Slide 21 text

@KENNETH_SKOVHUS “THIS IS LOOKS LIKE MY OLD PAL REACT”

Slide 22

Slide 22 text

@KENNETH_SKOVHUS REACT NATIVE STYLESHEETS WITH FLEX LAYOUT SUPPORT IS A FAMILIAR AND GREAT ABSTRACTION FOR BUILDING UIS

Slide 23

Slide 23 text

@KENNETH_SKOVHUS YAY! AND IT HOT RELOADS

Slide 24

Slide 24 text

@KENNETH_SKOVHUS

Slide 25

Slide 25 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT

Slide 26

Slide 26 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NAVIGATION

Slide 27

Slide 27 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NAVIGATION TAB1 TAB2 MODAL

Slide 28

Slide 28 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NATIVE LOOKS AND FEEL

Slide 29

Slide 29 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT

Slide 30

Slide 30 text

@KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT

Slide 31

Slide 31 text

@KENNETH_SKOVHUS

Slide 32

Slide 32 text

@KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST!

Slide 33

Slide 33 text

@KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST! YOU MIGHT STILL NEED NATIVE DEVELOPMENT / DEVELOPERS FOR INTERESTING FEATURES

Slide 34

Slide 34 text

@KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST! THIRD PARTY DEPENDENCIES WITH NATIVE FEATURES, MIGHT NOT BE MAINTAINED BY EXPERIENCED NATIVE DEVELOPERS

Slide 35

Slide 35 text

@KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST! DEPLOYMENT PAINS (MOSTLY IOS) APP STORE REVIEWS AND MANUAL STEPS FASTLANE.TOOLS RELIEVES SOME OF THE PAIN

Slide 36

Slide 36 text

@KENNETH_SKOVHUS

Slide 37

Slide 37 text

@KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP

Slide 38

Slide 38 text

@KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP % FOCUS ON CODE QUALITY & TESTS % AVOID BREAKING BACKEND CHANGES % HAVE DEDICATED MOBILE ENDPOINTS

Slide 39

Slide 39 text

@KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP % IMPLEMENT PROMPT / NUDGE SCREEN TO INFORM USERS ABOUT REQUIRED UPDATES OR

Slide 40

Slide 40 text

@KENNETH_SKOVHUS

Slide 41

Slide 41 text

@KENNETH_SKOVHUS “I MISS WEB”

Slide 42

Slide 42 text

@KENNETH_SKOVHUS THE INTERESTING BITS & LEARNINGS FROM OUR JOURNEY

Slide 43

Slide 43 text

@KENNETH_SKOVHUS STORYBOOK === AMAZING DEV EXPERIENCE

Slide 44

Slide 44 text

@KENNETH_SKOVHUS TYPES AS A SAFETY NET REACT-NATIVE IS WRITTEN IN FLOW

Slide 45

Slide 45 text

@KENNETH_SKOVHUS TYPES AS A SAFETY NET REACT-NATIVE IS WRITTEN IN FLOW WE MIGRATED TO TYPESCRIPT DUE TO THE DEVELOPER TOOLING AND HAVEN’T LOOKED BACK

Slide 46

Slide 46 text

@KENNETH_SKOVHUS

Slide 47

Slide 47 text

@KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY

Slide 48

Slide 48 text

@KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY REACT-NATIVE-NAVIGATION (BUILD ON NATIVE NAVIGATION CONTROLLER) REACT-NAVIGATION (REVERSE ENGINEERED LOOK AND FEEL USING RN)

Slide 49

Slide 49 text

@KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY

Slide 50

Slide 50 text

@KENNETH_SKOVHUS

Slide 51

Slide 51 text

@KENNETH_SKOVHUS AUTOMATED END TO END DEVICE TESTING DETOX ☀ (GREY BOX TESTING) APPIUM (CAN RUN ON AMAZON DEVICE FARM)

Slide 52

Slide 52 text

@KENNETH_SKOVHUS

Slide 53

Slide 53 text

@KENNETH_SKOVHUS “BUILD AN EDITORIAL CONTENT SECTION THAT NON-CODERS CAN UPDATE (POSSIBLY REMOTELY), BUT ENFORCE DESIGN CONSISTENCY (I.E. NOT USING A WEB VIEW)”

Slide 54

Slide 54 text

@KENNETH_SKOVHUS EDITORIAL CONTENT SECTION POWERED BY MARKDOWN BENJAMIN-DOBELL / REACT-NATIVE-MARKDOWN-VIEW MAPS MARKDOWN TO NATIVE VIEWS

Slide 55

Slide 55 text

@KENNETH_SKOVHUS Seeing you installed this app, you are probably interested in getting a better understanding of your skin condition. Here are some of the ways in which other people have used this app to get on top of their condition. ## 1. Track the effectiveness of a new treatment When you’re on a new treatment, you want to make sure it’s working for you. Small week-to-week changes can be hard to notice, but that’s where the app’s clever comparison view comes in handy: ![Comparison view](${getLocalImageMarkdown( require(‘./images/BenefitsComparisonView.jpg') )}) In the words of Jennifer (32), who’s been using Imagine: > It makes me happy to see the progress, because applying all this cream is time-consuming and annoying! ## 2. Show your doctor what happened Even if you see a doctor regularly, they don’t see how you are doing between visits. Maybe it was much worse a month ago and it feels like you are always seeing the doctor when your skin is doing fine?

Slide 56

Slide 56 text

@KENNETH_SKOVHUS UPGRADING A NON-EXPO REACT NATIVE PROJECT CAN BE PAINFUL...

Slide 57

Slide 57 text

@KENNETH_SKOVHUS UPGRADING A NON-EXPO REACT NATIVE PROJECT CAN BE PAINFUL... NCUILLERY / RN-DIFF STABILITY & LESS FRUSTRATION: STAY ONE VERSION BEHIND.

Slide 58

Slide 58 text

@KENNETH_SKOVHUS

Slide 59

Slide 59 text

@KENNETH_SKOVHUS CHALLENGE: HOW TO MIGRATE EXISTING ANIMATION HEAVY FEATURES FROM OUR OLD NATIVE APPS TO NEW REACT NATIVE APP?

Slide 60

Slide 60 text

@KENNETH_SKOVHUS IOS: PRETTY SMOOTH PROCESS ANDROID: REALLY PAINFUL AND VERY TIME-CONSUMING

Slide 61

Slide 61 text

@KENNETH_SKOVHUS REACT NATIVE ANIMATIONS IS A MORE POWERFUL ABSTRACTION THAN WE IMAGINED.

Slide 62

Slide 62 text

@KENNETH_SKOVHUS

Slide 63

Slide 63 text

@KENNETH_SKOVHUS THE HUMAN ASPECT ACCESSIBLE TO JS/REACT DEVS LESS ACCESSIBLE FOR NATIVE DEVS (ALSO HARDER TO HIRE FOR)

Slide 64

Slide 64 text

@KENNETH_SKOVHUS

Slide 65

Slide 65 text

@KENNETH_SKOVHUS

Slide 66

Slide 66 text

@KENNETH_SKOVHUS THANKS FOR LISTENING!

Slide 67

Slide 67 text

@KENNETH_SKOVHUS A JOURNEY INTO REACT NATIVE DEVELOPMENT LESSONS LEARNED & BATTLES FOUGHT @KENNETH_SKOVHUS REACT MEETUP AT LEO INNOVATION LAB MAY 2019