The number of mobile phone users nowadays is rapidly growing. It is safe to say that mobile phones have become an integral part of our daily life and activities. One of the main reasons for it is the availability of mobile applications. Making a grocery list, ordering food, and even transferring money to your relatives or friends is possible because of mobile apps. Just like the commercial always said, "There's an app for that!".
As the number of mobile app users increases, the demand for more functional mobile apps in the app market is also growing faster. Which results in a widespread interest in mobile app development.
Hybrid app development is a fast-growing term. It can accommodate multiple platforms (e.g. Android & iOS) with a single code base, shorter development timeframe, and low development cost. But to make your hybrid app rewarding and successful, choosing the right technology is a must.
Ruby on Rails is considered to be one of the best web application frameworks out there. That said, how can you create a hybrid app with Ruby on Rails? Before we dig deep into that topic, let's understand first what hybrid app development is
- Part 1: What is Hybrid App Development?
- How Hybrid Apps Work?
- Pros and Cons of Hybrid App Development
- Part 2: Successful Hybrid Applications Example
- Part 3: Build a Hybrid App with Ruby on Rails and Turbolinks
- What is Ruby on Rails?
- Why Use Ruby on Rails for Your Hybrid App?
- What is Turbolinks?
- Ruby on Rails + Turbolinks = Hybrid App (Android/iOS): How?
- Part 4: Final Thought
Part 1.
What is Hybrid App Development?
Basically, it is the creation of a single mobile application that can run on multiple operating systems such as Android and iOS. Hybrid app development has become more popular nowadays. That is because developers only need to write code once and run it to multiple platforms. And just like native apps, hybrid apps can be downloaded to the device and submitted to the app store (e.g. Google Playstore for Android and App Store for iOS).
How Hybrid Apps work?
As the name suggests, a hybrid application is a combination of both native and web solutions. It operates similarly to a native application but has the inner workings of a web app. Still confused? Let’s discuss this a bit further.
The core of a hybrid application is written using web technologies such as HTML, CSS, and JavaScript. The code is then wrapped inside a native application using wrapper solutions like Turbolinks or Cordova. These solutions create a native shell which is the device’s web view component where it will load your web application. For example, an Android application would use WebView to display the application, while an iOS application would use WKWebView to do the same function. That said, it gives you the ability to create a more native feel to your application.
Moreover, by using plugins, you can allow your app to have full access to the device’s hardware features like GPS, Bluetooth, camera, etc. Thus, it makes your hybrid app have the look and feel of a native app and provides a similar user interface given that it has the ability to cross-platform. Not to mention, it can be installed on a mobile device and submit it into app stores just like native apps.
Pros and Cons of Hybrid App Development
Pros
-
Cross-platform - It is the most obvious and significant advantage when developing a hybrid app. You only need to create a single codebase, then deploy it to multiple platforms. Which also saves time and money than developing two or more versions of the app.
-
Cost-effective - It is also one of the biggest pros when developing a hybrid app since you don’t need to create several versions for different platforms thanks to its cross-platform nature.
-
Fast development - Since you only need to write a single code base for different platforms already saves you a significant amount of time when compared to creating different versions for Android and iOS.
-
Easy to maintain - Another benefit of the hybrid app approach is its simplified maintenance. Aside from the fact that you only write a single code base to cross multiple platforms, you don’t need to roll out new versions of your application with each update. That said, your users won’t need to worry about updating the app for a new version release. The hybrid approach bypasses versioning, making the app maintenance as easy and simple as updating a web page.
-
Greater market reach - “Which platform should I build my mobile app first, Android or iOS?”. This is the question that always comes to mind when going for the native app approach. No matter how much you research which platform the majority of your target users are using, it will always remain a trade-off when you develop your app for just one ecosystem.
However, in a hybrid approach, you won’t need to worry about capturing a wide range of users. Developing a hybrid app allows you to target a higher user base since it can operate both the Android and iOs platforms.
-
Offline support - Many users abandon an app because of its lack of offline support. This is quite a challenge especially if your target users are from rural areas or somewhere which internet connectivity is not stable.
That said, the offline accessibility feature is not a problem when you go for a hybrid approach as your end-users will have uninterrupted access to your app’s data without performance glitches. They might not be able to experience a real-time experience while offline, they can still load their previous data.
Cons
Despite its advantages, the hybrid approach also has its limitations:
-
Slower performance - Whether you go with a hybrid or native app, performance is one of the most important factors to consider when building a mobile app. If you compare the performance of a hybrid app to a native app that has the same functionalities, you will notice that a native app’s performance is slightly faster than a hybrid app. That is because a native app is created for a specific environment.
Although, the difference in performance can be hardly noticed especially if the app is a simple one.
-
Functionality Limitations - This is one of the downsides when you go for a hybrid approach especially if your app involves complex features and functionalities. That is because some hybrid frameworks do not support every native feature. This might result in stability issues to your application and make it sub-optimal.
-
Limited features - Hybrid apps might give your users a native look and experience, it is still impossible to put all the desired features in a hybrid app. For instance, both iOS and Android have their own unique features that are exclusively for their OS only. You can never integrate those features in a hybrid app, which might make your users get a little disappointed.
Part 2.
Successful Hybrid Application Examples
There are a lot of mobile applications out there with top-level performance and can do immediate response. And in many cases, we don’t even notice that the application we are using is a hybrid app because it is almost similar to that of a native one. That said, let’s consider the following popular hybrid application examples that you are probably using on your daily basis..
With almost two hundred million daily active users, Twitter is one of the best examples of free, and reliable hybrid applications. This popular social app can give an outstanding performance without even experiencing any functional issues, considering the number of users it caters to every day. Twitter is one of the best examples of to what extent the amount of traffic can be handled by hybrid apps.
Best Features:
• Express your thoughts with a tweet
• Grouping with friends and followers
• Native GIF search
• Always updated to new interesting and viral stories
Thy hybrid app development approach allows Instagram to build a mobile app that supports offline data and rich media. The UI of the hybrid app helps fast loading of content and graphics. It offers faster data display to any screen size on various devices and processes tons of data without having any performance issues.
Best Features:
• Its vast community allows you to get closer to people
• Many creative tools for editing images and videos
• Post content on your feed that you want to display on your profile
• Watch long videos by accessing IGTV
Gmail
This is also one of the most popular representatives of a Hybrid app. Gmails is the perfect example of how harmoniously web and native features can be combined to create an astounding application for professional and personal use.
Best Features:
• Supports multiple accounts
• Allow scheduled emails
• Sets high priority notification for certain emails
• Offline support
Evernote
Many users refuse to believe that Evernote is a Hybrid app. It can’t be help since its performance and usability are so great and seamless to any type of device, creating confusion towards the users. Nevertheless, Evernote is one of the best examples of a hybrid app that promotes high performance with intuitive design and flawless functionalities.
Best Features:
• Synchronize all the important note, notebooks automatically
• User camera for capturing and scanning
• Help organize your thoughts using personal to-do-list
• Interactive widget for quick access to the app.
Basecamp
This is one of the best online hubs for team collaboration. Basecamp is a project management tool that allows people to manage their work together and communicate with one another. Basecamp has been around since 2004 and its new version, Basecamp 3, has a mobile app available, and what’s more, it is hybrid. Basecamp hybrid mobile app is available for both Android and iOS platforms.
Best Features:
• Simple to create projects and documents
• Add project team members
• Create to-do-list
• Hold discussion
Part 3.
Build a Hybrid app with Ruby on Rails and Turbolinks
What is Ruby on Rails?
Ruby on Rails or simply “Rails” is a web application development framework. It is one of the most popular web application frameworks among web developers due to its easy-to-use nature. Rails provide developers a structure to every code they write. It also aids developers in developing websites and applications as it can easily streamline and abstract common repetitive tasks.
Ruby on Rails was developed in 2003 by David Heinemeier Hanson, widely known as “DHH” in the web development world. In 2004, Rails was officially released as an open-source and its latest version, Rails 6.1.3.1, was released on 26th March 2021. Ruby on Rails framework is used by many successful businesses and organizations and is still very much in demand in today’s web development market. Although Rails is a very mature technology, it has one of the most active and vibrant communities in the programming world, making it easy especially for beginners to learn and have fun with Rails.
Why use Ruby on Rails for your Hybrid app?
Ruby on Rails offers a competitive edge for mobile solutions for iOS and Android. Rails provides default structures for databases, web services, and web pages, in which are used for developing web or mobile applications. The framework is widely used among developers because its conventions are universal and smart.
Rails is a library of prewritten code that implements the structure and common functions of database-driven sites, eliminating unnecessary effort that developers make in the initial part of the application development.
What is Turbolinks?
If you are a Rails developer, surely you know what Turbolinks is since this component was already bundled with Rails version 4. Turbolinks is a lightweight and flexible JavaScript library that aims to speed up navigating between pages within your application. It improves web page performance by intercepting all the links that would navigate to a page within your application. But instead makes the request via AJAX (Asynchronous JavaScript And XML), replacing the body with the received content. Thus, it makes your web application run at an incredible speed, surpassing the slow nature of a traditional HTML5 web app.
Another big feature from Turbolinks 5 is its two new wrappers that allow developers to build hybrid applications that support both Android and iOS platforms while also giving a more native feeling to the end-users. Not to mention, you can submit your RoR app and have it discoverable in app stores.
Ruby on Rails + Turbolinks = Hybrid App (Android/iOS): How?
To start with, you need the following:
• A Ruby on Rails app with Turbolinks enabled.
• iOS wrapper.
• IDE for iOS (e.g. Xcode)
• Android wrapper.
• IDE for android(e.g. Android Studio)
Once your web app is already running, you can start with a quick mobile implementation. Remember, regardless of which platform you are going to start with (Android/iOS), the concept is still the same.
That said, your mobile app consists of three core components:
• Base Controller/Activity
• Navigation Controller/Activity
• JavaScript Notification Handler
The Base Controller/Activity acts as the entry point to your application, where you set up default menus and authentication checks(if your application requires authentication).
{code}
The Navigation Controller/Activity is the main core of your hybrid app. This controls what happens in your web app when you click the links. It includes when you:
• click a modal
• dismiss a modal
• open camera
• show alert messages
• push navigation to a new screen
• open a link in an external browser
{code}
And lastly, the JavaScript notification handler. This gives your web application the ability to interact with the native part of your Android/iOS app. That said, whenever your app performs certain actions such as navigating and submitting forms, it does use JavaScript. And since your web app will be running on an Android/iOS Webview, handling javascript responses and directing the app to perform actions with returned data is possible.
{code}
End Result:
That’s it! With these things in place, you can now run your web application with a full native feel on Android and iOS devices. Not only this approach can save you a significant amount of time in the initial development, but also you can submit it and have it available in the app store for Android and iOS.
Part 4.
Final thought
Turbolinks has been used for a long time now and has achieved a great level of maturity. Having a great community around it, Turbolinks evolved quickly and helped countless web developers achieve better performance for their applications.
Developing mobile applications with Turbolinks indeed represents an interesting and new perspective in hybrid app development. By adopting a hybrid approach with Ruby on Rails, the development cost and maintenance will drop significantly than any other approach. Still have doubts? Remember that Basecamp 3 uses Turbolinks 5 and Ruby on Rails 5 for their mobile application.
Thus, when you plan to create a Ruby on Rails hybrid app, consider Turbolinks as one of your top options and see what it does. If you have an existing web app and want to go with hybrid approach, you might give Ruby on Rails with Turbolinks a try!
