Ionic Framework Kerry Ritter ritter@kerryritter.com Twitter: @kerryritter 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 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

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

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

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

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

UI Components

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

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 Quick demo! CodePen

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 });

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

Starting an app with Ionic Lab

Demo!

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

Ionic CLI

Ionic View

Ionic Creator

Ionic Push

Ionic Package

Ionic Deploy

Ionic Market

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

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