Intro to ionic 2
2 likes1,309 views
The document provides an overview of Ionic 2, a framework for building hybrid mobile apps with web technologies. It introduces the speaker and their background in full stack development. Key points about Ionic 2 are that it is a rewrite built on Angular 2 and TypeScript that provides more native-like experiences for iOS and Android. It leverages components and directives to access device features via Cordova and offers navigation stack-based routing. Examples of features like navigation, styling and native plugins are demonstrated.
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
- 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