Ionic is an open-source SDK that allows developers to build hybrid mobile apps using HTML, CSS and JavaScript. Ionic is based on AngularJS and uses Cordova to access native device features from a web view. Ionic 2 improves on Ionic 1 by being based on Angular 2 and aiming for the latest mobile platforms and performance. For new projects, Ionic 1 is no longer recommended over Ionic 2 which is currently in beta. The presentation provides an overview of the Ionic ecosystem and demonstrates building a sample app.

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

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

3. WhatisIonic?

4. WhatisIonic?
● 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

5. fewtechnicalthings
● 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

6. Ionic1VSIonic2
● 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

7. cordovaintegration
● 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
●

8. ExampleCordovaPlugins
● 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

9. Ioniccreator
● Web application designed for quick prototyping
● Simple drag & drop
● Export your project and start coding
● Quick Demo

10. ionicDemo
https://github.com/wlk/gifs

11. MoreResources
● 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