Zero to Mobile: From Long-time Web Dev to First-time Mobile App Dev

I recently took a plunge into the world of mobile development and released my first mobile app on the Apple Store. I await for release of my Android app on Google Play.

First, my background!

I’ve been a web-based software engineer for about 16 years, after dropping out of a PhD program long ago in my C++ writing days. My experience ranges from e-commerce to static websites to financial tech at a variety of company types and sizes. I’ve never created mobile applications, but I have implemented a number of web mobile designs.

I recently spent quite a bit of time updating a WordPress site for a personal hobby (quilting) to a NextJS + Nextra + ReactJS static build site, using Vercel. Having recently been exposed to this setup at my “real” job, I decided it was the right time to leave annoying server and security maintenance behind and move to an easily hosted (SSL Cert included!) static build website.

On my WordPress site, I had built out a few interactive color tools in JavaScript over the last years. My WordPress to React migration included moving interactive color tools written in jQuery to React — remember jQuery?! Since it’s been a few years since I’ve written or looked at jQuery, the cognitive load switching between jQuery and React was not trivial.

After doing all that work to move to React, mobile development piqued my curiosity — could I move my existing apps over to mobile leveraging React Native? How much of my React experience would cross over? How easy would it be to move my existing website tools over to a mobile app when I’ve already done much of the hard work? I set out to answer these questions in an experiment, described below.

The Process

Over the recent holiday break, I began the experiment of porting over my web quilt tools to a mobile app. First, I tried the first-timer recommended Expo, recommended for those unfamiliar with the mobile app build experience. However, I bailed on the Expo app upon being spooked over claims that it tracks user data behind the scenes. I decided to reboot my app, starting from vanilla React Native. I found a boilerplate TypeScript-enforced React Native template that contained a number of React Native modules and was ready to begin again (round 2)!

I created the first iteration of the app with four basic screens via React Navigation, a great router and navigation component. I added two more screens that received parameters to drive dynamic content (e.g. a “Help” and “Detail” page). I landed on a total of 6 screens for my MVP. I modified quite a bit of the boilerplate template and later removed unused dependencies with the help of depcheck. The boilerplate template was a great base for me to learn the basics in file react-native setup, organization, routing, and navigation.

I tested my app manually via the react-native iOS simulator. While I spend a lot of my day job wading through automated tests, manual testing sufficed for my bootstrapped app. Once I had a stable release, I worked through getting my app listed on the App Store. I was able to test a few early iterations on my own phone via TestFlight. I didn’t make major changes at that point, except for layout changes to maximize vertical space and avoid the bottom position of the native iOS keyboard.

I moved forward in the iOS app process and submitted my app for review with all the app details. Less than 24 hours later, it was approved and live on the App Store! After working through a few Android-specific issues, I submitted my app to Google Play and await review there. Read on for a summary of lessons learned in this first-timer experience!

Batch 1 of iOS Simulator app photos

What Translated Nicely

• Basic git and github hygiene, use of IDE (VSCode) with TypeScript, and project organization translated well to mobile development. Best practices like single responsibility and DRY still apply. Code is code, and there is no deviation from these familiar processes.
• React contexts and routing all translated nicely from web to mobile. React hooks also are also in play. I leveraged some React hooks and plan to use contexts in future versions. Implementation of these in React Native is similar to web-based ReactJS.
• Having done quite a bit of ReactJS work with MUI design components, I found the transition to React Native to be smooth. There were some syntactical adjustments, but the basic idea with layout of components was easily adapted from web to mobile.
• My mobile app leverages a large amount of Promises to process uploaded images. Promises are supported in React Native and I came up with a web-familiar way to loop through a large amount of Promises.
• In the web world, space is valuable and a decluttered design is important. This is even more true in the mobile world. While working on my app, I examined how other apps optimize for vertical space by minimizing clutter and make use of collapsible navigation (headers or footers). I ultimately found a well-supported collapsible header module to leverage.

Batch 2 of iOS Simulator app photos

Lessons Learned

While a number of web skills translated to app development, there were a number of “gotchas” that I encountered, described below:

• I’m still sorting out the interaction between React Native, the corresponding ios/ and android/ code that lives in the module source code, and creating the bridge from React Native to native components. I gathered that newer React Native implementation more easily bridges these components, and that working in previous versions was more tedious. I believe this is where I’ll likely learn so much more as I continue to build out my app. The react-native CLI is very helpful, providing various simulation and cache clearing support when I needed a reset.
• The Node.js ecosystem is familiar to me. There were a handful of modules that I installed only to learn they were not supported in the current version of iOS or Android. I learned to leverage modules updated within the last year. In one case, I had to grab build config from an updated module to build the outdated module in Android.
• Once I installed my app via TestFlight on my own phone, I iterated on layout, transitions in scrolling and navigation. A desktop mobile simulator is great, but it doesn’t fully capture the sensitivity of interacting with an app on a real mobile device. Without prior mobile app experience, iterating is important!
• The Apple Publishing Ecosystem: The ecosystem of App Store Connect, using XCode, profile, device and app-specific certificate set up was new to me. I leveraged a number of resources to make my way through all these steps. I’ll probably forget the steps if I’m not going through them regularly and resort to those same resources again. I found changing the app logo and launch screen in XCode a little cumbersome — I would jump over to VSCode to see what files were changing as I modified settings in XCode.
• The Google Play Publishing Ecosystem: The process for publishing an app on Google Play is equally as confounding to a newcomer. I didn’t have Java installed on my computer when I started trying to leverage the Android simulator, so that was the first step. I experienced a few Android simulator display issues, but after a restart everything looked… fine! The feedback loop for Google Play submission appears to be slower than for iOS apps.

What’s next?

After sharing the app with my quilting friends, I have a healthy backlog of features to work on in upcoming releases. I’d like to:

• Figure out if drag and drop is possible and usable in the React Native mobile world. While I’ve used drag-and-drop features on other apps and on browsers, I believe it will take a bit of experimentation to see how this translates to mobile.
• Experiment with local storage to save user settings locally in the app.
• Explore additional features that provide an enriched data visualization experience on mobile. On the web, I previously used D3.js for color tools. I’d like to investigate comparable tools for mobile, but I will be limited to a much smaller screen.

Overall, the app writing experience went smoothly and was very gratifying! Like all first-timer code writing experiences, my code is not perfect and could benefit from automated tests as I grow my app.

That being said, my color-loving consumers seem happy with the [free] app so far! Also, my 9-year old called me “cool” because I have an app. My kids are very interested in what writing code looks like and how it translates to a tiny screen. I’ll take the interest and compliments from them any day!