aplikacje mobilne z Angular 2 i Na+veScript

Tomek Sułkowski@sulco

Tomek SułkowskiSENIOR FRONTEND DEV.IT TRAINER

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

mobile developmentopcje?

mobile development: opcje

1. na<ve 2. hybrid 3. web

progressive web apps

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

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 ❌ ✔ ✔ ✔

mobile development: opcje

mobile development: opcje

4. hybrid na<ve

Na#veScript

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

Na<veScript

Na#veScript is a run<me.

App Code

Na+veScript modules

Na+veScript run+me

Android iOS

Na<veScript

const button = new UIButton();

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

Na<veScript

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

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

if ( )

else if ( )

"Ok, stwórzmy plik!"

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

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

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>

Na<veScript

Layout w Na#veScript

<FlexboxLayout> <AbsoluteLayout> <DockLayout>

Na<veScript

Layout w Na#veScript

<GridLayout> <StackLayout> <WrapLayout>

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

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

+ =

Angular w ~10 minut

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

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

Demo <me!

Dzięki!

find me on

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