Single Origin

Learn to brew specialty coffee.

Could you introduce your app in a few sentences?

Single Origin helps you brew specialty coffee with a variety of brew methods, like French Press and Chemex. A few years ago I began brewing specialty coffee and I realized that while the brewing process is simple, it involves math and multiple timers to get it right, so I built Single Origin to help people brew. It’s currently for iOS and Android.

What made you decide to use/switch to React Native?

I began learning Swift and Xcode in my free time to start making a Coffeecademy iOS app. While Apple’s developer tools are great, learning a new typed language as a side project was hard. It takes consistent practice and my free time was not consistent enough for the syntax and concepts to stick. I was able to make basic apps with Swift, but managing state and data was another level that I never quite grasped.

After researching React Native, I found that I could create a native app with my existing React knowledge. React Native has some serious benefits. It allows for one codebase that compiles for multiple platforms and uses genuine native components instead of being a website wrapper like other web-to-mobile technologies.

How did you transition to React Native?

I am an experienced React and JavaScript developer, so making the transition was fairly seamless. To get started, I read the React Native documentation on the available components. I learned that they behaved a lot like DOM components in a React web app, which made the library easy to pick up and implement.

Have your tried other cross platform technologies before using React Native?

Not really. I tried to make a web app into a mobile app with Cordova a few years ago, but I found it didn’t feel like a real app. It felt more like a website, which does have the same feel as a real app. At that point, React Native did not exist, so I thought I would have to learn Objective-C or Swift to make an app.

What has your experience been working with React Native in terms of app performance, have you noticed any impacts?

The performance has been nearly perfect. I have found mounting many components and fading them in can sometimes have some jank. Other than that, the library’s performance is more than enough for an app like Single Origin, which is a list of instructions, some timers, and a menu.

How has adopting React Native affected developer productivity?

I can’t imagine how much time React Native has saved me. Learning enough Java and Swift to release an app on two platforms would have required months of diligent work, if not longer. With React Native I was able to make an MVP app within two weeks.

I found the documentation around React Native and the community of developers who publish packages is fantastic. There’s lot less friction implementing React Native libraries than with standard web libraries, making putting together an app much easier.

Which tools, libraries and frameworks are part of your development process with React Native?

I used Expo’s tools to start my app and to help me run and deploy it. The Expo IDE app runs a React Native app in one click and can deploy an app in another. I’d highly recommend it.

After implementing Redux in Single Origin, I started using React Native Debugger. Once you get it set up, you can use the Redux dev tools and set breakpoints, which are all presented in one app window. As you interact with your app in a simulator, the dev tools update with actions and logs that occur. Being able to see what’s going on in your app makes the development process less of a guessing game, and helped me build a more reliable app faster.

What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?

I used the React Native documentation and the Expo documenation.

Finding interesting packages helped me explore many of the capabilities of React Native. The best way to find new packages is to read through the awesome react native repo. Also, searching for “React Native” on Medium helped me gain deeper understanding of the library.

Finally, styling in React Native is like a cousin to CSS. It’s close to CSS but different enough to where CSS knowledge doesn’t translate most of the time. To help, I searched through this react native styling cheat sheet many times.

What are some things that you don’t like about React Native or that need to be improved?

As far as I know, it’s impossible to inspect elements inside a simulator like you might with a website. This makes it difficult to see how elements are laid out on the screen.

In addition, React Native lacks some of a devices APIs, which make it impossible to use certain device features without writing your own custom module.

Anything else you would like to mention?

I hope Single Origin helps people brew beautiful coffee every day. Get in touch with me on Twitter: @SingleOriginApp