Progressively Mobile With Ionic

Buonasera

Sani Yusuf

  • Founder Of Haibrid
  • Co-Organiser Of Ionic-UK
  • Author & Trainer
  • Recently Traveled The World
  • Big Fan Of Avatar Movie

@saniyusuf

Why Am I Here?

  • IOS App

  • Android App
  • Windows App (Yes Still Alive)
  • Progressive Web App

All With One Code Base

To Show You How You Can Use Ionic To Create: 

That's 4 Apps In One

Let Me Show You

An open source SDK that lets web developers build mobile applications

It's Really Just Web

Built On Top Of Angular

How It All Fits

 

 

 

 

 

 

 

 

Native App Container

 

 

 

 

 

 

 

WebView

 

 

 

 

 

Angular

 

 

 

 

Ionic

 

Your App's <code>

 

Cordova

Device Features

 

 

Let's See Some Features Of Ionic

Native Esque Components

  • Performant Components
  • Modelled Off Native SDKs
  • Ionicons Library
  • Semantic & Extensible

  <ion-header>
    <ion-navbar>
      <ion-title>Angular UP</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>
    {{firstName}} {{lastName}}
  </ion-content>

Push/Pop Navigation

  • Custom & Stack Based 
  • Mimics Native Routing
  • Supports Deep-Linking
  • Every @Component Treated As a Page

 

   
    pushSettings() {
      this.nav.push(Settings);
    }
    
    goBack() {
      this.nav.pop();
    }
    
    resetHome() {
      this.nav.setRoot(Home);
    }

Fully Featured CLI Tool

  • SASS Compilation
  • Build Bundling
  • Happy Marriage With Cordova
  • Typescript Transpilation
  • Scaffolding 
  • Kick Ass Error Reporting

Awesome Huge Community

  • 28,000 Stars On Github
  • Almost 11,000 Slack Members
  • Active Forum
  • Global Community With Over 100 Groups

Configurable & Customisable

  • Customise with SASS to match your brand
    • Every Feature Is Configurable
      • Component Level
      • Platform Level
      • Global Level

Multi Language Support

  • Leverages ng2-translate Library
  • Support as many languages as your app requires.
  • Also has built in RTL support 

Now Let's Talk Progressive Web Apps

What Is A Progressive Web App?

  • Offline First
  • Manifest.JSON & Service Worker
  • Full-Screen Mode
  • Home Screen Icon
  • No App Stores
  • Chrome Only For Now

Service Worker

Web App
Service Worker
Server

NETFLIX & CHILL APP

  • Netflix App Redesign By @EfosaSO
  • Progressive Web App
  • Translation Support

https://github.com/saniyusuf/ionic-netflix

http://bit.do/nflix

Its Demo Time

Let's See Our App Run On All 3 Platforms As Well As Progressive

Netflix & Chill APP Preview

http://bit.do/nflix

That Was Awesome

Advanced PWA

  • Service Worker BG Sync

  • Service Worker Periodic Sync
  • Push Notifications

  • The Web Standards Are Really Improving

    • Web Bluetooth

    • NFC

    • GetUserMedia

Great Things To Be Aware Of

Ionic Cloud

Push Notifications

Auth

Analytics

Deploy

Package

DB (Private Beta)

Ionic View App

  • Available On IOS & Android
  • Test On Real Device
  • Share With Anyone
  • No More Long Waits For New Build
  • No Need For IOS/Android Certificates
  • No Need For Any Technical Know How

http://view.ionic.io

Parting Words

  • Now You Can Have One Project But 4 Mobile Solutions 

  • 100% Code Re-Use 

  • Cost Effective & Time Conscious 

  • Focus Less On The How To Do & More On Doing The To-Do

  • A Win For The Web Is A Win For Us All

Join Ionic Denmark

https://www.meetup.com/ionicdenmark/

Get Started Today

http://ionicframework.com/docs/v2/getting-started/

http://www.joshmorony.com/tag/ionic2/

Find Me Online

@saniyusuf

https://forum.ionicframework.com/

http://ionicworldwide.herokuapp.com/

Kuna Da Tanbaya Ney?

Hausa For Any Questions?