Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan
-
Upload
tomek-sulkowski -
Category
Software
-
view
97 -
download
0
Transcript of Aplikacje mobilne z Angular 2 i NativeScript @ng-poznan
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