Building Mobile Apps With Ionic and Angular

  • Founder Of Haibrid
  • Co-Organiser Of Ionic UK
  • Mobile Writer / Trainer
  • I Love Avatar (Im Even Learning Navi)

Overview

  1. Good Old History Lesson
  2. Intro Ionic
  3. UI Components
  4. Ionic CLI
  5. Demos
  6. Roundup
“I want a native app!”

The Downsides of Native

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development

More Platforms. More Problems.

Why are we still coding for multiple platforms in 2016?

“Is there an alternative?”
  • Web wrapped in native layer
  • Direct access to native APIs
  • Familiar web dev environment
  • Develop a single code base (web platform)
“Oh No! The Zuck has spoken!”

http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/

Are You Building the Facebook app?

  • Have a multi-million dollar budget?
  • Have a large team of experienced native developers?
  • Does your billion-dollar revenue depend on this app?
  • If so...do native
  • ...but today it's not so black and white
“I hear that Hybrid apps are slow!”
“Most people that say this have never developed Hybrid apps'”
If anything you are building is slow, don't blame the technology. You have either chosen the wrong approach, or are doing something wrong.

Mobile devices have rapidly improved!

Year Device Processor RAM
2007 iPhone 620 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2016 iPhone 6s 1.8 GHz dual-core 2 GB

Web-standards have rapidly improved!

  • caniuse.com is looking' pretty good nowadays
  • Android is now Chromium-based
  • iOS users keep their devices up-to-date

https://mixpanel.com/trends/#report/ios_9

https://mixpanel.com/trends/#report/android_os_adoption

Native SDKs Are Great

  • Common UI
  • Views
  • Navigation and stack history
  • Transitions
  • Gestures

There's No Web SDK

  • It's the wild-west for hybrid apps
  • We need to bridge the gap between web and native
  • We need rich, native-style UI components and interactions
  • We need UI APIs, not just jQuery widgets
“Hello.”

Web Technologies You Already Know and Love

(You'll feel right at home)

http://www.google.com/trends/explore#q=angularjs%2C%20ember.js%2C%20knockoutjs%2C%20backbonejs&date=8%2F2011%2037m&cmpt=q

Standing on the Shoulders of AngularJS

  • Proven for large-scale webapp development
  • Extends the HTML vocabulary
  • UI Components using Directives and Services

Native Focused

  • Modeled off of native SDKs
  • Built to work with Cordova

Performance Obsessed

  • Hardware accelerated animations
  • Minimal DOM Manipulation
  • Remove 300ms tap delay

Plain ol' CSS

  • CSS generated from the Sass preprocessor
  • Quickly give your app its own look and feel
  • CSS designed to be easily overridden
  • Variables based with default settings
  • 80+ reusable and useful mixins

Ionicons

Over 700 MIT licensed font-icons included

ionicons.com

“How does it all come together?”
Your App
Ionic
AngularJS
WebView (Cordova)
Native SDK

Ionic's Adoption

  • Almost 24,000+ Github Stars
  • Top 50 most starred Github repos
  • Consistently Top 10 trending JS Github repos
  • 3,000,000+ Ionic apps have been started from Ionic CLI
  • Curren Version 1.3.0: in 2016
UI Component Overview

Lists





  

    Candy Bars
  


  
    Butterfinger
  

  
    Kit Kat
  

  ...

Complex Lists

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



  
    List Item {{ item.id }}

Collection Repeat

  • Similar to Angular's ng-repeat
  • Inspired by iOS’s UICollectionView
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth jank-free scrolling



  

    
{{ c.name }}

    
{{ c.email }}

Navigation

  • Uses AngularUI Router
  • Shows back button when possible
  • Transitions follow direction of nav
  • Works with Android's back button


  
    Back

Tabs

  • Nested views
  • Each tab has its own nav history
  • Abstract states in AngularUI Router

Side Menu




  

    

  

  

    
      
Left Menu

    

    
      ...

Slide Box



  
    Slide 1
  
  
    Slide 2
  
  
    Slide 3

Action Sheet

  • AngularJS Service
  • Inject into controllers

$ionicActionSheet.show({
  titleText: 'Action Sheet Example',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Popover

  • AngularJS Service
  • Inline or external template

$ionicPopover.fromTemplateUrl('popover.html',
  function(popover) {
    $scope.popover = popover;
  }
);


  
    
My Popover Title

  
  
    Hello!

Modal

  • AngularJS Service
  • Inline or external template

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
});

Pull to Refresh

Ionic Creator

https://creator.ionic.io/

Ionic View App

http://view.ionic.io/

NG Cordova

http://ngcordova.com/

Ionic IO

http://ionic.io/

Ionic Market

https://market.ionic.io/

Ionic Play ground

The Plunker/Codepen For Ionic
http://play.ionic.io/ 
                
                          $ npm install -g ionic

                           _             _
                          (_)           (_)
                           _  ___  _ __  _  ___
                          | |/ _ \| '_ \| |/ __|
                          | | (_) | | | | | (__
                          |_|\___/|_| |_|_|\___|  CLI
  • Quickly create a project with starter templates
  • Boilerplate app structure ready for customization
  • Pre-configured tools: Gulp, Sass, Bower, etc.
  • Start a local dev server with LiveReload
  • Update Ionic Framework library files
  • Build and run native apps

Ionic Labs

Great for users not fond of the command line

Ionic CLI

            $ npm install -g ionic cordova
            $ ionic start myapp sidemenu
            $ cd myapp
            $ ionic serve

Demo Time!

Ionic Starter Templates
Platform Continuity
Customising Ionic Apps
May the demo gods be with us

Ionic Angular Testing

  • It's just an AngularJS app!
  • Setup with a great separation of concerns
  • Karma unit tests
  • Protractor e2e tests

Ionic Showcase

showcase.ionicframework.com

Get Started with Ionic!


Getting started guide
ionicframework.com/getting-started


Documentation
ionicframework.com/docs


Visit the Community Forum
forum.ionicframework.com


Contribute on GitHub
github.com/driftyco/ionic

Learn Ionic In Depth


Get My Book, "Ionic By Example" Available On Amazon

Ionic In Action Book By Jeremy Wilken
http://ionicinaction.com/


App Camp By Ionic's @brandyscarney & @benjsperry
http://www.appcamp.io/


Find Me Online

  • Twitter : @saniyusuf
  • Github : http://github.com/saniyusuf
  • Linkedin : http://linkedin.com/in/saniyusuf
  • Medium : http://medium.com/@saniyusuf
  • Slides : http://slides.com/saniyusuf
  • Website : http://saniyusuf.com
  • Ionic UK : @ionicUK

Some Really Great Contributors

  • Ionitron : @ionitron
  • Holly Schinsky : @devgirlFL
  • Raymond Camden : @raymondcamden
  • Joshua Morony : @joshuamorony
  • Andrew McGiverly : @andrewmcgivery
  • Nic Raboy : @nraboy

Questions