hybrid mobile development - overview and intro to cordova/ionic framework
TRANSCRIPT
hello!I am Rashmika
NawaratneSoftware craftsman at 99X TechnologySpecialized in Hybrid Mobile Domain
Mobile Enablement
simple but not easy
Hybrid App Development
Why?
How?What?
Why?
Winning Product
Spee
d to
marke
t Widest customer
reach in niche
market
Why?
How?
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
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
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
Best from both the worlds
Why?
How?What?
Depth of Hybrid Knowledge
Hybrid MobileDevelopment
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
Myths!
✘They are just websites in app-stores✘You can’t access mobile features✘Native apps are more beautiful✘Slow!
Responsive Web
Hybrid Mobile
Native
Web view Native Translator
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
“Oh No! The Zuck has spoken!”
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
I choose Apache Cordova
✘ Widest community support
✘ Complete Eco-system✘ Plugins to support device
767 as at 2.30pm 13/11/2015
Concept behind hybrid development - Cordova
Technical Architecture - Cordova
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
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)
“How does it all come together?”
WebView (Cordova)
Native SDK
AngularJS
Ionic
Your App
Credits: Lucio Grenzi
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
What you need first?
CreditsSpecial thanks to all the people who made and released these awesome resources for free:
✘Presentation template by SlidesCarnival✘Photographs by Unsplash