Downloaded 62 times
Uploaded byJamal Sinclair O'Garro
Intro to ionic 2
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.
More Related Content
![[Lighting Talk] - Ionic 2 Tour](https://cdn.slidesharecdn.com/ss_thumbnails/ionic-2-160304092017-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to ionic 2
- 1. INTRO TO IONIC2 MEAN STACK NYC | A LOOK AT IONIC 2 Jamal O’Garro Software Engineer + Instructor
- 2. SPEAKER BIO • Fullstackdeveloper (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 IONIC2? • 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 ONANGULAR 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 IONIC2 • 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 MEANSTACK NYC | A LOOK AT IONIC 2
- 14. THE NAVIGATION STACKCONT’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 STACKNYC | 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 SoftwareEngineer + Instructor MEAN STACK NYC | A LOOK AT IONIC 2