1.
NativeScript
Cross-platform mobile apps with JavaScript

2.
Todd Anglin
@toddanglin
Burke Holland
@burkeholland

3.
Workshop Agenda
• Intro to NativeScript
• NativeScript core concepts
• “Hello World”
• Defining Views
• Debugging JavaScript
• Basic data binding
• Styling views with CSS
• Intro to Angular 2 concepts
• Angular 2 + NativeScript
• Navigating views
• BONUS
• Extending with plugins
• Adding animations
• Using Telerik Platform
Ante Meridiem (9AM to Noon) Post Meridiem (1PM to 4PM)

4.
Intro to NativeScript
”How did we get here?”

5.
2013 2014 2015 2016 2017
Early
prototypes
“Core”
engineering
Public
launch
Adoption
ramp-up
Mass
adoption
Project Timeline

6.
Delivering on the
overdue promise of
“hybrid.”

7.
Swift/Obj-C Java .NET

8.
Mobile Web
Hybrid
Native
("1st Gen" x-plat native)

9.
We ❤ Web.
But…
We need:
• Better offline support
• Access to device APIs
• Home screen icons
• Push notifications
• App monetization
• …

10.
Hybrid Promise
100%
Web
100%
Native
Hybrid
Reach
Code/Skill Reuse
Richness
Premium experience
Device APIs
Best of both?

11.
Hybrid Reality

12.
80% coded 20%
remaining
80% of dev time
Hybrid Reality

13.
80% coded 20%
remaining
80% of dev time 80% of dev time
Hybrid Reality

14.
Hybrid "Peak"

15.
Hybrid Promise
100%
Web
100%
Native
Hybrid
Reach
Code/Skill Reuse
Richness
Premium experience
Device APIs
Compromises

16.
Binary Choice
NativeHybrid
😎 Best experience
🐢 One platform at a time
🔥 Fast to market
😭 Compromise on UX

17.
Binary Choice
NativeHybrid
🔥 Fast to market
😎 Best experience

18.
JavaScript-
driven
native
🔥 Fast to market
😎 Best experience

19.
"Hybrid"
Web UI with limited access to
native APIs
Native App Shell
WebView
Plugins Plugins
Entire app lives here

20.
Native App
"JavaScript-driven Native"
Native UI driven by JavaScript
Native UI
JavaScript-to-Native bridge
JavaScript Engine
(Your app code runs here)
Native APIs

21.
NativeScript
(by Telerik)
React Native
(by Facebook)
“JavaScript-drive Native”

22.
Native App
Native UI
JavaScript-to-Native runtime
JavaScript Engine
(Your app code runs here)
Native APIs
Native App
Native UI
JavaScript Engine
(Your app code runs here)
Native APIs
API
Wrapper
API
Wrapper
PluginsPlugins
API
Wrapper
API
Wrapper
API
Wrapper
API
Wrapper
Plugins created with JS/TypeScript Plugins created with native code

23.
“JavaScript-driven Native”
• Share code
• Reuse existing skills/teams
• Reuse existing libraries
• Native UI (no WebView!)
• Full access to device APIs
• Immediate access to new OS
features
🔥 Fast to market
😎 Best experience

24.
What is NativeScript?
• Open source framework (ASLv2)
• Create native mobile apps for iOS, Android
(and eventually Windows 10)
• Use JavaScript (“web skills”)
• Write once, run everywhere
• Share 100% code between iOS/Android
• Share 80% code with web
• Reuse popular plugins from
NodeJS/iOS/Android
• Integrates deeply with Angular and
TypeScript

25.
With NativeScript…
• No web views (platform native UI)
• Use JavaScript (or TypeScript)
• 100% access to ALL native APIs (even new APIs)
• Made for “web developers” (JS, CSS, XML)
• Use Angular for web AND native mobile
• Reuse thousands of libraries from
Node/iOS/Android/Web

26.
The {N} difference…

27.
Demo available in the
app stores in May
Rich, animated,
“no compromise”
native UI
(with shared UI code)
1

28.
Measurable
native UI
performance
(“no jank”)
2

29.
Maximum code
and skill
reusability
3
Video credit: Nathan Walker, {N} community member

30.
How does NativeScript
work?
Under the covers

31.
Generated at build time
for OS & 3rd party
native libraries

32.
NativeScript Android example
output:
JavaScript

33.
NativeScript iOS example
JavaScript

34.
Runs on V8 JavaScript VM
Runs on JavaScriptCore VM

35.
NativeScript Module Layer (NML)
• Abstractions on native APIs that provide unified,
cross-platform API
• Dozens available out of the box
• Easy for developers to add
• IMPORTANT: All native APIs still available at JavaScript layer for platform-specific
scenarios
• NativeScript modules follow Node module’s
conventions (CommonJS).

36.
Example: NativeScript file module

37.
Putting it all together
Style with CSSDefine UI with XML Logic with JavaScript

38.
“Hello World”

39.
Two ways to use NativeScript
1)
2)

40.
Command Line Interface (CLI)
• Use Command Prompt (Win) or
Terminal (Mac, Linux)
• Free, Part of open source project
• Requires installation, local environment setup to
build for iOS/Android (requires Mac for iOS)
• Integrates with Visual Studio Code (via plugin)
WHY: More control, Free, Integrate with
existing IDEs/code editors
WHO: More technical developers used to
using CLI, Open source developers

41.
Telerik Platform
• Use AppBuilder or Screen Builder
• Subscription required
• Build in the cloud (no local install
required)
• Easiest way to get started
WHY: Richer tooling, Easier setup,
Platform integrated
WHO: Less technical developers, Prefer
Platform integrations, Windows
developers targeting iOS

42.
Telerik Platform
Powerful visual tooling, cloud builds and
more for NativeScript app developers.

43.
NativeScript CLI requirements
https://github.com/nativescript/nativescript-cli#system-requirements
Xcode, Xcode CLI tools, iOS SDK
JDK, Apache Ant, Android SDK
$ tns doctor

44.
Choice in Architecture
JavaScript
Write your application
using plain JavaScript
TypeScript
Use TypeScript to get
Object Oriented features
and compile time error
checking
Angular
Use Angular to architect
application. Reuse almost
all code between web and
mobile

45.
Angular & TypeScript
• Created by Google
• Open source
• Popular JavaScript framework
for building complex web apps
• “Angular 2” ships in May
• Created by Microsoft
• Open source
• Popular compiler for JavaScript that
adds powerful language features
• Used to create Angular 2 and {N}

46.
Starting a new project

47.
{demo}

48.
Running on iOS
or
$ tns emulate ios

49.
Running on Android
or
$ tns emulate android

50.
A better Android emulator
Visual Studio Android
Emulator
Genymotion

51.
NativeScript LiveSync
$ tns livesync //For all connected devices/emulators
$ tns livesync android //Target specific platform
$ tns livesync ios --emulator
$ tns livesync ios --emulator --watch
• Refresh app with
latest changes to
JS, CSS, XML
• No re-build
• Works with
emulators AND
device

52.
app.js

53.
Defining Views

54.
Pages
• XML markup structure
• Elements (e.g. <Page>, <Label>) are
NativeScript modules

55.
Layouts
UI Elements

56.
Layouts
Absolute Dock Grid Stack Wrap

57.
UI Widgets
• Button
• Label
• TextField
• TextView
• SearchBar
• Switch
• Slider
• Progress
• ActivityIndicator
• Image
• ListView
• HtmlView
• WebView
• TabView
• SegmentedBar
• DatePicker
• TimePicker
• ListPicker
• Dialogs
Out-of-the-box
Native UI widgets
means…
• Native behavior
• Native perf
• Native accessibility
• Parity with “native”

58.
Native UI widgets
Native API
{N} Module button
android.widget.Button UIButton

59.
Label
TextField
Repeater
SegmentedBar

60.
GridLayout
GridLayout
Label TextField
StackLayout

61.
{demo}

62.
Targeting Views
• Target based on:
• screens size
• minWH<X>, minW<X>, minH<X>
• platform
• ios, android, windows
• Orientation
• land, port
<file-name>[.<qualifier>]*.<extension>
styles.android.css
styles.ios.css
mypage.minWH600.xml
mypage.xml

63.
TIP
• Platform specific capabilities are always available
• JavaScript: <view>.android or <view>.ios
• Markup: <android></android> or <ios></ios>
• Attributes: android:<attribute> or ios:<attribute>
• Ex: <label android:class="…" ios:class="…" />
Write once by default.
Target specific platform capabilities when needed.

64.
{demo}

65.
Handling Events
XML
<button text="Click Me" tap="{{ onTap }}" ...
JS (ViewModel)
function pageViewModel() {
var viewModel;
viewModel.onTap = function() {
alert("You tapped me!");
}
return viewModel;
}
exports.pageViewModel = pageViewModel;
JS (View)
function onViewLoad(args) {
var page = args.object;
page.bindingContext = pageViewModel();
}
• Create event
handlers in
JavaScript
• Bind to event
names

66.
Handling Events
tap
label.on(gestures.GestureTypes.tap, function (args) {
console.log("Tap");
});
swipe
label.on(gestures.GestureTypes.swipe, function (args) {
console.log("Swipe Direction: " + args.direction);
});
Multiple events
label.on("tap, doubleTap, longPress", function (args) {
console.log("Event: " + args.eventName);
});
• Tap
• Double Tap
• Long Press
• Swipe
• Pan
• Pinch
• Rotation
• Touch

67.
{demo}

68.
Debugging

69.
“If debugging is the process of removing
software bugs, then programming must
be the process of putting them in.”
- Edsger Dijkstra

70.
Debugging Strategies
• Debug by alert (no really)
• Debug by console.log
• Debug by Developer Tools
• Debug by IDE
• Visual Studio
• Visual Studio Code

71.
Debug By Alert

72.
{demo}

73.
Telerik UI for NativeScript
- Open source
- Widgets: ListView,
SlideDrawer
- No support
UI for {N}
- Widgets: Chart,
Calendar, DataForm
- No support in entry
pricing
- UI for {N} can buy
this version for
support
UI for {N} PRO
FREE $199/$599 (with support)
Advanced, rich, native UI widgets for iOS
and Android

74.
Telerik UI for NativeScript
npm install nativescript-telerik-ui --save
• Add powerful
ListView,
SlideDrawer to
apps
• Free native
widgets
• Support available
with PRO license

75.
Custom XML Components
<page xmlns:custom="modules/mymodule">
<custom:MyCustomControl />
</page>
• Encapsulate
reusable UI in
components
• JS only, OR
• XML + CSS + JS
• Add to pages with
xmlns
modules
mymodule
.XML
MyCustomControl.js
MyCustomControl.css
MyCustomControl.xml

76.
{demo}

77.
Navigating Views

78.
Basics
• Topmost frame is root-
level container
• Facilitates navigation between
views
"topmost frame"
var frameModule = require("ui/frame");
var topmost = frameModule.topmost();

79.
Navigating with "topmost"
1. By File Name
topmost.navigate("details-page");
2. With Navigation Entry
var navigationEntry = {
moduleName: "details-page",
context: {info: "something"},
animated: false
};
topmost.navigate(navigationEntry);
3. Dynamically with Function
var factoryFunc = function () {
var page = new pagesModule.Page();
page.content = ...
return page;
};
topmost.navigate(factoryFunc);
• Always navigating with
topmost.navigate()
• Pass context to views
and parse in
onNavigatedTo event
• Go back with:
• topmost.goBack();

80.
View transitions
var navigationEntry = {
moduleName: "main-page",
animated: true,
transition: {
name: "slide",
duration: 380,
curve: "easeIn" }
};
topmost.navigate(navigationEntry);
• curl (same as curlUp) (iOS only)
• curlUp (iOS only)
• curlDown (iOS only)
• explode (Android Lollipop and later)
• fade
• flip (same as flipRight)
• flipRight
• flipLeft
• slide (same as slideLeft)
• slideLeft
• slideRight
• slideTop
• slideBottom
Different transitions can be set
for iOS and Android

81.
{demo}

82.
Basic Data Binding

83.
Data binding

84.
{{ newTodo }}

85.
{demo}

86.
Data binding improved

87.
Data binding lists
<Page>
<StackLayout>
<ListView items="{{ items }}" height="200">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
</Page>
• Bind to array or
collection of data
• Access named
properties or
$value
• Access parent
binding context
with $parents
• EX: OrderID in list of
Order Details

88.
{{ todos }}
{{ $value }}

89.
{demo}

90.
Data binding expressions
Static Expression
<TextField text="{{ sourceProperty, sourceProperty + ' some static text' }}" />
Ternary Operator
<TextField class="{{ isConditionTrue ? 'myClass true' : 'myClass false' }}" />
Converter
<TextField text="{{ testDate, testDate | dateConverter('DD.MM.YYYY') }}" />
Execute expressions during data binding to
determine visual state
Source Property Binding Expression

91.
Converters
var dateConverter = {
toView: function (value, format) {
var result = format;
var day = value.getDate();
...
//Return formatted model value
return result;
},
toModel: function (value, format) {
//Convert value from UI format to model format
return result;
}
}
• Encapsulate more
complex data
binding formatting
rules
• Can be one-way or
two-way
• Add to page
binding context OR
global application
context

92.
Data binding expressions
Feature Example
property access obj1.obj2.prop1
array access arrayVar[indexVar]
logical operators !var1
unary operators +var1, -var2
binary operators var1 + var2
comparison operators var1 > var2
logical comparison operators var1>1 && var2>1.
ternary operator var1 ? var2 : var3
grouping parenthesis (a + b) * (c + d)
function calls myFunc(var1, var2, ..., varN)
filters expression | filter1(param1, ...) | filter 2

93.
{{ total, total +' items left' }}

94.
{demo}

95.
Basic Styling with CSS

96.
CSS
Convention:
app.css <-- Global styles
[viewName].css <-- View styles
[viewName].[platform].css

97.
Supported Properties
• color
• background-color
• background-image
• background-repeat
• background-position
• background-size
• border-color
• border-width
• border-radius
• font
• font-family
• font-size
• font-style
• font-weight
• text-align
• text-decoration
• text-transform
• vertical-align
• horizontal-align
• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• width
• height
• min-width
• min-height
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left
• visibility
• opacity

98.
Supported Selectors
• Type
• button { color: red; }
• Class
• .mybutton { color: green; }
• ID
• #myButton { color: #FFF; }

99.
{demo}

100.
Custom Fonts
1. Use TTF or OTF fonts
2. Put fonts in: app > fonts
3. Use in CSS
.icon {
font-size: 30;
font-family: 'FontAwesome';
}

101.
{demo}

102.
Sass & LESS
• Use Sass or LESS syntax
• Auto-compiled
$ tns install sass
OR
$tns install less

103.
Pre-lunch Wrap-up

104.
Bottom line
• Access all native APIs with JavaScript
• 0-day support for new APIs
• Use modules to increase cross-platform “write
once”
• Use CSS to style native UI
• Use XML markup to define views
• Use CLI (+ IDE integrations) or Telerik Platform to
build and debug

105.
Lunch Break Resume @ 1PM

106.
Workshop Agenda
• Intro to NativeScript
• NativeScript core concepts
• “Hello World”
• Defining Views
• Debugging JavaScript
• Basic data binding
• Styling views with CSS
• Intro to Angular 2 concepts
• Angular 2 + NativeScript
• Navigating views
• BONUS
• Extending with plugins
• Adding animations
• Using Telerik Platform
Ante Meridiem (9AM to Noon) Post Meridiem (1PM to 4PM)

107.
Adoption trends
Warm the brains-up after lunch

108.
Adoption Goals (2016)
Goal for 2016: Grow NativeScript adoption by 15x
Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov DecAug Sept Oct Nov Dec
2x
2016
5x
3x
Google Angular2 event (“ngConf”);
NativeScript Angular2 push begins
Measured* active developers
(via NativeScript CLI)

109.
• Active monthly
CLI users doubled
Aug to Dec ‘15
• Doubled again
Dec to Feb ‘16
• On track to
double again by
end of April
60% increase in
new users since
January

110.
Developer Comments

111.
Join the growing
NativeScript
community on Slack
bit.ly/nativescript-slack

112.
Integrations & Ecosystem

113.
Plugin Ecosystem

114.
Plugin Ecosystem
Reusable libraries IDEs Verified Plugins

115.
Modulus Sachse Construction Day Care This or That!
PocketSmith

116.
“With NativeScript it became apparent
quickly that we would no longer have a
need for iOS and Android specialists—
our Microsoft .NET team became fully
functional—fast.”
Allan Kreyer, CIM Mobility Founder

117.
Angular 2 & NativeScript

118.
One framework. Mobile & desktop.

119.
Mobile

120.
Responsive
PWA (Progressive Web Apps)
Native Mobile

121.
Why Angular 2?

122.
Template
< ... >
Component
{ ... }
Metadata
Directive
{ ... }
Injector
Service A
Service B

123.
Renderer
Template
< ... >

124.
Renderer
Template
< ... >

125.
An Intro to Angular 2

126.
Template
< ... >
Component
{ ... }
Metadata
Directive
{ ... }
Injector
Service A
Service B

127.
Template
< ... >
Component
{ ... }
Metadata

128.
<!DOCTYPE html>
<html>
<head>
<base href="/">
</head>
<body ng-app=”app">
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html

129.
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppCompon3ent);
app.js

130.
Root Component

131.
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.js

132.
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts

133.
import { Component } from ”@angular/core”
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts

134.
import { Component } from ”@angular/core”
@Component({
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts

135.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts

136.
<!DOCTYPE html>
<html>
<head>
<base href="/">
</head>
<body ng-app=”app">
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html

137.
<!DOCTYPE html>
<html>
<head>
<base href="/">
</head>
<body>
<app>Loading...</app>
<script src="bundle.js"></script>
</body>
</html>
index.html

138.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts

139.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
export class AppComponent {}
app.component.ts

140.
Root Component

141.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
export class AppComponent {}
app.component.ts

142.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

143.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>{{ message }}</h1>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

144.
Root Component

145.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>{{ message }}</h1>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

146.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input value=”{{ message }}”>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

147.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

148.
[ value ] or {{ value }} = One way binding from
class to view

149.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts

150.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: 'Root Component’;
showMessage() {
alert(this.message);
}
}
app.component.ts

151.
Root Component Show Me
The page at http://localhost/3000 says:
Root Component

152.
( event ) = Binds an event to a function

153.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: 'Root Component’;
showMessage() {
alert(this.message);
}
}
app.component.ts

154.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: 'Root Component’;
showMessage() {
alert(this.message);
}
}
app.component.ts

155.
[(ngModel)] = Two way binding

156.
Services And Injection

157.
export class MessageService {
message: string = ”Service Message”
}
message.service.ts

158.
import { Injectable } from ”@angular/core”
export class MessageService {
message: string = ”Service Message”
}
message.service.ts

159.
import { Injectable } from ”@angular/core”
@Injectable()
export class MessageService {
message: string = ”Service Message”
}
message.service.ts

160.
import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: 'Root Component’;
showMessage() {
alert(this.message);
}
}
app.component.ts

161.
import { Component } from ”@angular/core”
import { MessageService } from ”./message.service”
@Component({
selector: 'app',
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: 'Root Component’;
showMessage() {
alert(this.message);
}
} app.component.ts

162.
@Component({
selector: 'app',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
} app.component.ts

163.
Service Message Show Me
The page at http://localhost/3000 says:
Service Message

164.
Directives

165.
import { Component } from ”@angular/core”
import { MessageService } from ”./message.service.ts”
@Component({
selector: 'app',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
app.component.ts

166.
import { MessageService } from ”./message.service.ts”
export class MessageDirective {
}
message.directive.ts

167.
import { MessageService } from ”./message.service.ts”
@Component({
selector: ’message',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class MessageDirective {
}
message.directive.ts

168.
import { MessageService } from ”./message.service.ts”
@Component({
selector: ’message',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class MessageDirective {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
message.directive.ts

169.
import { Component } from ”@angular/core”
import { MessageService } from ”./message.service.ts”
@Component({
selector: 'app',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
app.component.ts

170.
import { Component } from ”@angular/core”
import { MessageDirective } from ”./message.directive.ts”
@Component({
selector: 'app',
providers: [MessageService]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
app.component.ts

171.
import { Component } from ”@angular/core”
import { MessageDirective } from ”./message.directive.ts”
@Component({
selector: 'app',
directives: [MessageDirective]
template: `
<input [(ngModel)]=”message”>
<button (click)=“showMessage()”>Show Message</button>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
app.component.ts

172.
import { Component } from ”@angular/core”
import { MessageDirective } from ”./message.directive.ts”
@Component({
selector: 'app',
directives: [MessageDirective]
template: `
<message></message>
`
});
export class AppComponent {
message: string;
showMessage() {
alert(this.message);
}
constructor(MessageService _messageService) {
this.message = _messageService.message;
}
}
app.component.ts

173.
import { Component } from ”@angular/core”
import { MessageDirective } from ”./message.directive.ts”
@Component({
selector: 'app',
directives: [MessageDirective]
template: `
<message></message>
`
});
export class AppComponent {}
app.component.ts

174.
Service Message Show Me
The page at http://localhost/3000 says:
Service Message

175.
{demo}
Let’s Code

176.
an open source framework for building truly
native mobile apps with JavaScript. Use web
skills, like Angular and CSS, and get native UI
and performance on iOS and Android.
NativeScript is…

177.
NativeScript
delivers the promises
of “hybrid.”

178.
APENDIX

179.
Adding TypeScript
tns install typescript

180.
{demo}

181.
Common App Patterns
• Services
• An object that is responsible for getting and setting data
• Models
• Super dumb objects that define the structure of the data
• ViewModels
• AKA Controllers. Controls the state of the UI and performs when
changes are made to model objects.

182.
Angular 2

183.
Data binding with Angular
• {{ }} – still works!
• You can still use {N}'s standard binding…
• But you can do it even better.
• [] – Property binding
• One way.
• Like array notation in JavaScript. One way
• () – Event Binding
• When you want to bind to an event.
• Two Way – [(ngModel)]
• Almost always used with ngModel

184.
Extra Angular Goodies
• Dependency Injection
• Routing
• Components
• Pipes
• Services
• FAST

185.
Using Telerik Platform
Cloud-based tooling for NativeScript

186.
Why?
• Cloud based, zero setup
• Build for iOS from Windows
• Deploy to device without provisioning profiles
• Manage app properties faster

187.
AppBuilder

188.
Screen Builder

189.
Companion App

190.
{demo}

191.
Animations

192.
Animation basics
Animate:
• opacity
• backgroundColor
• translateX and translateY
• scaleX and scaleY
• rotate
Configure:
• target (UI element)
• duration (in ms)
• delay
• iterations
• curve

193.
Simple animation
var view = page.getViewById("myLabel");
view.animate({
translate: { x: 0, y: 100},
duration: 1000,
curve: enums.AnimationCurve.easeIn
});
• Animations can be
chained together
• Multiple
properties and
elements can be
animated
• Return a promise
that can be
canceled

194.
{demo}