Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ionic 2 - Introduction

802 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×