YOOBICCollective intelligence

ionic framework

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

Presented by
Avi  Haiat - thaiat@yoobic.com

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

What is ionic ?

Web technologies you already know and love

Best friend with angularjs

UI components are angularjs directives

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)

Performance obsessed


  • Hardware accelerated animations
  • Minimal DOM manipulation
  • Zero jQuery

Native focused


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

Ionic icons

Lists

  • css only
  • no javascript / angularjs


 
   

      Candy Bars
   

   
      Butterfinger
    
   
      Kit Kat
   
   ...

Complex Lists

  • angularjs directive
  • buttons exposes by swiping
  • Reorder / Delete

    
       
       
{{ item.name }}

       
{{ item.quote }}

Tabs

  • nested views
  • each tab has its own nav history

Navigation

  • shows back button when possible
  • each tab has its own nav history
  • works with android back button

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

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