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





  

    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
  



  



                         $ 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!