ionic-present

View Github Repository Open presentation in a new window

driftyco

See all presentation from driftyco

ionic-present

140 87

ionic-present

Present Ionic in your town. Share the new way to build mobile apps.

On Github driftyco / ionic-present

Building Hybrid Apps with AngularJS and Ionic

Overview

Native vs Hybrid Apps Intro Ionic UI Components Ionic CLI Demos
“I want to build an app!”

More Platforms. More Problems.

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development
  • Diminishing returns

Hybrid Apps!

HTML5 that acts like native

Web wrapped in native layer

Direct access to native APIs

Familiar web dev environment

A single code base (web platform!)

“It's not 2007 anymore”
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

Web-standards

Have improved!

caniuse.com is lookin' pretty good nowadays

Android is now Chromium-based

iOS users keep their devices up-to-date

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

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

Native SDKs...

Are Great!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

Web Technologies You Already

Know & Love

(You'll feel right at home)

Superpowered by

Angular

Extends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services

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
  • WebView (Cordova)
  • Native App

Complex Lists

  • AngularJS Directive
  • Buttons exposed by swiping
  • Reorder
  • Delete
<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>

</ion-list>

Collection Repeat

  • Replacement for Angular's ng-repeat
  • Inspired by iOS’s UICollectionView
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth scrolling!
<div class="list">
  <div collection-repeat="c in contacts">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Navigation

  • Uses AngularUI Router
  • Shows back button when possible
  • Transitions follow direction of nav
  • Updates the app's URL
  • Multi-history stack
<ion-tabs>

  <ion-tab title="Home" icon="ion-ios-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Swipe To Go Back

  • Swipe back to previous view
  • Interactive transition
  • Benefit of cached views
  • Still updates the app's URL
  • WebView (Cordova) only

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

Boilerplate app structure ready for customization

LiveReload both local and native builds

Build and run native apps

Modern

Chromium!

Chromium for Android WebViews

Upgrade Android 4.1+ and above

Same hardware, modern software

Amazing performance improvements

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

Building Hybrid Apps with AngularJS and Ionic