ionic 2 - introduction
TRANSCRIPT
![Page 1: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/1.jpg)
Introduction to Ionic 2
![Page 2: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/2.jpg)
Stilian Kanchevbig boss @ snapp.cc
![Page 3: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/3.jpg)
TOPICS
❏ Ionic Platform
❏ Evolution
❏ JavaScript on Steroids
❏ Hassle Free
❏ Navigation Simplicity
❏ Adaptive Design
❏ Ionic Native
❏ Coming Next
![Page 4: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/4.jpg)
![Page 5: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/5.jpg)
Ionic Platform
![Page 6: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/6.jpg)
Evolution
![Page 7: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/7.jpg)
Angular v1 learning in a Nutshell
ngMagic
![Page 8: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/8.jpg)
Angular v2 Syntax
ngRepeatngFor
angular.factory
class
angular.service
*.controller
*.filter
*.directive
![Page 9: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/9.jpg)
Angular v2 Architecture
❏ Observables
❏ Zone.js
❏ Web Workers - Boosts performance
❏ Web Services - Adds offline support
❏ Web Components ready - HTML Next ready
$scope
![Page 10: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/10.jpg)
JavaScript on Steroids
![Page 11: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/11.jpg)
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future
![Page 12: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/12.jpg)
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future
![Page 13: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/13.jpg)
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future
![Page 14: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/14.jpg)
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future
![Page 15: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/15.jpg)
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
![Page 16: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/16.jpg)
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
![Page 17: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/17.jpg)
Hassle Free
![Page 18: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/18.jpg)
Build process
❏ Templates will be compiled not on fly
❏ Dependency Injection during compilation
❏ Target of 10KB payload in Hello World
![Page 19: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/19.jpg)
Navigation Simplicity
![Page 20: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/20.jpg)
Navigation simplicity
❏ Push on to the nav stack
❏ Pop from the nav stack
❏ Insert/Remove/Update
![Page 21: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/21.jpg)
Adaptive Design
![Page 22: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/22.jpg)
OS Adaptive design
❏ Design modes
❏ iOS
❏ Android
❏ Windows Phone - uses Android styles
❏ Other platforms - uses iOS styles
![Page 23: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/23.jpg)
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
![Page 24: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/24.jpg)
OS Adaptive design
❏ Ionicons based on the platform
❏ Android icons following the Material
Design Guide
❏ iOS styled icons
![Page 25: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/25.jpg)
Ionic Native
![Page 26: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/26.jpg)
Coming Next
![Page 27: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/27.jpg)
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)
![Page 28: Ionic 2 - Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58714ab21a28ab55588b67bd/html5/thumbnails/28.jpg)
Thank you!
Hybrid Mobile Development Bulgaria