5 reasons to use React Native
At Instructure, we’re always looking for ways to improve, and streamline our mobile development.
Last year, we adopted buddybuild into our development process to manage our CI / CD processes, and let us focus on creating amazing apps like Canvas.
For the Instructure team, buddybuild has been transformative in automating a lot of the processes around building and deploying our mobile apps. Buddybuild allows us to push builds with confidence knowing we have a reliable CI system that runs our tests, and supports our pull request flow. With each build, our internal team receives an in-app notification to update the app, and we can install the most recent build with a simple mouse click. With buddybuild, we’re able to automatically deploy to iTunes Connect / the App Store and use the buddybuild SDK to capture crash reports in production.
With our build and release processes now under control, we’ve had some time to investigate new technologies — specifically the much talked about React Native framework. At Instructure, we don’t have any concrete plans to use it immediately, but we’re actively evaluating its usefulness to our organization and the possible ways to adopt it.
This post summarizes some of the most compelling reasons I found during our evaluation at Instructure — I hope our findings help you evaluate React Native as well!
A brief Introduction to React Native
Since being released, there has been very steady growth of interest in the framework. As of this writing, the project has over 43k stars on github.com.
If Google search frequency is any indicator, the interest in React Native continues to climb, while interest in both iOS and Android development is declining.
As with any framework, there are a great number of reasons for and against using React Native — many of which we discussed and debated at Instructure. That said, I have compiled this list of 5 reasons to use React Native that should be considered…
React is a popular framework that’s used to build web applications. It popularized the use of a virtual DOM, which greatly increased render performance for web apps.
By using the same principles as React, React Native maintains a virtual representation of the view hierarchy. When changes are made, instead of doing expensive operations on the view hierarchy, the virtual hierarchy is compared using an efficient diffing algorithm, and then appropriate changes are made to the actual view hierarchy.
This enables a developer to forget about one of the most dreaded things about building UI: managing state. A React component always returns what it should look like from its render method. Everything else is taken care of.
Another principle of React that is fascinating is encapsulation of components. With iOS, there are source files and Interface Builder files that work together to build the interface. Android has something similar with its XML interface files. Web apps have traditionally used 3 different types of files: HTML, CSS and JS.
React throws away that thinking and encapsulates each single component into a single file. All styling, logic and UI is defined within a single file. It is a different way of thinking, but I’ve found that it’s largely positive.
Combine this with React’s uni-directional data flow, and it’s very easy to understand what’s happening with your components. Data comes in, the component renders itself, the UI is updated. Anytime the state of the component changes, the component will automatically render again and the UI is always an exact representation of the state. It’s wonderful.
2. Quick Feedback Loop
In the early days of iOS development, I remember how quick and easy it was to build an app. There were hardly any APIs, Xcode seemed fast, there were very few devices to support and compile times were fast because apps were small.
Mobile apps continue to grow in complexity and the tools have not scaled well. Xcode is a beast that is slow and cumbersome. Compile times, especially with Swift, have gotten slower.
It’s easy to get distracted when waiting for an app to compile. I’ve worked on apps that take over 15 minutes to compile from scratch. While there are processes in place to mitigate this, such as only compiling files that have changed, it still feels slow and it’s easy to jump on Twitter while waiting for a compile.
With React Native, compile times are gone. This feels like an extremely freeing experience when you get in the groove. You can add file watchers to automatically reload the app when you save a file. Meaning, whatever you have in your files is automatically updated and you’ll see your results instantly.
While this may not seem like a big deal, I’ve found it to be incredibly helpful. I’ve been able to maintain incredible focus because I’m never waiting to see my changes applied to the app. They are always instantly there. It’s incredible.
From a data perspective, if a developer waits 30 seconds for compiling 20 times per day, that’s 10 minutes per day, not to mention the context switching that happens when waiting. That’s 3,250 minutes a year that could be saved for one developer assuming around 260 work days a year. Over 50 hours.
3. Cross Platform
This is obvious, but it really needs to be mentioned. React is such a great abstraction around build a UI that is can be adapted to multiple platforms. At the moment, that means iOS and Android. However, there are adaptations to Windows Universal App Platform and macOS as well.
The time, cost and communication saving by supporting a single codebase opposed to multiple is easy to understand. Facebook uses React Native in their Ad Manager app, and they have 85% code sharing between the iOS and Android platforms.
Any company, large or small, can benefit from cutting their app development costs in half, or in other words, doubling the size of their mobile team with the same number of developers.
4. Plain Text Editor
Simplicity is an important part of software development. Lowering the barrier of entry and keeping things easy to understand is key to productivity.
Most iOS developers use Xcode and most Android developers use Android Studio. While these IDEs offer great features that are meant to enhance a developer’s ability to write code and debug, they can also be slow and hard to use. Especially for anyone learning for the first time.
I’ve found that a simple text editor has actually increased my overall productivity. It doesn’t crash, it doesn’t hang and it doesn’t lose syntax highlighting randomly a few times a day.
I’ve used Xcode for almost 10 years now, and I don’t feel that it’s trajectory is getting any better. New features are being added, but the root of the problems with it are not being addressed, such as crashing and being extremely slow and literally not working.
The community surrounding React Native is very positive. I believe that the founding principles of React Native were well instilled, which is replacing native app development as we know it.
Another less known part of this is dependency management. Managing dependencies on iOS is a nightmare using either Carthage or Cocoapods. The Swift Package Manager is promising, but it’s not yet released and historically Apple has not done a great job with dependency management.
NPM and Yarn are great dependency managers that are fast. It becomes trivial to add new dependencies that otherwise would require adding a new pod, downloading everything, recompiling and running the app.
React Native has made incredible progress the past several years. It is being used by a growing number of impressive apps. I expect that list will continue to grow in the years to come.
It’s exciting to see progress in the ways that apps are being built. Buddybuild has been transformative to Instructure’s build and release processes. It allows us to make informed engineering decisions based on our users’ feedback, and iterate faster than ever.
Similarly, React Native gives fantastic benefits of increased productivity without sacrificing the look and feel of the apps we love. I’ve always been a critic of cross platform frameworks, but React Native has struck a delicate balance that pays out huge dividends. It’s definitely something I’m excited to experiment with in the future.
This article is part of buddybuild’s community blog post series, which highlights buddybuild users, and other respected mobile developers. Feel free to visit the buddybuild blog for more articles like this!