O tworzeniu rozwiązań mobilnych z punktu widzenia front-end dewelopera. Omówienie istniejących rozwiązań oraz głębsza analiza biblioteki NativeScript wraz z demem. Demo #1: https://github.com/pawelkondraciuk/nativescript-hello-world-demo-1 Demo #2: https://github.com/pawelkondraciuk/sample-groceries-demo-2

1. Cześć!

3. Jak zostać mobile
deweloperem w 1 dzień
Paweł Kondraciuk <pawel@codequest.com>

4. „A komu to
potrzebne?”

5. via: http://www.lukew.com/ff/entry.asp?1954

6. via: http://www.lukew.com/ff/entry.asp?1954

7. Mobile czy Web?
Mobile i Web
Mobile czy Web?

8. Responsywna strona
• Wymagany dostęp do internetu
• Ograniczony dostęp do
funkcjonalności urządzenia
• Problematyczny rozwój aplikacji

9. Natywnie
• Dostęp do natywnego API
• Wiele zespołów deweloperskich
• Trudne w utrzymaniu i rozwoju

11. Co teraz?

12. Cross compiled
• Jedna baza kodu (C#)
• Mono .NET Framework
• Microsoft
• Natywne widoki dla każdej
platformy

15. Warstwa UI
Warstwa aplikacji
Warstwa UI
Warstwa aplikacji
Warstwa UI
Warstwa aplikacji
Logika biznesowa
Warstwa danych
Warstwa dostępu do
danych
Warstwa dostępu do
usług
Kod współdzielony

16. Aplikacje hybrydowe
• JavaScript, HTML, CSS
• WebView
• Dostęp do API przez wtyczki

17. HTML CSS
Zasoby
(obrazki, fonty)
JavaScript
WebView
Cordovacodrova.js
Natywny
UI
Natywne
API
Kamera Kompas
Pliki Sieć
Cordova plugins
Custom plugins

18. Natywnie w JavaScripcie
Appcelerator
Titanium
Facebook
React Native
Telerik
NativeScript

19. Architektura
• Brak DOM
• Natywne komponenty
• JavaScript Virtual Machine
• Moduły node.js
Google V8 JavaScript Engine
WebKit JavaScript Core

20. Appcelerator Titanium
• Płatny $36/miesiąc
• Słaba dokumentacja
• Słabe wsparcie
• Wolny
„If I had a time machine, I’d stay away from this.”

21. React Native
• Naucz się raz, pisz wszędzie
• Shadow DOM
• JS, JSX, style objects
• oddzielne widoki na iOS i Android
• dostęp do API przez natywne
moduły

22. Hello World!
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry
.registerComponent('HelloWorldApp', () => HelloWorldApp);

23. Stylowanie
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
</View>
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});

24. Architektura

25. JavaScript Virtual Machine + React Lib
Zasoby JavaScript
React Native
JS
npm
Shadow DOM
Natywne
API
Lokalizacja
Ustawienia
React Native API wrappers
Niestandardowe wrappery
Pliki
Kamera Schowek
Alert
Natywny
UI

28. NativeScript
• Współdzielenie kodu
• JS, XML, CSS
• Bezpośredni dostęp do natywnego
API

29. Brak API Wrappers
• Android
• iOS
var time = new android.text.format.Time();
time.set(1, 0, 2015);
console.log(time.format("%D"));
var alert = new UIAlertView();
alert.message = "Hello world!";
alert.addButtonWithTitle("OK");
alert.show();

31. * Java w wersji Script

32. Metadane
1. Generowanie listy dostępnego API
2. Budowanie drzewa metadanych
3. Wstrzykiwanie zależności do globalnego zakresu
API
Metadata.dat
android
util
Config() Log()
nfc
Tag()
Global

33. Jak to działa?
var file = new java.io.File(path);
java.lang.StringKonwersja typów
java.io.File()Metadane
java.io.File() file = FileProxyCall dispatcher
JavaScript Virtual Machine

34. Android?
iOS?
Gdzie te współdzielenie kodu?!

35. Http
var http = require("http");
http.getJSON("https://httpbin.org/get").then(function (r) {
//// Argument (r) is JSON!
}, function (e) {
//// Argument (e) is Error!
//console.log(e);
});

36. XMLHttpRequest
<NativeScript>
iOS APIAndroid API
Android App iOS App
Warstwa abstrakcji
Implementacja
Cel

37. Moduły
• file.android.js
exports.getFile = function(path) {
var fileManager = NSFileManager.defaultManager();
return fileManager.createFileAtPathContentsAttributes(path);
}
• file.ios.js
exports.getFile = function(path) {
return new java.io.File(path);
}
• main.js
var File = require("./file");
var file = File.getFile("path");

38. Interfejs graficzny
AbsoluteLayout DockLayout GridLayout StackLayout WrapLayout

39. Demo

40. XMLHttpRequest
<NativeScript>
?
iOS APIAndroid API Ajax
XMLHttpRequest
<Przeglądarka>
Web AppAndroid App iOS App
Warstwa abstrakcji
Implementacja
Cel

41. import {Component} from "@angular/core";
@Component({
selector: "my-app",
template: "<Label text=‘Hello!’></Label>"
})
export class AppComponent {}

42. Demo #2

43. Podsumowanie
• Mobilki to nie tylko Java/ObjC/C#
• JavaScript to potężny język
• Jeden dzień to za mało żeby zostać mobile deweloperem
• Wystarczą dwa 

44. Pytania?
pawel@codequest.com

45. Dziękuję za uwagę 