Native Android and iOS Apps with NativeScript and Angular 6

2muchcoffee -

Short description of the article

  • Intro

  • Use your front end skills

  • Mobile app works natively on iOS and Android

  • Native performance

  • Native Android or iOS APIs usage

  • Strong support

  • Conclusion

Intro

Nowadays, there is a huge amount of frameworks to develop mobile applications. Developers often use Apache Cordova and similar framework to create hybrid mobile apps (our case is about Angular mobile apps), which give an opportunity to access native device capabilities like camera, geolocation, accelerometer and others. But these type of applications don’t provide the same level of usability as native ones because they utilize WebView instead of smartphones native UI.

NativeScript is an open source framework that allows to develop mobile apps with platform-native UI without WebViews on Angular 6, TypeScript/Javascript. NativeScript is a perfect choice for Angular experienced front end developers as it can appreciably decrease development time of native iOS and Android applications without adversely affecting UX development.

For application design NativeScript uses Cascading Style Sheets (CSS). So basic knowledge of existing web standards will be enough to change the appearance of application views and elements. See the simple example of an orange that was styled to spin:

    <Image src="~/img/orange.jpg"></Image>
    
    @keyframes spin {
      from { transform: rotate(0); }
      to { transform: rotate(360); }
    }
    Image {
      animation-name: spin;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

The NativeScript approach provides multiple benefits.

Use your front end skills

Native mobile apps for iOS and Android require developers to know different languages. For Android that is Java, Kotlin, C#.. while for iOS that is Swift or Objective-C. NativeScript uses only one - Javascript.

Javascript is popular, flexible, and widespread language. For typescript admirers there is a first-class support for TypeScript directly from NativeScript CLI. Moreover, NativeScript uses standard web tools for developing app: CSS for appearance, NPM for package management, Webpack for building.

And of course special mention should be made of NativeScript integration with Angular. The possibility to use only one framework for both web and native apps is a significant advantage. This can allow to share codebase for each of them.

Mobile app works natively on iOS and Android

Developers can write a single code on NativeScript for native iOS and Android applications. Thereby plenty of time can be saved on creating and maintaining your app for each mobile platform.

NativeScript renders the code written on Javascript and CSS into native UI of mobile OS. Case in point is NativeScript component ActionBar:

    <ActionBar title="NativeScript ActionBar"></ActionBar>

It is compiled to android.support.v7.app.ActionBar for Android and UINavigationBar for iOS. So this component becomes the corresponding native UI app element:

Such functionality can be quite easily written in native iOS and Android code but supporting separate apps can take up too much time and money. Especially if each codebase is maintained by different developers. That is why NativeScript suits well for applications that have to work on both Android and iOS platforms.

Native performance

There are a lot of different frameworks, such as Apache Cordova, that give an opportunity to build iOS and Android apps from a shared codebase. But in comparison with them NativeScript boasts of its user interface.

Whilst Cordova based approaches work with WebView to translate app appearance in HTML, NativeScript renders fully native Android and iOS UI components. So developers can create compelling user interfaces as NativeScript allows to manipulate the DOM on app pages. It is the best solution for applications requiring high efficiency that provide native UI components.

Native Android or iOS APIs usage

Enterprise applications might require an ability to handle native Android or iOS APIs. NativeScript has some out of the box features for developers to access those APIs, e.g. typing java.lang.Math.min or UIAlert in Javascript or TypeScript makes native APIs easily run.

Using native mobile APIs might dismay some developers. Fortunately, they can find a bunch of NativeScript plugins that simplify sophisticated native actions to easy-to-handle APIs.

Although other cross-platform mobile frameworks have sufficient plugins as well, NativeScript plugins allow to do more, like accessing native frameworks such as CocoaPods and giving developers the ability to create native UI plugins. It ought to be noted that NativeScript Plugins Repository is already contains a lot of plugins for common developers needs. Those are free and open source as NativeScript itself.

Strong support

Usually enterprises prefer a framework with the company creator support. Thus nullifying the risk of framework dropping out before project release. NativeScript is supported by Progress, global public traded software company that suggests different enterprise support agreements for a deeper level of support.

Also, Progress actively develops NativeScript tools that give an opportunity for companies (whose apps are written on Javascript) to expand standards of business apps developing. For the series of use cases simultaneously creating top-class UX without WebView performance problems. There is no need to check if your mobile app has native efficiency. Native performance is behind the NativeScript framework.

The NativeScript architecture provides deep integration with widespread front end frameworks like Angular or Vue. Creating NativeScript mobile app via Angular allows developers to use such features as integration with Angular CLI, code generator, router support etc.

Conclusion

NativeScript is an impressive open source framework for building native mobile applications. It is an excellent solution for developing a truly cross-platform app with a single codebase for iOS and Android so the application uses the same APIs as if it’s written in Xcode or Android Studio.

NativeScript directly supports Angular framework. Thus Angular developers can easily build mobile apps without wasting of time for learning extra technologies and approaches.

Got left any questions or suggestions, feel free to contact us and we will assist you in any inquiry!