Skip to content

Tools for hybrid mobile app development: Ionic and its alternatives

Published May 16, 2020

A guest post by Rene Bordas (*)

Introduction

From a development perspective a firm can choose between creating a native app or a hybrid app. Both kinds of apps are available for download by consumers through app stores such as the Google Play store and the Apple App store.

A native app is developed specifically for one device platform (e.g. Android, or iOS). The source code can’t be reused for the other device platform. A hybrid app however is developed through 3rd party tools and allows a firm to develop the app with a single code base. Thu the developer can create an app for each device platform from that single code base.

The drawback of hybrid apps are that they typically perform slower, and that not all hardware features can be accessed (mobicloud.com). The benefit of the hybrid app approach is that it allows firms to cut down development time and effort because only one code base has to be developed that can be used for apps across multiple platforms like Apple iOS and Google Android (Tabor, 2019).

There are several hybrid app development frameworks available that suit various business needs. This paper will provide an overview of the most popular frameworks, their strengths and weaknesses to guide with selecting the framework that best fit the needs of a business.

Hybrid app frameworks

A hybrid app uses the concept of native apps combined with web applications. The hybrid app is in essence a web app packaged in a web shell. Once a hybrid app is downloaded from an app store and installed on the device, the web shell can interact with the mobile device hardware through a browser embedded in the hybrid app. This embedded browser and its plug-ins (to interact with the device hardware) run in the back and are not visible to the app user (Rousse). This so-called webview is the core functionality of the hybrid app architecture because it renders the web app. The native library provides access to the native API’s and device hardware (Tabor, 2019).

Hybrid apps are typically built with technologies like HTML, JavaScript and CSS. After the development completes the code is compiled, and then packaged as native app for each platform. The apps are then distributed like native apps through the native app stores to the consumers. After the app is downloaded to the device it’s installed like a native app (Tabor, 2019).

The native app typically has a higher performance, easier access to device hardware controls, wide API integration, and can use the full functionality of the device. If a firm plans that their app should work on multiple platforms, then a dedicated app has to be developed specifically for each platform (e.g. Apple iOS, Google Android, Windows mobile). This means development costs are doubled or even tripled. Which subsequently leads to two or three separate apps, two or three codebases, two or three development teams, and the corresponding extra costs (Grifith).

Over the years several hybrid app development platforms have evolved. All platforms use JavaScript frameworks, the most popular being Angular, React and Vue.js. Two of the most popular frameworks for front-end developers are Angular (backed by Google) and React (backed by Facebook). Both frameworks are very popular and allow developers to create both web and mobile apps that have the same business logic.

Angular uses NativeScript and allows for easy code sharing, and speeding up the time-to-market phase. The core idea behind Angular is to provide developers a tool to create a holistic front-end development platform and a powerful support network (Daityari, 2020). Google is providing regular updates and support to the community. Many developers and companies still use AngularJS (the initial version) and Google is trying to encourage a switch to the newer Angular 2+ version that allows for better app performance, and smaller app sizes (Nagy, 2019). The use of TypeScript (a superset of JavaScript) makes the code more maintainable, which benefits firms that develop enterprise-scale applications. The learning curve is however steep and the risk is that developers move towards React (altexsoft.com, 2018a).

React uses React Native, and the focus is to allow for a hybrid app to have a native look and feel. React has a less steep learning curve for developers so they can get started faster. This, paired with similar performance as Angular makes it a good choice for many developers.

Vue.js is a relatively new JavaScript framework that is not backed by a large tech company. It was created by a former Google engineer (Schwarzmueller). The goal of this framework is to mix the best features of Angular and React. The lack of backing of a large company means a less sophisticated support community and a higher risk that the framework will vanish (TechMagic, 2018). There is extensive documentation available that makes it easy for new developers with basic HTML and Java knowledge to find answers (vuejs.org, 2020).

Analysis

Cross-platform mobile development is a solid alternative to native app development. Developers need to write the code only once and can apply parts of it across multiple device platforms. But that happens at the cost of performance and behavior of the app. Over time the cross-platform communities worked on new tools and approaches to overcome these limitations.

For developers some of the main advantages of the cross-platform approach are cost-effectiveness, a single technology stack, up to 90% reusable code and easy maintenance.

Any developer that has decided to develop a hybrid app by using a cross platform solution faces the decision which framework to use. Depending on the framework to be used (Angular, React or Vue.js) a cross platform development solution has to be selected. This section reviews the most popular tools available today (altexsoft.com, 2018b).

Ionic

Ionic is a front-end software development kit (SDK) that is built on top of Angular and that aims at developing hybrid apps using HTML5 and Angular. Web technologies such as HTML5, CSS, and JavaScript are used to write and run applications. Ionic requires the Cordova wrapper (Apache) to access native device platform controllers (Grifith).

The Ionic core is written with the Sass (syntactically awesome style sheets) language AngularJS. With Ionic the developers use the main programming language TypeScript (a superset of JavaScript) that compiles to plain JavaScript. However the use of TypeScript is optional, and developers can write the code also in JavaScript (aso.app, 2020).

Apps created with Ionic perform not as well as apps written with other hybrid app development frameworks such as Xamarin or React Native because it uses web technologies for rendering. Another reason is that Ionic is not using native components and therefore has to recreate native behavior using web technologies. The Cordova wrapper is then used to connect the app with native APIs to have the app work with the underlying device platform. To make an app look native there are Angular components that can be used that come with the framework. A big benefit of Ionic is that it allows for fast testing because the app can run immediately in a browser (Grifith).

The developer can use any IDE (integrated development environment) that supports TypeScript and JavaScript such as Microsoft Visual Studio, Atom or Angular IDE. To build an iOS app Xcode is needed that has to run on an Apple machine.

Ionic is open source, and the base version is free. Ionic is recommended to be used for apps with low traffic, or apps for temporary uses (events or tasks). The Ionic Pro version can be used to develop full-scale public use apps because it has more robust support for the necessary advanced app infrastructure (Grifith).

React Native

React Native is built for React and is another framework that developers can use to build close-to-native mobile apps by using JavaScript and React.JS which are both popular high-level programming languages. The use of native modules and libraries allow for apps that require more computational operations such as video processing of image editing. The code for apps written with React Native can be shared between 80 and 90 percent across the device platforms (Chiu, 2017).

The React Native modules interface with the native Android and iOS controllers, which provide the users a very close to native app user experience. Similar to Ionic, React Native can be used with Microsoft Visual Studio Code, Atom, WebStorm and ALM development environments. To debug while coding either an iOS simulator or an Android emulator can be used (Dossey, 2019).

React Native is backed by Facebook and has a large user community. This makes it not only easier for new developments to get answers but also drives a large number of third-party libraries. Because React Native is open source all its libraries can be used for free.

It is recommended for developers that are new to mobile development. And due to its popularity, firms should find it easier to hire a React Native developer for their team. Larger tech companies like Facebook, Airbnb and Instagram use React Native (altexsoft.com, 2018a)

Flutter

Google launched Flutter in spring 2017 as a framework to build native apps on iOS and Android from a single codebase. The framework is an open-source and free cross-platform tool that developers can use to develop high-performance native mobile applications for Android and iOS. Flutter uses the Dart programming language (also from Google), and the light C++ engine.  It comes with APIs (application programming interfaces) and SDKs (software development kits) for 2D rendering, simulation, gestures, and painting. Flutter also supports the use of existing Swift, Objective C, and Java code. With Flutter one can only develop apps for Android and iOS, but not Windows mobile platform. And for Apple iOS Flutter is only compatible with 64-bit OS devices, but not 32-bit devices (flutter.dev, 2020).

Dart is still relatively new and not very popular yet. It can be learned easily by developers that are already familiar with Java, JavaScript, and C++. With Flutter the app can access all platform services and APIs including storage and sensors through packages. However Flutter uses only built-in widgets, and doesn’t use native UI components. One interesting feature in Flutter is the hot reload functionality. With it developers can build UIs (user interfaces), experiment, and add different features as well as detect and fix bugs quickly with no loss of state on emulators (altexsoft.com, 2020).

Xamarin

Xamarin is a Microsoft-backed framework for cross-platform mobile app development. Xamarin uses C# and native libraries that are wrapped in the .NET layer. To allow for cross-platform functioning the developer has to bind the native open-source libraries for iOS and Android with Xamarin. This platform supports two methods to build apps namely Xamarin.Android/iOS and Xamarin.Forms.

Xamarin.Android/iOS apps will look and feel like native apps because their cross-platform capabilities emphasize the sharing business logic over the sharing of code base. The developer can create the user interface with native UI (user interface) controls and layouts. Although more time consuming this approach allows for a native look and feel of the app.

Xamarin.Forms emphasizes code base sharing of up to 96% over platform-specific behavior. However this code base sharing causes a reduction in app performance when compared with Xamarin.Native development. The use of Xamarin.Forms allows for a faster development that saves resources, but at the cost of a lacking native look and feel. For apps where the UI is not critical (enterprise or internal apps) the Xamarin.Forms can be a good solution (microsoft.com, 2017).

To develop an app with Xamarin the Visual Studio IDE is required. The IDS provides the code editor and the simulator to test the app without the need of a physical device. However as with other frameworks an iOS app can only be built on an Apple OS machine (microsoft.com, 2018).

Because Xamarin is backed by Microsoft there is great emphasis on educating developers and building a community. Xamarin is great for developers that are already used to work with the Microsoft development ecosystem. Some of the well-known companies that use Xamarin are Slack, Pinterest, and Siemens.

Xamarin became an open source product under the MIT license and therefore free to us. However to use it the developer needs to install the Visual Studio IDE. This is a proprietary Microsoft product and can be used on a subscription basis. For non-enterprise use it’s free for up to 5 users (altexsoft.com, 2018a).

NativeScript

NativeScript was created by Telerik and first released in 2015. The company was later acquired by Progress Software. NativeScript is another framework that can be used with TypeScript, JavaScript, Vue.js or Angular. It is licensed under Apache 2.0 which is very business friendly (Lauer, 2019).

This framework allows developers to use JavaScript (or its superset TypeScript) to develop cross-platform mobile applications. With this framework the apps can communicate directly with mobile native APIs. While JavaScript or TypeScript is used for the business logic of the app, the UI is developed with XML (extensible markup language) and CSS (cascading style sheets) (nativescript.org, 2020).

The performance of apps created with NativeScript can come close to native apps because of this direct connection to the native APIs. Code reuse can be done with up to 90% of the code base across Android and iOS. It’s an open source framework and which allows the solution to be used for free. Similar to other frameworks to build an iOS app an Apple Mac machine is needed. But cloud services like Sidekick also allow iOS apps to be built. But these cloud services are not free to use.

The framework has a fairly large and active online community where developers can get a lot of answers as well as plugins, templates, and samples. If close-to-native performance is required then NativeScript can be a great choice. But this comes at the cost of lacking the native look and feel across iOS and Android. Some of the larger companies that use NativeScript are Puma and SAP (altexsoft.com, 2020).

Conclusion

Hybrid apps have great benefits over native apps. Any firm that is considering the development should also look into hybrid apps. There are a variety of hybrid app development frameworks to choose from. Some, like Ionic, only offer the front-end GUI framework and require a separate solution to develop the backend of the app. This requires a steeper learning curve, but offers also greater flexibility. A firm should have a clear understanding of what their app’s purpose is (large scale consumer market app, internal enterprise or temporary app) and if a native look and feel is important for the user experience. Another factor to consider is the budget a firm has for the development team. A smaller budget might require a solution with greater code base sharing capabilities. The popularity of the framework can be an indicator for the ease of hiring the team. And lastly a firm should consider who is backing the development framework. Big players are Facebook, Google and Microsoft. And their respective framework might have a higher chance to remain available compared to frameworks that are backed by smaller communities.

References

(*) This blog post initially appeared as an essay for one of my courses at Florida Atlantic University. It is being shared here as a guest blog post with the author’s consent.
All views and opinions expressed in this post are those of the authors and do not necessarily reflect my opinion or the official policy or position of any agency, organization, or company.

Featured image: photo by Clément H on Unsplash

Share this post:

LinkedInRedditWhatsAppPocket

Published in Mobile Apps

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top