This website uses cookies for analytics and to improve provided services. By choosing I Accept, you consent to our use of them and other tracking technologies according to our Privacy Policy

Different Approaches to Cross-Platform Development: React Native, NativeScript, PWA, and Hybrid Apps

Does React Native or NativeScript really work as they claim to be? After all smooth, cross-platform experience is the dream of every developer and business owner since the release of modern smartphones. In the history of mobile we’ve had iPhones and Blackberries, Android, Windows Phones, and a handful of smaller players. Building a native app for each one of these platforms sounds like an expensive venture and a long and arduous process. 

Even now, with only two major players left on the market, building a single codebase for iOS, Android, and the web (as some of solutions allow that) is still a dream that many would like to see brought to reality.

Proponents of native solutions claim that the cross-platform approach is more faulty, provides an inferior experience, and could never replace apps written with Objective-C and Swift for iOS, and Java and Kotlin for Android. Well, if you choose the right tools, these claims are no longer valid and the notion of abandoning the idea of native development makes perfect sense for businesses of all sizes.

Last Friday, on the (literally) big stage of the Vue.js Amsterdam conference, our friends from NativeScript announced the release of NativeScript-Vue 1.0, which allows for building apps for iOS and Android using Vue.js. As we love, use, and support Vue.js we couldn’t just not mention this great accomplishment of the Progress team.

Personally, the announcement brought me back to thinking about cross-platform solutions. Our team is already using some of them for mobile projects, however, there are other players on the cross-platform market that are definitely worth investigating.

In the piece below, I outlined the most popular or interesting approaches to cross-platform development with recommendations on when to use them (with a great help from my friend—Szymon Korzeniowski, Head of Frontend at Monterail. Thanks!). If you’re considering using such an approach in your product, read on. 

cross-platform development platforms

 

React Native

React Native

Here, the business logic is written in JavaScript and executed in the native JS engine, whereas layout and styles are compiled to native iOS/Android UI elements, providing superior performance to browser-dependent solutions. Therefore, while the business logic can be shared between Web and mobile, layout and styling need to be implemented separately for the Web using HTML and CSS.

React Native is a battle-tested solution already adopted by Skype, Instagram, Airbnb, and Uber.

It revolutionized mobile development by being able to deploy to two platforms at once. Its primary objective is to “Learn once, write anything.” What does it mean exactly? That you get a native look and feel for both iOS and Android, but you may include platform-specific modules: status bars, navigation, or access to native elements like camera and contacts are built according to the platform. Some of those features are available in apt packages, but some will need to be written from scratch.

The question is: can you use React Native for a Web version of either an iOS or an Android app? With solutions like React Native For Web and ReactXP it actually is possible. Both of them build upon React and React Native, aiming to provide equivalents of React Native components for “regular” (i.e. browser-based) React.

Just FYI, of the two, our team prefers ReactXP and here's why.


Build a product your users will love to use. Get a highly performant, native app for Android, iOS, and even the Web and work with our developers and designers to squeeze the most out of your app idea and React Native.


When should you consider React Native?

Definitely when you’re already using React for the project. Also, if you need a truly native look and feel of all versions of your app.

NativeScript

NativeScript logo

NativeScript is an open source project that helps building native apps with Angular, TypeScript, JavaScript, and now also with Vue.js. NativeScript works similarly to React Native and allows the simultaneous deployment of completely native iOS and Android apps. Additionally, it offers a range of frameworks you can select for development.

NativeScript boasts a different approach than React. Remember the “Learn once, write anything” motto of RN? NS says “Write it once, run it anywhere.” That means it attempts to manage the UI in a transparent and repeatable way between the multiple platforms it supports. NativeScript’s authors want to provide a singular development experience for each platform which is a perfect solution for relatively generic database-powered apps.

As I mentioned before, the NativeScript-Vue integration is now in 1.0 which is a great reason to try it out if you use Vue.js in your stack. According to the general mastermind behind the integration, Igor Randjelovic: “The initial work took a few days, and the Weex implementation (a similar solution for native mobile applications developed by Alibaba) was a tremendous help for figuring out the way to set things up. Another great resource was the NativeScript-Angular implementation which helped me better understand the NativeScript side of things.” The NS team are already planning the next steps for the integration and invites everyone to check out their playground.

When should you consider NativeScript?

If you use Vue.js or Angular and if you need a truly cross-platform app for iOS and Android with a single codebase, NS is the right framework. 

Progressive Web Apps (PWA)

unofficial PWA logo

A more lightweight alternative to Hybrid Apps—these are also regular Web apps, but instead of relying on third-party platforms and plug-ins for access to native features, they make use of modern browser APIs.

The thing about PWA is that those apps are not visible in app stores, so choosing this approach will lose you this specific traffic channel. On the other hand, PWA doesn’t leave the Web, so you can easily share it via URL. Quoting Alex Russell: these apps are just websites that took all the right vitamins. As a result, you get a highly performative Web-mobile hybrid—adjusted to all kinds of devices, fast, and installable. It can also be accessed offline and is capable of sending push notifications.

These apps deliver a better user experience and are a great alternative if your website is accessed frequently via mobile devices. The second (or third, or fourth) time a visitor enters your website, they receive a prompt suggesting they add the website to their home screen. Then it looks just like an app.

Support for PWA is currently strongest on Android/Chrome, while the iOS/Safari user experience is still sub-par. Apple is currently working on implementing support of certain PWA features in their ecosystem, however so far there have been reports of less-than-ideal implementation on Apple's side.

When should you consider PWA?

If you run a frequently visited website like a news or a e-commerce platform, event website, or education-oriented portal. But, to be completely honest, whenever you need fast, performative website with great UX. Which is pretty much always. To give the whole  picture, we prepared a complete guide on PWA. 

Hybrid Apps (e.g. Ionic)

Ionic logo

These allow the sharing of not only the business logic (JavaScript) between Web and mobile, but also the layout (HTML) and styling (CSS). Since a hybrid app is essentially a Web app wrapped in a mobile browser runtime with native plugins, there is always some performance overhead—on modern devices, however, the overhead gets less and less noticeable.

As the Web was originally built for Web pages and not complex modern apps, hybrids will never work as smoothly as a native app does. Their performance is not such a bottleneck as a few years ago though. Yet, you must note that if you decide to choose this approach, you will inherit all the problems that come with Web, such as bugs that show up only in specific browsers and devices or styles behaving differently depending on where they’re used.

The biggest issue with hybrid apps right now is their UX. Your app offers the same features for both Web and mobile versions and you actually don’t take advantage of so-called mobile moments—the moments wherein a user accesses their phone to get what they want, in the right context (i.e. a timetable of trains while you’re reaching a train station).

So why should you even consider them, you ask? Well, they’re time- and cost-effective. There are a lot of businesses that actually embrace that. Hybrids will work just fine on modern devices, so if you know that your target group uses new mobiles, maybe this is the way to go.

When should you consider hybrid apps?

Hybrids will work just fine for most apps, especially B2B and when you need to build an MVP with a low cost.

As I was thinking about the title for this post, I naturally considered the very popular “something vs. something” trope, but as you can probably see by now, there are no true winners here. The paragraphs above simply outline different approaches to cross-platform development which I believe to be the future of development in general. Okay, although I doubt that hybrid apps will stand the test of time due to their UX issues, the rest of the approaches outlined above are legit and you should consider them for your next project.

node3 8 Examples of Node.js Development in Enterprise Products
conf React Native EU Conference 2018—Lessons and Highlights
reactnative Development With React Native from a Perspective of a Business Owner and a Programmer