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.

Ionic 2 - Introduction

794 views

Published on

Presentation N2 from the Skill Sharing meeting in BetaHaus
https://www.facebook.com/events/1560174844295442/

Published in: Software
  • Login to see the comments

Ionic 2 - Introduction

  1. 1. Introduction to Ionic 2
  2. 2. Stilian Kanchev big boss @ snapp.cc
  3. 3. TOPICS ❏ Ionic Platform ❏ Evolution ❏ JavaScript on Steroids ❏ Hassle Free ❏ Navigation Simplicity ❏ Adaptive Design ❏ Ionic Native ❏ Coming Next
  4. 4. Ionic Platform
  5. 5. Evolution
  6. 6. Angular v1 learning in a Nutshell ngMagic
  7. 7. Angular v2 Syntax ngRepeat ngFor angular.factory class angular.service *.controller *.filter *.directive
  8. 8. Angular v2 Architecture ❏ Observables ❏ Zone.js ❏ Web Workers - Boosts performance ❏ Web Services - Adds offline support ❏ Web Components ready - HTML Next ready $scope
  9. 9. JavaScript on Steroids
  10. 10. ES6/7 Syntax @Page - Decorator export / export default - Modules syntax classes - ES6 syntax - Bright new future
  11. 11. ES6/7 Syntax @Page - Decorator export / export default - Modules syntax classes - ES6 syntax - Bright new future
  12. 12. ES6/7 Syntax @Page - Decorator export / export default - Modules syntax classes - ES6 syntax - Bright new future
  13. 13. ES6/7 Syntax @Page - Decorator export / export default - Modules syntax classes - ES6 syntax - Bright new future
  14. 14. TypeScript support ❏ Ready to use Webpack loader ❏ Components compatible with TypeScript(written in TS) What TypeScript brings? ❏ Transpiles to ES5/ES6 ❏ Error checking during “compilation” based on types ❏ No 'undefined' is not a function
  15. 15. TypeScript support ❏ Ready to use Webpack loader ❏ Components compatible with TypeScript(written in TS) What TypeScript brings? ❏ Transpiles to ES5/ES6 ❏ Error checking during “compilation” based on types ❏ No 'undefined' is not a function Parameter of type “string” Return string “t” is of type string
  16. 16. Hassle Free
  17. 17. Build process ❏ Templates will be compiled not on fly ❏ Dependency Injection during compilation ❏ Target of 10KB payload in Hello World
  18. 18. Navigation Simplicity
  19. 19. Navigation simplicity ❏ Push on to the nav stack ❏ Pop from the nav stack ❏ Insert/Remove/Update
  20. 20. Adaptive Design
  21. 21. OS Adaptive design ❏ Design modes ❏ iOS ❏ Android ❏ Windows Phone - uses Android styles ❏ Other platforms - uses iOS styles
  22. 22. OS Adaptive design ❏ SASS styles splitted based on the platform ❏ app.core.scss - Global styles ❏ app.ios.scss - iOS specific styles ❏ app.md.scss - Android specific styles ❏ app.variable.scss - Full list
  23. 23. OS Adaptive design ❏ Ionicons based on the platform ❏ Android icons following the Material Design Guide ❏ iOS styled icons
  24. 24. Ionic Native
  25. 25. Coming Next
  26. 26. Coming Next ❏ Windows 10 support ❏ Windows 10 theme is in progress ❏ Ionic Web Edition ❏ Ionic Desktop (Electron) ❏ Smoother hybrid apps - iOS 9.3 no delay ❏ React’s virtual DOM coming to Angular? ❏ Isomorphic Ionic(Angular Universal)
  27. 27. Thank you! Hybrid Mobile Development Bulgaria

×