Architektura, działanie i problemy związane z budowaniem aplikacji HTML-owych na systemy mobilne.

1. Sekcja zwłok hybrydy
Aplikacje HTML na mobilkach od kuchni

2. Aplikacje mobilne
- Aplikacje webowe
- Aplikacje hybrydowe
- Aplikacje natywne

3. Aplikacja internetowa
Program wykonywany i renderowany w
przeglądarce internetowej

4. Aplikacja natywna
Aplikacja napisana pod konkretną platformę
przy użyciu narzędzi (SDK) wydanych przez
twórców tej platformy.

5. Aplikacje mobilne

6. Aplikacja hybrydowa
(Mobilna) Aplikacja hybrydowa to program
zawierający elementy aplikacji webowej i
natywnej.

7. Aplikacja hybrydowa
Cechy:
- logika i interfejs w HTML+CSS+JS
- dostęp do komponentów natywnych
- jedna aplikacja eksportowana na wiele platform
- działanie w offline
- dostępne w sklepie z aplikacjami (App Store, Google
Play)

8. Architektura i działanie

9. Aplikacje hybrydowa

10. Aplikacja hybrydowa

11. Aplikacja hybrydowa
WebView/UIWebView - widok służący do wyświetlania
stron internetowych

12. Aplikacja hybrydowa

13. Aplikacja hybrydowa

14. Uwaga kod w Javie ;)

15. Przykład
Java

16. Przykład
HTML

17. Apache Cordova

18. Apache Cordova
Framework (zestaw API) do tworzenia aplikacji mobilnych
w oparciu o HTML+CSS+JS umożliwiający korzystanie z
natywnych komponentów i API danej platformy

19. Cordova
Obsługiwane platformy:
- Android
- iOS
- Windows Phone
- Blackbery
- Firefox OS
- Tizen

20. Cordova

21. Cordova

22. Cordova

23. Architektura
PROJEKT
HTML+CSS+JS
BUILD SYSTEM
PROJEKT
ANDROID
PROJEKT
iOS

24. Architektura
PROJEKT
Biblioteka
natywna
Aplikacja
HTML
Biblioteka
JavaScript
Klasy
natywne

25. Zalety
- jedna aplikacja, wiele platform
- dostęp do bogatej bazy bibliotek JS
- testowanie z poziomu przeglądarki
desktopowej, brak konieczności kompilacji
(na początku !)

26. Wady
- szybkość :(
- ogromna ilość urządzeń/ekranów
- czas zaoszczędzony na developmencie
pochłania testowanie
- ograniczenia i różnice poszczególnych
przeglądarek

27. Ograniczenia przeglądarek
Źródło : http://caniuse.com/#compare=ios_saf+8.1-8.3,android+4.1,bb+10,and_chr+42&compare_cats=HTML5

28. Przykład

29. NUS extra
Wyszukiwanie okazji i promocji.

30. Podsumowanie

31. Dla kogo?
- zespół z mocnym zapleczem webowym
- potrzeba wypuszczenia aplikacji na wiele
platform (w tym mało popularne)
- potrzeba wykorzystania hardware’u
urządzenia (GPS, akcelerometr)
- komponenty natywne nie dostarczają
decydujących funkcjonalności aplikacji

32. Na co uważać
- responsywny interfejs
- zgodność przeglądarek ze standardami
- dług technologiczny
- ryzyko odrzucenia aplikacji (App Store!)

33. “Dobrze zrobiona aplikacja hybrydowa powinna zachowywać się i wyglądać jak
aplikacja natywna”

34. Dziękuję za uwagę!