Page 1

Building Cross Platform Native Mobile Applications with Angular & NativeScript DARIUASZ KALBARCZYK

infoShare 2018


Who am I?

www.helion.pl/autorzy/dariusz-kalbarczyk

!2

@ngKalbarczyk


#ngPolandConf #jsPolandConf

!3

@ngKalbarczyk


!4

@ngKalbarczyk


#bass #metal

#r&r

!5

@ngKalbarczyk


What is Angular? PLATFORM for creating SPA applications ONE FRAMEWORK WEB applications Mobile applications Application development using HTML, CSS and TYPESCRIPT

!6

@ngKalbarczyk


Single page application

ANGULAR helps us to create SPA applications Is about updating parts of a web page, without reloading the whole page REST-ful API

!7

@ngKalbarczyk


angular.io

!8

@ngKalbarczyk


Where to start? Visual Studio Code Nodejs Angular CLI NativeScript

!9

@ngKalbarczyk


Visual Studio Code

!10

@ngKalbarczyk


Snippets

!11

@ngKalbarczyk


nodejs.org node -v npm -v

!12

@ngKalbarczyk


cli.angular.io

!13

@ngKalbarczyk


NativeScripts CLI

!14

@ngKalbarczyk


typescriptlang.org

!15

@ngKalbarczyk


TypeScript

!16

@ngKalbarczyk


nativescript.org

Sebastian Witalec @sebawita

!17

@ngKalbarczyk


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

!18

@ngKalbarczyk


!19

@ngKalbarczyk


This is not PhoneGap, Cordova Or Ionic

Real native components

No DOM to manipulate

No HTML

!20

@ngKalbarczyk


!= •

No DOM

!= No cross compilation •

!= Direct access to native APIs in JS •

!21

@ngKalbarczyk


NativeScript vs Ionic

!22

@ngKalbarczyk


This is not Xamarin No cross compailing 100% direct access to Native APIs No .NET

!23

@ngKalbarczyk


Architecture Options

!24

@ngKalbarczyk


!25

@ngKalbarczyk


First-class Angular and TypeScript support

+

=

!26

@ngKalbarczyk


NativeScript with Angular

You can fully reuse skills and code from the web to build beautiful, high performance native mobile apps without web views.Â

!27

@ngKalbarczyk


iOS

Android

Web

!28

@ngKalbarczyk


One UI syntax for all

!29

@ngKalbarczyk


Example: NativeScript file module

!30

@ngKalbarczyk


HTTP module example

!31

@ngKalbarczyk


GET GET 200 OK Client

Serwer

4xx Error 5xx Error

!32

@ngKalbarczyk


POST

POST { „name":"InfoShare" } Client

Serwer

201 Created

!33

@ngKalbarczyk


Abstraction Layer

The big picture

Implementation

Native iOS call

Native Android call

Destination

XMLHttpRequest <NS Module>

iOS App

Android App

!34

@ngKalbarczyk


The bigger picture Abstraction Layer

HTTP <Angular Component>

Implementation

XMLHttpRequest <Browser>

Native iOS call

Native Android call

Ajax call

Destination

XMLHttpRequest <NS Module>

iOS App

Android App

Web App

!35

@ngKalbarczyk


CSS

!36

@ngKalbarczyk


https://docs.nativescript.org/ui/styling#supported-css-properties

!37

@ngKalbarczyk


Accessing NativeScript component properties with CSS

StackLayout { orientation: horizontal; }

!38

@ngKalbarczyk


The diï¬&#x20AC;erence is in the UI

Web UI != Mobile UI

!39

@ngKalbarczyk


Native Layouts Absolute

Dock

Grid

!40

Stack

Wrap

@ngKalbarczyk


Application Architecture - Components

Components are the main building block of Angular applications. They define the application UI and the logic that controls it.

!41

@ngKalbarczyk


Components import { Component } from '@angular/core'; @Component({ Decorator selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; Metadata }

!42

@ngKalbarczyk


SELECTOR import { Component } from '@angular/core'; <app-root></app-root>

@Component({

selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

!43

@ngKalbarczyk


Template import { Component } from '@angular/core'; Template

@Component({ selector: 'app-root',

templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

!44

@ngKalbarczyk


Styles import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html',

styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

!45

@ngKalbarczyk


Class import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })

export class AppComponent { title = 'InfoShare App'; }

!46

A class that contains logic

@ngKalbarczyk


Component import {Component} from "@angular/core"; @Component({ selector: "my-app", template: ` <StackLayout orientation="vertical"> <Label [text]="message" (tap)="onTap()"></Label> </StackLayout>` }) export class AppComponent { public message: string = "Hello, Angular!"; public onTap() { this.message = "OHAI"; } }

!47

@ngKalbarczyk


Data Binding Data binding is a mechanism for connecting the parts of the view (template) with parts of the component class. There are several forms of data binding in an Angular app.

!48

@ngKalbarczyk


Let's examine <StackLayout orientation="vertical"> <Label [text]="message"></Label> <Button text="tap me" (tap)="onTap()"></Button> <TextField [(ngModel)]="message"></TextField> </StackLayout>

!49

@ngKalbarczyk


[text]="message" Binds the text property of the Label to the message property of the component.

Whenever the message is updated the label will be updated as well.

This kind of binding is called â&#x20AC;&#x153;one-way bindingâ&#x20AC;? - the data flows in one direction from the component to the view.

!50

@ngKalbarczyk


(tap)="onTap()" Means that when the button is tapped the onTap method in the component should be called.

This kind of binding is called â&#x20AC;&#x153;event bindingâ&#x20AC;? here the data flows from the view to the component.

!51

@ngKalbarczyk


[(ngModel)]="message" This is an example of â&#x20AC;&#x153;two-way bindingâ&#x20AC;?.

When the user types something in the TextField - the message property of the component will be changed and vice versa - if your code changes the message property - the UI will be updated.

Data flows in both directions, thus the name.

!52

@ngKalbarczyk


Directives Directives allow you to create and attach behavior to the visual tree. There are three kinds of directives: 1. Components - They are actually directives which have their own template.

2. Structural Directives - The most commonly used structural directives are *ngIf and *ngFor

3. Attribute Directive - One of the most commonly used attribute directives is ngClass

When it comes to NativeScript specifics - there are again almost no differences as far as directives are concerned. You are free to use all the built-in Angular directives; youâ&#x20AC;&#x2122;re also free to write your own.

!53

@ngKalbarczyk


NgForOf <li *ngFor="let person of people"> {{ person.name }} </li> class ExampleComponent { people: any[ ] = [ { "name": â&#x20AC;&#x17E;Angelika" }, { "name": "Oskar" },

!54

@ngKalbarczyk


Play and Try NativeScript on Your Device â&#x20AC;&#x201C; {N} Playground

!55

@ngKalbarczyk


!56

@ngKalbarczyk


DEMO

!57

@ngKalbarczyk


Where to Find Your Inspiration?

NOVEMBER 16, 2018 WARSAW

NOVEMBER 15, 2018 WARSAW

!58

@ngKalbarczyk


Thank You ngKalbarczyk ngKalbarczyk dKalbarczyk darek@ngpoland.pl

!59

@ngKalbarczyk

Building Cross Platform Native Mobile Applications with Angular & NativeScript - InfoShare 2018  

Building Cross Platform Native Mobile Applications with Angular & NativeScript

Building Cross Platform Native Mobile Applications with Angular & NativeScript - InfoShare 2018  

Building Cross Platform Native Mobile Applications with Angular & NativeScript

Advertisement