Mobile development with NativeScript & Angular

Presented by Matt Wilson at Mobile Dorset - Feb 2017.

Video: https://youtu.be/1BMnq-FPVBw
Slides: https://speakerdeck.com/mattwilson1024/mobile-development-with-nativescript-and-angular
Code: https://github.com/mattwilson1024/mobile-dorset-nativescript

Transcript

1. Mobile development with NativeScript & Angular Matt Wilson @mattwilson1024
2. Matt Wilson @mattwilson1024 Web developer at Welcome
3. Mobile Development Approaches 3
4. Mobile Development Approaches Mobile App Native Java (Android) Swift / Obj-C (iOS) C# (Windows) Xamarin Xamarin.Android Xamarin.iOS Xamarin.Forms Mobile-First Web App Progressive Web App Web View Cordova Ionic Framework7 Onsen UI Web to Native React Native NativeScript with Javascript with Angular 4
5. NativeScript Stack 5
6. NativeScript ¨  Cross Platform framework for building native Android & iOS apps ¨  Web technologies but not a Web View ¨  Two Flavours: ¤  NS with Javascript ¤  NS with Angular & Typescript 6
7. Angular ¨  Powerful framework for building apps for the web and mobile ¨  Provides a framework for many of the things needed to build a complex app: ¤  Component driven UI ¤  Data Binding ¤  Routing ¤  State management ¤  HTTP services ¤  Forms 7
8. Typescript ¨  Typed superset of Javascript, adding: ¤  Static type checking ¤  Modern ECMAScript language features ¤  Code analysis ¤  Enhanced IDE Support ¨  Compiles compiles to plain Javascript (ES5) 8
9. Firebase ¨  Platform / services for mobile & web apps ¨  Tools & Infrastructure for: ¤  Real-time database ¤  Authentication ¤  Storage ¤  Static web hosting ¤  Push Notifications ¤  Crash Reporting ¤  Analytics ¤  and more… 9
10. Getting Started 10
11. Prerequisites ¨  An editor (e.g. VS Code) ¨  Node/NPM ¨  NativeScript CLI (installed via NPM) ¨  For Android: Android SDK ¨  For iOS: Mac + Xcode + Dev Tools ¨  For Firebase: a Google account 11
12. Developer Experience ¨  Single codebase for both platforms ¨  Auto-completion ¨  Live reloading ¨  Debugging ¤  Chrome dev tools (new in 2.5) ¤  VS Code integration ¤  Stack traces etc. via debugger 12
13. Creating a project ¨  tns create myApp --ng ¨  tns run ios / tns run android ¨  tns debug ios / tns debug android 13
14. Mobile Dorset App 14
15. A tour of NativeScript 15
16. Web Technologies ¨  Write apps with web technologies: ¤  XML (views) ¤  Javascript / Typescript (functionality) ¤  CSS (styling) ¨  NPM based workflow ¤  Runtime dependencies (e.g. Moment, Font Awesome) ¤  Development dependencies ¤  Scripts 16
17. Components ¨  App is built from a tree of components ¨  Components have: ¤  Inputs (data) ¤  Outputs (events) ¨  Components have a well defined lifecycle: ¤  onInit ¤  onChanges ¤  onDestroy ¤  and others… 17
18. Components export class TopicComponent {
 constructor() {}
 } 18
19. Components import {Component} from '@angular/core’; 
 @Component({
 selector: "Topic",
 templateUrl: "components/event-details/topic/topic.html",
 styleUrls: ["components/event-details/topic/topic.css"]
 })
 export class TopicComponent {
 constructor() {}
 } 19
20. Components import {Component, Input, Output, EventEmitter} from '@angular/core’; import Topic from '../../../models/topic.model';
 
 @Component({
 selector: "Topic",
 templateUrl: "components/event-details/topic/topic.html",
 styleUrls: ["components/event-details/topic/topic.css"]
 })
 export class TopicComponent {
 @Input() topic: Topic;
 @Output() vote: EventEmitter<Topic> = new EventEmitter<Topic>();
 
 constructor() {}
 } 20
21. Components import {Component, Input, Output, EventEmitter} from '@angular/core’; import Topic from '../../../models/topic.model';
 
 @Component({
 selector: "Topic",
 templateUrl: "components/event-details/topic/topic.html",
 styleUrls: ["components/event-details/topic/topic.css"]
 })
 export class TopicComponent {
 @Input() topic: Topic;
 @Output() vote: EventEmitter<Topic> = new EventEmitter<Topic>();
 
 constructor() {}
 
 topicTapped() {
 this.vote.emit(this.topic);
 }
 } 21
22. Views / Templating Define Views with XML <Button
 text="Launch Missiles"
 (tap)="launch()">
 </Button> 22
23. Views / Templating Define Views with XML Components are translated into native UI <Button
 text="Launch Missiles"
 (tap)="launch()">
 </Button> è android.widget.button è UIButton 23
24. Views / Templating No Web Views 24
25. Layouts: Stack Layout <StackLayout orientation="vertical”>
 <Label text="Label 1” backgroundColor="red"></Label>
 <Label text="Label 2” backgroundColor="green"></Label>
 <Label text="Label 3” backgroundColor="blue"></Label>
 <Label text="Label 4” backgroundColor="yellow"></Label> 
 </StackLayout> 25
26. Layouts: Wrap Layout <WrapLayout orientation="horizontal" backgroundColor="lightgray"> 
 <Label text="Label 1" backgroundColor="red"></Label>
 <Label text="Label 2" backgroundColor="green"></Label>
 <Label text="Label 3" backgroundColor="blue"></Label>
 <Label text="Label 4"backgroundColor="yellow"></Label> 
 </WrapLayout> 26
27. Layouts: Grid Layout <GridLayout columns="*,2*" rows="2*,3*” backgroundColor="lightgray”> 
 <Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
 <Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
 <Label text="Label 3" col="0" row="1" backgroundColor="blue"></Label>
 <Label text="Label 4" col="1" row="1" backgroundColor="yellow"></Label> 
 </GridLayout> 27
28. Layouts: Absolute Layout <AbsoluteLayout width="210" height="210" backgroundColor="lightgray">
 <Label text="10, 10" left="10" top="10” backgroundColor="red"></Label>
 <Label text="110, 10" left="110" top="10” backgroundColor="green"></Label>
 <Label text="110, 110" left="110" top="110” backgroundColor="blue"></Label>
 <Label text="10, 110” left="10" top="110” backgroundColor="yellow"></Label>
 </AbsoluteLayout> 28
29. Layouts: Dock Layout <DockLayout backgroundColor="lightgray" stretchLastChild="false">
 <Label text="left" dock="left” backgroundColor="red"></Label>
 <Label text="top" dock="top" backgroundColor="green"></Label>
 <Label text="right” dock="right" backgroundColor="blue"></Label>
 <Label text="bottom" dock="bottom" backgroundColor="yellow"></Label> 
 </DockLayout> 29
30. Data Binding Structural <Car *ngFor="let car of cars”> </Car> 30
31. Data Binding Structural Inputs <Car *ngFor="let car of cars” [model]=“car”> </Car> 31
32. Data Binding Structural Inputs Outputs <Car *ngFor="let car of cars” [model]=“car” (tap)=“beep()”> </Car> 32
33. Styling ¨  Similar to styling a web app ¨  Subset of CSS ¨  Can specify per-platform styles ¤  (foo.android.css / foo.ios.css) Button { background-color: red; }
 
 .title { font-size: 32; }
 
 #loginButton { margin: 20; } 33
34. Routing & Navigation ¨  NativeScript provides a layer on top of Angular’s router ¨  Specify which components mount for each route: export const routes = [ { path: "", redirectTo: "/events", pathMatch: "full" }, { path: "login”, component: LoginPageComponent }, { path: "events”, component: EventsPageComponent, canActivate: [AuthGuard] }, { path: "events/:id", component: EventDetailsPageComponent, canActivate: [AuthGuard] }
 ]; 34
35. Routing & Navigation ¨  Navigate using RouterExtensions: import { RouterExtensions } from 'nativescript-angular’; … export class EventListComponent { @Input() events: Event[]; constructor(private routerExtensions: RouterExtensions) { } onItemTap(event) { this.routerExtensions.navigate(["/events", event.id]); } } 35
36. Routing & Navigation ¨  RouteGuard – handy for auth: @Injectable()
 export class AuthGuard implements CanActivate {
 constructor(private router: Router) { }
 
 canActivate() {
 if (UserService.isLoggedIn()) {
 return true;
 } else {
 this.router.navigate(["/login"]);
 return false;
 }
 }
 } 36
37. Lifecycles Spoilt for choice… ¨  1. Component lifecycle ¨  2. Application events ¨  3. Platform specific events 37
38. Lifecycles – 1. Component lifecycle ¨  Angular lifecycle hooks ¤  onInit / onDestroy ¤  onChanges ¤  and more… @Component({ … })
 export class MyComponent implements OnInit, OnChanges {
 
 ngOnInit() {
 // do something
 }
 
 ngOnChanges(changes: SimpleChanges) {
 // changes.prop contains the old and the new value...
 }
 } 38
39. Lifecycles – 2. Application Events ¨  Unified events for: ¤  launch / exit ¤  suspend / resume ¤  lowMemory / uncaughtError application.on(application.suspendEvent, function (args) {
 if (args.android) {
 // For Android applications, // args.android is an android activity class.
 console.log("Activity: " + args.android);
 } else if (args.ios) {
 // For iOS applications, // args.ios is UIApplication.
 console.log("UIApplication: " + args.ios);
 }
 }); 39
40. Lifecycles – 3. Platform Specific ¨  Max control via Android / iOS specific events: ¤  activityCreated / activityDestroyed ¤  activityPaused / activityResumed ¤  activityBackPressed if (application.android) { 
 application.android.on( application.AndroidApplication.activityCreatedEvent, function (args) {
 // do something } ); 
 } 40
41. Modules & Native Capability 41
42. Modules & Native Capability ¨  NativeScript provides a set of modules which implement device specific features like the camera ¨  Modules provide: ¤  A common interface ¤  An Android implementation ¤  An iOS implementation 42
43. Pros & Cons 43
44. Pros & Cons ¨  Not the easiest to setup environment ¨  Lifecycle considerations could get complex ¨  Limited CSS capabilities ¨  Cross platform ¨  High code reuse (Android – iOS) ¨  Potential for code reuse with web ¨  Great if you have web development knowledge ¨  Flexibility to use native APIs where necessary ¨  Good tooling & debugging Cons Pros 44
45. Resources 45
46. Resources ¨  VS Code + extensions: ¤  Nativescript ¤  Nativescript & Angular 2 Snippets ¤  Auto Close Tag ¤  Auto Rename Tag ¤  Bookmarks ¨  NativeScript Docs ¤  https://docs.nativescript.org 46
47. More Resources ¨  NativeScript Image Builder ¤  http://nsimage.nativescript.rocks/ ¨  Nativescript Plugins Repository ¤  http://plugins.nativescript.org/ ¨  NativeScript Theme Builder ¤  http://www.nativescriptthemebuilder.com/ 47
48. Any questions? Matt Wilson @mattwilson1024 Thanks for listening 48