Mobile App Development Using Ionic + DNN
-
Upload
david-poindexter -
Category
Business
-
view
46 -
download
3
Transcript of Mobile App Development Using Ionic + DNN
![Page 1: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/1.jpg)
Mobile App Development Using Ionic + DNN
David Poindexter (@davidpoindexter)Matt Kremer (@matthewkremer )
![Page 2: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/2.jpg)
Who Are We?David PoindexterCEO of nvisionative, Inc. / Mobile Applifywww.nvisionative.com / www.mobileapplify.com Co-President of Southern Fried DNNwww.southernfrieddnn.com Co-Organizer of DNN Summit Denver 2017www.dnnsummit.org Long-standing member of DNN Community
Contact Info• Email: [email protected]• Phone: (704) 248-7968, x301• Twitter: @davidpoindexter
@nvisionative @mobileapplify
![Page 3: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/3.jpg)
Who Are We?
![Page 4: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/4.jpg)
“There’s an app for that, right? - Literally Everyone
![Page 5: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/5.jpg)
“There’s an app for that, right? - Literally Everyone
![Page 6: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/6.jpg)
Powerfully Creative
![Page 7: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/7.jpg)
WEB TECHNOLOGIES YOU ALREADYKNOW & LOVE
![Page 8: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/8.jpg)
Where does DNN fit in?
![Page 9: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/9.jpg)
Web Content
![Page 10: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/10.jpg)
Ionic + DNN Web API
![Page 11: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/11.jpg)
Building Apps is HARD• Proficiency in each targeted platform• Domain-specific language to learn• Entirely separate code bases• Expensive development (time and cost)• Lack of portability with native approaches
![Page 12: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/12.jpg)
Enter HYBRID APPS
HTML5 with platform-specific UI
Full access to native APIs and SDKs
Familiar web development environmentSingle code base across native and the web
![Page 13: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/13.jpg)
It’s not 2007 anymore
![Page 14: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/14.jpg)
There’s no Web SDK!
![Page 15: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/15.jpg)
Ionic to the rescue 💪
![Page 16: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/16.jpg)
![Page 17: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/17.jpg)
WEB TECHNOLOGIES YOU ALREADYKNOW & LOVE
![Page 18: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/18.jpg)
SUPERPOWERED BYANGULAR
Extends HTML with new tagsBuilt on the future of JavaScript
Optimized for large-scale app developmentHigh performance for fast and fluid
mobile apps
![Page 19: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/19.jpg)
Sass!
CSS generated from the Sass preprocessor
Quickly give your app its own look and feel
CSS designed to be easily overridden
Variables based with default settings
![Page 20: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/20.jpg)
How does it all fit together?KNOW & LOVE
![Page 21: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/21.jpg)
Ionic is an ecosystem for building top-notch hybrid mobile apps. From open source projects, to front-end tools and backend
services, here’s everything we offer.
![Page 22: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/22.jpg)
Ionic UI Components
![Page 23: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/23.jpg)
![Page 24: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/24.jpg)
Ionic V2 Conference AppAn example app written in
V2 to showcase improvements
Beautiful Animations
Superior SpeedPush / Pop Navigation
New Components
https://matthewkremer.github.io/ionic-presentation-demos/conference-app/
![Page 25: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/25.jpg)
![Page 26: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/26.jpg)
![Page 27: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/27.jpg)
![Page 28: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/28.jpg)
![Page 29: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/29.jpg)
![Page 30: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/30.jpg)
![Page 31: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/31.jpg)
Let’s build an app!
![Page 32: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/32.jpg)
Q & A
![Page 33: Mobile App Development Using Ionic + DNN](https://reader036.fdocuments.us/reader036/viewer/2022062401/58ebbc741a28abd2278b46e1/html5/thumbnails/33.jpg)