How to Convert a Ruby on Rails web app to mobile apps with Canvas

In this article we’re going to show you exactly how to convert a Ruby on Rails app into mobile apps. 

We will start off with a little background on why building native mobile apps from Ruby on Rails web apps directly is not really possible without building an API and rebuilding your web app natively from scratch.

(source)

We’ll argue that your best bet is to convert your Ruby on Rails app into a hybrid, rather than native, mobile app. Then we’re going to show you how you can use MobiLoud Canvas to convert your Rails app to iOS and Android apps.

Our team will handle the entire build and submission process, you’ll be ready to launch in just two weeks, and you can recreate every feature and functionality from your rails app easily. We’ll explain Canvas in detail later on in the article. Let’s get started.

Ruby on Rails Mobile Apps

Let’s say you have a successful Rails app and you’ve built a business around it. You decide the next step is expanding into the App Store and Google Play. There are many good reasons to make this decision, for example:

  • A better mobile UX, and valuable real estate on the user’s home screen
  • More loyalty, engagement and retention
  • A brand presence and new acquisition channel through the App Store and Google Play
  • Push notifications on all devices

For now we’ll assume that you already want to convert your Ruby on Rails site to mobile apps, but if you want a more detailed summary of the benefits check out this article

You’ve made a great decision. But now comes the tricky part – how to get the job done. How do you convert a Ruby on Rails web app to mobile apps for iOS and Android? 

How to Convert a Ruby on Rails app to Mobile Apps

Ruby on Rails is a wonderful programming language. Beloved by start-ups the world over, Rails simplifies and streamlines repetitive tasks to make website and app development far more efficient. 

That said, Ruby on Rails is a server-side language. It has little in common with the technologies and operating systems that power iOS and Android mobile devices. There is no way to directly translate what you have built with Rails on the web, into native mobile apps. 

Don’t despair though – there are great solutions. All come with their own trade-offs though, and it’s up to you to decide which fits your business. We’re going to be making the case that our platform MobiLoud Canvas is the best way to convert a Rails app to mobile apps – but first we’ll look at the other options. 

Two ways to convert a Rails app to Mobile Apps

There are two main ways to go from Ruby on Rails web app to mobile app. The first is to rebuild the web application’s front end from scratch as native mobile applications, the second is to convert it into hybrid mobile apps that mix web and native elements. Let’s take a look at them in turn. 

Rebuilding natively

To rebuild your Rails web app natively you’d turn your Rails web app into an API, then rebuild the front-end of the apps from scratch to recreate the features and functionality of your web platform. You’d probably need at least two developers on this.There are two main routes.

Native, native

The first is the traditional way with separate teams working on building the iOS and Android apps, using the languages native to the platforms – Swift and Objective-C for iOS, Java and Kotlin for Android. This is the most labour intensive and challenging route, but can give you the most control over the final result.

Depending on the complexity of your web app – they’ll likely be working on the project for months. The project could easily run up a tab of $50,000+ to get first versions ready for both platforms. 

Cross-platform native

The work can be simplified by using a cross-platform framework like React Native, Flutter or Xamarin. The advantages of this route are that you only need to build once for both platforms, it cuts down on developer labour and allows you to move faster in general.

This is the route that Airbnb took. Airbnb use Ruby on Rails as a significant part of their stack, and chose React native to build iOS and Android apps.

Airbnb converted a Rails app to mobile apps (image credit)

While Airbnb have since moved away from React Native, this was the original route they took to convert their Rails app to mobile apps. This simplified the work substantially compared to pure native development, but it was not without significant challenges.

Writing in Software Engineering Daily, Adam Conrad makes the point that even though React Native is more efficient than pure native development:

“It is not trivial to get up and running, particularly if you have an existing codebase. Expect to invest a substantial amount of time and energy to integrating React Native into your existing mobile codebase”

Airbnb are a huge company, and had dozens of highly-skilled mobile engineers dedicated to the apps. They still ran into roadblocks and bugs that were difficult to fix. Conrad highlights the fact that it’s never ending work, and it takes significant effort and continuous investment to stay on top of things:

If Airbnb can run into landmines that turn seemingly simple tasks into weeks-long bug hunts, expect you will, too…… like all open source software, the platform is ever-changing with new bugs and issues discovered daily. Expect to make continuous investments to support the volatile landscape of the React Native ecosystem.

Of course, Airbnb deal with a scale and complexity that you (probably) do not. But they also are a massive company with resources and technical talent on another scale to the average medium sized business or start-up – so it balances out.

The bottom line is that cross-platform frameworks can certainly streamline things, but are not a panacea. You’re still rebuilding, still maintaining – and still investing in a demanding project.

Native Ruby on Rails apps summary

The advantages of the native route are:

  • Better performance (in theory)
  • The possibility of native-only features that go beyond your rails web app like using the accelerometer and facial recognition

Native development is often the best choice for start-ups that are well funded/technically skilled, and want to be “app-first” with native apps as their primary codebase and a relatively small web presence. It also could be best for businesses that can easily afford to throw six-figures plus at the project and have the resources to maintain separate platforms for the web, iOS and Android. 

The downsides of native development – it’s technically challenging, time-consuming, and will require a lot of financial investment and project management bandwidth. 

There is the possibility of simplifying things by using React Native and other efficient frameworks to build the apps. That will not change the fundamental downsides though: expense, time, and if you already have a web app –  duplication of effort. 

The Bottom Line: Native = Rebuilding

In the case of converting a Ruby on Rails app to mobile apps, the most annoying thing about the native route is the waste. All the work you have already done on the code side is unusable, so everything needs to be built again. 

As we’ll see shortly though, Airbnb didn’t take the only option available. Many other well-known tech companies took the more efficient route and built Hybrid mobile apps instead.

Converting your Rails app to Hybrid apps

Hybrid mobile applications combine native and web elements to build mobile apps, and use “webviews” to display web content within a native “shell”. Think of it like a dedicated browser for your web application that can be installed on the device, published on the App Stores, send push notifications – and generally function like a native mobile app. 

With hybrid apps, there’s no “rebuilding” as such, because the mobile apps are your web app inside a native “wrapper”. If you are happy with mobile apps that have essentially the same features and functionality as your site – then hybrid is undoubtedly the way to go. 

The Quora app is hybrid (source)

The only reason you would not go with a hybrid app is if you want features that go above and beyond your web app and can only be achieved through the native APIs.

Are Hybrid apps any good? 

Hybrid apps have had PR problems in the past. They had a reputation for being slow and clunky, and not always giving the best user experience. 

These anti-hybrid arguments usually come in two forms:

  1. “Hybrid apps are slow”
  2. “Hybrid apps just look like a website in a box”

These are reasonable, but misguided points. 

The reputation for poor speed comes from the earlier days of the internet, when mobile networks, devices and websites in general were much slower.This carried over to earlier hybrid apps. Until the last few years, if you wanted really fast apps – you had to build natively.

The second point about the poor visual experience comes from badly built hybrid apps. Effort is required to build hybrid apps with a great UX. Just displaying a website inside a box is not enough from a UX perspective. All the necessary native elements need to be added too. 

Technology has come a long way. Well developed hybrid apps, based on fast web apps – now run as fast as you’ll need them to. With the speed of the modern web, If hybrid apps are built properly then there’s no reason they can’t be more than fast enough, and user’s won’t even know it’s the website under the hood! This is the kind of result you get from Canvas – but more on that later. 

Hybrid apps are the best tech choice for any business that wants apps that behave in a similar manner to their websites or web apps. A lot of big tech companies chose the hybrid route – and not for a lack of money or technical talent. For example, according to UX Matters

“We know that Facebook, Evernote, Instagram, LinkedIn, Uber, Slack, Twitter, Gmail, the Amazon Appstore, and many others are or have been WebView apps”

These companies all wanted apps that did the same thing as their web app – so Hybrid made sense. There’s another example, even more interesting in the context of converting a Ruby on Rails app to mobile apps. 

The creator of Ruby on Rails chose hybrid over native too. We’re going to go into this Ruby on Rails mobile app development example in a little detail – as it’s very relevant to the previous discussion. 

How Basecamp found the Hybrid “sweet spot” for their Ruby on Rails app

David Heinemeier Hansson (DHH) is the creator of Ruby on Rails and also CTO at Basecamp, a popular project management and communication tool built with Ruby on Rails. In fact, Ruby on Rails was extracted from DHH’s work on Basecamp. 

In 2012 DHH and the Basecamp team started work on building mobile apps. If anyone would know how to convert a Ruby on Rails web app to mobile apps it would be them, right? 

In 2014 DHH published a piece about the decisions they made titled Hybrid sweet spot: Native navigation, web content. In the article he explains that the initial idea was to go “native everything” because of outdated ideas about hybrid speed and performance at the time. 

“The decision was likely driven by what the state of the art in HTML and on mobile looked like circa 2010-2011. In early 2010, people were rocking either the iPhone 3GS or 3G. By modern 2014 standards, these phones are desperately slow. Hence, any architectural decisions based in the speed of those phones are horribly outdated”

If this idea of hybrid “slowness” was outdated by 2014 – think of how outdated it is now in 2021 with the progress that has been made in mobile web technology in the intervening years. The Basecamp team went on to implement both native and hybrid versions of the apps and compared the two. 

The Basecamp team soon realised that there was no “discernible difference” between the two – except for the fact that the hybrid version was developed much faster.

Although Basecamp have changed their mobile app architecture in new versions since (it’s still hybrid), the original first generation was:

“A thin wrapper of native navigation around essentially a webview core. This webview is powered by the regular Basecamp Rails application, with only a few stylistic differences from our normal mobile web view”

Sounds just like a website in a box right? A well-made hybrid app is more than that – and provided all the key benefits of native mobile apps for Basecamp. As DHH put it:

“The difference is still profound. Having a native shell makes the feel of the mobile web site very different indeed. It let’s people find the app via the App Store, and their login persists forever (rather than the frequent cookie losses you seem to get on mobile Safari). Users have loved it. The app has a 4/5-star rating”

The key advantage of hybrid app development that he outlines in the article is the same one that we have been pushing so far – ease and convenience. The difference in efficiency is just huge. 

“Since we already had a wonderful mobile web site that could be repurposed, the effort was easily manageable. Something that could not have been said if we were trying to build all of the Basecamp functionality natively, from scratch. A team of 10 probably wouldn’t have been enough, even if they had worked for 18 months. We were simply orders of magnitude more productive by using the web and HTML as our main runtime for the native app”

This is what the first generation of Rails mobile apps that Basecamp built looked like. 

The first Basecamp Hybrid apps (source)

The Basecamp apps went through several iterations since, but stayed true to the hybrid model while improving the UX with more native elements. 

Another key advantage of hybrid apps comes after the initial development and launch – they are much easier to maintain and update compared to native apps. DHH also notes in the piece that the hybrid approach makes both the rollout of new features and fixes far easier, and manageable for a small team.

As the apps will update automatically with any changes you make to your site – it allows you to do a lot more with your team’s existing Ruby on Rails web skills. Maintaining the apps becomes similar to the maintenance work you already do for the web.

Any Rails app can take the same path and be used as the basis for excellent hybrid apps. It worked for BaseCamp – as well as Quora, Amazon, LinkedIn and countless others. It’ll work well for you too – with a little help. 

Convert a Ruby on Rails app to Mobile apps with Canvas – and find your own Hybrid Sweet Spot

MobiLoud Canvas is our platform for converting any website or web app into hybrid iOS and Android apps. It’s not just a platform or tool, Canvas is a service. We build, test, submit and publish the apps for you – then handle all ongoing updates and maintenance. It works great for building Rails mobile apps too.

Converting your Ruby on Rails app to mobile apps with Canvas is for you if:

  • You want to build Ruby on Rails mobile apps the hybrid way
  • You want a proven platform that guarantees a solid result
  • You want to minimize effort and have all the work done for you
  • You want to move fast and go live in a few weeks
  • You want to take the least risky route to the App Stores

Why build Rails Mobile Apps with Canvas? 

As we saw earlier, hybrid apps need to be built well to succeed. Although they are far easier to develop than native apps – there’s still work and risk involved. It would take time, skill and money to strike the right balance if you tried to build the native components yourself and configure everything to run optimally for a great user experience.  

Canvas eliminates both the work, and the risk – while guaranteeing a great result. 

When you sign up, you’ll have a meeting with one of our team to go over your ideas and requirements for the Rails mobile apps. From there onwards all you really need to do is some simple configurations – our team and platform handle the rest until the apps are ready to publish. You can launch in a few weeks, and you’ll have been free to focus on your core business throughout that time.

Canvas also eliminates the risk that you’ll invest time and money into a project that drags on and isn’t worth it. Over 1200 successful apps are built on our platform, so you know what you’re getting. We also don’t do long-term contracts, and will refund you 100% within 60-days if you aren’t happy for whatever reason. 

What will your Canvas app be like?

Your Canvas apps will have all the features and functionality of your Ruby on Rails web app. You won’t have to sacrifice anything that you currently love about your web platform. Just like Basecamp did – you’ll recreate your Rails app as mobile apps with all the necessary native bits added. 

Canvas adds a native tab bar, menus, and navigation to your app – crucial for a great UX. 

Web app vs Canvas app

As you can see from the image above – Canvas creates the “native navigation, web content” effect that David Heinemeier Hansson found was the best way to convert a Ruby on Rails app to mobile apps. It is your Rails app – within a native app – but from your users perspective its a functional and modern app on their iOS or Android device.

Canvas also adds all the other features you need to succeed with your Rails mobile apps, for example:

  • Unlimited push notifications on iOS and Android, through our integration with OneSignal
  • Push preferences, so your users can choose which notifications they want to receive
  • App analytics, through GA or Firebase to help understand your users
  • Custom splash screens and loading indicators for a native look and feel
  • Automatic ratings prompts to help with App Store Optimization

Book a demo for a full run-down of Canvas features. 

How to Convert a Ruby on Rails app to Mobile Apps with Canvas

Turning your Rails app into iOS and Android apps with Canvas is simple. Let’s briefly look at the process. 

  1. Schedule a demo call with one of our app team. You’ll go over the process, consider the options, and decide whether Canvas is right for you.
  2. Sign up for Canvas. No long term contracts, full refund within 60 days for whatever reason. Plans start from $100/m for early stage start-ups. 
  3. Submit your Rails web app on our platform, upload your logo and add some key information about the apps. 
  4. Log in to Canvas and configure the apps. Here you’ll set up the menu, colour scheme, push notification settings, logins, ratings prompts, analytics, and other key parts of the apps. You can also add custom CSS in our code editor if you wish. 
  5. Your apps get built by our team. There’s nothing for you to do in this stage, we’ll build the first versions of your apps. In a few days, your apps will be ready for you to test through our dashboard.
  6. Test your iOS and Android apps on your own devices.
  7. You approve the app, then we handle submitting and publishing on the App Store and Google Play.

That’s it, that’s how simple it is to convert a Ruby on Rails web app to mobile apps with Canvas. You’ll have integrated all the features and functionality of your existing platform, and applied it through a new channel.

Easy and cost-effective Management

Going forward, managing the apps will be simple. They update automatically with changes or new features that you build into your Rails web app, so you can keep managing everything through one codebase and don’t need to add to your team’s workflow.

For app-specific maintenance, our team handles it as part of our license. This typically costs businesses with native apps five-figures annually, but you won’t have to worry about it at all.

If you want to change the configuration, send push notifications, or style elements of the app with custom CSS – you’ll just use our simple dashboard.

There couldn’t be an easier way to manage mobile apps!

Start Building Rails Mobile Apps today!

We’ve covered a lot of ground in this article. We’ve looked at why converting a Ruby on Rails app to mobile apps was traditionally difficult, and why hybrid development beats native in this context. 

We went on to show you how you can build Rails mobile apps with Canvas – saving months of work and tens of thousands of dollars in the process while guaranteeing a good result. 

A social media app, built with Canvas

Hopefully, you’re ready to get started and launch on the App Store and Google Play. If you think MobiLoud Canvas is right for you – all you need to do is give us a call and find out.

We’ll go over the whole process, and you’ll come away knowing for sure whether Canvas is the solution for your business. 

Let’s get started – book a free demo today!

Download This Resource

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.