Charleston JS – 2014 – IonicFramework



Charleston JS – 2014 – IonicFramework

0 0


charlestonjs-ionic-talk


On Github twilson63 / charlestonjs-ionic-talk

Charleston JS

2014

IonicFramework

WHOAMI

Tom Wilson

Jack Russell Software

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

ionicframework.com

Web Technologies You Already Know and Love

(You'll feel right at home)

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
  • Camera
  • BarCode Scanner
  • Contacts
  • 20+ Plugins and counting

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>

$cordovaCamera

  • Cordova Plugin
  • Promises API
module.controller('PictureCtrl', function($scope, $cordovaCamera) {

$scope.takePicture = function() {
  var options = {
    quality : 75,
    destinationType : Camera.Dest...Type.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    encodingType: Camera.EncodingType.JPEG,
    popoverOptions: CameraPopoverOptions
  };

  $cordovaCamera.getPicture(options)
  .then(function(imageData) {
    // Success! Image data is here
  }, function(err) {
    // An error occured.
  });
}
});

$cordovaContacts

  • Cordova Plugin
  • Promises API
module.controller('MyCtrl', 
 function($scope, $cordovaContacts) {
  $scope.addContact = function() {
    $cordovaContacts.save($scope.contactForm)
    .then(function(result) {
      // Contact saved
    }, function(err) {
      // Contact error
    });
  };

  // Many more features will be added shortly
});
                         $ 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

Get Started

  • npm install cordova ionic gulp -g
  • ionic start myapp sidemenu
  • cd myapp
  • ionic setup sass
  • npm install
  • ionic serve

Build Native

  • ionic build ios
  • ionic emulate ios

Demo

MIT LICENSED

Free to use (even commercially)

COMMUNITY POWERED

Active developer forum and GitHub repo

Get Started with Ionic!

Easy-to-follow videos, tutorials and formulaslearn.ionicframework.com

Visit the Community Forumforum.ionicframework.com

Contribute on GitHubgithub.com/driftyco/ionic

</html>

ionicframework.com

@ionicframework