04 May 2021
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.
- 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…
Want to learn even more about React Native? Check out case study & the latest features!
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.
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 – 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!
React Native is king when it comes to mobile. But is it the same for React and web development?
If you want to know how many devs are using React, what are the current trends and who is using the technology, check out our State of Frontend 2020 report.