Could you introduce your app in a few sentences?
Ultimate 531 is a fitness app that plans and tracks workouts based on the 5/3/1 style of weight lifting. This app is for people who are already familiar with the 5/3/1 program. I decided to build this app because none of the current apps contained the specific routines I wanted to track. It’s only in the iOS app store currently. I plan to make an Android version at some point.
What made you decide to use/switch to React Native?
I started from scratch so I had a variety of options. I only needed an iOS app so I looked into using React Native, Flutter, or Swift. I decided against Flutter because if I needed to learn a new programming language then it might as well be Swift. I was tempted to choose Swift but I went with React Native. I write JavaScript in my day job so that’s one less obstacle to overcome. The cross platform aspect of React Native was a nice perk too. Looking back I am very happy I went with React Native. It is an absolute joy to use.
How did you transition to React Native?
The transition to React Native was relatively easy. My job is working on Nodejs apps so I’m familiar with the JavaScript ecosystem. I was casually familiar with React which made learning React Native slightly less time consuming. For me, the difficulty was and still is the native side of things. The build process proved to be especially difficult to debug. One day I upgraded Xcode and then spent the entire day just trying to get the app to build again. Some people are afraid of heights. Some people are afraid of snakes. I’m afraid of upgrading anything in a React Native project.
Have your tried other cross platform technologies before using React Native?
I haven’t tried any other cross platform technologies yet. Electron looks pretty interesting. I’d like to make a desktop app with it sometime in the future.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
The most noticeable impacts on performance have all been caused by writing bad code. Because I had no native and little React experience, I usually focus my limited time on just getting things to work. As you can imagine I’ve made (and continue to make) mistakes that would be obvious to seasoned React and/or native developers. For example, my app became painfully slow when there were around 100 workouts logged. After pressing a simple button to display a checkmark the UI would take 2 seconds to update. It should be instant. I peppered console.log() throughout the app which showed me that almost all components were re-rendering unnecessarily. I replaced a bunch of regular components with PureComponents. That was a huge improvement to performance. I’m sure this is obvious to people experienced with React but that was a good lesson in proper React style coding for me.
I also tend to end up with a bunch of extra code after implementing a new feature. Typically I don’t know how I’m going to implement something when I start working on it. It’s a process of exploration. Write a little bit of code, test it out, add a npm module, remove a npm module, try something else, google error messages, pull hair out, take a walk, come back and eventually figure out a solution. I absolutely love this process of code exploration. It is an exercise in creativity, experimentation, and endurance. The downside is the terrible code that accumulates during this process. I find the best way to refactor this code is to wait a week. Come back to it with a fresh outlook. By the time I’ve got a feature working my mind has already “ruled out” a bunch of things that didn’t work (or I couldn’t get working). Here’s the thing though, some of those things I “ruled out” might actually be a better approach. My brain won’t let me see those options because it has already tossed that idea in the junk drawer. I trick my brain by coming back a week later when the metaphorical junk drawer has been cleaned out.
How has adopting React Native affected developer productivity?
React Native has allowed me to be incredibly productive. I didn’t have to learn a new programming language. I didn’t have to learn a new IDE. I was basically able to start development right away. It’s amazing!
Which tools, libraries and frameworks are part of your development process with React Native?
VS Code is my IDE of choice. I absolutely love it. Microsoft is constantly making it a better and better too. I use VS Code for my day job so I had a pretty good existing workflow when starting this project.
I use redux for state management, redux-persist for local storage, and redux-orm to manage relational data within redux. Redux-orm is a great open source library. If you have complex relational data it makes managing that data pretty straight forward. There is a bit of a learning curve though.
I use Fastlane to automate the build and release process. Being a solo developer the process of building and releasing a new version can take up a significant amount time. I have a Fastlane “lane” that creates screenshots (and frames the screenshots), runs my unit and automated tests, creates a release build, and uploads the release build, meta information, and screenshots to the app store. I run the whole thing with one command, it’s amazing!
I use Detox for automated testing. It’s super easy to set up and implement. For a solo developer this is a must have. I put it off for a while because I thought it would be difficult to set up. I finally implemented it after I shipped a silly bug to production that would have been caught with the most basic Automated UI test.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
The first thing I did was go through Stephen Grider’s Complete React Native and Redux course on Udemy. That course gave me a great initial foundation. I’ve spent a lot of time going through the React Native docs. I got stuck trying to implement some more complex relational stuff with redux-orm so I bought Mark Erikson’s Practical Redux course from educative.io. He goes pretty deep into using redux-orm with great explanations. Worth every penny.
What are some things that you don’t like about React Native or that need to be improved?
It can be very difficult to debug things on the native side. I’ve spent hours trying to figure out things that would probably only take a few minutes if I was more familiar with the native code. I think I would really benefit from making a small Todo app natively for both iOS and Android. I just need to get more familiar with Xcode/Android studio and the build process for each platform.
Anything else you would like to mention?
The greatest part of building this app is my small but amazing user base. They give me great feedback and suggestions. One of them even figured out the source of a bug that was eluding me. Shout out to them! Also, thanks to you, Celsius, for allowing me to share my experience with React Native.
Anyone can get in touch me by email me at wjimmycook@gmail.com or through my website here.