Ionic framework is open-source SDK for hybrid mobile app and progressive web app development, built top of Angular 2, Apache Cordova. During talk, Arturs will share his first impressions, experience and few tips. Artūrs has more than 8 years experience developing web applications with Ruby on Rails, Javascript etc.. In recent years, had experience with iOS, Android and Windows Runtime applications.

1. Ionic 2 lietotnes izstrāde -
labā un sliktā pieredze
Artūrs Braučs

2. Par mani
Strādāju Autentica - 2 gadi;
Web - 8 gadi, Ruby on Rails 6 gadi (u.c.);
Mobilās tehnoloģijas - kopā ~1 gads;
www.linkedin.com/in/artursbraucs

3. Prasības
Platformu dažādība - Web, iOS, Android u.c.
Ātra izstrāde;
Straujas izmaiņas;
Jaunas tehnoloģiskās iespējas;
PWA;

5. Saziņas lietotne

6. “Progressive Web Apps”
Ātra ielāde;
Dinamisks saturs;
Piekļuve iekārtas funkcijām;
Platformu neatkarīga;
“Service workers”

7. “Learn once - write anywhere”
Specializācija vienā tehnoloģijā;
Izstrādātāju iesaistīšana dažādos projektos;

8. “Write once - run anywhere”
Ātra izstrāde - uzreiz dažādām platformām;
Vieglāka uzturēšana - izmaiņas vienlaicīgi visām platformām;

9. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK.
Xamarin;
React Native;
Nativescript;
Ionic framework;

10. Platformu orientēta izstrāde jeb “Natīvā”
Kvalitāte;
Veiktspēja;
Dokumentācija;
Ērti pieejamas visas platformas (OS) iespējas;
Izstrādes ilgums;
Izstrāde pret katru platformu;
“Learning curve”;

11. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK. dārgi
Xamarin;
React Native;
Nativescript;
Ionic framework;

12. Xamarin
“Learn once - write anywhere”;
Popularitāte, kopiena;
Kompilēts natīvi;
VisualStudio uz Mac OS X;
C#;
Ļoti maz koda var izmantot Web izstrādē;
“Learning curve”

13. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK. dārgi
Xamarin; nav Web
React Native;
Nativescript;
Ionic framework;

14. React Native
“Learn once - write anywhere”;
Daļu var izmantot starp platformām;
JS daļu var izmantot Web;
JSX kodu nav iespējams atkārtoti izmantot WEB;
Katrai platformai savs UI kods;
IOS nav iespējams izstrādāt uz Windows un Linux;

15. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK. dārgi
Xamarin; nav Web
React Native; web jāizmanto cits GUI kods
Nativescript;
Ionic framework;

16. NativeScript
“Write once - run anywhere”, bet ne WEB;
Angular 2;
Native GUI;
WEB daļai nepieciešami citi template;
Nav liela kopiena;

17. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK. dārgi
Xamarin; nav Web
React Native; web jāizmanto cits GUI kods
Nativescript; web jāizmanto cits GUI kods
Ionic framework;

18. Ionic framework
“Write once - run anywhere”;
Kods atkārtoti izmantojams visās platformās (t.s. web)
Angular 2;
UI kods tiek interpretēts izpildes laikā (WebView);
UX un UI var atšķirties no platformu;

19. Izvēle starp ietvariem (plaša)
“Natīvā” - web (html,css,backend), android SDK un IOS SDK. dārgi
Xamarin; nav Web
React Native; web jāizmanto cits GUI kods
Nativescript; web jāizmanto cits GUI kods
Ionic framework;

20. Ionic framework

21. Ionic framework
Angular

22. Ionic framework
Angular
Cordova

23. Ionic framework - HTML elementi
Navigācija (<ion-tabs>, <ion-menu>, <ion-nav>);
Izkārtojums (<ion-header>, <ion-content>, <ion-footer>, <ion-navbar> u.c.);
Attēlošana (<ion-title>, <ion-list>, <ion-scroll>, <ion-segment> u.c.);
Formas (<ion-range>, <ion-datetime>, <ion-select>, <ion-toogle> u.c.);
Specifiskie (<ion-searchbar>, <ion-fab>, <ion-infinite-scroll> u.c.);

24. Ionic framework - API
Config ;
Platform;
ActionSheetController;
AlertController;
Events;
Keyboard;
ToastController;

25. Ionic framework - Cordova
Camera;
LocalNotifications;
NativeStorage;
Push;
SMS;
TouchID;
CodePush (nav Native);

26. Ionic framework - “stack”
EcmaScript 6 (sākumā);
Typescript;
Node.js - backend;
socket.io;
cordova-plugin-local-notifications;
cordova-plugin-nativestorage;
phonegap-plugin-barcodescanner;

27. Ionic framework - sākums
Uzstādīšana;
Parasta web lietotne;
Ajax, socket.io;
Service workers;
npm;
Angular;
$ npm install -g ionic cordova
$ ionic start superapps --v2
$ cd superapps & ionic serve

28. Ionic framework - pirmie iespaidi
Ātrs rezultāts;
Daudz sagatavotas komponentes;
Izmantotie resursi;
Viegli orientēties, jo Web zināms;

29. Ionic framework - pirmie sarežģījumi
Dokumentācija;
Angular;
Savi HTML tagi;
ES6 galīgi nepiemērots Angular;
Cordova spraudņu instalācija - vēl viena dependency sistēma;
Sajūta, ka UX diezgan atšķirīgs;
Scroll;
Navigācija;

30. Ionic framework - nopietnāki sarežģījumi
Cordova open source spraudņi:
Dokumentācija;
Atšķirīgās pieejas;
Atbalsts;
Liels laika patēriņš UX/UI problēmu novēršanai;

31. Ionic framework - pirmie rezultāti
Typescript;
Angular;
Viegli sagatavot piegādes;
Web;
Dizains - ātri pielāgojams;
Platformu funkcijas;

32. Ionic framework - web?
Nav routes modulis;
Layout;
Tagi;

33. Ionic framework - laimīgas beigas
Gandrīz iekļāvos termiņos;
Lietotne ir lietojama un pilda funkcijas;
Viens repozitorijs gan Web, gan mobilajām platformām;
Viena izstrādes vide visiem moduļiem;
Uzturēšana;

34. Ionic framework - secinājumi
Ātra un dinamiska izstrāde;
Kodu iespējams pilnībā atkārtoti izmantot;
Ērts PWA lietotnēm;
UX nemaz tik ļoti neatšķiras no Native;

35. Ionic framework - kad lietot
Nelielām lietotnēm;
Standarta navigācija;
PWA;
Ir Angular kompetence;

36. Ionic framework - kad nelietot
Nav standarta navigācija vai GUI elementi;
Spēles;
Lielām lietotnēm;
Tikai viena platforma;

37. Ionic framework - ieteikumi
Typescript;
Atjauninājumi;
Maksimāli maz bibliotēku;
Izmantot Ionic iebūvētos tagus;
Nelielas komponentes;

38. Resursi
http://adamdbradley.github.io/building-with-ionic2/#/ - prezentācija;
http://ionicframework.com/docs/ - dokumentācija;
https://github.com/driftyco/ionic - github.com;
https://angular.io/docs/ts/latest/ - angular.io;

39. Paldies! Jautājumi.