React Native has largely come to dominate the landscape of mobile development with JavaScript. To the point that a lot of developers don’t even consider the possibility of doing it differently. In this article, I’m going to talk about why it is the case and the alternative solution known as NativeScript. I’m going to show you how you can use it in practice to do much of what you can accomplish with React Native.

If you are a JavaScript developer, React Native is likely the first thing that comes to your mind when it comes to mobile applications. That’s only natural. As you can see in the graph below, React Native has dominated the competition. But what if there was one competitor who could mess up React Native’s dominance a bit?

The usage of JavaScript in mobile development according to State of JavaScript 2020

Do you want even more JavaScript trends? Check out this JavaScript trends article written by TSH’s Head of Frontend Team Witold Ossera.

Today I would like to show you an alternative solution to React Native – NativeScript! But first, let’s find out why React Native is so successful.

React Native – what makes it so successful?

Regarding the data on React Native’s popularity, it’s worth it to consider why this particular technology is so popular. I can think of a few major reasons:

  • It allows you to do all the work in one ecosystem that most developers know and appreciate.
  • React Native was the first real solution that provides native mobile applications which could be written in Javascript without webview.
  • You can make an impressive list of projects developed with React Native (Instagram, Facebook, Bloomberg etc).
  • Thanks to its huge community and recognizability, it has always been a safe option when you compare it to its rivals. Until now…

Presenting NativeScript!

One day, a group of people decided to create an alternative solution. They came up with a new framework they called NativeScript. I don’t want to get deep into its history but the most important thing that you would like to know before making your own research is that the first chapters in this story were not fully successful. 

NativeScript has lackluster performance and each version update has breaking changes, much like React Native had in its beginnings. Just ask someone who worked with early React Native. Pretty much every new framework needs some time to mature. 

In addition, NativeScript is being developed by a much smaller company than React Native. And it doesn’t have such huge community support so the refinement process took much more time. Additionally, NativeScript handles support for a significant amount of UI frameworks, making it a really complex tool.

Pretty much every new framework needs some time to mature.

Why choose NativeScript?

But why would you consider another tool when React Native has been around for a long while and seems to be just fine? From my own point of view, I like to have a choice. You are in a good situation when you have the opportunity to decide if a specific tool suits your use case. That’s why I would like to share with you my experience and knowledge about working with NativeScript. 

NativeScript has impressive support for frontend frameworks, which will provide you with the base code of the UI for your application. When you use React Native, you are forced to do it in React, which is obvious. But when you go with NativeScript, you can still use React in addition to any other framework you like such as Angularjs, Svelte or Vue. 

Javascript is a dynamic ecosystem. Each day, we are getting new frameworks or trends. It’s a big advantage when your tool can be used with multiple frameworks. If it can, you are more resistant to trend changes and you can work with more teams who are responsible for delivering web apps and with whom you have to share your code.

For more details about props for using NativeScript instead of React Native, check this resource.

NativeScript with React

I know that most of you probably work with React so I would like to focus mostly on using it as a UI library. NativeScript has a dedicated plugin to handle React code inside its framework. 

React is an API that represents your application in a component-oriented way. Then, you use another library such as ReactDOM to transform your code into a website application or React Native to build mobile applications. NativeScript has its own library named React NativeScript which has been created by Jamie Birch. This library is also compatible with React API so you are able to provide the same React code. But to use mobile-specific elements or behaviours, you need to use React NativeScript elements (check out the documentation) instead of those from React Native.

In other words, you are able to use all React features that are not connected with reactDOM or React Native. For example, you can use Redux to maintain state, but you are not able to use React Navigation (it’s from reactDOM or the React Native library). 

React Native vs NativeScript comparison

Below you can find a table with the most important aspects of the React Native vs NativeScript comparison:

React Native vs NativeScript comparison

React Native – even the king is not perfect

For a long time, React Native has been pretty much the only solution that provides you with native code without a web view.

In this situation, even if you had any doubts, you didn’t have a choice. If you are interested in what doubts a big company could have when working with React Native, please check this article. It includes the pros and cons listed by the AirBnB team. They have a great amount of experience with React Native. Taking their feedback before choosing a technology could save you a lot of time.

NativeScript – not all roses

Of course, NativeScript is not a perfect tool. It also has some cons. What should you be aware of before you use it?

Smaller community and its implications – NativeScript plugins

NativeScript has a dramatically smaller community than React Native. This causes some problems. It’s more difficult to find solutions for specific problems. You have a much lower chance that someone had the same issue. With a smaller community, you have fewer external plugins. This is an issue but on the other hand owners of the NativeScript framework are aware of it and they are focused on maintaining most of the crucial plugins. For example, when the NativeScript core got a new update to version 7.2.0, it had a breaking change with paths to the NativeScript module. Most of the plugins get updates quickly but some of them don’t. The NativeScript team decided to fork such plugins and fix this issue by themself and publish these plugins on their own. Some example plugins:

NativeScript Imagepicker – this plugin was updated 2 years ago, but it stopped working after breaking changes.

The new Imagepicker – a new version of the plugin with the same methods and functionalities delivered by the NativeScript team.

Here you can find a full list of migrated plugins.

This situation has limitations. Your plugin is delivered by an official source so it is more trustworthy and stable, but this is very often the only option you are provided with and there are no alternatives.

One problem, one solution… but not always!

This one problem – one solution situation can be true for NativeScript in some contexts, but false in some other situations. And not always in a pleasant way. Consider this scenario:

When you search for a solution for React Native, you will always get a solution provided in React. In NativeScript, you will face a situation where the solution to your case is provided in another technology. For example, you have a UI delivered in React and the solution is shown in Angular.

From my experience, the solution provided in another UI technology still helps to solve your problem, albeit with some additional tweaking on your part.

Updating your NativeScript plugins 

You need to be aware of the plugins you are using in the application and check if you are able to update the project to the newest version. Depending on the size and complexity of the project, I prefer to wait for an update even for a few months until I am sure that all of the plugins have been updated. But after the update to version 7.2.0 and migration of the majority of crucial plugins to their own repository, the update process has been improved. 

Let’s hope that more of the NativeScript plugins will be moved into the official repository! 

More NativeScript learning resources

How can we compare these frameworks and check the opinions of regular developers when there is such a huge gap in popularity between React Native and NativeScript? I found a way for it!

There is a project named RealWorld which gives you the opportunity to compare over 100 implementations of the same application but in different frameworks. It’s a nice place to check and test specific solutions. You can check the list of completed implementations here. You can also check the implementation of NativeScript with Angular here, and React Native implementation here. Please check the number of stars and forks of each repository. The NativeScript implementation has much more attention to it. I leave you with this so you can easily check the structure of the NativeScript application implementation for more complex applications than another to-do list application. If you consider giving NativeScript a chance, please check this documentation. First, you are going to need to prepare an environment, which can take about as much time as it does for React Native. 

If you want to just test this framework, you can use this playground. You can install an application on your phone and have a live preview of your code. This solution has limitations but it’s a great way to check the structure of the code while avoiding the setup process.

Word of encouragement

I wish to encourage you to search for new ways to deliver mobile applications. React Native is a great tool, but it’s not the only good one out there. It is nice to have an option to deliver mobile applications in multiple ways and be aware that the UI can be delivered with other frameworks such as Angular or Vue. Good luck with your experiments!

Leave a Reply