Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

25
aplikacje mobilne z Angular 2 i Na+veScript Tomek Sułkowski @sulco

Transcript of Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Page 1: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

aplikacje mobilne z Angular 2 i Na+veScript

Tomek Sułkowski@sulco

Page 2: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Tomek SułkowskiSENIOR FRONTEND DEV.IT TRAINER

twitter.com/sulco medium.com/@tomsu http: //frontend.coach

Page 3: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

mobile developmentopcje?

Page 4: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

mobile development: opcje

1. na<ve 2. hybrid 3. web

progressive web apps

Page 5: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

na<ve hybrid web

dostęp do pełnego API ✔ ± ❌

dostęp do danych ✔ ✔ ❌

pełne możliwości GUI ✔ ❌ ❌

wydajność GUI ✔ ❌ ❌

wyszukiwalność w App Store ✔ ✔ ❌

in-app purchases ✔ ✔ ❌

wspólny język programowania ❌ ✔ ✔

jedno IDE ❌ ✔ ✔

code sharing ❌ ✔ ✔

mobile development: opcje

Page 6: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

mobile development: opcje

na<ve hybrid web hybrid na<ve

dostęp do pełnego API ✔ ± ❌ ✔

dostęp do danych ✔ ✔ ❌ ✔

pełne możliwości GUI ✔ ❌ ❌ ✔

100% wydajne GUI ✔ ❌ ❌ ✔

wyszukiwalność w App Store ✔ ✔ ❌ ✔

in-app purchases ✔ ✔ ❌ ✔

wspólny język programowania ❌ ✔ ✔ ✔

jedno IDE ❌ ✔ ✔ ✔

code sharing ❌ ✔ ✔ ✔

Page 7: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

mobile development: opcje

Page 8: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

mobile development: opcje

4. hybrid na<ve

Na#veScript

Page 9: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

Na#veScript is a framework for building na<ve iOS and Android apps using JavaScript and CSS.

Na#veScript renders UIs with the na#ve pla6orm’s rendering engine (no WebViews) resul<ng in na<ve-like performance and UX.

hybrid

native

Page 10: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

Na#veScript is a run<me.

App Code

Na+veScript modules

Na+veScript run+me

Android iOS

Page 11: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

const button = new UIButton();

button.setTitleForState( 'Button title', // konwersja string na NSString UIControlStateNormal ); // konwersja NSString na string console.log(button.titleLabel.text);

Page 12: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

let file = new java.io.File( path );

let fileManager = NSFileManager.defaultManager(); fileManager.createFileAtPathContentsAttributes( path );

if ( )

else if ( )

"Ok, stwórzmy plik!"

Page 13: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan
Page 14: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

import { File } from 'file-system';

Moduły Na#veScript - warstwa abstrakcji na natywnym api

"Ok, to stwórzmy ten plik"

let file = new File( path );

Seal Of Approval

Page 15: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

import * as http from 'http';

Moduły Na#veScript - warstwa abstrakcji na natywnym api

"A jakbym chciał coś np. pobrać z serwera?"

http.getJSON( 'https: //api.myservice.com' ) .then(result => { /* ...

Seal Of Approval

Page 16: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

Szablony w Na#veScript

<StackLayout> <TextField hint="Email Address" keyboardType="email" autocorrect="false"> </TextField> <TextField hint="Password" secure="true"> </TextField>

<Button text="Sign in"> </Button> <Button text="Sign up for Groceries"> </Button> </StackLayout>

Page 17: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

Layout w Na#veScript

<FlexboxLayout> <AbsoluteLayout> <DockLayout>

Page 18: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

Layout w Na#veScript

<GridLayout> <StackLayout> <WrapLayout>

Page 19: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

StackLayout Button.btn.is-primary[testAttr] { background-color: lime; font-size: 12; }

<StackLayout> <WrapLayout> <Button class="btn is-primary" testAttr='flower'> </Button> </WrapLayout> </StackLayout>

Stylowanie Na#veScript - prawie jak CSS

Page 20: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Na<veScript

StackLayout Button .btn.is-primary[testAttr] { background-color: lime; font-size: 12; }

<StackLayout> <WrapLayout> <Button class="btn is-primary" testAttr='flower'> </Button> </WrapLayout> </StackLayout>

Stylowanie Na#veScript - prawie jak CSS

Page 21: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

+ =

Angular w ~10 minut

Page 22: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

ABC Angular

1. TypeScript

2. Meta-informacje w dekoratorach

3. Architektura komponentowa

4. One-way data binding

5. Usługi i dependency injec.on

6. Niezależność od DOM

Page 23: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

ABC Angular

1. TypeScript

2. Meta-informacje w dekoratorach

3. Architektura komponentowa

4. One-way data binding

5. Usługi i dependency injec.on

6. Niezależność od DOM

Page 24: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Demo <me!

Page 25: Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan

Dzięki!

find me on

twitter.com/sulco medium.com/@tomsu http: //frontend.coach