hybrid mobile development - overview and intro to cordova/ionic framework
TRANSCRIPT
![Page 1: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/1.jpg)
![Page 2: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/2.jpg)
![Page 3: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/3.jpg)
hello!I am Rashmika
NawaratneSoftware craftsman at 99X TechnologySpecialized in Hybrid Mobile Domain
![Page 4: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/4.jpg)
Mobile Enablement
simple but not easy
Hybrid App Development
![Page 5: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/5.jpg)
Why?
How?What?
![Page 6: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/6.jpg)
Why?
![Page 7: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/7.jpg)
Winning Product
Spee
d to
marke
t Widest customer
reach in niche
market
![Page 8: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/8.jpg)
Why?
How?
![Page 9: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/9.jpg)
Reaching user the fastest way
✘ Platform independent✘ Accessible from anywhere✘ Super fast learning curve for
development✘ Easy test and deploy
Spee
d to
marke
t
![Page 10: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/10.jpg)
Get the maximum reach in audience
✘ Download from AppStore, GooglePlay and Windows Store
✘ Accessible anytime✘ Offline support✘ Full device access
Widest
customer reach
in niche market
![Page 11: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/11.jpg)
Reaching your focus audience
iOS✘ Mac OS | Xcode✘ Objective C
W: 30% | E: 41% | A: 15% SL: 5.17%
Android✘ Win/Mac/Linux
OS✘ Java
W: 55% | E: 53% | A: 62% SL: 62.24%
Windows✘ Windows✘ XAML and ( C#.NET
or VB.NET ) W: 2% | E: 3% | A: 1.6% SL: 3.75%
W: Worldwide | E: Europe | A: Asia | SL: Sri LankaFrom October 2014 to October 2015
![Page 12: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/12.jpg)
![Page 13: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/13.jpg)
Best from both the worlds
![Page 14: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/14.jpg)
Why?
How?What?
![Page 15: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/15.jpg)
Depth of Hybrid Knowledge
![Page 16: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/16.jpg)
Hybrid MobileDevelopment
![Page 17: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/17.jpg)
Best of both worlds✘Native app with embedded HTML✘One app for many platforms✘Full device access✘Access anytime anywhere (Offline support)✘AppStore / Windows Store / Google Play✘Use your preferred language✘Learn fast and build faster
![Page 18: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/18.jpg)
Myths!
✘They are just websites in app-stores✘You can’t access mobile features✘Native apps are more beautiful✘Slow!
![Page 19: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/19.jpg)
Responsive Web
Hybrid Mobile
Native
Web view Native Translator
![Page 20: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/20.jpg)
Hybrid Technologies
Xamarin Studio✘ Freemium by Xamarin ✘ Mac, Windows, Microsoft
Visual Studio✘ Write in C#
Appcelerator Titanium✘ Open Source by
Appcelerator Inc ✘ Mac, Windows, Linux,
Web / Cloud✘ Write in Web
technologies
Apache Cordova✘ Open Source by Apache✘ Mac, Windows, Linux,
Web / Cloud✘ Write in Web
technologies
PhoneGap✘ Open Source by Adobe✘ Mac, Windows, Linux,
Web / Cloud✘ Write in Web
technologies
Qt Creator✘ Open Source by Qt
Project✘ Mac, Windows, Linux,
BSD ✘ Use cross-platform C++,
JavaScript and QML
React/React Native✘ Open Source by Facebook✘ iOS, Android✘ Write in JS
![Page 21: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/21.jpg)
“Oh No! The Zuck has spoken!”
![Page 22: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/22.jpg)
Are You Building the Facebook app?
✘ Have a multi-million dollar budget?
✘ Have a large team of experienced native
developers?
✘ Does your billion-dollar revenue depend on this
app?
✘ If so...do native
✘ ...but today it's not so black and white
![Page 23: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/23.jpg)
![Page 24: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/24.jpg)
I choose Apache Cordova
✘ Widest community support
✘ Complete Eco-system✘ Plugins to support device
767 as at 2.30pm 13/11/2015
![Page 25: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/25.jpg)
Concept behind hybrid development - Cordova
![Page 26: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/26.jpg)
Technical Architecture - Cordova
![Page 27: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/27.jpg)
Getting Started...Install Cordov
a
Download Mobile
Framework
Get the Bootstrap code
Test from Browser Emulator
Build the app
Push to
Cloud
✘ jQuery Mobile
✘ Ionic✘ Onsen UI✘ Intel XDK✘ Kendo UI✘ Sencha
Touch
![Page 28: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/28.jpg)
Welcome Ionic
✘ Web Technologies You Already Know and LoveHTML5 / JS / CSS
✘ Standing on the Shoulders of AngularJS✘ Native Focused – build to work with Cordova✘ Performance Obsessed✘ Ionicons✘ Eco System of Services (Auth, Push, Analytics, Deploy,
View)
![Page 29: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/29.jpg)
“How does it all come together?”
WebView (Cordova)
Native SDK
AngularJS
Ionic
Your App
![Page 30: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/30.jpg)
Credits: Lucio Grenzi
![Page 31: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/31.jpg)
Moving forward…1. Intro to Hybrid Mobile Domain2. Create and build an Ionic project using the CLI3. Debug and test Ionic project4. Build a modern mobile UI using Ionic components5. Access REST services6. Use controllers and routing7. Extending core Ionic capabilities using plugins8. Ionic ecosystem: Push, Auth, Analytics, Deployment,
Marketplace
![Page 32: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/32.jpg)
What you need first?
![Page 34: Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework](https://reader036.vdocument.in/reader036/viewer/2022070603/58729ec41a28ab07208b5445/html5/thumbnails/34.jpg)
CreditsSpecial thanks to all the people who made and released these awesome resources for free:
✘Presentation template by SlidesCarnival✘Photographs by Unsplash