when to build a hybrid mobile application? liju pillai,
TRANSCRIPT
![Page 1: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/1.jpg)
Hybrid Mobile App &
Ionic Framework
Liju Pillai@lijuperfomatix
![Page 2: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/2.jpg)
OVERVIEW⦿Mobile apps - The choices⦿Native vs Hybrid vs Web⦿Why hybrid matters⦿PhoneGap⦿AngularJS⦿Ionic Framework⦿Demo⦿The future
![Page 3: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/3.jpg)
![Page 4: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/4.jpg)
Choices⦿Native⦿Web⦿Hybrid
![Page 5: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/5.jpg)
Native apps⦿Platform specific⦿Individual development tools⦿Best performance⦿Time consuming⦿Expensive
![Page 6: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/6.jpg)
Web⦿Browser based⦿Responsive web sites/app⦿Limited or no access to native features
![Page 7: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/7.jpg)
Hybrid⦿Platform independent⦿Uses HTML5,CSS3, JS⦿Compromised performance⦿Faster development cycle⦿Access to native features⦿Web view
![Page 8: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/8.jpg)
Apache CordovaA platform for building native mobile apps using HTML,CSS and JS
![Page 9: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/9.jpg)
Cordova - Supported platforms⦿iOS⦿Android⦿Windows⦿Blackberry⦿FireOS … etc
Refer : https://cordova.apache.org/
![Page 10: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/10.jpg)
Cordova - Native plugins⦿Camera⦿Battery status⦿Contacts⦿Device orientation⦿Geolocation⦿Splashscreen
Refer : https://cordova.apache.org/plugins/
![Page 11: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/11.jpg)
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: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/12.jpg)
![Page 13: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/13.jpg)
![Page 14: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/14.jpg)
![Page 15: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/15.jpg)
Ionic - CSS⦿Header⦿Content⦿Footer⦿Cards⦿Forms⦿Range .. etc
Refer : http://ionicframework.com/docs/components/
![Page 16: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/16.jpg)
Ionic - JS⦿Side Menu⦿Scroll⦿Modal⦿List⦿Keyboard..
Refer : http://ionicframework.com/docs/api/
![Page 17: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/17.jpg)
Ionic - Platform Customisation⦿Platform classes⦿Dynamic templates
Refer : http://ionicframework.com/docs/api/
![Page 18: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/18.jpg)
Ionic - CLI⦿Install⦿Emulate⦿Development⦿Upload ….
Refer : http://ionicframework.com/docs/cli/
![Page 19: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/19.jpg)
Demo
![Page 20: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/20.jpg)
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: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/21.jpg)
Ionic - Alternatives⦿Onsen UI⦿Monaca⦿Telerik⦿jQuery Mobile
![Page 22: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/22.jpg)
Is the future bright? Let’s ask Zuck
![Page 23: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/23.jpg)
![Page 24: When to build a hybrid mobile application? Liju Pillai,](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587245f11a28ab852f8b45df/html5/thumbnails/24.jpg)
Q&A