Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Introducing NativeScriptLohith G N

About Me

• Lohith G N

• Tech Evangelist

• Microsoft MVP

• Lohith.Nagaraj@Telerik.com

• @kashyapa

• www.Telerik.com

• www.telerikhelper.net

• www.kashyapas.com

You are a hybrid app developer

and

want to create truly native apps?

You are a native app developer

But

Want to expand scope to Platforms

You are a Web Developer

and

Want to use your existing skills for Mobile Development

What is NativeScript?

A runtime for building and running native iOS,

Android, and Windows Phone apps with a single,

JavaScript code base

• Bridge

• No DOM

• No cross compilation

!=

!=

Why NativeScript ?

• Its Open Source• Free of Charge

• Available to anyone on GitHub (https://github.com/NativeScript/)

• Easy• Code with JavaScript, Style with CSS

• Create True Native Experience

• Powerful• X-Platform UI Abstractions

• Shared Busines Logic & Data Models

• Third Party Native Libraries

100 % Access to Native Platform API

Standards Based – ECMAScript5 + JS + CSS

100% Shared Code

How does it Work ?

TNS file module

HTTP module example

How to Get Started ?

Two ways to use NativeScript

1)

2)

• Backend-as-a-service• Push notifications, cloud data, file storage, and more

• Analytics

• AppBuilder• Cloud builds (build iOS apps on Windows, Windows Phone apps on a Mac)

• NativeScript debugging and tooling

• Automated app testing

• And more!

http://telerik.com/platform

NativeScript CLI

• Free and open source

• https://github.com/nativescript/nativescript-cli

NativeScript CLI requirements

• https://github.com/nativescript/nativescript-

cli#system-requirements

• Xcode, Xcode CLI tools, iOS SDK

• ios-sim npm package

• JDK, Apache Ant, Android SDK

Starting a new project

Running on iOS

Running on Android

app.js

Pages

• XML markup structure

• Elements (e.g. <Page>, <Label>) are TNS modules

Data binding

Data binding improved

CSS

Demo time!

Questions?

Thanks!

Lohith G N

lohith.Nagaraj@Telerik.com@kashyapa

Follow NativeScript at @nativescript