The slides for the presentation I've given an ngSummit in Wrocław.

1. Na#veScript
mobile apps. no webview.
Tomek Sułkowski
@sulco

2. Tomek Sułkowski
FRONTEND DEV.
IT TRAINER
medium.com/@tomsu twitter.com/sulco http:!//frontend.coach

3. The idea
Scien&fic breakthrough - an innova&on
wai7ng to be discovered in the adjacent
possible of your field
Cal Newport , "So Good They Can't Ignore You"

4. mobile development
op7ons?

5. mobile development: the op7ons
1. na7ve 2. hybrid 3. web
progressive
web apps

6. mobile development: opcje
na7ve hybrid web hybrid na7ve
full API support ✔ ± ❌ ✔
full data support ✔ ✔ ❌ ✔
full GUI capabili7es ✔ ❌ ❌ ✔
performant GUI ✔ ❌ ❌ ✔
app stores discovery ✔ ✔ ❌ ✔
in-app purchases ✔ ✔ ❌ ✔
common programming language ❌ ✔ ✔ ✔
one IDE ❌ ✔ ✔ ✔
code sharing ❌ ✔ ✔ ✔

7. mobile development: opcje

8. mobile development: the op7ons
4. hybrid na7ve
Na#veScript

9. Na7veScript
Na&veScript is a framework for building na7ve iOS
and Android apps using JavaScript and CSS.
Na&veScript renders UIs with the na&ve pla@orm’s
rendering engine (no WebViews) resul7ng in na7ve-
like performance and UX.
hybrid
native

10. Na7veScript
Na&veScript is a run7me.
App Code
Na#veScript modules
Na#veScript run#me
Android iOS

11. Na7veScript
const button = new UIButton();
button.setTitleForState(
'Button title', !// JS string to NSString conversion
UIControlStateNormal
);
!// NSString to JS string conversion
console.log(button.titleLabel.text);

12. Na7veScript
let file = new java.io.File( path );
let fileManager = NSFileManager.defaultManager();
fileManager.createFileAtPathContentsAttributes( path );
if ( )
else if ( )
"Ok, lets create a file!"

14. Na7veScript
import { File } from 'file-system';
Na&veScript modules
- provide an abstrac7on layer over the na7ve APIs
"Ok, so lets create a file"
let file = new File( path );
Seal Of Approval

15. Na7veScript
import * as http from 'http';
"And what about, say, ge<ng something from a server?"
http.getJSON( 'https:!//api.myservice.com' )
.then(result !=> { !/*!!...
Seal Of Approval
Na&veScript modules
- provide an abstrac7on layer over the na7ve APIs

16. Na7veScript
Na&veScript templates
<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>

17. Na7veScript
<GridLayout><StackLayout> <WrapLayout>
Na&veScript layouts

18. Na7veScript
Na&veScript layouts
<FlexboxLayout> <AbsoluteLayout> <DockLayout>

19. Na7veScript
StackLayout Button.btn.is-primary[testAttr] {
background-color: lime;
font-size: 12;
}
<StackLayout>
<WrapLayout>
<Button class="btn is-primary"
testAttr="flower">!</Button>
!</WrapLayout>
!</StackLayout>
Na&veScript styling
- basically a CSS

20. Na7veScript
StackLayout Button.btn.is-primary[testAttr] {
background-color: lime;
font-size: 12;
}
<StackLayout>
<WrapLayout>
<Button class="btn is-primary"
testAttr="flower">!</Button>
!</WrapLayout>
!</StackLayout>
Na&veScript styling
- basically a CSS

21. + =

22. ABC of Angular
1. TypeScript
2. Decorators for meta-data
3. Component architecture
4. One-way data binding
5. Services & dependency injec7on
6. DOM independent

23. ABC of Angular
1. TypeScript
2. Decorators for meta-data
3. Component architecture
4. One-way data binding
5. Services & dependency injec7on
6. DOM independent

24. Demo 7me!

25. Thanks!
find me on
twitter.com/sulco
medium.com/@tomsu
http:!//frontend.coach