Web to Mobile with React Native: Part I

Moving from web to mobile: A brief history

Since the inception of the web more than 25 years ago developers have made websites and web applications work on more and more devices. To start with there were just web browsers running on desktop computers, but that quickly changed to include mobile phones through modified versions of HTML, and then as they grew more powerful they were able to display proper web pages, then other home computing devices like games consoles joined in, until today when everything from a watch to a fridge can show web content.

During these two and a half decades many developers have gained expertise in knowing how to make websites that can work well regardless of what device is being used to render them. Responsive design gives the developer the necessary tools to make content respond to the capabilities of the device. This approach works very well for most content.

For a long time, there were other attempts to turn web code into mobile apps. The Apache Foundation’s “Cordova” project provided a wrapper around a web browser view that enabled access to some APIs through plugins and gave developers a package that could be submitted to app stores for users to download. It was good when it worked, but the code was notoriously fragile as plugins often lagged behind changes to OS APIs. Things would break a lot. The performance of a Cordova-based application could also be a little flaky – things would run well in a browser but poorly in an application on the device. As a developer the experience was frustrating, and debugging took time which pushed costs higher.

React: From web app to mobile app

During this time the React web framework was gaining a high level of adoption around the web for making reactive web applications. React is made by Facebook, and this brought the huge resources of the Facebook developer team to tackle the problem of how to build a large-scale application from small components that could work together within a web page.

The way React achieves this is by using an intermediate domain language called JSX that looks enough like JavaScript that browsers are happy to accept as code, but that can be rendered in different ways depending on what’s needed. At the beginning of the React project that was really limited to being used on a server to create static pages or on a browser to build components for a larger application, but JSX’s power comes from the fact that it’s flexible.

Enter React Native

React Native can use JSX’s template-like code to build a mobile app from a collection of native components.

React Native developers implemented all of the commonly used components that make up a mobile application in native code using an API that looks familiar to web developers who use React. This means there is much less to learn to take the wealth of skills and knowledge that many web experts have to build complex mobile applications.

Facebook built React Native for their own web teams to use to build parts of their mobile application. Now React Native is being used in thousands of applications that people use every day. Even billion-dollar corporations have used it to make apps that millions use daily; until very recently Airbnb’s app was entirely React Native. It’s well supported and well documented.

React Native isn’t the only hybrid application framework that compiles web code to native applications - Google’s Flutter and Microsoft’s Xamarin (which is already in use at KOMODO) are also popular options to consider for app development.

This is the first article in a series exploring React to React Native. You can read part two by clicking the link below!!