Developing a hybrid mobile app using Ionic framework

1. Hybrid Mobile App
&
Ionic Framework
Liju Pillai
@lijuperfomatix
liju@perfomatix.com

2. OVERVIEW
⦿Mobile apps - The choices
⦿Native vs Hybrid vs Web
⦿Why hybrid matters
⦿PhoneGap
⦿AngularJS
⦿Ionic Framework

4. Choices
⦿Native
⦿Web
⦿Hybrid

5. Native apps
⦿Platform specific
⦿Individual development tools
⦿Best performance
⦿Time consuming
⦿Expensive

6. Web
⦿Browser based
⦿Responsive web sites/app
⦿Limited or no access to native
features

7. Hybrid
⦿Platform independent
⦿Uses HTML5,CSS3, JS
⦿Compromised performance
⦿Faster development cycle
⦿Access to native features
⦿Web view

8. Apache Cordova
A platform for building native mobile
apps using HTML,CSS and JS

9. Cordova - Supported platforms
⦿iOS
⦿Android
⦿Windows
⦿Blackberry
⦿FireOS … etc
Refer : https://cordova.apache.org/

10. Cordova - Native plugins
⦿Camera
⦿Battery status
⦿Contacts
⦿Device orientation
⦿Geolocation
⦿Splashscreen
Refer : https://cordova.apache.org/plugins/

11. Phonegap vs Cordova
PhoneGap is a distribution of Apache Cordova. You can
think of Apache Cordova as the engine that powers
PhoneGap, similar to how WebKit is the engine that
powers Chrome or Safari.
https://www.quora.com/What-is-the-difference-between-PhoneGap-and-
Cordova-and-why-would-I-select-one-over-another

15. Ionic - CSS
⦿Header
⦿Content
⦿Footer
⦿Cards
⦿Forms
⦿Range .. etc
Refer : http://ionicframework.com/docs/components/

16. Ionic - JS
⦿Side Menu
⦿Scroll
⦿Modal
⦿List
⦿Keyboard..
Refer : http://ionicframework.com/docs/api/

17. Ionic - Platform Customisation
⦿Platform classes
⦿Dynamic templates
Refer : http://ionicframework.com/docs/api/

18. Ionic - CLI
⦿Install
⦿Emulate
⦿Development
⦿Upload ….
Refer : http://ionicframework.com/docs/cli/

19. Demo

20. Performance Optimization
⦿JS coding best practices
⦿Not suited for all apps
⦿Watch out for animations
⦿Tap delay - Use fastclick
⦿Offline Capability
◼Local Storage has issues
◼Use PouchDB
⦿Memory leakage

21. Ionic - Alternatives
⦿Onsen UI
⦿Monaca
⦿Telerik
⦿jQuery Mobile

22. Is the future bright? Let’s ask Zuck

24. Q&A

25. App Showcase:
http://perfomatix.com/showcase/

26. Thanks
Liju Pillai
@lijuperfomatix
hello@perfomatix.com