Techumber
Home Blog Work

Build Your First Mobile App With The NativeScript and Angular 2 - Part 1

Published on July 1, 2016

JavaScript has come so far. JavaScript was created so that we could create interactive web pages.

But, these days we are using JavaScript everywhere. From fronted development to Networking tools. If you know HTML, CSS and JavaScript you could build applications on any platform.

Hybrid Apps.

Hybrid apps are the great way to build cross-platform applications. That Means applications build for web browsers could be converted into Mobile applications for Android or IOS.

But, One big issue with hybrid apps is performance it too bad if we don’t design it well. That is because Hybrid app was nothing but web pages wrapped in the web views.

Just so you know, it’s like running a mobile browser without any address bar close buttons on it.

Entering Native Script.

In order to solve the above problem in hybrid apps, Native Script deals the issue little differently.

The major difference between hybrid apps and Native Script is that Native Script converts the markup into mobile native components.

For Example
 <Button tap="buttonTap" text="Submit" />

will be rendered into

android.widget.Button 

on Android and

UIButton 

on IOS.

Isn’t it great?

That’s the reason it’s it 90% equivalent to Native Mobile code. What about other 10%?

Ya, I will explain that. So, now you understand how UI work. The business logic will work a bit different.

We will write all our business logic in either JavaScript or Type Script. This will run on a per pocket JavaScript virtual machine (VM). VM will directly call Native APIS using MetaData.

So, We still use JavaScript or Typescript instead of learning Java or Objective-C for backed code but for UI will be converted into the native element to get the best performance.

NativeScript 2.0

NativeScript 1.0 we can write our applications either Using JavaScript or Typescript. We will use Node’s require to load the modules and use them. Native Script 1.0 all the markup will be in XML format. The XML will be parsed and converted into UI Components. Sample code…

<Page>
    <StackLayout>
		<TextField hint="Email Address" />
        <TextField hint="Password" secure="true" />

        <Button text="Sign in" />
        <Button text="Sign up Demo" />
        
    </StackLayout>
</Page>

Above is a sample login page in NativeScript. Don’t worry about the tags much.

NativeScript 2.0 allow us to use AngularJS and TypeScript. So, Same code very less coding curve. The this is important? For example, if you want to fetch remote data, you should learn how to use some nodeJS module to use it. But, With Angular2 you already know how to use @angular/http module. Angular 2 has so many great features which we can use to design our application for better architecture.

##Still not sure?

If you want to test application build with NativeScript on your device. Install the application on your device.

For Android https://play.google.com/store/apps/details?id=org.nativescript.examples

For IOS https://itunes.apple.com/us/app/examples-nativescript/id1046772499?ls=1&mt=8

There is the offical showcase on NativeScript website. The apps are created by different people.

Don’t Wait.

If you want to build mobile apps. If you don’t know how to code Java or Objective-C. If you tired of optimizing your hybrid app again and again but still don’t get the best performance out of it. If you know JavaScript.

Then, It’s time to have a look at NativeScript. The great thing about NativeScirpt is that it is totally open source. It is created by Telerik which is known for its frameworks like KendoUI for ASP.NET and HTML5.

In, Next Part we will learn how to setup Native Script and create a simple application using Native Script and angular 2.

##Learn More…

https://www.nativescript.org/ https://github.com/NativeScript/NativeScript