How RANKD got to market faster with Expo

This is a guest post from Kevin Tran, a Lead Developer at RANKD, where he focuses on technical leadership and a product development. Kevin is passionate about crafting intuitive and engaging interfaces that help bring people together in real life.

...

About 2 years ago, a coworker of mine showed me something he built using a No-Code platform. It was simple enough - a tennis matchmaker on a mobile device. The UI at the time looked super janky, but it was already in production with 3 thousand users. At the time I was impressed but really thought nothing of it, except that it was a cool idea.

Fast forward a couple of months and he messaged me on Slack, asking if I was able to bring his app from the No-Code world to something that was as native as possible. He wanted two things:

1. The app to feel amazing to use
2. For me to lead the development team

At the time I had a few years of experience under my belt as a Full Stack developer, with some decent experience with React and C#, but had never led a team before. I knew that accepting the offer would mean I would be thrust into a role where my decisions would impact more people, and my choices for technology would have to be sound.

I took the job and decided that React Native with Expo and .NET on Azure would be the best choice for a Full Stack application.

RANKD is a tennis matchmaker that leverages a database of over 6000 publicly accessible courts in Canada and the US. We generate a list of players nearby and make it easy for the user to send out requests for games. Once scheduled, the players meet up at the public court, play some sets and record their scores in the app. There is a progression system in place as well, so users can find players that are around the same skill level.

We first started building the app in September of 2022. We toyed with the idea of going with Flutter, but ultimately chose React Native because I was already familiar with React, and the pool of potential developers we could pick from would be bigger.

Immediately I could feel the wind at my back. The similarities of working with React and React Native helped me build out components quickly. And we were able to quickly onboard a couple of developers to help build the app. It was easy to cross reference React tutorials and apply them to a React Native landscape to get the new devs up to speed efficiently.

Expo Go is a powerful sandbox tool that enables us to quickly build, iterate, and test RANKD. By using Expo Go, developers can take advantage of numerous pre-built libraries and components, making the development process faster and more efficient. The app can be easily tested on physical devices by scanning a QR code, eliminating the need for complex build processes during the early stages of development. We were able to quickly showcase the app to our designer to ensure pixel perfection, and also to the stakeholders of RANKD for buy-in.

Benefits of Using Expo Go:

• Rapid Iteration: Changes can be seen in real-time without the need for recompiling.
• Access to a Wide Range of Libraries: Expo GO includes many libraries by default, enabling developers to implement complex features quickly.
• Simplified Development: The environment abstracts much of the setup complexity, allowing developers to focus on building features.

Eventually, we needed to move from Expo Go to a development build. Development builds are pretty much your own version of Expo Go, so it’s really not that much different from your base experience with Go. You can definitely get away with staying within the Expo Go libraries, but having the option to move to a development build gives developers the best of both worlds. Below are some of the steps that we followed when we decided to transition to a development build.

Steps to Transition:

• Prebuild Command: Instead of ejecting, we used the expo prebuild command. This command generates the necessary native code files (iOS and Android directories) while keeping the project within the Expo managed workflow.
• Installing External Libraries: Add the required native dependencies. For example, to use Mapbox, we installed the @rnmapbox/maps library and followed their setup instructions for React Native.
• Creating Custom Development Builds: Use the Expo Application Services (EAS) to create custom development builds. This service allows you to include the new native modules and build the app for iOS and Android.
• Testing and Iteration: With the custom development build, you can test the app on physical devices, ensuring that the new functionality works as expected.
• Continuous Integration and Deployment: Set up CI/CD pipelines with EAS to manage the building and deployment process efficiently, ensuring smooth updates and releases.

Above is a brief overview of some of the expo libraries that RANKD uses. As you can see, almost every part of the application uses an expo library! Expo provides a comprehensive collection of libraries that fit most of the use cases out there.

Expo also provides a sweet notifications API that can be used to send push notifications to our users. Again I point to their fantastic docs to show how easy it is to follow and set up your own push notifications system. Ours is deployed on Azure as a Node JS function app, but you may choose a variety of options that Expo and the community provides.

We also leverage a couple other important expo tools: expo-updates, expo-doctor, and the JS debugger

• Expo-updates is a great way for you to skip the submission process when you just want to update the javascript in your app. Without getting too deep into the details, expo-updates uses a branch system that allows you to push updates to your app without requiring users to download a new version from the app store. This is particularly useful for fixing bugs, updating content, or rolling out new features quickly. By using the branch system and expo-updates
• Expo Doctor is a handy tool in the Expo CLI that helps you troubleshoot and fix issues in your Expo projects. When you run expo-doctor, it scans your project for common problems with configuration, dependencies, and environment setup. It then provides clear error messages and helpful suggestions to get everything back on track. This way, you can spend less time dealing with technical glitches and more time building your app.
• Finally, I have to mention the remote JS debugging. Imagine you're developing an app with Expo, and you encounter a bug where a button isn't responding to clicks. To debug this in Expo, you can use the built-in developer tools. First, shake your device (or press ctrl + m on an Android emulator, cmd + d on an iOS simulator) to open the Expo Developer Menu. From there, you can enable Remote JS Debugging, which opens the Chrome Developer Tools. This allows you to set breakpoints, inspect variables, and view the all important network logs! Coming from a web developer world, using the chrome debugger is like second nature, which is another reason why Expo is such a valuable framework.

Right now we are still in the process of using Testflight and Google Play to test RANKD. It’s an inefficient process - I build the app locally using the `eas build –local`, and then submit the app to the app stores before someone can test it. Although it is a bit time consuming, it’s great that Expo gives me the option to use EAS (Expo Application Services) locally. I could potentially build my own pipelines using EAS!The wonderful thing about Expo is their documentation. It’s extensive, and even the problem of sharing development builds has an answer - It’s right there in the docs, and it is on my radar for improving the development process. Honestly, any challenge that we ran into during our development was readily answered by the documentation.

As a first-time technical lead, managing a team of developers while tackling code entropy and onboarding new members was a daunting experience. Maintaining standards to prevent entropy was something that was always in the back of my mind, and to date we’ve had a total of 7 developers touch the codebase over the last couple of years.

What is code entropy?

Code entropy refers to the gradual decline in the structure and clarity of a codebase over time. This degradation can lead to increased complexity, making the code harder to understand, maintain, and extend. Factors contributing to code entropy include frequent changes, lack of documentation, and inconsistent coding practices.

Here are some strategies that I employ to maintain a quality codebase:

• Adopt Consistent Coding Standards: Establishing and enforcing coding standards is essential to maintain code quality. Expo also has first class typescript support so that has helped us maintain a high level of code quality.
• Implement Code Reviews: Regular code reviews helped identify potential issues early and promoted knowledge sharing among team members. This practice also ensured adherence to coding standards and facilitated continuous improvement.
• Prioritize Documentation: Comprehensive documentation of the codebase, including comments, README files, and design documents, played a vital role in mitigating code entropy. It provided clarity and context, especially for new developers joining the team.
• Refactor Regularly: Periodic refactoring sessions helped us address technical debt and improve code structure. By refactoring regularly, we maintained a cleaner and more manageable codebase.
• Automate Testing: Implementing automated tests, including unit tests and integration tests, ensured the reliability of the codebase. Automated testing helped catch bugs early, reducing the chances of code degradation.

To be honest, since we’re a small team, a lot of these points do sometimes fall to the wayside in favor of maintaining momentum, but it’s still something to keep in mind. As a technical lead you have to balance between the business needs, and the needs of the codebase. Don’t be afraid to advocate for what you feel is important - after all, you’re the one in the trenches! When the project and team grow, the importance for maintaining quality will increase, so it makes code reviews all the more important.

Using Expo can really elevate the look and feel of your app to be more like a native experience, especially compared to no-code solutions. Expo provides a set of tools and libraries that make it easy to create apps with smooth animations, responsive layouts, and native components. This means you can achieve a polished, professional appearance without needing to dive deep into native code. For example, the initial user list that you see when you get into the app has a few major improvements over the first version of RANKD.

• You can swipe left and right to view different days
• On swipe down we have an animation to hide the headers, allowing for more space to view users
• We are able to style the app in a unified way that makes it feel very native.

Another bonus about Expo that surprised me was their docs, and the community outreach that they have. From their discord, documentation, to the articles that they publish, I never felt like I was alone when developing a mobile app using their framework. As with any development framework, there are headaches and issues, but with Expo and the Expo community there are always answers.

When considering the ROI of time spent using React Native vs. Flutter (or other cross platform frameworks) especially for a startup with web developers experienced in React, React Native offers a clear advantage. Since React Native leverages existing React knowledge, your team can hit the ground running without needing to learn a new language and framework from scratch, as would be required with Flutter and Dart. This means faster development times, quicker iterations, and ultimately, a shorter time to market. Additionally, React Native has a larger pool of resources, plugins, and community support, which can be invaluable for a startup needing to move fast and efficiently. While Flutter offers excellent performance and a rich set of components, the initial learning curve and smaller talent pool can be a significant drawback for a startup looking to maximize productivity and leverage their team's existing skills.

We’ve got lots of things planned! Here’s a bit of the roadmap that we’ve got planned:

• Tournaments!!!
• Improved Find Players algorithm
• Challenge players from Chat

Our team is super happy to be getting players matched up, and we hope to expand our matchmaking across many different domains, both sport related and otherwise! Our goal is to keep facilitating face to face interactions, empowered by digital means. Thanks to Expo we’re able to build our vision with speed, quality, and efficiency.