A journey into React Native development 🌴

Summing up 2+ years of learnings from my journey into the React Native jungle. How to get started? What to be aware of? Lessons learned and battles fought.

Transcript

1. @KENNETH_SKOVHUS A JOURNEY INTO REACT NATIVE DEVELOPMENT LESSONS LEARNED & BATTLES FOUGHT @KENNETH_SKOVHUS REACT MEETUP AT LEO INNOVATION LAB MAY 2019
2. @KENNETH_SKOVHUS
3. @KENNETH_SKOVHUS HI! I'M KENNETH FULLSTACK DEVELOPER HAVING FUN WITH REACT SINCE 2015
4. @KENNETH_SKOVHUS REACT WEB REACT WEB & NATIVE
5. @KENNETH_SKOVHUS !
6. @KENNETH_SKOVHUS “IMAGINE CODING YOUR MOBILE APPS ONCE, AND IT RUNS ON BOTH ANDROID AND IOS”
7. @KENNETH_SKOVHUS FACEBOOK / REACT-NATIVE INITIAL RELEASE 2015
8. @KENNETH_SKOVHUS SINGLE PLATFORM MOBILE APP ARCHITECTURE ANDROID ANDROID SDK IOS IOS SDK YOUR APP CODE (KOTLIN) YOUR CODE APP (SWIFT)
9. @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)
10. @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
11. @KENNETH_SKOVHUS YOU CAN DO A LOT WITH PROGRESSIVE WEB APPS (ESPECIALLY ON ANDROID)
12. @KENNETH_SKOVHUS LET’S GET GOING!
13. @KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!
14. @KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!
15. @KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!
16. @KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!
17. @KENNETH_SKOVHUS EXPO.IO IS THE EASIEST WAY TO GET STARTED!
18. @KENNETH_SKOVHUS EXPO.IO EVEN DOCUMENTS HOW TO DEPLOY!
19. @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
20. @KENNETH_SKOVHUS SO FAR, IT LOOKS FAIRLY EASY LET US SEE SOME CODE!
21. @KENNETH_SKOVHUS “THIS IS LOOKS LIKE MY OLD PAL REACT”
22. @KENNETH_SKOVHUS REACT NATIVE STYLESHEETS WITH FLEX LAYOUT SUPPORT IS A FAMILIAR AND GREAT ABSTRACTION FOR BUILDING UIS
23. @KENNETH_SKOVHUS YAY! AND IT HOT RELOADS
24. @KENNETH_SKOVHUS
25. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT
26. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NAVIGATION
27. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NAVIGATION TAB1 TAB2 MODAL
28. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT NATIVE LOOKS AND FEEL
29. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT
30. @KENNETH_SKOVHUS WEB ≠ MOBILE DEVELOPMENT
31. @KENNETH_SKOVHUS
32. @KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST!
33. @KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST! YOU MIGHT STILL NEED NATIVE DEVELOPMENT / DEVELOPERS FOR INTERESTING FEATURES
34. @KENNETH_SKOVHUS MOBILE DEVELOPMENT IS A DIFFERENT BEAST! THIRD PARTY DEPENDENCIES WITH NATIVE FEATURES, MIGHT NOT BE MAINTAINED BY EXPERIENCED NATIVE DEVELOPERS
35. @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
36. @KENNETH_SKOVHUS
37. @KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP
38. @KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP % FOCUS ON CODE QUALITY & TESTS % AVOID BREAKING BACKEND CHANGES % HAVE DEDICATED MOBILE ENDPOINTS
39. @KENNETH_SKOVHUS USERS NOT (EVER) UPDATING YOUR APP % IMPLEMENT PROMPT / NUDGE SCREEN TO INFORM USERS ABOUT REQUIRED UPDATES OR
40. @KENNETH_SKOVHUS
41. @KENNETH_SKOVHUS “I MISS WEB”
42. @KENNETH_SKOVHUS THE INTERESTING BITS & LEARNINGS FROM OUR JOURNEY
43. @KENNETH_SKOVHUS STORYBOOK === AMAZING DEV EXPERIENCE
44. @KENNETH_SKOVHUS TYPES AS A SAFETY NET REACT-NATIVE IS WRITTEN IN FLOW
45. @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
46. @KENNETH_SKOVHUS
47. @KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY
48. @KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY REACT-NATIVE-NAVIGATION (BUILD ON NATIVE NAVIGATION CONTROLLER) REACT-NAVIGATION (REVERSE ENGINEERED LOOK AND FEEL USING RN)
49. @KENNETH_SKOVHUS CHOOSING A NAVIGATION LIBRARY
50. @KENNETH_SKOVHUS
51. @KENNETH_SKOVHUS AUTOMATED END TO END DEVICE TESTING DETOX ☀ (GREY BOX TESTING) APPIUM (CAN RUN ON AMAZON DEVICE FARM)
52. @KENNETH_SKOVHUS
53. @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)”
54. @KENNETH_SKOVHUS EDITORIAL CONTENT SECTION POWERED BY MARKDOWN BENJAMIN-DOBELL / REACT-NATIVE-MARKDOWN-VIEW MAPS MARKDOWN TO NATIVE VIEWS
55. @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:  )}) 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?
56. @KENNETH_SKOVHUS UPGRADING A NON-EXPO REACT NATIVE PROJECT CAN BE PAINFUL...
57. @KENNETH_SKOVHUS UPGRADING A NON-EXPO REACT NATIVE PROJECT CAN BE PAINFUL... NCUILLERY / RN-DIFF STABILITY & LESS FRUSTRATION: STAY ONE VERSION BEHIND.
58. @KENNETH_SKOVHUS
59. @KENNETH_SKOVHUS CHALLENGE: HOW TO MIGRATE EXISTING ANIMATION HEAVY FEATURES FROM OUR OLD NATIVE APPS TO NEW REACT NATIVE APP?
60. @KENNETH_SKOVHUS IOS: PRETTY SMOOTH PROCESS ANDROID: REALLY PAINFUL AND VERY TIME-CONSUMING
61. @KENNETH_SKOVHUS REACT NATIVE ANIMATIONS IS A MORE POWERFUL ABSTRACTION THAN WE IMAGINED.
62. @KENNETH_SKOVHUS
63. @KENNETH_SKOVHUS THE HUMAN ASPECT ACCESSIBLE TO JS/REACT DEVS LESS ACCESSIBLE FOR NATIVE DEVS (ALSO HARDER TO HIRE FOR)
64. @KENNETH_SKOVHUS
65. @KENNETH_SKOVHUS
66. @KENNETH_SKOVHUS THANKS FOR LISTENING!
67. @KENNETH_SKOVHUS A JOURNEY INTO REACT NATIVE DEVELOPMENT LESSONS LEARNED & BATTLES FOUGHT @KENNETH_SKOVHUS REACT MEETUP AT LEO INNOVATION LAB MAY 2019