Get cracking with NativeScript

So you are a pro in Javascript OR a real good Angular, Vue developer and now want to explore building native apps on mobile. However, you are getting a migraine seeing the number of options! React Native, Dart, Kotlin which one should I choose? Well, take a sip of your favourite coffee and sit back. We got you, NativeScript!

NativeScript allows you to build native apps using Angular or TypeScript or modern Javascript and still give you the truly native UI and performance. It allows you to embed a web framework to generate a native app. Sounds cool, doesn’t it?

So, let’s get cracking with it!

Architecture

NativeScript prominently uses MVVM model which enables it to have two-way data binding, so the data gets instantly reflected on the view.

Another important advantage of this approach is that Models and View Models are reusable. This makes it possible to use it with Vue and Angular frameworks where most of the business logic can be shared with WEB components.

It also provides a rich set of Javascript modules which is categorized as UI Modules, Application Modules, Core Modules. These can be accessed at any time to write any complex application.

Native Plugins are written in platform-oriented languages (Swift and Java) which generally acts as a wrapper and can be used with Javascript plugin.

Write once run everywhere

NativeScript helps in building native applications in Javascript, however, you can build mobile apps either with JavaScript/TypeScript or Angular. Most of the code written in JS will remain the same for both platforms. It allows code sharing for business logic and some UI styles for Android and iOS.

Performance

NativeScript shows the ability of running the animations at 60 frames per second, virtualized scrolling, caching similar to native apps. Moreover, it can offload long-running processes to maintain frontend speed.

In the latest release of NS v6.7.8 the newly composed Webpack module has improved the performance on Android considerably.

From NS v6.7.8 onwards we can see the following improvements

1. Build process for Android increases by 30% while for IOS it increases by 10%
2. Streamlined store approval process makes it enable a faster process for new versions to update.

Native device features

NativeScript provides the feature of writing native expressions directly, with Javascript or TypeScript. This avoids unwanted use of Javascript wrappers around the native ones, so the developer can focus only on business logic. It allows us to call native APIs from Javascript directly because they deal with the same Native APIs.

For e.g, If you want to integrate the camera feature in an app, you can initialize this through JS also.

In addition to this, NativeScript readily provides support to newly available IOS and Android API, by which we can easily shift to new features rather than depending on a specific version.

Pre-styled UI components

There is a rich set of pre-styled components available with NativeScript. You can simply plug and play these components. Also, there is a good bifurcation on layout and components. You can customize the components quite easily.

For e.g. Date picker, Bottom Navigation, Slider, Tabs, etc.

Community support

Earlier, there was less community support available for NativeScript but with time we are seeing a good amount of developers digging into the framework. Also, many organizations are adopting the framework for app development, which automatically helps in building the community.

Ready to use plugins

The NativeScript plugins are building blocks that encapsulate some functionality and help developers build apps faster (just like the NativeScript Core Modules, which is a plugin). Most are community-built, written in TypeScript/JavaScript. Some include native libraries, which are called from the TS/JS code thanks to the Runtimes. Native Script maintains an official marketplace of plugins for most of the native modules.

In addition to this, NS does provide support from npm, CocoaPods (iOS), and Gradle (Android) directly, along with hundreds of verified NativeScript plugins.

AR/VR capabilities

NativeScript lets you access iOS and Android APIs to build mobile apps using JavaScript, and ARKit is no exception. The releases of AR SDKs from Apple (ARKit) and Google (ARCore) have presented an opportunity for NativeScript to enable developers to create immersive cross-platform AR experiences. There is a plugin called nativescript-ar available on the marketplace for this.

Web support

As NativeScript comes with the support of different web frameworks like Angular, Vue, it allows you to build web and mobile apps out of a single codebase. It won’t stop at sharing only services but you can easily share:

• Component class definition — that is the xyz.component.ts
• Pipes
• Router configuration
• SCSS variables

With NativeScript 6.0 the amount of code reuse between web and mobile has increased. NativeScript can achieve 70% code reuse across web and mobile, including support for PWAs. This shortens development and testing cycles for both web and mobile apps in production while ensuring consistency across digital channels. It also lowers the cost of development and maintenance for deployed applications.

Learning curve

As NativeScript is based on Javascript, you can use Typescript, Angular or Vue to develop apps. It also supports the declarative coding style. So being a web developer, you don’t need to learn new languages or syntax.

NativeScript bypasses the dependency to learn Objective C(IOS) and Java/Kotlin(Android) for bridging concepts by injecting all iOS and Android APIs into the Javascript Virtual Machines.

Language used

As mentioned earlier, NativeScript uses JavaScript to build native mobile apps. It comes in different flavors — pure JavaScript/ TypeScript, with Angular and with Vue.js. So you can choose any of the given to start with your app.

PWA support

You can create a PWA with the NativeScript. Through the use of the NativeScript and Angular integration, it’s quite easy to build a PWA (Progressive Web App).

From v6.0 onwards NativeScript provides support for PWA which also enhances code reusability between mobile and web applications.

With the new concept of HMR (Hot Module Replacement) provides developers to see changes to JavaScript and CSS resources without reloading the application which enables a better user experience for PWA

Current limitations

NativeScript does have some limitations mostly related to App size which is mostly large in size, but you can overcome this limitation by running Webpack and Uglify. Android performance was not up to market standard in initial versions, but later on, in latest releases v.6.7.8 it is claimed to have better performance along with support for Android X library.

Closing Thoughts

As a web developer, when you start thinking about building mobile apps with cross-compiled platforms, it is definitely worth exploring NativeScript as one of the reliable options. As mentioned above it comes with a lot of capabilities, features and plugins which we need for any mobile app development. Cheers !!