CROSS PLATFORM MOBILE FRAMEWORKS

Mo’nes Qasaiemh
7 min readMar 21, 2019

In few last years, the cross platforms were required in many business scops, in case the business seeker want to build own apps in the fastest way, they faced a problem to write native code twice, one to android and another to iOS.

Therefore the main reason why cross-platform development. Hybrid app development frameworks such as Xamarin from Microsoft, Ionic, and Flutter from Google have become increasingly popular.

Hybrid mobile app development benefits

  1. Cost-effectiveness.
  2. The code is written once.
  3. Deployed across all mobile platforms.

The main hybrid frameworks

  1. React Native

React Native you are building a truly native mobile app where React Native components are transpired to native iOS and Android components while using JavaScript and the React framework.

Facebook developed React Native to support only iOS, however with its recent support of the Android operating system.

The libraries are compatible with UI in both Android and iOS, the developers that are familiar with JavaScript can start with React Native easy, which is a dynamic programming language that is mostly used for adding interactivity on websites.

The dynamic programming language is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.

Tesla, Skype, Walmart, and Airbnb are users of React Native.

Pros:

  • Time and cost efficiency
  • Native look and feel of your apps
  • Sharing the codebase for iOS, Android, and the Web (with ReactXP and React Native for Web)
  • One team for multiple platforms
  • Awesome performance

Cons:

  • Need for expertise from a native developer for some platform-specific modules
  • It’s not fully cross-platform, single-codebase approach, (but the truth is, that’s not possible right now if you want to keep the native look and feel)

Codebase (or code base) refers to a whole collection of source code that is used to build a particular software system, application, or software component.

2. Flutter

A modern development kit designed for building mobile apps for Android, iOS and Google Fuchsia. Flutter is an open source app development framework, based on the Dart programming language.

One of the great things about Flutter is hot reload. This means developers can see all the changes they have made to the code right away in the app. This enables developers to quickly add new features, fix bugs and experiment.

Its cons are limited libraries, continuous integration, and limited TV support.

Google Fuchsia is a capability-based operating system currently being developed by Google. It first became known to the public when the project appeared on GitHub in August 2016 without any official announcement. In contrast to prior Google-developed operating systems such as Chrome OS and Android, which are based on the Linux kernel, Fuchsia is based on a new microkernel called “Zircon”.

Dart is a general-purpose programming language originally developed by Google and later approved as a standard by Ecma. It is used to build web, server, desktop, and mobile applications. Wikipedia

Pros:

  1. Allow it to attract a large developer community and lots of app owner
  2. Hot reload

3. Cross-platform development

Flutter can give you a start on developing for the Fuchsia platform. Fuchsia is an experimental operating system in development at Google. Many think that Fuchsia is the future replacement for Android.

4. Perfect for an MVP

5. Less code

6. Widgets

Cons:

  1. Mobile only
  2. Limited libraries
  3. Continuous Integration
  4. Limited TV support

It takes about 250 hours to develop an average app in Flutter that will work on both iOS and Android, whereas it takes about 400 hours to develop such an app for iOS and 250 hours to build an average app for Android.

3. Ionic Framework

Ionic is the most popular framework on the list for hybrid app development. It uses technologies that most developers are familiar with such as HTML, CSS, and JavaScript.

The overwhelming results Ionic has provided in conjunction with Angular has made it an easy pick for building hybrid mobile apps in the recent past.Due to its ability to build native-like mobile apps, Ionic is also a great choice for PWA development.

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

Pros:

  1. Quick development
  2. Can be developed mostly in the browser
  3. Angular, HTML, CSS, and JavaScript skills are (almost) all you need to get started — no need for Java and Swift or Objective-C

Cons:

  1. Native plugins can be a pain if there’s a conflict between two plugins or a bug in any of them. For example, there recently was a bug with Facebook login that meant a user couldn’t log in after logging out. And the fcm plugin (Firebase Cloud Messaging) doesn’t work with firebase-analytics, but another plugin called Firebase can replace both.
  2. Debugging is somewhat challenging, it’s difficult to figure out where the error is coming from, as error messages can be unclear.
  3. The build can break for no reason because something gets corrupted in the original folder, so commit often and use branches for each feature.

4. Framework 7

Framework 7 is a free and open source mobile HTML framework that allows developing hybrid mobile apps with native iOS and Android look & feel.

Probably the best thing about Framework 7 is that it has no external dependency on tools like React or Angular, unlike other hybrid frameworks.

5. Onsen UI

This open-source framework offers a plethora of ready-made components that you can use to build apps coded in HTML5 and JavaScript.

Onsen UI is based on framework-independent UI components, so developers can switch from and to various frameworks such as Angular, React, Vue.js and Meteor, or use just pure JavaScript to build their hybrid apps.

It becomes a serious opponent to extremely popular Ionic.

6. PhoneGap

The knowledge of HTML, CSS, and JavaScript you can get the ball rolling with PhoneGap app development.

Pros:

  1. Just need HTML5/CSS/Javascript skills vs Objective-C or Java.
  2. The single code base for all platforms (iOS, Android, Windows 7, mobile web)
  3. Rapid testing and deployment

Cons:

  1. Poor performance,
  2. Lack of pre-built UI widgets, transitions, standard controls, etc. Your development time can take longer, especially if you want a polished-looking app with a native look and feel.

7. Xamarin

Owned by Microsoft, Xamarin is one of the most prominent hybrid frameworks which works on the WORA — write once, run any model. The apps built using this framework offer native experience and are aesthetically pleasing. Its ability to reuse code, tools and functions makes it a suitable tool for fast app development. Xamarin is used by over 15 thousand companies in fields like healthcare, energy, and transport.

Summary

In a paper experiment written by (Jan Christoph, etc), they selected evaluation criteria based on the evaluation framework, It covers different evaluation criteria, especially for infrastructure (including the lifecycle as well as the functionality and usability of the app) and app development (including testing, debugging and developing the app), they focus the following app properties:

  1. Supported platforms
  2. Supported development environment
  3. Access to platform-specific functions
  4. Application look and feel
  5. Application portability
  6. Simplicity of development
  7. Application performance

Based on upon the evaluation criteria presented and measured, the overall results are summarized in Table 1 (“++”=very good, “+”=good, “0”=neutral, “-“=poor, “ — “=very poor).

Table 1: Evaluation of cross-platform frameworks

for more details, check reference number 9

We can summarize the most three frameworks have a comparison between them dependent on properties:

Table2: comparison between React native, flutter and Xamrain

and another comparison sees table3:

Table3: comparison between React native and flutter

another comparison between React native and flutter, see table 4:

Table4: comparison between React native and flutter

Conclusion

Before choosing one of the above-mentioned frameworks, you have to pay special attention to your target and ask yourself what you want from your application. We suggest you choose a framework that has a large community, and the one that uses technologies that you are already familiar with.

References:

  1. https://csform.com/best-cross-platform-mobile-frameworks-for-2019/
  2. https://www.monterail.com/blog/react-native-development-pros-cons
  3. https://www.youtube.com/watch?v=83SDXL65W9k
  4. https://hackernoon.com/flutter-pros-and-cons-for-seamless-cross-platform-development-c81bde5a4083
  5. https://en.wikipedia.org/wiki/Progressive_web_applications
  6. https://www.ukad-group.com/blog/6-pros-and-3-cons-of-ionic-development/
  7. https://www.quora.com/What-are-the-advantages-of-Framework-7
  8. https://www.quora.com/What-are-the-pros-and-cons-of-using-PhoneGap-to-build-native-apps
  9. Cross-Platform Development Suitability of Current Mobile Application Frameworks
  10. https://nevercode.io/blog/flutter-vs-react-native-a-developers-perspective/
  11. https://hackernoon.com/flutter-vs-react-native-vs-xamarin-for-cross-platform-development-5f92cfb178ff
  12. https://hackr.io/blog/react-native-vs-flutter
  13. https://blog.codemagic.io/flutter-vs-xamarin-a-developer-s-perspective/

--

--