At GRT, we recently built a React web client for a small educational startup. Once this web app was feature complete, we decided to do a do a port to React Native as a learning experience and proof of concept. We definitely learned some stuff.
What is React Native?
Why would you want to do this?
Ok, so let’s say you have a React web app like we did, and you want to try porting it to React Native.
First of all, go back in time and write the React Native implementation first.
Just kidding… sort of.
Here’s the thing. React for the web is much more forgiving and flexible than React Native. React Native does not used HTML or CSS, so if you wrote CSS and have a bunch of HTML in your webapp, you’re going to be spending some time rewriting. However React for the web support styling using JS objects, so the port in the other direction is easy. Also let’s say you’re using a bunch of 3rd party UI modules in your app. If you have this all figured out for React Native, you’re going to have a pretty easy time finding modules with comperable APIs for the web. The reverse is not likely to be the case right now.
Abstract even MORE logic that you think.
So part of the idea of porting your app to React Native is so you can share code right? If your code is in a view, you’re not sharing it. Look how much logic you have in your
.jsx files. A ton, right? All that has to be pulled out into modules if you want to maintain it in one place. Think about this ahead of time. If you’re using Redux, you can think about this in terms of Component and a Containter.
Do you even need a native app?
One more thing we discovered is that the percieved perfomance on mobile of our React Native app was not superior enough to the web app to justify maintaining them both. Depending on the level of interactivity in your UI a web app may offer suitable performance and user experience.
So what should you do?