ionic-presentation

View Github Repository Open presentation in a new window

henkjurriens

See all presentation from henkjurriens

ionic-presentation

0 0

ionic-presentation

On Github henkjurriens / ionic-presentation

The beautiful, open source framework for developing hybrid mobile apps with HTML5.

“So you want to build a native app?”

More Platforms. More Problems.

The Downsides of Native

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development
“Is there an alternative?”

Hybrid Apps!

  • HTML5 that acts like native
  • Web wrapped in native layer
  • Direct access to native APIs
  • Cordova/Phonegap
  • Familiar web dev environment

It's Not 2007 Anymore

Mobile devices have rapidly improved!

So What Do We Need?

  • An Open Source Framework
  • Help bridging the gap between web and native
  • Rich, native-style UI components and interactions
  • UI APIs, not just jQuery widgets
  • A dedicated, community-driven spirit
“Hello.”

Web Technologies You Already Know and Love

Best Friends With AngularJS

  • UI Components are AngularJS Directives
  • Ready to work with your app

CSS Generated By Sass

  • Quickly give your app its own look and feel
  • CSS designed to be easily overridden
  • Either override ionic.css or use Sass Preprocessor
  • Stand-alone CSS (independent of Ionic's JavaScript)

Performance Obsessed

  • Hardware accelerated animations
  • Minimal DOM Manipulation
  • Zero jQuery (you could still include it if you want)

Native Focused

  • Modeled off of native SDKs
  • Built to work with Cordova/Phonegap

Beautifully Designed

  • Cohesive visual system
  • Clean and simple
  • Easy to customize

Ionicons

Over 600 MIT licensed font-icons included

ionicons.com

Lists

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...

</div>

Complex Lists

  • AngularJS Directive
  • Buttons exposed by swiping
  • Reorder
  • Delete
<ion-list>
  <ion-item ng-repeat="item in items" class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>

Collection Repeat

  • Similar to Angular's ng-repeat
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth jank-free scrolling
  • Low memory footprint
<div class="list">
  <div collection-repeat="c in contacts" class="item">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Tabs

  • Nested views
  • Each tab has its own nav history
<ion-tabs class="tabs-icon-only">

  <ion-tab title="Home" icon="ion-star">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Feedback" icon="ion-thumbsdown">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Messages" icon="ion-chatbubble-working">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

</ion-tabs>

Side Menu

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <div class="title">Projects</div>
    </header>
    <ion-content has-header="true">
      <div class="list">
        <a href="#/work" class="item">Work</a>
        <a href="#/home" class="item">Home</a>
      </div>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

$ionicActionSheet.show({
  titleText: 'Modify your album',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Pull to Refresh

<ion-content on-refresh="refreshData()">
  <ion-refresher></ion-refresher>
  <!-- content -->
</ion-content>

Navigation

  • Shows back button when possible
  • Each tab has its own history stack
  • Works with Android's back button
<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right">
  <!-- content -->
</ion-nav-view>
                         $ npm install -g ionic

                          _             _
                         (_)           (_)
                          _  ___  _ __  _  ___
                         | |/ _ \| '_ \| |/ __|
                         | | (_) | | | | | (__
                         |_|\___/|_| |_|_|\___|  CLI
  • Quickly start a project with starter templates
  • Boilerplate app structure ready for customization
  • Preconfigured tools: Gulp, Sass, Bower, etc.
  • Start a local dev server with LiveReload
  • Update Ionic Framework library files
  • Build and run native apps

MIT LICENSED

Free to use (even commercially)

COMMUNITY POWERED

Active developer forum and GitHub repo
What's Freelink

Native or HTML5?

Native

  • Fast
  • iOS and Android

HTML5

  • slow
  • complex

not anymore!

Ionic Framework

Development

Push notifications

  • AeroGear
  • OpenShift

Fine tuning

  • differences browser and device

Tools

Chrome

TestFlight

Ionic View

Thanks!!

@henkjurriens

Get Started with Ionic!