IONIC VANCOUVERPrepared by: Alamusi

March 2016

SPONSORS

radesBl ck

AGENDA• Why use hybrid

• What is Ionic

• How to build it

• Common challenges

• What’s next?

WHY USE HYBRID?

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

THE MISSING PIECE

WHAT IS IONIC?

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

Overview

• CSS Components

• JavaScript API

• CLI

• Ecosystem

HOW TO BUILD IT?

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

COMMON CHALLENGES

• 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)

WHAT’S NEXT?

• ionic deep dive with its components and API

• ionic and third party integration

• ionic ecosystem

• ionic2 and angular2