Charleston JS

2014

IonicFramework

WHOAMI

Tom Wilson

Jack Russell Software

@twilson63

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





  

    Candy Bars
  


  
    Butterfinger
  

  
    Kit Kat
  

  ...

Complex Lists

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


  
    
    
{{ item.name }}

    
{{ item.quote }}

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



  

    
{{ c.name }}

    
{{ c.email }}

Tabs

  • Nested views
  • Each tab has its own nav history

Side Menu




  
    
    
  

  
    

      
Projects

    

    
      

        Work
        Home

Slide Box



  
    Slide 1
  
  
    Slide 2
  
  
    Slide 3

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

Navigation

  • Shows back button when possible
  • Each tab has its own history stack
  • Works with Android's back button


  
    Back

$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 formulas
learn.ionicframework.com


Visit the Community Forum
forum.ionicframework.com


Contribute on GitHub
github.com/driftyco/ionic

</html>

ionicframework.com

@ionicframework