introduction to nativescript - buildtruly native apps using javascript

35
Introducing NativeScript Lohith G N

Upload: lohith-gn

Post on 18-Jul-2015

735 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Introducing NativeScriptLohith G N

Page 2: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

About Me

• Lohith G N

• Tech Evangelist

• Microsoft MVP

[email protected]

• @kashyapa

• www.Telerik.com

• www.telerikhelper.net

• www.kashyapas.com

Page 3: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

You are a hybrid app developer

and

want to create truly native apps?

Page 4: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

You are a native app developer

But

Want to expand scope to Platforms

Page 5: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

You are a Web Developer

and

Want to use your existing skills for Mobile Development

Page 6: Introduction to NativeScript - BuildTruly Native Apps using JavaScript
Page 7: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

What is NativeScript?

A runtime for building and running native iOS,

Android, and Windows Phone apps with a single,

JavaScript code base

Page 8: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

• Bridge

Page 9: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

• No DOM

• No cross compilation

!=

!=

Page 10: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

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

Page 11: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

100 % Access to Native Platform API

Page 12: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Standards Based – ECMAScript5 + JS + CSS

Page 13: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

100% Shared Code

Page 14: Introduction to NativeScript - BuildTruly Native Apps using JavaScript
Page 15: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

How does it Work ?

Page 16: Introduction to NativeScript - BuildTruly Native Apps using JavaScript
Page 17: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

TNS file module

Page 18: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

HTTP module example

Page 19: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

How to Get Started ?

Page 20: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Two ways to use NativeScript

1)

2)

Page 21: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

• 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

Page 22: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

NativeScript CLI

• Free and open source

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

Page 23: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

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

Page 24: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Starting a new project

Page 25: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Running on iOS

Page 26: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Running on Android

Page 27: Introduction to NativeScript - BuildTruly Native Apps using JavaScript
Page 28: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

app.js

Page 29: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Pages

• XML markup structure

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

Page 30: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Data binding

Page 31: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Data binding improved

Page 32: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

CSS

Page 33: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Demo time!

Page 34: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Questions?

Page 35: Introduction to NativeScript - BuildTruly Native Apps using JavaScript

Thanks!

Lohith G N

[email protected]@kashyapa

Follow NativeScript at @nativescript