![CLI
• npm install -g ionic
• ionic start appName tabs/sidemenu/blank/[url]
• ionic platform add ios/android
• ionic serve —platform ios/android
• ionic emulate/run/build ios/android
Documentation
• http://ionicframework.com/docs/
Demos & Samples
• http://codepen.io/ionic/](https://image.slidesharecdn.com/ionicvancouver201604-160421162004/85/Ionic-vancouver-201604-16-320.jpg)
Ionic vancouver 201604
- 3. AGENDA • Why use hybrid • What is Ionic • How to build it • Common challenges • What’s next?
- 5. Advantages • Ease of Use • Web (HTML/CSS/JS) • Native (API) • Single code base • Fast to market • LowTCO Disadvantages • Unsupported Features • The latest OS updates • Very complex gestures • Low performance • Animation • 3D
- 6. MOBILE OS MARKETSHARE • https://www.netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=6 • http://www.statista.com/statistics/266219/global-smartphone-sales-since-1st-quarter-2009-by-operating-system/
- 7. FROM 2007TO 2015 Year iPhone Specs Android Specs 2015 1.85G dual-core 2 GB 2.7G quad-core 3 GB 2014 1.4G dual-core 1 GB 2.26G quad-core 2 GB 2013 1.3G dual-core 1 GB 1.5G quad-core 2 GB 2012 1.3G dual-core 1 GB 1.2G dual-core 1 GB 2011 800 MHz 512 MB 1G single-core 512 MB 2010 800 MHz 512 MB 1G single-core 512 MB 2009 600 MHz 256 MB 2008 600 MHz 256 MB 2007 412 MHz 128 MB
- 10. Ionic is an open source mobile framework for building amazing, cross- platform hybrid apps and mobile websites with HTML, JavaScript, and CSS
- 11. Nov 2013 (alpha) -> Mar 2014 (beta) -> May 2015 (v1.0.0) ===> Dec 2015 (v1.2.0) Jan 2016 (alpha) -> Feb 2016 (beta) -> ? 2016 (v2.0.0) Oct 2010 (0.9.0) -> Sep 2011 (0.10.0) -> June 2012 (v1.0.0) ===> Feb 2016 (v1.5.0) Apr 2015 (alpha) -> Dec 2015 (beta) -> ? 2016 (v2.0.0)
- 12. Hybrid App Architecture • WebView provide the application with its entire user interface • Web App where application code resides. implemented as a web page • Plugins enable you to invoke native code from JavaScript
- 13. Core Concepts Concept Description Template HTML with additional markup Directives extend HTML with custom attributes and elements Model the data shown to the user in the view and with which the user interacts Scope context where the model is stored so that controllers, directives and expressions can access Expressions access variables and functions from the scope Compiler parses the template and instantiates directives and expressions Filter formats the value of an expression for display to the user View what the user sees (the DOM) Data Binding sync data between the model and the view Controller the business logic behind views Dependency Injection Creates and wires objects and functions Injector dependency injection container Module a container for the different parts of an app including controllers, services, filters, directives Service reusable business logic independent of views
- 14. Overview • CSS Components • JavaScript API • CLI • Ecosystem
- 15. HOWTO BUILD IT?
- 16. CLI • npm install -g ionic • ionic start appName tabs/sidemenu/blank/[url] • ionic platform add ios/android • ionic serve —platform ios/android • ionic emulate/run/build ios/android Documentation • http://ionicframework.com/docs/ Demos & Samples • http://codepen.io/ionic/
- 18. CSS Components • Header/Footer • Buttons • List/Cards • Forms/Inputs • Toggle • Checkbox/Radio • Range • Select • Tabs • Grid • Utilities
- 19. JavaScript API • Action Sheet • Backdrop • Content (pull to refresh) • Gestures and Events (hammer js) • Lists • Modal / Popover / Popup • Navigation • Scroll (infinite scrolling) • Side Menus /Tabs • Slide Box • Spinner
- 21. • wide screen optimization (i.e. tablet split view) • certain form inputs (i.e. multiple selection) • cordova plugins (i.e. extra dependencies) • 3rd party integration (i.e. facebook) • push notification (i.e.APN and GCM) • iOS upgrades (i.e. compatibility and stability)
- 22. WHAT’S NEXT?
- 23. • ionic deep dive with its components and API • ionic and third party integration • ionic ecosystem • ionic2 and angular2