Ionic Framework – St. Louis Metro East .NET User Group Talk

Last night I talked at the St. Louis Metro East .NET User Group about Ionic Framework. It was a great time and there were a lot of great questions asked. I was happy to share some of my knowledge with a group mostly unfamiliar with this JavaScript space! Below is a text-version of a slideshow you can download.

St. Louis Metro East .NET User Group

February 9, 2016

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

Native Applications


  • “Bare-metal”
  • Best performance
  • Standardized UI elements
  • Full API Access


  • Separate code bases
  • Completely different platforms
  • More expensive, more time

Compiles-to-native Applications


  • Shared code (but not 100%)
  • Single language/dev platform
  • Close to native performance
  • Full API access


  • Very expensive licensing
    • Xamarin: $1000/yr per platform, per developer
  • Restrictive UIs when shared UI code
  • Possibility of bugs in the platform
  • Less resources

Web Applications


  • Single code base
  • Web technologies
  • Control over deployments and updates


  • No native API access
  • Limited performance (all static assets are hosted on the web)
  • No offline capabilities

Hybrid Web Applications


  • Single code base
  • Web technologies
  • Full API access
  • Exceptional performance on modern phones


  • 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

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 platform and services

Ionic Framework UI Components

  • Brief introduction to AngularJS
  • JavaScript framework developed by Google
  • Simplifies creating custom web components

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…

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

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
  • Example:
          .then(function (position) {
              var lat  = position.coords.latitude;
              var long = position.coords.longitude

How does it all work together?

  • Your Application is written in…
  • Ionic Framework which uses…
  • AngularJS which is consumed by…
  • Native WebView Wrapper (Cordova) which provides access to…
  • Native SDK

So, why use Ionic Framework?

  • Single code base
  • Built mobile applications with widely-known web technologies
  • Ionic platform tools and services


Twitter: @kerryritter

Leave a Reply

Your email address will not be published. Required fields are marked *