How React Native Made Me Love Mobile-First Development

When I originally joined Mattermost in May 2016, I was working on the web app and backend. 

At the time, we had a mobile app that essentially just served the web app. 

Our CTO, Corey Hulen, approached me and asked if I wanted to shift my focus and begin building prototypes for our mobile apps using React Native so we could deliver a better mobile experience.

Initially, I wasn’t too thrilled by the idea. I’d been running away from mobile app development for years. But mobile continued to chase me, and I’m not one to shy away from a challenge, so I agreed.

React Native: First impressions

I started building a proof of concept using React Native, and I immediately loved it. 

Since I already was familiar with React — and you can apply the same React concepts to React Native — there was hardly any learning curve, and getting started was really easy. 

(My colleague, Miguel Alatzar, went in the opposite direction, learning React via React Native, and had a similar experience.)

Right off the bat, I found out that you could create iOS and Android “native” apps after writing just a few lines of codes and using a couple of React components. It was amazing. While the apps technically aren’t entirely native, React Native enables developers to deliver something very close to a native experience — and with a lot less heavy lifting.

When you know React, React Native is easy because it’s basically the same thing; props are the same, the lifecycle is the same, and it’s got the same vernacular. Whenever I wasn’t sure about something, I referred back to the documentation (which wasn’t great at the time, but is way better today) and figured it out.

“Learn once, write anywhere”

One of the guiding philosophies of React Native — “learn once, write anywhere” — is the idea that developers shouldn’t have to learn a ton of new technologies to build apps for different platforms. Instead, devs should be able to reuse all the code they write, changing certain parts of the logic as they bring it from one platform to the next.

While building out our first mobile app, we used the POC of the mobile app to start playing around with Redux. Eventually, we moved it to its own library. The webapp started to leverage the logic placed in this shared library, providing an easy path forward to move the web app from Flux to Redux.

While this approach worked to an extent, we quickly learned that there are certain things the web will forgive that mobile simply won’t — which caused some pretty glaring performance issues on the mobile experience.

Even though the world has incredibly powerful mobile devices today, they’re no match for computers — particularly when you consider cheaper Android phones & tablets and their sluggish performance. 

As you begin to push a computer to its limits — and you share the same components and logic for your mobile app — you’re killing the smaller device.

Why run logic and make requests when you don’t need to?

Efficiency at all levels: the mobile-first approach

Developing for mobile is much more difficult than developing for the web because of computing and memory restraints. While many teams start building a web app and move that code over to mobile, React Native lets developers rethink this approach. 

With a mobile-first approach to development using React Native, you’re forced to find a better, more efficient way of doing things. And you can take the learnings from mobile directly to the web app so that the web app improves. That sure beats the older approach of crushing your mobile app when you bring your code from web to mobile!

When you’re developing a web app, you don’t think about persistence; everything is loaded on-demand. Mobile, on the other hand, forces you to focus on other constraints. 

For example, users on a cellular network can’t load the same thing over and over again due to plan limitations. Additional constraints include the cost of network requests and the amount of data that can be stored in memory at the same time.

When you’re guided by a mobile-first approach, these constraints are impossible to ignore — which means that anything that works well on mobile will be amazing on the web.

Getting started with React Native

If you’re a web developer who knows React, you can transfer that knowledge and start building mobile apps with React Native. You don’t have to relearn new things; you just need to focus on solving network requests, animations, and time-to-load problems. 

Take my word for it: You’ll be surprised when you see how quickly you can push out a mobile app. This could be a great way to get into mobile development almost overnight — just like I did.

If you’re a native mobile developer, you might be frustrated for a bit as you transition to React Native. But the second you see that your Android app is also running on iOS (or vice versa) and you’ve saved yourself countless hours of work, that initial frustration will fade, and you’ll be hooked.