Let's talk NativeScript

This changes everything!

By

Your zen is lost quickly ..

Too many platforms & Development paradigms ..

Confused Developer = Sad Panda!

Too many pitfalls with Native or Hybrid Apps ..

Mobile Development Landscape

2. Go Native

You do not want Compromises!

3. Go Web Hybrid

4. Go Cross-Compiled

5. Go JS Native

1. Go Mobile Web

Wait .. What?

Native  iOS / Andoid / Windows 10* Apps

You're Welcome!

Built with JavaScript + XML + CSS

{

}

Single Code Base

*Coming Soon

How is this working?

{N} is built from ground up

No DOM

No Cross-Compilation

No WebView

{N} is straight-up JS | Running as Native App

Under the hood

{N} works over an abstraction - a very smart one

Runs JavaScript in a Virtual Machine

JavaScriptCore VM on iOS

JavaScriptCore* VM on Windows Phone

V8 VM on Android

*Tentative

You write JavaScript

{N} utilizes a bridge

Has full access to Native APIs

Uses Reflection to look up Native APIs

Metadata pre-generated

List of APIs for each Platform

Injected into App package @ Build time

- That's all of iOS + Android APIs!

Plug & Play?

{N} is very flexible

Allows reuse of skills & assets

Use native libraries for each platform

Shared UI styles through CSS

Use JS libraries without DOM dependency

Business Logic in JS?

Turns out, that's a bit of a lie ...

You get full TypeScript Support. Boom!

True object-oriented programming

TS Definition Files to offer Metadata

Use Classes, Interfaces & Access Modifiers

Full Intellisense support in many editors

Transpilers?

Yes please ...

TypeScript in place of JS 

ES6/7 in place of ES5

SASS in place of CSS

You're welcome developers!

Why Angular 2 with {N}?

It just makes sense ...

Both {N} & NG2 written in TypeScript

Use your Angular skills

Share code between Web & Mobile

Render X-Plat Native UI

We LOVE Open Source

Choice #1: {N} is OSS on GitHub

Start @ https://www.nativescript.org/

Check out | Use it | Fork it

https://github.com/NativeScript/NativeScript

Yep, it's completely FREE .. there is no catch!

How do I start?

{N} Command Line Interface makes it easy

 npm install -g nativescript

Grab the NativeScript CLI:

 tns create MyApp / tns create MyApp --ng
 tns platform add android

Create Project & Add Platforms:

 tns run android
 tns run android --emulator

Run Project on Device or Emulator:

Choice of IDE?

{N} aims to give you flexibility

Sublime Text | With complete Workflow

VS Code | Dedicated {N} Extension

Most other JS/CSS text editors

Use Telerik Platform

Choice #2: {N} is best with Telerik AppBuilder

- Start @ http://platform.telerik.com!

Complete end-to-end Mobile developer Platform!

Show me some UI

{N} uses XAML-like XML

You build a Visual Tree

<Image source="{thumbnailImageSource}" width="72" height="72"/>
<Label text="{itemTitle}" textWrap="true" cssClass="title" />
<Button text="{authoredBy}“ width="150“ cssClass="author"/>

Just like XAML/HTML

You get UI elements & Container controls

These become Native UI .. little Magical!

Is the UI smart?

{N} supports Rich DataBinding

<Image source="{thumbnailImageSource}" 
       width="72" 
       height="72" 
       verticalAlignment="top"/>

<Label text="{{ num_comments ? num_comments + ' comments' : '' }" />

XAML-like Data Binding

Off course .. it's 2-Way

Data Binding powered by Polymer Expressions!

Renders Adaptively for each platform

How do I style the UI?

{N} uses the ubiquitous CSS .. hallelujah

 <Page loaded="load">
    <Label text="{{ message }}" />
 </Page>

 .Label {
      color: red;
      font-size: 20;
      margin: 20;
 }

Yep - CSS to style Mobile App elements!

We know you're a CSS ninja .. now use it.

Can I invoke Native UI?

{N} supports Native UI element instatiation

 var alert = new UIAlertView();
 alert.message = "Hello World";
 alert.addButtonWithTitle("OK");
 alert.show(); 

Native UI

Invoked through JS!

Why {N} again?

By

Native X-Platform Mobile with JS/TS

nativescript.org | @NativeScript

Go build your dream app!