1.
Introduction to Ionic 2

2.
Stilian Kanchev
big boss @ snapp.cc

3.
TOPICS
❏ Ionic Platform
❏ Evolution
❏ JavaScript on Steroids
❏ Hassle Free
❏ Navigation Simplicity
❏ Adaptive Design
❏ Ionic Native
❏ Coming Next

4.
Ionic Platform

5.
Evolution

6.
Angular v1 learning in a Nutshell
ngMagic

7.
Angular v2 Syntax
ngRepeat
ngFor
angular.factory
class
angular.service
*.controller
*.filter
*.directive

8.
Angular v2 Architecture
❏ Observables
❏ Zone.js
❏ Web Workers - Boosts performance
❏ Web Services - Adds offline support
❏ Web Components ready - HTML Next ready
$scope

9.
JavaScript on Steroids

10.
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future

11.
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future

12.
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future

13.
ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future

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.
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.
Hassle Free

17.
Build process
❏ Templates will be compiled not on fly
❏ Dependency Injection during compilation
❏ Target of 10KB payload in Hello World

18.
Navigation Simplicity

19.
Navigation simplicity
❏ Push on to the nav stack
❏ Pop from the nav stack
❏ Insert/Remove/Update

20.
Adaptive Design

21.
OS Adaptive design
❏ Design modes
❏ iOS
❏ Android
❏ Windows Phone - uses Android styles
❏ Other platforms - uses iOS styles

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.
OS Adaptive design
❏ Ionicons based on the platform
❏ Android icons following the Material
Design Guide
❏ iOS styled icons

24.
Ionic Native

25.
Coming Next

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.
Thank you!
Hybrid Mobile Development Bulgaria