1. Ionic Framework Kerry Ritter ritter@kerryritter.com
St. Louis Metro East .NET User Group
February 9, 2016

2. The State of Mobile Development
Native applications
Android: Java
iOS: Objective C, Swift
Windows: C#
Compiles-to-native applications
Xamarin (C#)
Codename One (Java)
Web applications
Hybrid Web applications
Ionic Framework (yay!)
Sencha
Kendo UI

3. Native Applications Pros Cons More expensive More time “Bare-metal”
Best performance
Standardized UI elements
Full API Access
Cons
Separate code bases
Completely different platforms
More expensive
More time

4. Compiles-to-native Applications
Pros
Shared code (but not 100%)
Single language/dev platform
Close to native performance
Full API access
Cons
Very expensive licensing
Xamarin: $1000/yr per platform, per developer
Restrictive UIs when shared UI code
Possibility of bugs in the platform
Less resources

5. Web Applications Pros Cons Single code base Web technologies
Control over deployments and updates
Cons
No native API access
Limited performance (all static assets are hosted on the web)
No offline capabilities

6. Hybrid Web Applications
Pros
Single code base
Web technologies
Full API access
Exceptional performance on modern phones
Cons
Not ideal for games with rapid UI updates
UI performance not as great as native when the user has a phone with poor specs
Requires fewer developers than native, so lower cost and less time
Not sacrificing performance or native API access

7. Ionic Framework: an SDK for hybrid web apps
Provides a standardized set of UI components built with HTML/CSS/JS
Headers/footers, tabs, buttons, lists, cards, grid
Built on AngularJS
Strong, widely used framework for developing single page apps
Styling pre-processing provided by Sass
Theme your application by changing variables
Cordova integration for calling native APIs
JavaScript wrappers that call native code
Supported by the Ionic.io platform and services

8. UI Components

9. Brief introduction to AngularJS
JavaScript framework developed by Google
Simplifies creating custom web components
Quick demo! CodePen

10. Ionic Framework’s AngularJS components
<ion-nav-view> and <ion-nav-bar>
Sets up the view and header bar of the applications
Built-in history stack for navigating backwards
Built-in view caching
<ion-side-menu>
Provides native-like hamburger menu with built-in support for swiping
<ion-tabs>
Provides simple tab menus
Conforms to style standards based on user’s operating system
Many others!
Action sheet, loading indicator, modals, pop-ups, sliders...

11. Sass: “CSS with superpowers”
CSS pre-processor that allows for custom variables, functions (“mixins”), nesting, inheritance, and operators
Ionic provides 9 theme color variables
light, dark, stable, positive, calm, balanced, energized, assertive, dark
Quick demo! CodePen

12. Apache Cordova JavaScript wrappers for calling native mobile SDKs
Almost 1000 open plugins
ngCordova
AngularJS services created by Ionic for Cordova plugins
Camera, geolocation, barcode scanner, image picker, vibrations
$cordovaGeolocation.getCurrentPosition(posOptions) then(function (position) { var lat = position.coords.latitude var long = position.coords.longitude });

13. How does it all work together?
Your Application
Ionic Framework
AngularJS
Native WebView Wrapper (Cordova)
Native SDK

14. Starting an app with Ionic Lab

15. Demo!

16. Ionic Platform and Services
Ionic CLI
Ionic View
Ionic Creator
Ionic Push
Ionic Package
Ionic Deploy
Ionic Market

17. Ionic CLI

18. Ionic View

19. Ionic Creator

20. Ionic Push

21. Ionic Package

22. Ionic Deploy

23. Ionic Market

24. So, why use Ionic Framework?
Single code base
Built mobile applications with widely-known web technologies
Ionic platform tools and services

25. Kerry Ritter ritter@kerryritter.com Twitter: @kerryritter
Questions?
Kerry Ritter