Introduction to the Ionic Framework

An Introduction to the Ionic Framework

Agenda

• Native vs Hybrid

• What is Ionic?

• Ionic CLI & Demos

• Related Projects

• Q & A

Downside of Native

• Knowledge of each platform

• Separate code bases

• Expensive

Apache Cordova

• Hybrid Apps

• Web wrapped in native

• Native APIs

• One code base, many platforms

Native SDKs

• Views

• UI Components

• Navigation

• Transitions

• Animations

• Interactions

What is Ionic?

iOS Android

Froyo (2.2)0.4%

Gingerbread (2.3.x)7.4% Ice Cream

Sandwich ( 4.0.x)6.4%

Jelly Bean (4.[1-3].x)

44.5%

KitKat (4.4)39.7%

Lollipop (5.0)1.6%

Other3%

iOS 725%

iOS 872%

https://developer.android.com/about/dashboards/index.htmlhttps://developer.apple.com/support/appstore/

“Bootstrap for Native”

• Responsive

• UI Components

• Transitions

• Icons

AngularJS

• Directives

• Services

• Interactions

• Navigation and History

• Animations and Transitions

• Performance

• Much More…

Lists

Tabs

• Nested views

• Separate history

• Angular UI Router

Side Menu

Navigation

• Angular UI Router

• Back button

• Transitions

Examples & Tooling

Wrapping Up

• Open Source (check out GitHub page)

• Active Community

• Tons of online resources

• Wijmo 5 (wijmo.com/5)

• Xuni (goxuni.com)

Thank You!