ionic framework - intro to hybrid mobile application development
TRANSCRIPT
![Page 1: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/1.jpg)
Ionic FrameworkIntroduction to Hybrid Mobile Development
![Page 2: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/2.jpg)
Talking Points
1.About Me
2.Native vs. Hybrid Mobile Development
3.What is Cordova/Phonegap?
4.What is Ionic framework?
5.Features of Ionic
6.Pros and Cons of Native and Hybrid Development
7.The future of Ionic and hybrid development
![Page 3: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/3.jpg)
About Me
JS and PHP Developer
Two mobile apps in the App Store and Play Store (DipQuit and CigQuit).
From NJ now living in St. Petersburg, FL
![Page 4: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/4.jpg)
Native Development
![Page 5: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/5.jpg)
Native Development Problems
![Page 6: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/6.jpg)
Native Development Problems (cont.)
![Page 7: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/7.jpg)
Introduction to Hybrid Mobile Development
![Page 8: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/8.jpg)
But how does it work?
orCordova Phonegap
![Page 9: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/9.jpg)
What is Cordova and Phonegap?
~=
![Page 10: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/10.jpg)
What is Ionic?
A very popular framework to build hybrid mobile applications.
Built on top of Cordova.
Built with AngularJS.
Custom CSS classes for native-looking components.
Makes things like transitions, reordering lists, loading spinners, and many more a breeze.
![Page 11: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/11.jpg)
Installing Ionic
npm install -g cordova ionic
![Page 12: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/12.jpg)
Starting a project
![Page 13: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/13.jpg)
Let’s start a project!
ionic start testApp sidemenu
ionic platform add android
ionic run android
![Page 14: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/14.jpg)
Web View
ionic serve
ionic serve --lab
![Page 15: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/15.jpg)
Ionic CSS Components
http://ionicframework.com/docs/components/
http://ionicons.com/
![Page 16: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/16.jpg)
But can Ionic do THAT?
YEShttp://ngcordova.com/docs/plugins/
![Page 17: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/17.jpg)
When to use Hybrid vs. Native
Hybrid Native
● Cheaper.● Less code to write.● Slower.● Less learning
curve.● Can debug in
browser.● Use common
technologies.
● Faster.● Can talk directly to
hardware.● Don’t have to rely
on third party plugins.
● More code to write.● More expensive.● More of a learning
curve.
● Submit to app stores.
● Can access all of phones features
![Page 18: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/18.jpg)
The future of hybrid development
![Page 19: Ionic Framework - Intro to Hybrid Mobile Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062412/58a7d5c11a28ab8a7e8b53fd/html5/thumbnails/19.jpg)
Any questions?