Official Ionic Vancouver Meetup Event April 20, 2016

1. IONICVANCOUVER
Prepared by:Alamusi
March 2016

2. SPONSORS
radesBl ck

3. AGENDA
• Why use hybrid
• What is Ionic
• How to build it
• Common challenges
• What’s next?

4. WHY USE HYBRID?

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

8. THE MISSING PIECE

9. WHAT IS IONIC?

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/

17. AngularJS Code
• https://github.com/johnpapa/angular-styleguide

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

20. COMMON CHALLENGES

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