1 of 18

Deploying React Native

To web 🌐

To web and beyond 😏

Q&A at www.slido.com with this code: #klreact-joel

2 of 18

Joel Yek @joevo2

  • Did quite a bit on React, React Native, NodeJS, MongoDB and GraphQL
  • Currently working in BAE Systems Applied Intelligence.

  • Ex Vase Software Engineer 😎

Q&A at www.slido.com with this code: #klreact-joel

3 of 18

Agenda

  • Why?
  • How to add β€œweb” into my React Native app?
    • Expo
    • Vanilla React Native
  • Deployment
  • Drawback
  • Conclusion
  • Resources

Q&A at www.slido.com with this code: #klreact-joel

4 of 18

Why?

Code sharing

Q&A at www.slido.com with this code: #klreact-joel

5 of 18

Seriously why should I use it?

CODE SHARING!!!

  • Build conference app, Flappy Bird for iOS, Android and Web at the same time!
  • 1 developer 6 platform (iOS, Android, Web, Window, Mac Linux) πŸ˜‚
    • DevHub with 95% code share
  • Limited resources

Q&A at www.slido.com with this code: #klreact-joel

6 of 18

Different tools for different scenario

It’s not the best, but is possible, but is definitely not easier 😏

  • If you have limited person to build multiple platform and web
  • Limited time
  • Limited budget
  • Limited skill set or personnel on specific platform

Q&A at www.slido.com with this code: #klreact-joel

7 of 18

Expo Web

*React Native Web

Q&A at www.slido.com with this code: #klreact-joel

8 of 18

What is RNW?

A set of primitives that bind components like View, Image, or Text to DOM elements like div, img, and span.

Q&A at www.slido.com with this code: #klreact-joel

9 of 18

Who is using it?

Twitter, Flipkart, Uber

Q&A at www.slido.com with this code: #klreact-joel

10 of 18

How?

Merge CRA/Next into RN/Expo app?

Q&A at www.slido.com with this code: #klreact-joel

11 of 18

Best case scenario

We like it easy don’t we 😎

  • Expo Web!
  • Start a mono repo with react native project and create react app

Q&A at www.slido.com with this code: #klreact-joel

12 of 18

Porting existing CRA or RN into to RNW is hard but not impossible

Because of platform specific dependencies

Q&A at www.slido.com with this code: #klreact-joel

13 of 18

Demo time!

Please be gentle with me.

I’m new too

  • Routing with React Navigation with proper URL/path
  • Responsive design with Dimension
  • Platform specific code with Platform and .web.js, .ios.js, .android.js or .native.js
  • Deployment to now.sh

Q&A at www.slido.com with this code: #klreact-joel

14 of 18

What’s the drawback?

*You saw the last last slide right?

  • Platform specific external dependencies
  • Hard to debug error especially related to React Native mono repo issue
  • RN is hard enough already, now you add RNW into the mix πŸ˜‚
  • But if you are using Expo you are safe!

Q&A at www.slido.com with this code: #klreact-joel

15 of 18

Why now? Why so excited?

Expo...

  • Officially supported by Expo
  • Better documentation and filling in the gaps by Expo contributor
  • React Navigation now support web

Q&A at www.slido.com with this code: #klreact-joel

16 of 18

Actually useful references!

Q&A at www.slido.com with this code: #klreact-joel

17 of 18

Little recap

Pros

  • Less resources needed
  • Code sharing between platform
  • *Faster development time

Cons

  • External dependencies
  • Complication on various platform specific codes
  • Harder to debug - you are probably on your own until wider adoption

Q&A at www.slido.com with this code: #klreact-joel

18 of 18

React Native 0.61 is out!

Replacing stupid hot reload with Fast Refresh

Q&A at www.slido.com with this code: #klreact-joel