Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to ionic 2

1,252 views

Published on

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

Published in: Technology
  • Login to see the comments

Intro to ionic 2

  1. 1. INTRO TO IONIC 2 MEAN STACK NYC | A LOOK AT IONIC 2 Jamal O’Garro Software Engineer + Instructor
  2. 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. 3. TERMINONLOGY • Native App • Responsive Web App • Hybrid App MEAN STACK NYC | A LOOK AT IONIC 2
  4. 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. 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. 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. 7. DEPENDENCIES MEAN STACK NYC | A LOOK AT IONIC 2
  8. 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. 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. 10. COMPONENTS • ActionSheet • Button • Searchbar • Alert • Modal • IonRefresher • Keyboard MEAN STACK NYC | A LOOK AT IONIC 2
  11. 11. IONIC NATIVE • ActionSheet • Modal • IonRefresher • Keyboard MEAN STACK NYC | A LOOK AT IONIC 2
  12. 12. PAGE COMPONENTS • Template • Providers • Logic MEAN STACK NYC | A LOOK AT IONIC 2
  13. 13. THE NAVIGATION STACK MEAN STACK NYC | A LOOK AT IONIC 2
  14. 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. 15. STYLING YOUR APP • Component based styles • Application based styles • Platform based styles MEAN STACK NYC | A LOOK AT IONIC 2
  16. 16. DEMO APP MEAN STACK NYC | A LOOK AT IONIC 2
  17. 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. 18. THANK YOU!!! Jamal O’Garro Software Engineer + Instructor MEAN STACK NYC | A LOOK AT IONIC 2

×