An Overview on Cross Platform Mobile Application development with NativeScript

Scroll Down
An Overview on Cross Platform Mobile Application development with NativeScript

Mobile Application development is an exciting, ever-changing and constantly evolving industry. Mobile apps are an inseparable part of our lives and with the evolution of development technologies, apps have only gotten better and mobile app development platforms have gotten more and more innovative. With speed to market being a major factor when considering the development of a mobile app, there is no shortage of great app development options that are constantly trying to outdo each other when it comes to scalability, ease of use, performance and speed.


Today, I would like to discuss one such newcomer - NativeScript. NativeScript is an open-source cross-platform mobile app development framework for iOS and Android built by Telerik. NativeScript is a cross-platform framework that can create mobile applications with a single code-base. The primary language used to develop NativeScript based applications is Javascript. Additionally, NativeScript offers a lot of features that make it easy to get started and leverage skills you may already have:

  1. Leverages your existing knowledge of HTML, JavaScript, and CSS
  2. No need to have Objective C, Swift, or Java programming knowledge
  3. Write once run everywhere
  4. Access to native platform APIs for iOS and Android
  5. Can be used with Angular and Typescript

During the course of this blog, I would like to give you some quick sample codes just so you have an idea of what the syntax looks like. but first...

What is Cross-Platform Mobile app development?

Cross-platform development is a concept in computer software development where you write application code once, and it runs on multiple platforms. This is very much inline with the “write once, run everywhere” concept to make everything faster, smaller, and more portable. In mobile scenarios, it is applied by writing an application using a codebase & technology that allows the application to be deployed and distributed across multiple platforms/operating systems/devices.

Right, so we're set. Lets quickly dive into how you can get started with developing in NativeScript

So let's start by installing NativeScript Framework

1. Install Node.js
NativeScript CLI is built on Node.js. Hence, to install NativeScript, you need to have node.js installed on your system.

2. Install NativeScript CLI
NativeScript CLI can be installed through command prompt on windows or terminal on Mac system. Below command can be used to install NativeScript CLI
npm install -g nativescript

3. Install iOS and Android dependencies
For iOS development, we need latest version of Xcode installed from App Store. For Android development, android sdk can be installed from https://developer.android.com/studio/index.html.

How NativeScript apps are written?

NativeScript apps are written in a combination of JavaScript, XML, and CSS, as shown in fig. 1


Fig. 1. JavaScript, CSS, and XML combine to create a NativeScript app.

NativeScript based applications consists of Javascript, XML and CSS. The JavaScript component runs business logic, accesses data, or controls the flow of the app. The XML portion defines the user interface (UI), and CSS is used to style the UI, much like an HTML application.

NativeScript application closely resembles HTML based web application but that is just for the coding style and structure part of it. In terms of working, NativeScript being a cross-platform framework, the UI is written in XML which renders the native UI elements for each platform i.e. a button in NativeScript renders to a native iOS button and native Android button. Hence, the final outcome on the mobile screen appears to be native for respective platforms.

The NativeScript Folder Structure

Let's take a quick look at the NativeScript folder structure

-- app
    - App_Resources
    - tools
    - tns_modules
    - app.js, main.xml, main.css, main.js,...
-- node_modules
    - tns-core-modules
-- package.json
-- platforms
   - android
   - ios

The app folder contains all the development resources you need to build your application. All the custom xml, css and js files will be created in the app folder. This folder also contains App_Resources folder which contains platform specific resources such as app icons, splash screens and specific iOS and Android related files in respective folders. Any 3rd party plugin (ex. Barcode scanner, push notification, etc) will be saved in the tns_modules folder.

The node_modules/tns-core-modules folder contains NativeScript provided javascript modules that are used to build your application. Each of these modules contains platform specific code. For example, the button module under tns-core-modules/ui folder will have an iOS and Android versions of a button.

The package.json file contains all your application's configuration details like application name, app id, app version, module dependencies i.e. which npm modules your application uses.

The platform folder contains platform specific code that is used by NativeScript to build iOS and Android applications. Under iOS folder, you will find the ProjectName.xcodeproj file and info.plist i.e. iOS project configuration file. Similarly, for Android, we have android manifest.xml and other related java files.

Coding with NativeScript

As discussed above in How NativeScript apps are written, we have mainly classified the application development files into 3 parts:

1. UI (XML) main.xml








2. Styling (CSS) main.css

Page {
background-color: white;
}
.title {
font-size: 30;
horizontal-align: center;
margin: 10;
font-weight: bold;
color: #FF0111;
}
button {
font-size: 40;
horizontal-align: center;
border-radius: 15;
width: 90%;
background-color: #dddddd;
}

3. Business Login (JS) main.js

function pageLoaded(args) {
var page = args.object;
}
exports.pageLoaded = pageLoaded;

The above code will give the following results on iOS and Android.

   
Android Render

  
iOS Render

As we can see from the above iOS and android representation that a single codebase is used to build this simple application on both the platforms without writing any custom platform related code. For certain scenarios if platform specific code is required then that can also be defined at code level or file level . For instance, if we have to maintain different files for each platform then we can append the platform name to the file as main.ios.xml and main.android.xml. Similarly, if you want to specify platform specific attribute to UI elements then it can be done as follows



Conclusion

As we have seen from this article that NativeScript is a good option for cross platform mobile app development as one can leverage his existing knowledge of web based technologies to create some wonderful feature rich applications. I hope this article has given you a good overview of NativeScript to help you decide whether NativeScript is right for you.






comments powered by Disqus