The Ionic Evolution

A Walk Back Through History

Who Am I ?

Sani Yusuf

Mobile Enthusiast
Keen Glass Explorer
Phonegapper from day one
Currently consulting for Huddlebuy
Writer / Trainer on mobile
I love Avatar (Im even learning Navi)

@saniyusuf

By The Way, I Am Hiring :)

Why Im Here

Pre Ionic Times
Early Ionic
Ionic Today
The Features
Some Live Code
Future Of Ionic
Roundup

Short History Lesson

Before Mobile Apps, we had the web.

Websites were the same everywhere and had the same code.

Everyone knew HTML, CSS & Javascript.

Along came Apps

Problem?

Need to learn a new Language to create Apps

Java for Android
Objective C for IOS
.NET for Windows Phone

Native is expensive

Classic web developers left out

Zero re-usability of resources

Hybrid Apps To The Rescue

Hybrid Promise

Along came Phonegap / Cordova

Uses the WebView and give access to device features

100% Cross platform

The classic developers were back in the game

The Big Boys Joined

Bright Future

Not So Fast

The big boys abandoned us

Hybrid apps failed to deliver

HTML5 still not standardised

Web Developer !== Mobile Developer

Ugly Ugly User Interface

What We Need

A framework dedicated at solving our issues

Native esque features

Massive community support

Adoption

Performant

Introducing Ionic

Made by Drifty (Max & Ben)

Open Source (13k Stars On GitHub)

Big ass community behind it

Its free too

Closer Look

Built with Angular JS
Made by Geeks like you
Develop with web technologies
SASS-able css customization
Performance obsessed
Native esque interactions
Ionicons
NG-Cordova

Lets See Some Proof

Advanced Lists

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

Action Sheet

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>