Understanding the constraints of mobile app implementation methods

In this project, we invested time into investigating how the same app would be designed and implemented  across different platforms and implementation methods. 

At Obra, we pride ourselves on communicating our designs thoughtfully with developers. By taking half a step into their world, we become better designers.

Multi Currency Converter is an app that's relatively simple in scope: it allows you to convert between multiple currencies at once. 

This app has been built a few times: once as a web app, once as a native iOS app, and now as a React Native app for both Android and iOS. The web app can be tried out here and that simple link can tell you everything: distribution for web apps is unmatched. No hassle with app stores, no permission from gatekeepers. Just plain and simple putting an app on the web.

Benefits of a native implementation

However, there are advantages to building an app like this as a native app. When we developed the iOS version of this app, we learned it was easier to implement the offline mode and local caching.

We also really loved the immediate performance benefits that the native code gained us. Long lists of scrolling? Smooth animations? No problem. Leaning into SwiftUI gave us all this for free.

React Native: easy to implement, but performance and security issues

Our latest experiment was implementing this app as a React Native application. Since one of our clients has a React Native app, we wanted to get smarter about React Native.

We explored what is easy to implement - and where development get tricky. We found that React Native apps generally have poor performance, especially when tied with frameworks like NativeWind. The constant re-rendering of the virtual DOM is highly problematic.

Implementing a custom looking user interface that looked good across iOS and Android was rather smooth sailing though. We also found the development experience provided by Expo quite a dream compared to old school native development.

Lastly, we discovered some security issues that were not present in the native build nor in the web build; any secret keys need to be passed through an extra backend server to make sure they don't get shipped with the app code.

Conclusion

Having a comparison between native design advantages and cross-platform advantages with a real example for our clients allows us to give the best advice. With a strong background in front-end development, we've always known what is “easy” and what is ”hard” to implement on the web. These cases gives us direct examples to draw from, to help give the right advice to our clients within projects.