Raising the Bar: Our Journey of Making React Native a Preferred Choice

Talk given at React Native EU 2023.

---

At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.

Transcript

1. R A I S I N G T H E B A R
   React Native EU 2023
   

   View Slide

2. HELLO!
   Tommy Nguyen
   • Principal Software Engineer at Microsoft
   • @tido64 on GitHub
   • I’ve put React Native in Outlook Mobile
   Lorenzo Sciandra
   • Senior Software Engineer at Microsoft
   • @kelset on GitHub
   • I’ve put React Native on npm for a while
   3
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   

   View Slide

3. O U R J O B I S T O B E I N V I S I B L E
   4
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   

   View Slide

4. R E A C T N A T I V E A T M I C R O S O F T
   https://reactnative.dev/showcase
   5
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   

   View Slide

5. M I C R O S O F T A P P S U S I N G R E A C T N A T I V E
   Chiara Mooney & Shiven Mian – Building for Microsoft (Chain React 2023)
   6
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   D O N ’ T F O R G E T T O C H E C K
   O U T K H A L E F ’ S T A L K
   T O M O R R O W F O R M O R E !
   

   View Slide

6. T H E M I C R O S O F T G A L A X Y
   Lorenzo Sciandra & Tommy Nguyen - Improve all the repos – exploring Microsoft’s DevExp (RNEU 2021)
   7
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   

   View Slide

7. I N V I S I B L E
   

   View Slide

8. E N A B L E D E V E L O P E R S W O R K I N G O N O U R
   P R O D U C T S T O L E V E R A G E T H E T O O L I N G
   I N S T E A D O F F I G H T I N G W I T H I T
   

   View Slide

9. A LOT OF
   POTENTIAL
   PAIN POINTS
   • 100s of engineers spread across many projects
   with different needs
   • Bundle size too big
   • Upgrades taking months
   • Code not working in the product app
   10
   R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
   - @ K E L S E T
   

   View Slide

10. TWO MAIN SOLUTIONS
    11
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

11. # 1 : T H E T E S T B E N C H
    react-native-test-app
    • Supports 0.64 through 0.72
    • Supports New Architecture
    • Supports @expo/config-plugins
    • Experimental single app mode
    12
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

12. macOS
    13
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

13. Windows
    14
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

14. # 2 : R N X - K I T
    • Plugins for Metro
    • Presets for Babel, ESLint, Jest, Metro
    • Drop-in replacement for CLI
    • “All-in-one” approach
    • Tooling used across the company
    • React Native EU 2022 talk by Adam Foxman:
    • https://youtu.be/zgAjZVcvsv8
    15
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

15. E X A M P L E :
    T R E E S H A K I N G I N
    M E T R O
    16
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

16. S Y N E R G Y !
    17
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

17. T H E P A I N O F U P G R A D I N G
    • HUGE diffs
    • “What other dependencies do I need to bump?”
    18
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

18. E F F O R T L E S S U P G R A D E S
    npx @rnx-kit/align-deps
    19
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

19. HOW ABOUT A DEMO?
    20
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

20. T H A N K Y O U F O R A L L Y O U R C O N T R I B U T I O N S !
    https://github.com/microsoft/rnx-kit/issues
    21
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

21. I N V I S I B L E*
    

    View Slide

22. W H A T W E ’ V E B U I L T S O F A R
    Ease of use
    • Smarter defaults
    • Transparent
    Upgradability
    • align-deps
    • react-native-test-app
    Advanced scenarios
    • Hybrid apps
    • Monorepos
    • Tree shaking
    • TypeScript
    23
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

23. P R O D U C T I V I T Y . I T ’ S N O T E N O U G H … ?
    24
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

24. “I want to put my React Native
    feature in any app”
    25
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

25. “I want to run web code in my
    React Native app”
    26
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

26. D E V E L O P E R V E L O C I T Y
    “I want to put my React Native
    feature in any app”
    “I want to run web code in my
    React Native app”
    27
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

27. U N I V E R S A L C O D E ( ! ? )
    

    View Slide

28. C O D E T H A T W O R K S A C R O S S W E B A N D N A T I V E
    29
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

29. W E B A P I S
    30
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

30. W H A T I S W E B A P I S ?
    https://developer.mozilla.org/en-US/docs/Web/API
    31
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

31. W E B A P I S
    • Well-defined API interfaces
    • >1000 interfaces in total
    • Standard: no room for interpretation
    • For React Native‽
    32
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

32. C O D E G E N S T A N D A R D A P I S
    aka.ms/rn-webapi-types
    33
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

33. S T E P 0 : I N V E S T I G A T E
    • A lot of APIs
    • >1000 interfaces in total
    • ~200 after filtering
    • Driven by need
    • Pay-for-play
    • Open source
    34
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

34. S T E P 1 : R F C
    • We wrote an RFC 📣
    • https://github.com/microsoft/rnx-kit/pull/2504
    • The idea is to have these working across all
    platforms: iOS, Android, Windows, macOS,
    web.
    35
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

35. 36
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

36. S T E P 1 : R F C
    • Problems we need to solve:
    • How will this code look like?
    • Where will it live?
    • Which Web APIs should we implement first?
    • And so on…
    • Let us know your thoughts!
    37
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

37. S T E P 1 . 5 : O N E W E B A P I
    • Battery Status API
    • https://github.com/microsoft/rnx-kit/pull/2590
    • The demo you saw earlier
    • https://github.com/microsoft/rnx-kit/tree/kelset/rneu-demo-v2
    38
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

38. T H E G R A N D M A S T E R P L A N
    39
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

39. T H E G R A N D M A S T E R P L A N ( E X P E R I M E N T )
    40
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    

    View Slide

40. 41
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    W E ’ R E N O T T H E O N L Y O N E S
    

    View Slide

41. CLOSING
    42
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    • At Microsoft, Developer Experience is paramount
    • We’ve increased productivity for React Native by supplementing the core experience with extra custom tooling
    • We’ve put it in open source for everyone to leverage!
    • But it’s not enough…
    • Raising the bar: increasing developer velocity
    • Making web code into universal code via React Native is worth investigating
    • Web APIs → we’re experimenting 🧪
    • Collaboration is key 🤝
    Look forward to our talk next year!
    

    View Slide

42. T R U L Y I N V I S I B L E
    

    View Slide

43. THANK YOU!
    @tido64
    @kelset
    L E A R N M O R E :
    • Blog: https://devblogs.microsoft.com/react-native/
    • Documentation: https://aka.ms/rnxkit
    • rnx-kit: https://github.com/microsoft/rnx-kit
    • react-native-test-app: https://github.com/microsoft/react-native-test-app
    • RFC: React DOM for Native:
    https://github.com/react-native-community/discussions-and-proposals/pull/496
    • RFC: React Native WebAPIs: https://github.com/microsoft/rnx-kit/pull/2504
    @ R E A C T N A T I V E M S F T
    44
    R E A C T N A T I V E E U 2 0 2 3 @ T I D O 6 4
    - @ K E L S E T
    Got questions? Scan this:
    

    View Slide