Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic 2 intro

1,533 views

Published on

Introduction to ionic framework shown at ng-wrocław meetup

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ionic 2 intro

  1. 1. Ionic2-Intro Wojciech Langiewicz - ng-wrocław #13 http://www.wlangiewicz.com
  2. 2. Agenda ● What is Ionic? ● Overview of Ionic ecosystem ● Some of the Ionic features ● Demo
  3. 3. WhatisIonic?
  4. 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. 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. 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. 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. 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. 9. Ioniccreator ● Web application designed for quick prototyping ● Simple drag & drop ● Export your project and start coding ● Quick Demo
  10. 10. ionicDemo https://github.com/wlk/gifs
  11. 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

×