Download - Ionic vancouver 201604
Advantages
• Ease of Use
• Web (HTML/CSS/JS)
• Native (API)
• Single code base
• Fast to market
• Low TCO
Disadvantages
• Unsupported Features
• The latest OS updates
• Very complex gestures
• Low performance
• Animation
• 3D
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/
FROM 2007 TO 2015Year 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 MHz512 MB
1G single-core 512 MB
2010 800 MHz512 MB
1G single-core 512 MB
2009 600 MHz256 MB
2008 600 MHz256 MB
2007 412 MHz128 MB
Ionic is an open source mobile framework for building amazing, cross-platform hybrid apps and mobile websites with HTML, JavaScript, and CSS
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)
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
Core ConceptsConcept 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
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/
AngularJS Code
• https://github.com/johnpapa/angular-styleguide
CSS Components
• Header/Footer
• Buttons
• List/Cards
• Forms/Inputs
• Toggle
• Checkbox/Radio
• Range
• Select
• Tabs
• Grid
• Utilities
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
• 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)