Ionic 2 - Intro

Wojciech Langiewicz - ng-wrocław #13http://www.wlangiewicz.com

Agenda● What is Ionic?● Overview of Ionic ecosystem● Some of the Ionic features● Demo

What is Ionic?

What is Ionic?● library of mobile-optimized HTML, CSS and JS● Hybrid apps for iOS and Android● Built on top of Angular● Native focused (look and feel)● Integrates with Cordova

few technical things● Write your application in JS (ES5, 2015, 2016) or TS● CSS (SASS or others)● HTML5 (with custom tags)● Ionic wraps that code and displays everything as a

WebView

Ionic 1 VS Ionic 2● Ionic 1 was based on Angular 1● Ionic 2 is based on Angular 2

○ Ionic 2 improves performance○ Planned support for Windows 10 Phone○ Aiming latest Android and iOS versions○ Ionic 2 is in beta and will be released when Angular 2 is ready

● For new projects: IMO no reason to use Ionic v1

cordova integration● Ionic is using cordova to integrate with native features● You can use cordova plugins (will be showed during demo)● Plugins don’t work via web browser (on desktop)● After adding few plugins testing via browser becomes

problematic●

Example Cordova Plugins● Access native features via JS API● Battery, Camera, Contacts, GPS, Compass, Filesystem● Native Notifications, Vibration, Gyroscope, Etc● In-App Purchases● AdMob● Google Analytics● Facebook, OAuth Login● SQLite

Ionic creator● Web application designed for quick prototyping● Simple drag & drop● Export your project and start coding● Quick Demo

ionic Demohttps://github.com/wlk/gifs

More Resources● https://creator.ionic.io● http://ionicframework.com/● http://ionic.io/ ● http://ionicframework.com/docs/v2/● http://showcase.ionicframework.com/● http://www.wlangiewicz.com/● https://play.google.com/store/apps/details?id=com.bitpay.

checkout● https://play.google.com/store/apps/details?id=com.

chefsteps.mobile