Ionic – A Framework For Mobile Development

View Github Repository Open presentation in a new window

mihaiBura

See all presentation from mihaiBura

Ionic – A Framework For Mobile Development

0 0

ionic-presentation

Ionic Framework Presentation

On Github mihaiBura / ionic-presentation

Ionic

A Framework For Mobile Development

Hi, I'm Mihai

GitHub / Twitter / @mihaiBura

FE dev mentor

What about you?

nativ? ng?

Disclaimer

* just love alte framework-uri introducere 3 lucruri (xp, feature, app)
iunie 2014 aprilie 2015

"Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies." ionicframework.com

hibride ios, android tehnologii web

In the wild

stagii de practica - ping pong internship - push notif real app - ridesharing

Why Ionic?

no bullets faze de dezvoltare ajutor oferit de Ionic

Prototype

client - po - prototip mvp

Develop

faza principala cele mai noi standarde

Develop / UI

            
  <div class="bar bar-header bar-royal">
    <h1 class="title">bar-royal</h1>
  </div>
identitate vizuala sass 
            
  <div class="list">
    <a class="item item-avatar" href="#">
      <img src="mihai.jpg">
      <h2>Mihai</h2>
      <p>Holy Guacamole!</p>
    </a>
  </div>
Bootstrap, foundation 
            
  <!-- single icon -->
  <i class="icon ion-star"></i>
  <!-- button with icon -->
  <button class="button icon-left ion-home">Home</button>

Develop / Behaviour

cordova angular ngCordova 
            
  http://ionicframework.com/docs/api/utility/ionic.EventController/
  <!-- hold -->
  <button on-hold="onHold()">Test</button>
  <!-- swipe -->
  <button on-swipe-right="onSwipeRight()">Test</button>
mai multe la addr 
            
  <ion-list>
    <ion-item>
      Wake up!
      <ion-option-button class="button-assertive">
        Nope :-)
      </ion-option-button>
    </ion-item>
  </ion-list>
pull to refresh

Develop / Bling

            
  .scroll-bar-indicator {
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: opacity 0.3s linear; 
  }
  .grade-c .scroll-bar-indicator {
    background: #aaa; 
  }
  .scroll-bar-indicator.scroll-bar-fade-out {
    opacity: 0; 
  }
  .grade-c .scroll-bar-indicator.scroll-bar-fade-out {
    transition: none; 
  }
optimizare a experientei 
            
  var push = new Ionic.Push({
    "debug": true,
    "onNotification": function(notification) {
      var payload = notification.payload;
      console.log(notification, payload);
    },
    "onRegister": function(data) {
      console.log(data.token);
    }
  });
unificare 
            
  var deploy = new Ionic.Deploy();
  // Promises 
  deploy.check();
  deploy.download();
  deploy.extract();
  deploy.update();
  // not a Promise
  deploy.load();
deploy nou binar neschimbat

Build, test, emulate

            
  // gulpfile.js
  gulp.task('test', function() {
    // look into karma.conf.js and do stuff
  });

  // bash
  $ gulp test
easy to build and test 
            
  $ ionic serve
  $ ionic emulate ios
  $ ionic help
debug cli - start, add plugin, emulate

Upload

          
  $ ionic upload
iterare share app instant feedback

Analyze

          
  $ionicAnalytics.track('New Score', {
    winner: 'x'
  });
no overhead default states custom events

Q&A

* so far pentru cei care nu m-au intrerupt

Demo

x si 0

Q&A

* beer

github.com/mihaibura

bow
1
Ionic A Framework For Mobile Development