An introductory talk on the Ionic 2 hybrid mobile app framework.

1. INTRO TO IONIC 2
MEAN STACK NYC | A LOOK AT IONIC 2
Jamal O’Garro
Software Engineer + Instructor

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

3. TERMINONLOGY
• Native App
• Responsive Web App
• Hybrid App
MEAN STACK NYC | A LOOK AT IONIC 2

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

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

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

7. DEPENDENCIES
MEAN STACK NYC | A LOOK AT IONIC 2

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

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

10. COMPONENTS
• ActionSheet
• Button
• Searchbar
• Alert
• Modal
• IonRefresher
• Keyboard
MEAN STACK NYC | A LOOK AT IONIC 2

11. IONIC NATIVE
• ActionSheet
• Modal
• IonRefresher
• Keyboard
MEAN STACK NYC | A LOOK AT IONIC 2

12. PAGE COMPONENTS
• Template
• Providers
• Logic
MEAN STACK NYC | A LOOK AT IONIC 2

13. THE NAVIGATION STACK
MEAN STACK NYC | A LOOK AT IONIC 2

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

15. STYLING YOUR APP
• Component based styles
• Application based styles
• Platform based styles
MEAN STACK NYC | A LOOK AT IONIC 2

16. DEMO APP
MEAN STACK NYC | A LOOK AT IONIC 2

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

18. THANK YOU!!!
Jamal O’Garro
Software Engineer + Instructor
MEAN STACK NYC | A LOOK AT IONIC 2