Hybrid mobile apps with AngularJS and Ionic

CONTENTS AT A GLANCE

1. Hybrid vs Native

2. Ionic Framework overview

3. UI Elements 

4. The CLI

5. The future

6. probably a DEMO...probably

"Cool...let's go native!"

Downsides of native

• knowledge of each platform
• separate code bases, virtually not reusable
• different hardware (except for Android)
• generally high development costs

More Platforms. More Problems.

So, what's the alternative?

• Hybrid Apps: HTML5 that acts like native
• Cordova - the engine that powers Phonegap
• Web wrapped in native layer
• Direct access to native APIs
• Familiar web dev environment
• Develop a single code base (web platform)

What's that, Zack?

What's that, Zack?

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

You're (probably) not building Facebook

OK, native SDKs are kinda cool

• Built in UI components
• Views
• Navigation and stack history
• Transitions
• Gestures

"Hybrid apps are sooo slooow"

Your hybrid app is so slow that when it tried to cross the road it got a parking ticket

Hybrid mobile apps...

True, BUT...

...times are changing, mobile devices are rapidly evolving

https://mixpanel.com/trends/#report/ios_8/from_date:-209,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption/from_date:-364,to_date:1

There's No Web SDK

• 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

Say hello to my little friend

Web Technologies You Already Know and Love

Web Technologies You Already Know and Love

Native focused

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

Performance Obsessed

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

• 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

Built in font-icons set - Ionicons

Ionic Adoption

• 13,000+ Github Stars
• Top 50 most starred Github repos
• Consistently Top 10 trending JS Github repos
• Ionic CLI averages 2,300 downloads/day
• 400,000+ Ionic apps have been started from our CLI
• Released Alpha: November 2013
• Released Beta: March 2014
• Release Candidate: Winter 2015

But how does it work?

Your app

Ionic

AngularJS

Cordova (WebView)

Native Wrapper (SDK)

Show me some code!

Ionic UI components

Lists

<ion-content>
    <ion-list>
      <ion-item ng-repeat="item in items">
           Item {{ item.id }}
      
          <!-- delete -->
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>

          <!-- Option buttons -->
          <ion-option-button class="button-assertive">
              Edit
          </ion-option-button>
          <ion-option-button class="button-calm">
              Share
          </ion-option-button>

          <!-- reorder -->
          <ion-reorder-button class="ion-navicon" 
                on-reorder="moveItem(item,$fromIndex,$toIndex)">
          </ion-reorder-button>

        </ion-item>
    </ion-list>
</ion-content>

Navigation and Tabs

<ion-tabs>

  <ion-tab title="Home" icon="ion-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios7-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

• Uses AngularUI Router
• Transitions follow direction of nav
• Nested views
• Each tab has its own nav history

Side menu

<ion-side-menu-content>

  <ion-nav-view name="menuContent"></ion-nav-view>

</ion-side-menu-content>

<ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>

    <ion-content>
      ...
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

Modals

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

• AngularJS Service
• Inline or external template

And much more...

http://ionicframework.com/docs/

Other cool stuff worth mentioning

• Platform continuity
• Swipe to go back
• Cached views
• Automatic splash and icon generator
• collection-repeat (ng-repeat on steroids)

Other cool stuff worth mentioning

Ionic Creator

Ionic View mobile app

Ionic CLI

• Quickly create 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

Creating a project, as easy as...

1.     $ npm install -g ionic cordova
2.     $ ionic start myapp sidemenu
3.     $ cd myapp
4.     $ ionic serve

The future

Alternatives worth mentioning

Last but not least...

DEMO TIME, as promised :)