Introduction to Ionic (SB AngularJS Meetup)
Download as PPTX, PDF•1 like•1,080 views
The document presents an introduction to the Ionic framework for building mobile applications using AngularJS, highlighting its tools, benefits, and development process. It explains how Ionic combines Apache Cordova with web technologies to create cross-platform apps, offering access to native APIs and various plugins. Additionally, it provides resources for building and prototyping apps, emphasizing the production readiness of Ionic with examples of successful applications.
Introduction to Ionic (SB AngularJS Meetup)
- 1. Introduction to Ionic Santa Barbara AngularJS Meetup January 15, 2015 Santa Barbara AngularJS, Sol Tran
- 2. Thank you to our sponsor for hosting
- 3. http://bit.ly/sbangular1 Follow us on Twitter SB AngularJS: @SbAngular Organizer: Sol Tran, @soltran Lead Software Engineer at @ShipHawk
- 5. TABLE of CONTENTS • What is Ionic? • Benefits of Ionic • Ionic tools
- 6. What is Ionic? • Combines Apache Cordova with AngularJS along with custom javascript, html, and css3 • Supported Devices include: • iOS 6+ • Android 4+ • Windows Phone 8+ • FireFox OS
- 7. Why Ionic? • Platform Independent • HTML5, CSS3 & JS • Rapid iteration and development • Direct access to native APIs with Cordova
- 8. What is Cordova? • Apache Cordova is a platform for building native mobile apps using HTML, CSS, and Javascript • Timeline: 2009: PhoneGap started at Nitobi 2011: PhoneGap purchased by Adobe 2012: PhoneGap donated to Apache And renamed as Cordova
- 9. Native Plugins Available • ngCordova has over 63 native Cordova plugins which can be added to Angular Cordova apps • These include: • Touch ID • Oauth • Camera • Push Notifications • Geolocation • Progress indicator • Flashlight • Splash Screen • Plus javascript libraries such as Ion Swipe Cards
- 10. How does it come together? Your App Ionic AngularJs WebView (Cordova) Native SDK
- 11. Performance? • Hardware accelerated animations • Minimal DOM Manipulation • Remove 300ms tap delay Mobile Devices have improved! 2010 iPhone 4, 1 GHz processor, 512 MB; iPhone 5S, 1.3 GHz dual-core, 1 GB Ram Web Standards have improved! Caniuse.com looking mighty green Plus performance is thought through
- 12. Ionicons!
- 13. So is Ionic Production Ready? • http://showcase.ionicframework.com/ • KeyChain Logistics (Uber for trucks) • Sworkit (Downloaded over 3 million times) • Songhop • 12,899+ stars • 1.0 beta14 is out, with 1.0 coming out soon • Ionic CLI averages 1,000 downloads/day • Angular Material is being built by the Ionic Team in conjunction with the Angular Team
- 14. Ionic Creator • https://creator.ionic.io/ • Great for prototyping, setting up
- 15. Ionic View https://itunes.apple.com/us/app/ionic- view/id849930087?mt=8 Tool that makes it fast and easy to test your ionic apps on the phone When you app is ready, just type in your command line $ ionic upload
- 16. Demo Time What you’ll need: • Node / NPM • Cordova • Ionic 1. $ npm install –g cordova ionic 2. https://creator.ionic.io/ to start prototyping your app
- 17. Resources • Ng-cordova http://ngcordova.com/ • http://learn.ionicframework.com/resources /
- 19. http://bit.ly/sbangular1 Follow us SB AngularJS: @SbAngular Organizer: Sol Tran, @soltran Lead Software Engineer at @ShipHawk
Editor's Notes
- #9: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #10: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #11: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #12: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #14: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #15: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins
- #16: Cordova offers a simple but powerful API to call javascript functions that map to native code or plugins