Using React and React Native: bringing design and feature parity to a web app and mobile app
I’ve finished building a doctor appointment platform, and part of that was bringing feature parity to the web version (from the mobile version).
— For the mobile version I used React Native: a cross-platform mobile app development framework.
— For the web version I used React: a web app development framework.
Building a platform that looks and functions the same across multiple devices and platforms can be a tricky task.
In this blog post, we'll take a closer look at the process of creating a doctor appointment platform using React and React Native, and the challenges that come with bringing feature parity to the web version from the mobile version.
When I first started building this platform, I had heard that I would be able to use React Native to automatically build a version for the web. React Native is touted for being able to render to both web and mobile. However, as I delved deeper into the project, I quickly realized that this was not straightforward. There was not much documentation available and the solutions that did exist were early stage and required a lot of troubleshooting to work through compatibility issues.
One of the biggest challenges I encountered was that React Native inherently uses a lot of prebuilt mobile components that simply don’t exist or don’t make sense on the web.
Maybe someone reading this knows better than me and can help(?)
I decided to got ahead and create the web version “from scratch” in normal React, being careful to optimize for mobile web, since more users are accessing websites from mobile devices these days. To do this, I leveraged the same backend web API that I used for the mobile app. This saved a lot of time as most of the data retrieval, storage, and account data creation had already been done.
I simply needed to build the web UI/UX and connect it to each endpoint. I also saved a lot of time by being able to reuse a lot of the JavaScript business logic from the mobile app. This allowed me to focus on creating a visually similar experience across the mobile app and web app, especially on mobile web browsers.
React and React Native are two powerful tools for building user interfaces and creating cross-platform applications. Both technologies have their own strengths and weaknesses, and knowing when to use which technology is key. React is great for building web applications, while React Native is designed for building mobile applications that run on iOS and Android.
As for me, I have been using React and React Native both to build this specific platform. The experience of creating a doctor appointment platform using both technologies was a great learning experience and it definitely helped me understand the different challenges that come with bringing feature parity from mobile to web.
Overall, the process of creating a doctor appointment platform using React and React Native was an exciting and challenging journey. I hope that this blog post will be helpful for anyone who is considering using these technologies for their next project. Let me know your thoughts and if you have any questions or feedback, feel free to reach out to me.
If you’ve learned it already, what have you been using React or React Native for so far?
— For the mobile version I used React Native: a cross-platform mobile app development framework.
— For the web version I used React: a web app development framework.
Building a platform that looks and functions the same across multiple devices and platforms can be a tricky task.
In this blog post, we'll take a closer look at the process of creating a doctor appointment platform using React and React Native, and the challenges that come with bringing feature parity to the web version from the mobile version.
Why couldn’t I just use React Native for the web app too?
When I first started building this platform, I had heard that I would be able to use React Native to automatically build a version for the web. React Native is touted for being able to render to both web and mobile. However, as I delved deeper into the project, I quickly realized that this was not straightforward. There was not much documentation available and the solutions that did exist were early stage and required a lot of troubleshooting to work through compatibility issues.
One of the biggest challenges I encountered was that React Native inherently uses a lot of prebuilt mobile components that simply don’t exist or don’t make sense on the web.
Maybe someone reading this knows better than me and can help(?)
My high-level approach to building the web app version to match the mobile app version
I decided to got ahead and create the web version “from scratch” in normal React, being careful to optimize for mobile web, since more users are accessing websites from mobile devices these days. To do this, I leveraged the same backend web API that I used for the mobile app. This saved a lot of time as most of the data retrieval, storage, and account data creation had already been done.
I simply needed to build the web UI/UX and connect it to each endpoint. I also saved a lot of time by being able to reuse a lot of the JavaScript business logic from the mobile app. This allowed me to focus on creating a visually similar experience across the mobile app and web app, especially on mobile web browsers.
Using React and React Native together
React and React Native are two powerful tools for building user interfaces and creating cross-platform applications. Both technologies have their own strengths and weaknesses, and knowing when to use which technology is key. React is great for building web applications, while React Native is designed for building mobile applications that run on iOS and Android.
As for me, I have been using React and React Native both to build this specific platform. The experience of creating a doctor appointment platform using both technologies was a great learning experience and it definitely helped me understand the different challenges that come with bringing feature parity from mobile to web.
Final thoughts
Overall, the process of creating a doctor appointment platform using React and React Native was an exciting and challenging journey. I hope that this blog post will be helpful for anyone who is considering using these technologies for their next project. Let me know your thoughts and if you have any questions or feedback, feel free to reach out to me.
If you’ve learned it already, what have you been using React or React Native for so far?
