Build Amazing Apps with
The Web Platform

ionicframework.com

About Me

Overview

  1. Native vs Hybrid Apps
  2. Intro to Ionic
  3. UI Components
  4. Ionic CLI
  5. Demos
“I want to build an app!”
- Literally everyone

Building apps is Hard

  • Proficiency in each targeted platform
  • Domain-specific language to learn
  • Entirely separate code bases
  • Expensive development (time and cost)
  • Lack of portability with native approaches

Enter Hybrid Apps!

HTML5 with platform-specific UI

Full access to native APIs and SDKs

Familiar web development environment

Single code base across native and the web

“It's not 2007 anymore”

Devices have evolved considerably!

Year Device Processor RAM
2007 iPhone 400 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2015 iPhone 6 1.4 GHz dual-core 1 GB
2016 iPhone 6s 1.84 GHz dual-core 2 GB

Much better

WEB APIs!

Performant animation with GPU compositing

Advanced mobile device features and APIs

Web-workers to offload tasks from UI

Modern Chromium for Android

Source: caniuse.com

Users keeping devices updated

Example: Rapid iOS Upgrades

https://mixpanel.com/trends/#report/ios_9

So, what's missing?

There's no Web SDK!

Ionic to the rescue!

Web Technologies You Already

Know & Love

(Build websites? You'll feel right at home)

Superpowered by

Angular

Extends HTML with new tags

Built on the future of JavaScript

Optimized for large-scale app development

High performance for fast and fluid mobile apps

TypeScript!

Modern JavaScript, today

Perfect for large teams and app development

Powerful IDE support: autocompletion, intellisense, refactoring

Sass!

CSS generated from the Sass preprocessor

Quickly give your app its own look and feel

CSS designed to be easily overridden

Variables based with default settings

How it all comes together

  • Your App
  • Ionic
  • Angular
  • Cordova
  • Native SDKs

Ionic UI Components

Complex Lists

  • AngularJS Directive
  • Buttons exposed by swiping
  • Reorder
  • Delete

<ion-list>
  <button ion-item *ngFor="let item of items">
    {{ item.title }}
  </button>
</ion-list>

Virtual Scrolling

  • Replacement for Angular's ng-for
  • Inspired by iOS’s UICollectionView
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth scrolling!

              <ion-list [virtualScroll]="items">
                <ion-item *virtualItem="let item">
                  <ion-avatar item-start>
                    <ion-img [src]="item.avatarUrl"></ion-img>
                  </ion-avatar>
                  {{ item.firstName }} {{ item.lastName }}
                </ion-item>
              </ion-list>

Navigation

  • Native-app style navigation
  • Transitions follow direction of nav
  • Updates the app's URL
  • Supports parallel histories
  • Swipe to go back

Other Components

  • Side Menus
  • Actionsheet
  • Modal
  • Pull To Refresh
  • Spinners
  • Slidebox
  • Infinite Scroll
  • Swipeable List Options
  • Popup
  • Popover
  • Loading Overlay
  • Inputs
  • Buttons
  • etc.

MIT LICENSED

Free to use (even commercially)

Ionicons

700+ MIT licensed font-icons included

ionicons.com

npm install -g ionic cordova

ionic start myApp

Get Started with Ionic!


Getting started guide
ionicframework.com/getting-started


Documentation
ionicframework.com/docs


Visit the Community Forum
forum.ionicframework.com


Contribute on GitHub
github.com/driftyco/ionic

Demo Time!

May the demo gods be with us

</html>

@ionicframework

http://ionicframework.github.io/ionic-present