Learnium Blog

Thoughts about student life, the future of education and Learnium

Learniums journey to React Native

Picture this. Your small development team has built a great web app. Traction is good and your users are now asking for mobile apps. The big question is, “How do you deliver a great user experience on the web, iOS and Android with a small dev team?”. This was our dilemma at Learnium and here is the story of how we ended up using React Native.

Learnium is a social learning platform for universities, colleges and secondary schools. It enables students and teachers to connect, communicate and collaborate with each other. The platform began as a web product. A year after going live with our web app, Learnium had garnered a respectable user base. This was a perfect opportunity to run a survey to figure out what we should focus on next. The results were more varied than expected, but the top requests were mobile apps for iOS and Android.

This wasn’t much of a surprise given the scale of the mobile revolution:

  • There are over 2 billion mobile web users worldwide
  • In the U.S., 25% of mobile web users are mobile-only (and this figure is estimated to reach 41% by 2020)
  • There have been over 100 billion app downloads from Apple’s App Store alone

The biggest take away from the above statistics is that an increasing number of people are mobile-first. As a result, allowing our users to access Learnium on any of their devices became crucial.

The challenge had been set — how could a team of Two and a Half Developers (all rights reserved for this ‘next TV hit’) expand Learnium on 3 different platforms? We began our journey by considering the options.

Responsive Web App

responsive-web-design-a-working-example.gif

Our first attempt was to make the existing web app responsive. To a large extent, this was achieved. For example, content resized to fit the screen and menus collapsed on smartphones. However, the user experience still didn’t feel quite right. There was no access to the phone’s native functions such as Push Notifications, location or the camera. The webpages were also noticeably sluggish.

This is not to say you should drop the idea of responsive web design. Your web application should absolutely be responsive. Users browse on multiple devices and and will soon show their frustration if the product doesn‘t work as expected. So definitely ensure that your web app is accessible on as many devices as possible. But be aware — this may still not be enough.

At Learnium, we want to provide the best user experience possible. We found that responsive web apps couldn’t offer the same performance as native mobile apps. This conclusion was backed up by data — consumers spend over 85 percent of their time on their smart phones using native applications.

Native Apps

It was therefore time to explore the best way to develop native applications.

ios-native-apps.jpg

Develop Android and iOS apps in-house

The obvious choice was to develop two mobile apps in-house, one for iOS and one for Android. The drawbacks became obvious very quickly though: - Only one of our engineers had iOS development experience. The rest of the team would have to get up to speed with both Android and iOS - Two new projects with their associated repositories and overheads would have to be created and maintained - With minimal experience in native mobile development, developing 2 separate apps would be very time consuming - Building these apps would remove focus from other key areas of the business

Outsourcing

What next? Outsource the app development, of course. Advantages:

  • Have an app developed quickly. No setting up infrastructure, hiring mobile developers/learning how to develop mobile apps
  • Have a fixed timeline and cost for the mobile app
  • Leverage experienced mobile developers and resources
  • Take our mind off the large task of creating a mobile app and focus elsewhere like allowing our developers to continue working to improve the web application

Wow, outsourcing fixes all the issues of developing in-house with a small team? Well don’t be so quick to hand over the cash. Everything comes with a price. Outsourcing would also mean:

  • Losing control over a core component of the business
  • A future switch to in-house development would be difficult. Many vendors have a “black-box system” that ties the output code to proprietary libraries 
  • Every change or small tweak would likely take more time
  • A potentially large bill

Cross-platform development

native-and-cross-platform.gif

Another possibility was the idea of cross-platform development.

There are essentially two approaches. One option is to use an embedded browser control that wraps a web app in a native frame, something like Adobe PhoneGap/Cordova. Whilst this saves time over developing native apps, it does not provide a significant advantage over a responsive web app.

Another option is to use a cross-platform tool that creates native apps, such as Xamarin Studio, Appcelerator Titanium, or Embarcardero FireMonkey. These tools, whilst bringing a lot to the table, also bring their own set of issues. They are only viable if your app requires minimal access to the native API’s and we didn’t want to feel restricted in that sense. Some of the tools require specific knowledge and increase the overhead of the final app.

We felt we were on to something with cross-platform development, but something wasn’t quite right. The search continued…

React Native

reactive-native.png

The final option was a young technology from Facebook — React Native. In their own words:

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.

The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

One of the biggest advantages of React Native is that it is built on React (surprise!). This is what sets it apart from the other cross-platform development tools like Titanium.

React

React is a Javascript library designed to minimise expensive interactions with the browser’s DOM. The speedup is achieved by maintaining a fast in-memory representation of the DOM (“a virtual DOM”). These patterns provide an extremely powerful way of building web applications.

reactjs-virtual-dom.png

If you haven’t used React much it might help to know that React lets you declaratively define what the view should look like given some input data. A React component requires some properties to render a view. As a programmer you simply define the structure of the view and where that data should sit. By doing this you’ve already done half of the work required to build your application. If a component changes its data, React will intelligently re-render.

React Native

React Native is a layer on top of React, that allows mobile app development using Javascript, the language of the web. Some benefits include:

  • Low barrier to entry. Our developers are familiar with Javascript and React is simple enough to pick up
  • React Native actually translates your mark-up to real, native UI elements. No rendering your pages in a WebView
  • The React Native team has provided strong developer tools and meaningful error messages. You get to use Chrome or Safari’s developer tools which most web developers are familiar with
  • As React Native is made up of Javascript components, you don’t need to rebuild your app to see any changes you’ve made. Instead, you can refresh your application just as you would any other web page
  • Efficient code sharing across iOS, Android and even the Web. Anyone with Javascript experience can jump right into development
  • All the benefits React brings

AndroidiOSReact.png

React Native is still young and it comes with its fair share of issues. At Learnium, the biggest inconvenience was the wait for features to be released on both platforms. Most functionality was released on iOS first, with a delay before reaching Android. However, the React Native community has been helpful in implementing temporary work arounds.

m2.png

Learnium decided to use React Native in August 2015. Since then, we have developed two mobile apps, available on the App Store and Play Store. Both apps contain the core functionality of the Learnium web app and user feedback has been positive.

m1.png

In Summary

Learnium’s journey to mobile had several phases. It started with a web application and a small team of developers. Once it gained momentum, users asked for mobile support. The challenge of building a great user experience on 3 platforms began — Android, iOS and the web.

The first step was to make Learnium responsive to different screen sizes and devices. Whilst this allowed users to access the platform from any device, the browsing experience was sluggish and hampered by lack of access to native features.

Developing 2 mobile apps (iOS and Android) would have been ideal; nothing can match the native look and feel. However, this would be hard to achieve with a small team that didn’t have a lot of mobile development experience. The purely native route also required a change in focus from other key areas of the business.

Which brings us to outsourcing. Having other people do the work for you seems great, but it doesn’t come without a price (literally). We knew that this would not be a quick or cheap process. Yet, the biggest drawback would be losing control over a large portion of our value proposition.

The remaining option was cross-development tools, which allow developers to ‘write once, use anywhere’. These types of tools proved to be the most promising. We considered Xamarin for a while, but cost and limited knowledge of C# meant we had to keep searching.

Finally, we looked at React Native. A young technology from Facebook that enables developers to build world-class mobile applications. No cost, familiarity with Javascript and a rapid development experience all contributed to Learnium choosing React Native.

We believe that choosing React Native was the right choice when taking into account our resources. The developer experience has been generally issue-free and has given us the opportunity to work with an exciting new technology. If you find yourself in similar circumstances to Learnium, we recommend React Native.


In order of appearance, credit for the images in the article go to Purely Branded, Dev Batch (x2), Send Bird and Steven Hollidge.

Dale Bradley is the CTO of Learnium, a social learning platform that connects students and teachers at university or college. To receive updates from the company please subscribe to the Learnium newsletter.