React Native at Pathlight

Pathlight on mobile enables people to view their performance data and communication in one place, from anywhere. When we first built the mobile apps, we carefully evaluated the different options for mobile development technologies. We decided to use React Native in our mobile stack to be able to iterate quickly on both iOS and Android, as well as leverage our existing React web knowledge and infrastructure on mobile.

Two years later we are still happy with this decision. In this post I’ll share the lessons learned from:

• Evaluating React Native vs native mobile technologies
• Defining the timeline for launching v1 of the mobile apps
• Ensuring developer productivity across the platforms

We will also discuss our vision for the future of the mobile platform. We’re quickly growing our mobile team so if you’re excited about the work we’re doing here–join us!

‍

From Prototype to Launch in 4 Months

When I joined Pathlight as the first mobile engineer in 2019, there were no mobile apps at all. The team had experimented with a mobile web experience but found the technology and user experience lacking. We also knew that having native mobile apps–with important native functionality like push notifications and deep linking–was going to be critical to our product success. As a B2B product, we also had important customer deals that were dependent on having a high-quality, polished mobile app experience. Customers were actively asking for a mobile app and we needed to deliver!

Our decision on what to use for our mobile stack benefited from my deep expertise with both native iOS app development as well as my familiarity with the React Native platform. I felt I could make a balanced decision weighing the pros and cons of using cross-platform technology. I had direct experience with hybrid native and React Native apps from my time leading the Pinterest integration of React Native into the mobile stack. I also had some small-scale metrics on developer efficiency from working on small toy projects in React Native. However, this would be my first time building enterprise-grade React Native apps from the ground up so I was uncertain if there would be any unforeseen challenges.

React Native was a great fit for the initial app launch for several reasons. Our web frontend was already using React/Redux and we could reuse a lot of the business logic on mobile. Even now, two years later, our networking layer and customized Redux implementation are 95% consistent on web and mobile. We were also able to bring React patterns and paradigms to the mobile platform even though web frontend code cannot directly be used on mobile.

There are many situations in which React Native is not an ideal technology. Shopify committed to React Native as the future of mobile at Shopify in January 2020, but they also acknowledge that React Native isn’t a good fit if the app requires “ultra high performance or many background threads.” We carefully evaluated React Native with this in mind and felt that our performance requirements for the mobile apps did not restrict us from using this technology. 

Weighing all the various considerations, we decided to commit to React Native in our mobile stack.

I began work on the mobile apps in January 2020 and we launched the first version of both our iOS and Android apps in April 2020. I was and still am stunned at how quickly we were able to release our first versions of the app with one dedicated mobile engineer. This first version was fully-featured and supported all the major complex functionality of our webapps, such as complex data visualization, coaching and communication, and 1-on-1s. 

In total, the first version was more than 250k lines of code and we were able to achieve ~99% code shared between iOS and Android. This result is a huge efficiency improvement over implementing apps natively, which would either require a second engineer working in parallel or double the time to implement an iOS and Android app sequentially. React Native thus allowed us to be able to ship two high-quality apps within 4 months. 

‍

From Launch to Now

React Native has continued to work well and help us scale our B2B app as we have grown the user base and the team. 

We now have thousands of mobile-first users who depend on the Pathlight mobile app to get up-to-date information about their performance and communicate instantly with their managers and reports. React Native has allowed us to iterate quickly, build new features, and address customer feedback on both platforms easily.

Our engineering team has now grown to 14 members. We have four dedicated mobile engineers, but the shared paradigms between React and React Native as well as our common frontend infrastructure have enabled engineers to flexibly move across web and mobile. 

It has been enormously helpful to our developer productivity to have one engineer be able to span multiple platforms. Web engineers with no previous experience in mobile can jump in and contribute to the mobile app when urgent work arises. Similarly, engineers can develop a feature first on the mobile side and port over the work easily to the web. If our apps were built only using native platform technologies, multiple engineers would be required for a single feature and hours would be spent in meetings sharing context and ensuring consistent implementation. But because our web/mobile technologies are similar enough to ramp up quickly on, a single engineer can drive an entire feature across all the platforms. The team overall is able to ship more features with high consistency and quality on all platforms.

We plan to invest in internal infrastructure to make it easier to share business logic code and even UI components between web and mobile platforms. These productivity gains will become even more important as we rapidly scale our team in 2022!

‍

Future of Mobile at Pathlight

React Native is an impactful cross-platform technology that enables us to deliver high-quality mobile apps and have a more dynamic, flexible engineering team.

We will continue to invest in and hire native mobile engineers. Though React Native provides powerful cross-platform functionality, it is still built on underlying native technologies. Some things are more challenging in React Native because it adds an additional layer of abstraction over the native platforms. In these cases, solving the issues often require deeply understanding all the parts of the mobile tech stack and deep-diving into the native platforms to create the best user experience. 

We have already encountered limitations to the React Native platform that have required more advanced investigation and workarounds:

• Setting up push notifications and universal linking: these capabilities are already complicated to configure natively and rely on multiple systems outside of the app itself to produce the correct experience. We needed to integrate with our existing push & email provider, which didn’t provide an out-of-the-box solution for React Native. In addition, issues are difficult to test and debug, and React Native is an additional part of the stack that can cause errors in proper handling of pushes and links.
• Keyboard inputs: even for pure native apps, keyboard inputs are difficult to work with and require significant technical investment to achieve elegant animations and intuitive UX for users. Rendering the UI from the javascript side adds the extra bottleneck of passing data across the bridge, which often results in the keyboards interacting and animating suboptimally in React Native. In addition, keyboards function very differently between iOS and Android and have pushed us to use separate implementations for each platform to achieve the native feel. All of these factors have increased the maintenance cost of keyboard inputs in React Native.

Despite the added complexity of working with React Native, we still feel that the benefits outweigh the negatives. Plus, choosing React Native does not mean abandoning native development completely. There is still always the option of adopting a more hybrid native-React Native approach. Shopify does a great job outlining their decision-making process for when to use native code in their React Native apps.

We are also solving hard engineering problems that are challenging regardless of whether we are building using React Native or native technologies. Responsive data visualization, rich-text editing, and real-time communication are just some of the examples of features we are actively working on. Discord’s process of optimizing their React Native iOS app is a great example of how every layer of the mobile stack must be considered to get the absolute best performance possible. 

I am excited to share knowledge with other great engineering teams that have adopted React Native like Shopify, Discord, Wix, Artsy, and many others. Since I started following React Native's progress more than 6 years ago, I have been blown away by the enthusiasm and energy in the community. As we grow the mobile team, we also hope to start contributing back to React Native and open source efforts!