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

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

5. Ionic Platform

6. Evolution

7. Angular v1 learning in a Nutshell
ngMagic

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

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

10. JavaScript on Steroids

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. ES6/7 Syntax
@Page - Decorator
export / export default - Modules syntax
classes - ES6 syntax
- Bright new future

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

16. 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

17. Hassle Free

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

19. Navigation Simplicity

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

21. Adaptive Design

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

23. 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

24. OS Adaptive design
❏ Ionicons based on the platform
❏ Android icons following the Material
Design Guide
❏ iOS styled icons

25. Ionic Native

26. Coming Next

27. 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)

28. Thank you!
Hybrid Mobile Development Bulgaria