hybrid mobile and ionic

26
Hybrid Mobile App & Ionic Framework Liju Pillai @lijuperfomatix [email protected]

Upload: liju-pillai

Post on 09-Jan-2017

6.372 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: Hybrid mobile and Ionic

Hybrid Mobile App &

Ionic Framework

Liju Pillai@lijuperfomatix

[email protected]

Page 2: Hybrid mobile and Ionic

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

Page 3: Hybrid mobile and Ionic
Page 4: Hybrid mobile and Ionic

Choices⦿Native⦿Web⦿Hybrid

Page 5: Hybrid mobile and Ionic

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

Page 6: Hybrid mobile and Ionic

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

Page 7: Hybrid mobile and Ionic

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

Page 8: Hybrid mobile and Ionic

Apache CordovaA platform for building native mobile apps using HTML,CSS and JS

Page 9: Hybrid mobile and Ionic

Cordova - Supported platforms⦿iOS⦿Android⦿Windows⦿Blackberry⦿FireOS … etc

Refer : https://cordova.apache.org/

Page 10: Hybrid mobile and Ionic

Cordova - Native plugins⦿Camera⦿Battery status⦿Contacts⦿Device orientation⦿Geolocation⦿Splashscreen

Refer : https://cordova.apache.org/plugins/

Page 11: Hybrid mobile and Ionic

Phonegap vs CordovaPhoneGap 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

Page 12: Hybrid mobile and Ionic
Page 13: Hybrid mobile and Ionic
Page 14: Hybrid mobile and Ionic
Page 15: Hybrid mobile and Ionic

Ionic - CSS⦿Header⦿Content⦿Footer⦿Cards⦿Forms⦿Range .. etc

Refer : http://ionicframework.com/docs/components/

Page 16: Hybrid mobile and Ionic

Ionic - JS⦿Side Menu⦿Scroll⦿Modal⦿List⦿Keyboard..

Refer : http://ionicframework.com/docs/api/

Page 17: Hybrid mobile and Ionic

Ionic - Platform Customisation⦿Platform classes⦿Dynamic templates

Refer : http://ionicframework.com/docs/api/

Page 18: Hybrid mobile and Ionic

Ionic - CLI⦿Install⦿Emulate⦿Development⦿Upload ….

Refer : http://ionicframework.com/docs/cli/

Page 19: Hybrid mobile and Ionic

Demo

Page 20: Hybrid mobile and Ionic

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⦿Use Crosswalk

Page 21: Hybrid mobile and Ionic

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

Page 22: Hybrid mobile and Ionic

Is the future bright? Let’s ask Zuck

Page 23: Hybrid mobile and Ionic
Page 24: Hybrid mobile and Ionic

Q&A

Page 25: Hybrid mobile and Ionic

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