NativeScript 4.0 – A leap in Native Cross-Platform Mobile Apps for iOS and Android

This release was much anticipated by Android and iOS developers; after all, it is quite a while since its last major release in December 2017. Binge on some updates on existing features and load some new ones as well. Update it now, lots more in your dish.

Also, don’t forget to update the runtimes of your apps.

NativeScript in Brief

• If you want to build your native iOS and native apps using JavaScript and CSS, then NativeScript is an exceptional open source framework for you.
• It renders UI’s with native platform’s rendering engine
• It does not have WebViews which essentially results in natives like performance and UX
• You can write both iOS as well as Android applications with single Javascript or Angular JS codebase
• You are empowered to access native API’s, SDK’s and frameworks on demand and that too without opening Xcode or Android Studio
• You can make use of either AngularJS or JavaScript or both in development
• A combination of JavaScript and XML is good for Android Developers
• It is one of the topmost frameworks in the industry which can be used for building heavy applications
• Comes along with a robust toolkit
• It was launched by Telerik and has a strong backend

What are the Changes and Updates in NativeScript 4.0?

• Making changes to Application Root View
  NativeScript 4.0 will enable you to make use of any view as the root of your application. Earlier a ‘Frame’ used to be the root of any application; wherein you were required to navigate using ‘Pages’. You will now get the flexibility to put a TabView or a RadSideDrawer as the root of the app. This will enable you to make use of many more navigation patterns and furthermore allows for creating a more optimized UI tree.

  In NativeScript 4.0, your application will look somewhat like this:

  application.run({ moduleName: “app-root” });

  NativeScript 4.0 keeps the start() method for backward compatibility. It will work as such, keeping a root Frame and path to Page which represents a separate application screen. A RouterConfig object is created that maps path to components and parameters. Then you can make use of NativeScriptRouterModule API to import all your routes. You can then pass your module to bootstrapModule function to start your application. Moreover, you can select between two router outlets – router-outlet and page-router-outlet.

• Modal View Changes
  Modals (showModal() method) have been moved to Views components from Pages components, so you have the flexibility to show almost anything in modal, anywhere in the app, therefore it is not required to make use of any root element in NativeScript 4.0. In addition to this, Pages as root elements are not limited to showing something as a modal view. If this feature is combined with flexible frame composition feature, you will get a modal dialog with a separate navigation inside it. Also, there is no limit to show only one modal at a time now.

• Flexible Frame Composition
  Earlier Applications used only a single frame view as root but now iOS and Android developers will be able to use any view as the root of the app and you can customize where the frame has to be used. In a way, you can implement a secondary navigation with frames, while the top level navigation is TabView and RadSideDrawer.

  While multiple frames are still not supported well in AngularJS, but you can still adjust more than one frame by methods like frame.topmost(). Check some more framing references here.

• Lustrous Templates
  Most of these features are viewable in NativeScript 4.0 Application Templates and you will find them you’ll find one for each, from Android to JavaScript to TypeScript etc – cool!

• Enterprise Authentication Template
  With a twist in existing templating feature, you’ll find a new template here that will allow the user to authenticate with a single sign-on. Use it with NativeScript Sidekick and it will do all the Kinvey configuration for you.

• UI Constituents that make NativeScript look Professional
  The big NativeScript UI plugin has been split into smaller plugins. Follow recent updates on this split in release notes here.

What are recent updates to Tools in NativeScript 4.0?

• Configuration of Project Structure
  It is easy for the NativeScript developers to configure the path to application folder and the path to the App_Resources folder and the configuration file rests in nsconfig.json. In case of the missing configuration file, it is defaulted to values of previous versions.

• Generating Assets
  NativeScript 4.0 saves time and effort of Android and iOS developers to generate icons and splash screens and how they deal with editing images.

• Webpack with LiveSync
  NativeScrip Developers can now enable this feature by commanding the new flag –bundle with tns run command. This enhances developer experience and accompanies WebPacking your application as part of the development process.

• Debugging Problems native to android easy with Android studio
  NativeScrip4.0 allows you to make use of native tools like profiling in Android Studio

• Development Window for new class of verified NativeScript Plugins

• Some of the recommended improvements in plugins:
• Plugins have to be published with .aar file;
• All files in platforms/android must be npm ignore, except these include.gradle, *.aar and *.jar;
• The package name must be specified in AndroidManifest;
• Ensure to remove productFlavors from include.gradle;
• Add a prepared script in the package.json of your plugin to ensure the plugin’s .aar file is built automatically for you

Read here for more in New NativeScript Plugins

Upcoming Meliorations in NativeScript

• NativeScript aims to enhance development of AR experience to work on both iOS as well as Android
• Sharing of code between mobile and web applications to enable reuse of source code from web application in native mobile apps.
• We have a new NativeScript Playground, which is a browser based sandbox for trying out various combinations of NativeScript with angularJS, TypeScript, JavaScript or Vue.Js