NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
5 likes3,032 views
This document provides an overview of NativeScript, an open-source framework for building cross-platform mobile applications using JavaScript. It covers core concepts, architecture, and practical development strategies, including building, debugging, and styling apps. The workshop agenda highlights introductory topics to advanced functionality, such as data binding, navigating views, and integrating with Angular 2.
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-70-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-101-320.jpg)
![CSS
Convention:
app.css <-- Global styles
[viewName].css <-- View styles
[viewName].[platform].css](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-105-320.jpg)
![const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppCompon3ent);
app.js](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-147-320.jpg)
![const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.js](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-149-320.jpg)
![const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-150-320.jpg)
![import { Component } from ”@angular/core”
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-151-320.jpg)
![import { Component } from ”@angular/core”
@Component({
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-152-320.jpg)
![import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-153-320.jpg)
![import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<h1>Root Component</h1>
`
});
angular
.module('app', [])
.component('app', AppComponent);
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-156-320.jpg)
![import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-165-320.jpg)
![[ value ] or {{ value }} = One way binding from
class to view](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-166-320.jpg)
![import { Component } from ”@angular/core”
@Component({
selector: 'app',
template: `
<input [value]=”message”>
`
});
export class AppComponent {
message: 'Root Component'
}
app.component.ts](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-167-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-168-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-171-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-172-320.jpg)
![[(ngModel)] = Two way binding](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-173-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-178-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-179-320.jpg)
![@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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-180-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-183-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-185-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-186-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-187-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-188-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-189-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-190-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-191-320.jpg)
![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](https://image.slidesharecdn.com/nativescript-workshop-v2-oct2016-161031141629/85/NativeScript-Cross-Platform-Mobile-Apps-with-JavaScript-and-Angular-204-320.jpg)
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
- 1. NativeScript Cross-platform mobile apps with JavaScript
- 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.”
- 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
- 27. Demo available in the app stores in May Rich, animated, “no compromise” native UI (with shared UI code) 1
- 29. Maximum code and skill reusability 3 Video credit: Nathan Walker, {N} community member
- 30. How does NativeScript work? Under the covers
- 32. Generated at build time for OS & 3rd party native libraries
- 36. Runs on V8 JavaScript VM Runs on JavaScriptCore VM
- 38. 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).
- 39. Example: NativeScript file module
- 42. Putting it all together Style with CSSDefine UI with XML Logic with JavaScript
- 44. “Hello World”
- 45. Two ways to use NativeScript 1) 2)
- 46. 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
- 47. 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
- 48. Telerik Platform Powerful visual tooling, cloud builds and more for NativeScript app developers.
- 49. NativeScript CLI requirements https://github.com/nativescript/nativescript-cli#system-requirements Xcode, Xcode CLI tools, iOS SDK JDK, Apache Ant, Android SDK $ tns doctor
- 50. 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
- 51. 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}
- 52. Starting a new project
- 53. {demo}
- 54. Running on iOS or $ tns emulate ios
- 55. Running on Android or $ tns emulate android
- 56. A better Android emulator Visual Studio Android Emulator Genymotion
- 57. 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
- 59. app.js
- 60. Defining Views
- 61. Pages • XML markup structure • Elements (e.g. <Page>, <Label>) are NativeScript modules
- 63. Layouts Absolute Dock Grid Stack Wrap
- 65. 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”
- 66. Native UI widgets Native API {N} Module button android.widget.Button UIButton
- 69. {demo}
- 70. 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
- 71. 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.
- 72. {demo}
- 73. 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
- 74. 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
- 75. {demo}
- 76. Debugging
- 77. “If debugging is the process of removing software bugs, then programming must be the process of putting them in.” - Edsger Dijkstra
- 78. Debugging Strategies • Debug by alert (no really) • Debug by console.log • Debug by Developer Tools • Debug by IDE • Visual Studio • Visual Studio Code
- 79. Debug By Alert
- 80. {demo}
- 81. 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
- 82. Telerik UI for NativeScript npm install nativescript-telerik-ui --save • Add powerful ListView, SlideDrawer to apps • Free native widgets • Support available with PRO license
- 83. 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
- 85. {demo}
- 86. Navigating Views
- 87. Basics • Topmost frame is root- level container • Facilitates navigation between views "topmost frame" var frameModule = require("ui/frame"); var topmost = frameModule.topmost();
- 88. 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();
- 89. 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
- 90. {demo}
- 92. Data binding
- 93. {{ newTodo }}
- 94. {demo}
- 96. 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
- 97. {{ todos }} {{ $value }}
- 98. {demo}
- 99. 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
- 100. 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
- 101. 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
- 102. {{ total, total +' items left' }}
- 103. {demo}
- 104. Basic Styling with CSS
- 105. CSS Convention: app.css <-- Global styles [viewName].css <-- View styles [viewName].[platform].css
- 106. 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
- 107. Supported Selectors • Type • button { color: red; } • Class • .mybutton { color: green; } • ID • #myButton { color: #FFF; }
- 108. {demo}
- 109. 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'; }
- 110. {demo}
- 111. Sass & LESS • Use Sass or LESS syntax • Auto-compiled $ tns install sass OR $tns install less
- 112. Pre-lunch Wrap-up
- 114. 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
- 115. Lunch Break Resume @ 1PM
- 116. 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)
- 118. Adoption trends Warm the brains-up after lunch
- 119. 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)
- 120. • 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
- 122. Developer Comments
- 123. Join the growing NativeScript community on Slack bit.ly/nativescript-slack
- 125. Plugin Ecosystem
- 126. Plugin Ecosystem Reusable libraries IDEs Verified Plugins
- 129. Modulus Sachse Construction Day Care This or That! PocketSmith
- 130. “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
- 131. Angular 2 & NativeScript
- 134. One framework. Mobile & desktop.
- 135. Mobile
- 136. Responsive PWA (Progressive Web Apps) Native Mobile
- 137. Why Angular 2?
- 138. Template < ... > Component { ... } Metadata Directive { ... } Injector Service A Service B
- 141. An Intro to Angular 2
- 144. Template < ... > Component { ... } Metadata Directive { ... } Injector Service A Service B
- 145. Template < ... > Component { ... } Metadata
- 146. <!DOCTYPE html> <html> <head> <base href="/"> </head> <body ng-app=”app"> <app>Loading...</app> <script src="bundle.js"></script> </body> </html> index.html
- 147. const AppComponent = { template: ` <h1>Root Component</h1> ` }; angular .module('app', []) .component('app', AppCompon3ent); app.js
- 148. Root Component
- 149. const AppComponent = { template: ` <h1>Root Component</h1> ` }; angular .module('app', []) .component('app', AppComponent); app.js
- 150. const AppComponent = { template: ` <h1>Root Component</h1> ` }; angular .module('app', []) .component('app', AppComponent); app.component.ts
- 151. import { Component } from ”@angular/core” const AppComponent = { template: ` <h1>Root Component</h1> ` }; angular .module('app', []) .component('app', AppComponent); app.component.ts
- 152. import { Component } from ”@angular/core” @Component({ template: ` <h1>Root Component</h1> ` }); angular .module('app', []) .component('app', AppComponent); app.component.ts
- 153. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>Root Component</h1> ` }); angular .module('app', []) .component('app', AppComponent); app.component.ts
- 154. <!DOCTYPE html> <html> <head> <base href="/"> </head> <body ng-app=”app"> <app>Loading...</app> <script src="bundle.js"></script> </body> </html> index.html
- 155. <!DOCTYPE html> <html> <head> <base href="/"> </head> <body> <app>Loading...</app> <script src="bundle.js"></script> </body> </html> index.html
- 156. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>Root Component</h1> ` }); angular .module('app', []) .component('app', AppComponent); app.component.ts
- 157. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>Root Component</h1> ` }); export class AppComponent {} app.component.ts
- 158. Root Component
- 159. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>Root Component</h1> ` }); export class AppComponent {} app.component.ts
- 160. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>Root Component</h1> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 161. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>{{ message }}</h1> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 162. Root Component
- 163. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <h1>{{ message }}</h1> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 164. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <input value=”{{ message }}”> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 165. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <input [value]=”message”> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 166. [ value ] or {{ value }} = One way binding from class to view
- 167. import { Component } from ”@angular/core” @Component({ selector: 'app', template: ` <input [value]=”message”> ` }); export class AppComponent { message: 'Root Component' } app.component.ts
- 168. 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
- 169. Root Component Show Me The page at http://localhost/3000 says: Root Component
- 170. ( event ) = Binds an event to a function
- 171. 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
- 172. 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
- 173. [(ngModel)] = Two way binding
- 175. export class MessageService { message: string = ”Service Message” } message.service.ts
- 176. import { Injectable } from ”@angular/core” export class MessageService { message: string = ”Service Message” } message.service.ts
- 177. import { Injectable } from ”@angular/core” @Injectable() export class MessageService { message: string = ”Service Message” } message.service.ts
- 178. 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
- 179. 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
- 180. @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
- 181. Service Message Show Me The page at http://localhost/3000 says: Service Message
- 182. Directives
- 183. 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
- 184. import { MessageService } from ”./message.service.ts” export class MessageDirective { } message.directive.ts
- 185. 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
- 186. 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
- 187. 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
- 188. 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
- 189. 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
- 190. 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
- 191. 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
- 192. Service Message Show Me The page at http://localhost/3000 says: Service Message
- 193. {demo} Let’s Code
- 194. 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…
- 195. NativeScript delivers the promises of “hybrid.”
- 197. APENDIX
- 200. Adding TypeScript tns install typescript
- 201. {demo}
- 202. 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.
- 203. Angular 2
- 204. 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
- 205. Extra Angular Goodies • Dependency Injection • Routing • Components • Pipes • Services • FAST
- 206. Using Telerik Platform Cloud-based tooling for NativeScript
- 208. Why? • Cloud based, zero setup • Build for iOS from Windows • Deploy to device without provisioning profiles • Manage app properties faster
- 209. AppBuilder
- 210. Screen Builder
- 211. Companion App
- 212. {demo}
- 213. Animations
- 214. Animation basics Animate: • opacity • backgroundColor • translateX and translateY • scaleX and scaleY • rotate Configure: • target (UI element) • duration (in ms) • delay • iterations • curve
- 215. 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
- 216. {demo}