Making Mobile Apps as a Web Developer

It’s all about the technology

There are a couple of cross-platform, mobile app development frameworks out there to solve these problems and the biggest two by far are React Native by Facebook and Ionic by Ionic. The beauty of cross-platform frameworks is that you build the app once and it runs on both platforms.

Both are created with web technologies; heavily relying on the main programming language we use to add advanced features to web pages: Javascript. 

React Native is built with React and Ionic built with Angular. React and Angular are massively popular Javascript frameworks for building reactive, responsive, powerful web applications and so it is very likely you’ve used them when building websites/web apps in the past. Therefore, as a web developer, the first method of deciding which of the two mobile frameworks to learn is easy; have you used either of the underlying technologies, React or Angular, in any of your previous projects? If so, it would be relatively easy to pick up the mobile equivalent.

At JUMP, we had to decide which framework to go with to build a new, modern, cross-platform mobile application, due for release soon.

React Native

We went with React Native for development for the following reasons:

• Performance
  React Native code compiles down to native code, meaning speedy performance almost as good as if you’d built it with native tools. Ionic uses WebView (effectively the mobile devices browser) and is noticeably slower.

• Javascript Purity
  It’s very easy to write pure ES6 Javascript and mix it in with React Native JSX components, importing and exporting code wherever you need it - indeed, one of the primary modules in our app is written in pure Javascript and can even be run independently of the mobile app.

• We were using React already
  To accompany our mobile app, we also built a web backend so our client could manage the data generation for the app to consume. We chose React to build the frontend so choosing React Native for the app meant we could not only share some elements of the codebase but also share the same programming principles and patterns.

Some drawbacks

Using React Native wasn’t all smooth sailing however; here are some of the main problems we came across:

• Steep Learning Curve
  The documentation for React Native is not as strong as it could be which can make it more difficult to learn some of the more advanced concepts.

• Limited Styled Components
  There are actually very few styled components in React Native (especially compared to Ionic) meaning you have to make pixel perfect recreations of the user interface for both Android and iOS - this can eat into development time.

• Debugging
  As web developers, we’re used to testing our websites on mobile/tablet/desktop screen sizes and various web browsers, but it’s another thing altogether when you have a plethora of phones to test your app against (we’re looking at you Android!). This is especially difficult when you’re testing multiple hardware features across multiple hardware devices, some running different operating system versions.

These frameworks don’t do everything - so if you’re developing an advanced app, don’t think you can get away without learning some native programming (Objective C/Swift for iOS - and Java/Kotlin for Android). There were several instances during development where we’ve had to build some of our own native modules; which involves writing an Android module, an iOS module and then a Javascript bridge to tie the native to the Javascript!

So, it is possible to use web based languages to build mobile apps, but be certain to weigh up the pros and cons at the beginning of the project. As with all the projects we design and develop at Jump, time invested in the scoping and planning stages pay dividends.

Keep an eye out on our website and social media for the launch of the new cross-platform app.