{"id":11857,"date":"2019-06-19T18:23:29","date_gmt":"2019-06-19T15:23:29","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=11857"},"modified":"2021-07-02T13:19:55","modified_gmt":"2021-07-02T10:19:55","slug":"native-vs-hybrid-vs-cross-platform","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/native-vs-hybrid-vs-cross-platform\/","title":{"rendered":"Mobile App Development Approaches Explained"},"content":{"rendered":"

To deliver a mobile experience to your users, building a native app is not the only option. Today, product owners are flexible in their choice. They can go hybrid – rely on web technologies and browser rendering. Or enjoy the benefits of cross-platform development tools like React Native or Flutter. Below, you\u2019ll find the key to solve this trilemma of choosing a mobile app development approach.<\/p>\n\n

\"Native-vs-Hybrid-vs-Cross-Platform\"<\/p>\n\n

Let’s take a look at each of them<\/text><\/h3>\n\n

Native app development<\/h2>\n\n

Going native is the way most product owners dream of, but not all can afford. It involves the creation of a mobile app that fits one platform only. In this case, engineers leverage a native-to-the-operating-system programming language. It can be Java or since recently Kotlin<\/a> for Android, and Swift\/Objective-C for iOS. Users love native apps for high performance and tailored-to-the-platform UX. This approach, though, scares off startupers for being cost-consuming. And the cost is the key distinction of native vs. hybrid app development<\/a>.<\/p>\n\n

For development, engineers get access to the device’s full feature set. This allows them to leverage advanced functionalities (memory management, complex networking, etc.). But, the biggest challenge is to run the app on two platforms. To do this, you need to make separate codebases. Yet, some native extensions enable code sharing. For example, you can share the C++ libraries between iOS and Android apps using Java Native Interface. Even so, product owners are desperate to increase development costs almost twofold.<\/p>\n\n

Tools to use:<\/h3>\n\n

\"Native-app-development-tools\"<\/p>\n\n

Examples:<\/h3>\n\n

\"Native-app-development-examples\"\n\n \"Artsy\"\n \"Pinterest\"\n \"iOS\n<\/map><\/p>\n\n

Hybrid app development<\/h2>\n\n

Native is not a must for the mobile experience. Besides, your project might need another vector of priority like a fast time to market. To this effect, a hybrid app is not just a cheaper alternative. It requires less time for development and allows for code sharing. The reverse side of the coin is sluggish performance and suboptimal user experience. Theoretically, it is possible to achieve a great UX and navigation patterns from a visual standpoint. This is, however, a challenge to put into practice.<\/p>\n\n

Hybrid apps blend web elements with mobile ones. So, you create a codebase using standard web technologies (HTML, CSS, JavaScript). Then, you wrap it inside a native container – the WebView. The content within WebView is rendered as a plain old website. It is responsible for UX and access to the hardware functionality (camera, GPS, etc.). The latter, however, is quite limited in contexts of hybrid application development vs. native application development. Eventually, a user can get a standalone application in the app store.<\/p>\n\n

Tools to use:<\/h3>\n\n

\"Hybrid-app-development-tools\"<\/p>\n\n

Examples:<\/h3>\n\n

\"Hybrid-app-development-examples\"\n\n\"Just\n \"NHS\"\n \"Airbus\n<\/map><\/p>\n\n

Cross-platform app development<\/h2>\n\n

It is important to remember that hybrid and cross-platform apps are not the same. Perhaps, the only common feature between them is code shareability. Due to that, they both allow you to speed up the pipeline. All the rest discloses many differences between cross-platform vs. hybrid app development.<\/p>\n\n

Cross-platform dev approach uses a native rendering engine. The codebase written in JS connects to native components via the so-called bridges. This provides the close-to-native UX. Cross-platform apps are free of platform hook. They offer seamless functionality, easy implementation, and cost-effective production. Yet, do not expect outstanding performance. Customization is also a pain since it is limited to the framework you use.<\/p>\n\n

Tools to use:<\/h3>\n\n

\"Cross-platform-app-development-tools\"<\/p>\n\n

Examples:<\/h3>\n\n

\"Cross-platform-app-development-examples\"\n\n\"Bloomberg\"\n \"Insightly\"\n \"Reflectly\"\n<\/map><\/p>\n\n

Progressive web app – as a bonus to mention:)<\/h2>\n\n

This mobile development approach is a relatively new name in the market. To some extent, progressive web apps<\/a> or PWAs resemble hybrid ones. They\u2019re based on web technologies and run in a browser. You do not even need to install them. Yet, you can still access the app on the home screen. On the other hand, they are progressive because the UX is significantly optimized. A PWA works offline, provides GPS access, push notifications, and many more for Android. For iOS (latest 12.2 release), your benefits will be constrained: no camera access, no default launch image, no installation API, and other issues<\/a>.<\/p>\n\n

For development, building a progressive web app is a royal flush. It is cheaper and faster than making a cross-platform app not to say a native one. PWA is also gainful from the talent perspective. You can go with Angular or React<\/a>-savvy engineers since there is no dedicated PWA framework so far. E-commerce apps are the most frequent adopters of progressive approach for mobile.<\/p>\n\n

Tools:<\/h3>\n\n

\"Progressive-web-app-development-tools\"<\/p>\n\n

Examples:<\/h3>\n\n

\"Progressive-web-app-development-examples\"\n\n\"Flipkart\"\n \"Forbes\"\n \"AliExpress\"\n<\/map><\/p>\n\n

Comparison table<\/h2>\n\n

\n\n\n\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t
App type<\/th>Native<\/th>Hybrid<\/th>Cross-platform<\/th>\n<\/tr>\n<\/thead>\n
Tools<\/strong><\/td>
  • XCode<\/li>
    \n
  • AppCode<\/li>
    \n
  • Android Studio<\/li><\/td>
  • Ionic<\/li>
    \n
  • Apache Cordova<\/li>
    \n
  • Visual Studio<\/li><\/td>
  • React Native<\/li>
    \n
  • Xamarin<\/li>
    \n
  • Flutter<\/li><\/td>\n<\/tr>\n
    • Rendering engine<\/strong><\/td>Native<\/td>Browser<\/td>Native<\/td>\n<\/tr>\n
    Ease of development<\/strong><\/td>\ud83d\ude15<\/td>\ud83e\udd14<\/td>\ud83d\ude0f<\/td>\n<\/tr>\n
    Libraries<\/strong><\/td>Not much dependency on open-source libraries and platforms<\/td>Highly dependent on different libraries and frameworks<\/td>Highly dependent on different libraries and frameworks<\/td>\n<\/tr>\n
    Debugging<\/strong><\/td>Native debugging tools<\/td>Native + web development debugging tools<\/td>Depends on the framework*<\/td>\n<\/tr>\n
    Codebase<\/strong><\/td>separate codebases - one per platform<\/td>single codebase with potential platform-specific abilities<\/td>single codebase with potential platform-specific abilities<\/td>\n<\/tr>\n
    Pros<\/strong><\/td>
  • Full access to device\u2019s\/OS\u2019s features<\/li>
    \n
  • Powerful performance<\/li>
    \n
  • Native UI (updated along with the OS)<\/li>
    \n
  • Efficient App Running<\/li>
    \n
  • High-quality functionality and UX<\/li>
    \n
  • Access to all native APIs and the platform-specific functionality<\/li><\/td>
  • Lower development costs<\/li>
    \n
  • Different OS support<\/li>
    \n
  • Code reuse<\/li>
    \n
  • Cost-effective development<\/li>
    \n
  • Big customization capabilities<\/li><\/td>
  • Different OS support<\/li>
    \n
  • UI performance is almost as fast as native<\/li>
    \n
  • Code reuse<\/li>
    \n
  • Cost-effective development
    \n(however, a new language or approach will need to be learned)<\/li><\/td>\n<\/tr>\n
    • Cons<\/strong><\/td>
  • No multi-platform support<\/li>
    \n
  • High dev costs if different OS support is needed<\/li>
    \n
  • No code reuse<\/li><\/td>
  • Slower performance<\/li>
    \n
  • Limited access to OS features<\/li>
    \n
  • No interaction with other native apps<\/li><\/td>
  • Slower performance<\/li>
    \n
  • Limited access to OS features
    \n(however, not as limited as for hybrid)<\/li>
    \n
  • Poor interaction with other native apps<\/li><\/td>\n<\/tr>\n
    • Examples<\/strong><\/td>
  • Any preset app in your OS<\/li>
    \n
  • Artsy<\/li>
    \n
  • Pinterest<\/li><\/td>
  • JustWatch<\/li>
    \n
  • NHS<\/li>
    \n
  • Airbus Helicopters<\/li><\/td>
  • Bloomberg<\/li>
    \n
  • Insightly<\/li>
    \n
  • Reflectly<\/li><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n* Complicated for React Native because there are two layers (and two languages) to go through. You start with JS and then you end up debugging Java code on Android or Swift on iOS. Other cross-platform SDKs like Flutter or Xamarin employ one language – Dart and C# respectively. <\/em><\/p>\n\n

    What to consider when choosing an approach to build a mobile app<\/h2>\n\n

    Budget<\/h3>\n\n

    How much money you can spend on a mobile app is fundamental, but it\u2019s not the only metric for choosing a dev approach. When you\u2019re limited in funds, you can\u2019t afford a native app for both iOS and Android. At best, you\u2019ll have to focus on only one platform.<\/p>\n\n

    On the other hand, even if the budget is king-sized, it\u2019s not necessary to go native. Your project might benefit from a cheaper app type that will cover your specific needs. For example, your current team consists of JS experts. You can take advantage of this and build a JS-based mobile app with React Native. Otherwise, you\u2019ll have to spend time on hiring experts for two (or more) platform-specific teams.<\/p>\n\n

    Time to market<\/h3>\n\n

    How soon you need an app is also crucial. You should bear in mind that building a native app is quite time-consuming. From this standpoint, hybrids and even PWAs are undisputed winners. And this option is well-targeted if you want to win a race to mobile market over your competitors. However, you\u2019ll have to lower your expectations for performance and UX of the app. Once your product has been marketed, you might consider evolving it into a native app with time, budget permitting.<\/p>\n\n

    Reach (market coverage)<\/h3>\n\n

    For now, we have the two largest markets of mobile apps. And most product owners prefer to have their apps available on both of them. In this context, cross-platform or hybrid app development is a winning approach. They let you clear your mind of additional load associated with multiple platforms. You\u2019ve got one team that works on the app that can run on both iOS and Android. With native, you\u2019ll have more pains.<\/p>\n\n

    App performance<\/h3>\n\n

    Airbnb\u2019s example can be instructive here. This company was one of the first adopters of React Native. They chose the cross-platform method to move faster as an organization and to only have to write product code once. Two years later, their priorities changed. Airbnb set its sights on higher app performance and better dev experience. Hence, now they\u2019re putting all of their efforts into making native amazing<\/a>.<\/p>\n\n

    What we can learn from Airbnb is that you can benefit from different dev approaches at a particular time. They were satisfied with React Native at the outset of their journey to mobile. However, growing ambitions and objectives pushed them to go native. That was not a mistake but a fruitful experience. As for hybrid app performance in general, here is what Zuckerberg thinks:<\/p>\n\n

    The biggest mistake we\u2019ve made as a company is betting on HTML5 as opposed to native<\/text><\/em><\/p>\n\n

    Perhaps, this was one of the inspirations for creating React Native.<\/p>\n\n

    UI and UX<\/h3>\n\n

    According to Statista<\/a>, the retention rate of mobile app users is 38% in 2018. It means that nearly one in three people abandon mobile apps after the first experience. That\u2019s why the impression your product provides is crucial. Native apps are headliners in UI and UX. Users get better scrolling, dynamic animations, and other appealing elements. And these are wrapped in a performant product.<\/p>\n\n

    If we compare cross-platform development vs. native development, the former lags behind. But still, the UX you can get with Flutter or React Native is much better than with any hybrid framework. We\u2019ve blogged about it in Ionic vs. React Native<\/a>.<\/p>\n\n

    Functionality<\/h3>\n\n

    Do you want your users to enjoy functionalities linked to a device\u2019s utilities? These are the camera, various sensors, and so on. If you do, keep in mind that hybrid apps cannot implement them to the fullest extent. Cross-platform apps are less limited than hybrids. Still, it\u2019s possible to develop 95% of the app using React Native, and the remaining 5% with native technology. The native code implements some sensors whenever you need them to the fullest extent. The native dev approach has no restrictions in this regard.<\/p>\n\n

    So, what’s your choice?<\/h2>\n\n

    Build a native app<\/h3>\n\n

    Native dev approach is definitely a king. It provides you with unlimited area for development. The native app is unlikely to frustrate the UX expectations of your users. And your engineers will enjoy working at this project.<\/p>\n\n

    But be prepared for your dev team to increase almost twofold. So will the costs. And do not expect a fast TTM unless your developers are supermen:)<\/p>\n\n

    Build a hybrid app<\/h3>\n\n

    What a hybrid approach can attract with is low price and high dev speed. So, an ambitious startup can benefit from building a hybrid app as a pilot solution. It is the best option if you do not think much of UX and performance. These factors, however, might scare off demanding users.<\/p>\n\n

    Build a cross-platform app<\/h3>\n\n

    Think of cross-platform as a golden mean between the above options. It is not as cheap as hybrid but cheaper than native. The app performance is on a good level. There are some use cases that claim they managed to achieve native performance, but these are perhaps… less than honest:) TTM? Perhaps, the difference between native and cross-platform development for dev speed is not huge. But, if you opt for a cross-platform framework, you’ll win in terms of cost and time-efficiency.<\/p>\n","protected":false},"excerpt":{"rendered":"

    You can choose from a few types of mobile app development approaches depending on your budget, talent base, and other factors. Discover the available options, and find out which type of mobile app fits your requirements.<\/p>\n","protected":false},"author":41,"featured_media":11929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Sergiy Korolov"],"class_list":["post-11857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2019\/05\/Native-vs-Hybrid-vs-Cross-Platform-main.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/11857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=11857"}],"version-history":[{"count":17,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/11857\/revisions"}],"predecessor-version":[{"id":18109,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/11857\/revisions\/18109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/11929"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=11857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=11857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=11857"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=11857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}