INTRO TO IONIC 2

MEAN STACK NYC | A LOOK AT IONIC 2

Jamal O’Garro Software Engineer + Instructor

SPEAKER BIO

• Fullstack developer (JavaScript/Node)

• Also likes Python and Haskell

• Enjoy teaching and running meetups

• Self-taught and loves learning new things

@jsogarro

MEAN STACK NYC | A LOOK AT IONIC 2

TERMINONLOGY

• Native App

• Responsive Web App

• Hybrid App

MEAN STACK NYC | A LOOK AT IONIC 2

WHAT IS IONIC?• Twitter Bootstrap for hybrid mobile apps

• Provides directives/components that mimic native features

• Provides access to native device features via Cordova

• Created in 2013

• Over 1,000,000 apps built with it

• Have apps that have top ratings in the App Store

MEAN STACK NYC | A LOOK AT IONIC 2

WHAT IS IONIC 2?• Rewrite of the Ionic framework

• More components (directives) to provide mobile interactions and functionality

• Easier to build with and customize

• Improved performance

• Provides a more native feeling user experience

• Currently in Alpha

MEAN STACK NYC | A LOOK AT IONIC 2

IONIC 2 FEATURES• Leverages TypeScript + Angular 2

• ES6/ES7 (ES2015/ES2016)

• Navigation stack style navigation

• Ionic Native replaces ngCordova

• URLs are gone by default

• No Router by default (can use ng2 router or ui-router2)

MEAN STACK NYC | A LOOK AT IONIC 2

DEPENDENCIESMEAN STACK NYC | A LOOK AT IONIC 2

QUICK NOTES ON ANGULAR 2.0

• Component based

• No more digest cycle

• Uses ES6 imports

• Developed in and for TypeScript

MEAN STACK NYC | A LOOK AT IONIC 2

BENEFITS OF IONIC 2

• Strong typing byway of TypeScript

• Have a development flow this is closer to native app development

• Get iOS, Android and Windows “look and feel” for free

• Easier to customize

MEAN STACK NYC | A LOOK AT IONIC 2

COMPONENTS• ActionSheet

• Button

• Searchbar

• Alert

• Modal

• IonRefresher

• Keyboard

MEAN STACK NYC | A LOOK AT IONIC 2

IONIC NATIVE

• ActionSheet

• Modal

• IonRefresher

• Keyboard

MEAN STACK NYC | A LOOK AT IONIC 2

PAGE COMPONENTS

• Template

• Providers

• Logic

MEAN STACK NYC | A LOOK AT IONIC 2

THE NAVIGATION STACKMEAN STACK NYC | A LOOK AT IONIC 2

THE NAVIGATION STACK CONT’D• App is a stack (array) of pages

• Push new page onto stack to navigate to new page

• Pop a page from the stack to go back to previous page

• Set a root page for the stack (clear the stack)

• Can do this in the component file or by using navPush/navPop directives in template

MEAN STACK NYC | A LOOK AT IONIC 2

STYLING YOUR APP

• Component based styles

• Application based styles

• Platform based styles

MEAN STACK NYC | A LOOK AT IONIC 2

DEMO APPMEAN STACK NYC | A LOOK AT IONIC 2

RESOURCES• Ionic Labs

• Ionic Creator

• Ionic Subreddit

• Angular.io

• Ionic Docs

• Official Ionic Blog

• Ionic Worldwide

• Ripple Emulator

• Atom Ionic Plugin

MEAN STACK NYC | A LOOK AT IONIC 2

THANK YOU!!!

Jamal O’Garro Software Engineer + Instructor

MEAN STACK NYC | A LOOK AT IONIC 2