Hello World: Thoughts on React Native
What is React? React is a JavaScript library created by Facebook to build User Interfaces (UI's) and has become one of the leading SPA libraries on the market. There have been a lot of big companies who have taken on the React stack to help develop their online presence. If you have used Facebook, Instagram, Netflix, AirBnB, WhatsApp, Skype, Uber, Walmart, Dropbox, or Wix, you have used a React app.
React is most commonly used for Single Page Apps (SPA's), though it can be used for ad hoc components in an existing standard HTML page. React accomplishes this by allowing you to build complex UI's from small, isolated, reusable "components".
What Does This All Really Mean? From a users point of view, this means less page refreshes and a smoother user experience. You can change a value in one section of the UI and only the components that "talk" to the triggering component will be updated in real time without refreshing the entire page, which can cause a momentary white screen while the entire UI updates in non-SPA pages.
From a developers point of view, this allows us to create our own HTML elements that have special, customized functionality. For example, we can create a <MaterialTextInput /> with this little snippet of code wherever we choose, and a "Material IO" styled text input with a label that shrinks when you type, an underline that changes colours, and some custom validation is all contained within that component. Easy to copy and use as needed anywhere in your code. If you want more logic, edit the one component and the code updates anywhere it's used in the site. Amazing!
So Why Choose React? Not only does React have one of the largest developer bases over competitors such as Vue, Angular, Ember, and Elm, but the React ecosystem also includes React Native and it's backed and built by Facebook. Competing libraries such as Vue are basically developed and maintained by a single individual so the potential to abandon a project is high and not good for long term viability.
What is React Native?
React Native (RN) allows us to build applications for iOS and Android using the same style of coding as React (also commonly referred to as React JS or React Dom). In fact, a large percentage of the core libraries used in React JS and React Native are interchangeable. If you have coded in one library, you can transition to the other pretty easily. This is fantastic because it means we can share business logic code between the two libraries when making our apps, reducing the amount of code needed for a project and allowing updates to one set of business rules for multiple apps.
React Native does not use the same core UI elements as React JS, so there is a bit of a learning curve. However, compared to learning a whole new "language", it's still pretty simple. React Native has concepts such as screen stacks and views, whereas React JS works with a window document and HTML blocks. Mobile apps have notification messages whereas browsers do not, although we use features such as alert dialogs and toaster messages.
What Does All This Mean? If you know React JS, you can transfer to RN fairly easily, at least for trivial apps, so a web developer can start making mobile apps without having to learn a whole new skill set. It also means that you can maintain one set of code to create iOS AND Android apps instead of hiring an iOS development team and an Android development team. Pretty exciting on many levels.
React Native was released to the development community in March 2015.
What is React Native Web?
Take React JS and React Native and combine them together and you have React Native Web (RNW). Imagine having one code base that builds code for iOS, Android, web, and potentially Electron desktop apps for Windows, Mac, and Linux — that is what React Native Web has set out to achieve.
To be honest, RNW is still in its infancy and is more of a community initiative rather than one lead by the core React team. It has many benefits for small scale apps, although there is still a lot of work to be done for use in larger applications. As mentioned above, mobile apps and desktop web browsers operate differently in many ways and this can make things such as handling navigation and routing a bit tricky. We will delve into how to handle some of those differences in future articles. For now, suffice it to say RNW is pretty awesome and the community using it will continue to grow.
Our Experience
We have worked with a couple other SPA libraries and, so far, React development is preferred. It is easier to understand the flow of data, and it also provides a multitude of third-party libraries that you can choose from to help build apps quickly. Other libraries tend to enforce some of their libraries on you for things such as navigation or state management. This can be good as it limits the amount of possibilities you can choose from, eliminating the infamous Paradox of Choice. However, this also limits what is available and often makes you spend more time developing your own custom implementations of components. Knowing we can choose AirBnB's calendar over Wix's calendar has many benefits as it allows us to pick options that fit our needs, and being maintained by a large company for the long term relieves our team from maintaining even more code.
Making the transition from React JS to React Native was actually a lot of fun. Switching to another platform by applying our current React JS knowledge to mobile app development without having to start from scratch was enjoyable. To be fair, having a background in Java or Kotlin will be a HUGE help, but it's not necessarily required unless you are trying to do complex things. It mainly just requires a little learning about the intricacies of native apps.
React and RN are powerful and amazing libraries and they are the definite preference over the alternatives. This is still an emerging technology and other big players, such as Google Angular, are engaging in the power struggle to become the leading SPA platform to use, but React is ahead of the pack. Not to mention the vast amount of community help and feedback that some other libraries lack due to the lower number of developer use.
The verdict is still out on RNW. It is still too new and the community is small. After having spent multiple months exploring this new concept, we can now begin to understand why; Web and Native are two different beasts and anything too complex becomes a management nightmare with configuration. As the app becomes more complex, you are probably better off running React JS and RN as two separate code bases with a shared business logic repository. But apps such as task managers, chat programs, booking software, and image galleries are the perfect candidate for RNW. It will be exciting to see how things develop over the next few years.
Everything still has its place, and pure Android and iOS development is not going away any time soon. When dealing with really large or complex apps, using Java or Kotlin for Android and Swift or Objective C for iOS is still the way to go. They will be better at overall file size and gesture handling. React Native does a good job replicating simple transitions and animations, but would not work well for game development. React Native shines on more rudimentary apps, as mentioned above.
AirBnB has a great article detailing their pro's and con's for React Native. Having been a major contributor to React Native for several years, their feedback is worth considering as well.
