ionic framework

View Github Repository Open presentation in a new window

thaiat

See all presentation from thaiat

ionic framework

3 3

keynote-ionic

Ionic keynote for meetup

On Github thaiat / keynote-ionic

ionic framework

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

Presented by Avi  Haiat - thaiat@yoobic.com

Notes:

Russian Kombat

Who am I ?

Who am I ?

Vizelia bought by Schneider Electric in 2011

Yoobic

  • Yoobic is a "Mobile productivity App"
  • Yoobic simplifies short term logistic processes and transform logistic costs into a stream of revenues
  • Yoobic is leveraging crowdsourced workforce and harnessing geolocation technology

More platforms, more problems

Do we really need to code for multiple platforms ?

“The biggest mistake we've made as a company is betting on HTML5 over native.”

Mark Zuckerberg - 2012

It's not 2012 anymore

Mobile devices and HTML5 stacks have rapidly evolved

Where is ionic stack ?

What is ionic ?

Web technologies you already know and love

Notes:

What is ionic ?

Web technologies you already know and love

Notes:

Best friend with angularjs

UI components are angularjs directives

Notes:

CSS generated by Sass

  • Quickly give your app its own look and feel
  • CSS designed to be overriden
  • Stand-alone CSS (independent of ionic's javascript)
Notes:

Performance obsessed

  • Hardware accelerated animations
  • Minimal DOM manipulation
  • Zero jQuery
Notes:

Native focused

  • Built to work with Cordova / Phonegap
  • Include its own cli
Notes:

Ionic icons

Notes:

Lists

  • css only
  • no javascript / angularjs
<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 exposes 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

  • nested views
  • each tab has its own nav history
<ion-tabs tabs-type="tabs-icon-only">
   <ion-tab title="Home" icon="ion-star"> 
      <ion-nav-view name="home"></ion-nav-view>
   </ion-tab>

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

   <ion-tab title="Messages" icon="ion-chat-working">
      <ion-nav-view name="msg"></ion-nav-view>
   </ion-tab>
</ion-tabs>

Navigation

  • shows back button when possible
  • each tab has its own nav history
  • works with android back button
<ion-nav-bar back-button-icon="ion-chevron-left" back-button-type="button-icon">
</ion-nav-bar>

<ion-nav-view animation="slide-left-right">
</ion-nav-view>

Side Menu

<ion-side-menus>
   <ion-side-menu-content>
      <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="slideHasChanged($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> 
   <ion-refresher on-refresh="refreshData()">
   </ion-refresher>
   <!-- content -->
</ion-content>

How do I get started ?

  • Use ionic cli 
    npm install -g ionic
ionic start myapp [template]
ionic serve
ionic platform ios android
ionic build ios
  • or install with Bower 
    bower install ionic
  • or use ionic creator (https://creator.ionic.io/)
  • or use a yeoman generator (https://www.npmjs.org/package/generator-mcfly) 
    yo mcfly

This is boooring... Show me the code

Live coding

Let's play with the baby and see how easy it is to build a mobile app

Let's build a facebook mobile app

That's it !!!