Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Intro to ionic 2
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
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
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
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