lightening-hybrid

Building awesome hybrid mobile apps with HTML/CSS/JS

ionicframework.com phonegap.com

Presented by Ryan Hanna @heryandotus

Web Technologies You Already Know and Love

(You'll feel right at home)

Hybrid Apps!

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

Hybrid Models

PhoneGap + UI + MVC (BBC Olympics, Untappd, Sworkit)

Native navigation + web content (Basecamp)

“Free and open source library of mobile-optimized web components, gestures, and tools for building highly interactive apps with HTML5/CSS/AngularJS.”

Complex Lists

AngularJS Directive
Buttons exposed by swiping
Reorder
Delete

<ion-list>
  <ion-item ng-repeat="item in items" option-buttons="buttons" class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>

Tabs

<ion-tabs tabs-type="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-pane ion-side-menu-content="">
    <ion-nav-bar type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-pane>

  <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="slideChanged(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>

SWORKIT

Stats

5 Million Downloads

Featured in Apple App Store & Google Play

Challenges

Android Drawer

HTML5 Inline Video

13 Languages

Plugins

Healthkit, HTML5Video, SessionM, Kiip, LowLatencyAudio, SocialShare, Datepicker, ScreenOrientation, AppAvailability, Keyboard, File, File-Transfer, Splashscreen, InAppBrowser

More Examples

Keychain

ChefSteps

HabitRPG

Craft Boom

showcase.ionicframework.com

“YOU can create and distribute apps for iOS and Android with HTML, CSS, & JS.”

lightening-hybrid

gylippus

lightening-hybrid

0 0