![Page 1: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/1.jpg)
ChoosingBetweenCrossPla1ormorNa4veAppDevelopment
DaveSpringgayNovember26,2016
![Page 2: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/2.jpg)
DaveSpringgay
SoAwaredevelopmentmanager,userexperiencearchitectandscrummaster
![Page 3: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/3.jpg)
Agenda
• Historyofhybridappdevelopment• Whyit’simportanttoday• Discussonedecisionmakingprocess• Theelementsofagreatuserexperience• Evaluateonepopularapp,toseehowwecouldbuildit
![Page 4: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/4.jpg)
KEEPCALMTherearemanywaystobuildanapp.
Let’sshareideas.
![Page 5: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/5.jpg)
History
• WhentheiPhonewasfirstreleasedin2007,itdidn’tsupport3rdpartyapps.
• Itwasn’tun4lJuly2008thatApplereleasedanSDK.
• ThefirstFacebookappwasbuiltusingHTML5– Itsupportedmorethan500millionpeopleon7000devices
• ThefirstLinkedInappwasbuiltusingmobile-webtechnology
![Page 6: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/6.jpg)
HybridBackThen
• Na4veappsthathostedamobilewebsite
• Mul4pageapplica4ons• Longpageload4mes• Nolocalstoragefordata
• Noconnec4onànoapplica4on
• Veryli[leintegra4onwithna4vefeatures
• Na4veappswithsmallwebviewsandsimplecontent
![Page 7: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/7.jpg)
TheTimesofLondon• 2012• Na4veapp• Pagetemplatesanddataweredownloadedseparately
• Eachpagewasrenderedinawebview
• Offlinereading• Performancechallenges• Nega4vefeedbackfromAppleandGoogle
![Page 8: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/8.jpg)
TheDisrup4on
• InAugust,2012,Facebookreleasedtheirfirstna4veiOSapp– “Faster,morereliableandeasiertouse”
• InApril,2013,LinkedInreleasedtheirna4veapp– “It’snotaperformanceissue”– TheirHTML5appwasrunningoutofmemory
• In2015,Flipkartabandonedtheirwebpresence– “Ifyouwininmobile,youwinitall”
![Page 9: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/9.jpg)
SinceThen• Mobilefirstandresponsivedesign– Designandbuildappsthatworkacrossmobile,tabletandweb
• Singlepageapplica4ons– Downloadyourappcodeonce– RetrieveyourappdatausingRESTcalls– Loadviewswithinthepagedynamically– Fasterload4mes
• PhoneGap/Cordova– Firstclassna4vewrapper– JavaScriptAPI’sforna4vefeatures
• Crosspla1ormmobiledevelopmentlanguages
![Page 10: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/10.jpg)
In2016• Flipkartre-launchedtheirmobilewebapp– TheywerelosingmarketsharetoAmazon– Searchiscri4caltoretaildiscovery– Socialsharingiscri4caltogrowth
• Wes4llneedtobuildapplica4onsthatworkacrossmobile,tabletandweb
• India’sstartupcommunityisthriving• 9outof10startupsfail(Forbes)– Testyourhypothesisquickly– Minimizewaste
![Page 11: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/11.jpg)
CrossPla1ormDevelopmentOp4ons
Na4veApp
Oneappperpla1orAdifferentlanguageoneachpla1orm
Pla1ormspecificsystemAPI’sPla1ormspecificUIlibrary
HybridApp
OnelanguageInawebview
CommonbrowserAPICommonuserinterface
Na4veifneeded
HTML5/Cordova/Ionic
CommonLanguageApp
Onecrosspla1ormlanguageSharedAPIfornetworkaccessanddatastorage
Pla1ormspecificUIlibrary
XamarinandAppcelerator
MobileWebApp
PureHTML5CommonbrowserAPI
Nopla1ormAPI
HTML5
![Page 12: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/12.jpg)
DecisionCriteria
1. Developmentskills,budgetand4me– Crosspla1ormop4onsarecheaper
2. Userexperience– Pla1ormlookandfeel– Performance– Na4veop4onsarebe[er
3. Distribu4onanddiscovery
![Page 13: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/13.jpg)
DevelopmentEffortNa$veApp CommonLanguage
AppHybridApp
TwoormoreappsAseparatecodebaseforeachAskilleddevelopmentteamforeachpla1ormHighestdevelopmentcosts
Onecodebase/mul4plevariantsCommoncore(C#orJS)+pla1ormspecificUI60–70%reuse*Moderatedevelopmentcosts
OnecodebaseOneteamofwebdevelopers,withsomemobileknowledgeLowestdevelopmentcostsCanbethebasisforawebapp
*Some4mestheSDKlagsbehindapla1ormrelease
![Page 14: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/14.jpg)
UserExperience
• Pla1ormlookandfeel– Naviga4on,tabs,bu[ons,switches– Swiping,scrolling,pinchandzoom
• Pla1ormintegra4on– Camera,deviceorienta4on,mo4on,loca4on– Pushno4fica4ons– Inapppurchases
• Performance• Offlinebehavior
![Page 15: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/15.jpg)
CrossPla1ormUserExperience
• Theusergoal,thecontext,andtheirskills• Mobileweb,mobile,andthedesktop• Applica4onworkflowandinterac4on• Designbestprac4ces– Mobilefirst,responsivedesign,materialdesign
• Visualdesign– Pla1ormlookandfeel
![Page 16: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/16.jpg)
![Page 17: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/17.jpg)
![Page 18: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/18.jpg)
![Page 19: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/19.jpg)
![Page 20: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/20.jpg)
![Page 21: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/21.jpg)
![Page 22: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/22.jpg)
![Page 23: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/23.jpg)
![Page 24: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/24.jpg)
Snapchat
![Page 25: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/25.jpg)
Snapchat
![Page 26: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/26.jpg)
Snapchat
![Page 27: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/27.jpg)
InOtherWords
• Thecrosspla1ormexperienceismoreimportantthanyouthink
• Pla1ormlookandfeelislessimportantthanyouthink
![Page 28: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/28.jpg)
UserExperienceNa$veApp CommonLanguage
AppHybridApp
Variablecrosspla1ormexperienceOp4malpla1ormlookandfeelOp4malpla1ormintegra4on
Variablecrosspla1ormexperience??
Consistentcrosspla1ormexperience??
*Some4mestheSDKlagsapla1ormrelease
![Page 29: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/29.jpg)
Xamarin
![Page 30: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/30.jpg)
XamarinForms
• Ac4vityIndicataor• Bu[ons• DatePicker• Editor(nlinesoftext)• Entry(1lineoftext)• Image• Label
• ListView• Picker(list)• ProgressBar• SearchBar• Slider• Stepper• Switch• TimePicker
![Page 31: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/31.jpg)
Ionic
• “Buildgreatmobileappsandprogressivewebappsinawaythatfeelsjustlikebuildingwebsites”
• HTML5andCordova• Angular.jsSPAframework• Freeandopensource• “Beau4fuldesign”• “Obsessedwithperformance”
![Page 32: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/32.jpg)
Pla1ormlookandfeel
• Ac4onsheets• Alerts• Badges• Bu[ons• Cards• Checkboxes• DateTime• Gestures
• Inputs• Lists• Menus• Modals• Popover• Slides• Tabs• Toolbars
LinktoDemo
![Page 33: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/33.jpg)
Pla1ormIntegra4on• Ba[eryStatus• Camera• Contacts• DeviceMo4on
(accelerometer)• DeviceOrienta4on
(compass)• File• FileTransfer• Geoloca4on
• InAppPurchases• Maps(Na4veorJS)• MediaCapture• NetworkInforma4on• No4fica4ondialogs• Pushno4fica4ons• SocialSharing• SqliteStorage• StatusBar• Vibra4on
![Page 34: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/34.jpg)
SomeExcep4ons
• Deeppla1ormintegra4on– Customkeyboards– Homescreenac4ons– 3DTouchoniOS
• Peekandpop– Widgets
• Arethereanymore?
![Page 35: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/35.jpg)
UserExperienceNa$veApp CommonLanguage
AppHybridApp
Variablecrosspla1ormexperienceOp4malpla1ormlookandfeelOp4malpla1ormintegra4on
Variablecrosspla1ormexperienceOp4malpla1ormlookandfeel*Op4malpla1ormintegra4on*
Consistentcrosspla1ormexperienceBeau4fullookandfeel*Broadpla1ormintegra4onThereareexcep4onswherena4vecodeisneeded
*Some4mestheSDKlagsbehindapla1ormrelease
![Page 36: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/36.jpg)
Performance
• Poorperformanceàpoorexperience• Factorsthataffectperformance– Load4me– Network4me(spinner)– Render4me– Interac4veresponse(feel)
• Scroll,flick,swipe,jank– Dataprocessing
![Page 37: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/37.jpg)
NurevaSpan
![Page 38: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/38.jpg)
DataProcessing
• Heavydataprocessingisriskyinahybridapplica4on
• Camerafilters• Graphicmanipula4on• Graphicallyintensivegames• Arethereanymore?
![Page 39: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/39.jpg)
PerformanceNa$veApp CommonLanguage
AppHybridApp
Fastload4mesFastrenderingFastinterac4onRawhorsepowerBaddesignàbadexperience
Thesameasana4veappBaddesignàbadexperience
GooddesignàgoodexperienceStorecodelocallyLoadviewsdynamicallyDoUIworkonthemainthreadDonetworkopera4onsna4velyonabackgroundthread
![Page 40: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/40.jpg)
Distribu4onandDiscovery
• Itshouldbeeasytodiscoveranapporservice• Itshouldbeeasytolaunchanapp– Install– Shortcut
• Asadeveloper,Iwishitwaseasiertoupdatemyapp
![Page 41: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/41.jpg)
Distribu4onandDiscoveryNa$veApp CommonLanguage
AppHybridApp
IntheappstoreEasytofind,installandlaunchYouhavetouploadanewappevery4meyoureleaseApplewillreviewit
Thesameasana4veapp IntheappstoreEasytofind,installandlaunchYouonlyhavetouploadtheapponcePushchangestoyourappdirectlyfromtheIonicserverCanbethebasisforawebapp
![Page 42: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/42.jpg)
SummaryNa$veApp CommonLanguage
AppHybridApp
Easytofind,installandlaunchOp4malpla1ormlookandfeelOp4malpla1ormintegra4onOp4malperformanceHigherdevelopmentcosts
Almostthesameasana4veappModeratedevelopmentcosts
Easytofind,installandlaunchBeau4fullookandfeelBroadpla1ormintegra4onTherearesomeexcep4onsLowestdevelopmentcostsRapidrelease
![Page 43: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/43.jpg)
DecisionMakingProcess 1. Ifyouhaveamul4-milliondollarbudget,alarge
teamofexperiencedna4vedevelopers,andabilliondollarrevenuestream,buildana4veapp
2. If4meormoneyareaconcerntoyou,consideranotherapproach
3. Ifyouthinkit’spossibletobuildagreatexperienceforyourappusingHTML5,CordovaandIonic,buildahybridapp
4. Ifyoureleaseyourapponaweeklybasis,buildahybridapp
5. Otherwise,buildacommonlanguageapp
![Page 44: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/44.jpg)
CanYouBuildaGreatHybridFacebookApp?
Scenario HybridImplementa$on
Installapp Installfromstore
Signup Angularview+OAuth2
Setupcontacts Contactsplugin
Downloadfeeddata H[pGet
Displayfeeddata Angularview
Expandphoto Angularview
Playinlinevideo Angularview
Sharestatus,photosandvideos Cameraplugin+H[pPost
Editandfilterphotos Performanceconcerns
Pushno4fica4ons Pushno4fica4onsplugin
Changeseungs UseIonicstyles+H[pGet/Put
Updateapp Ionic.Deploy
![Page 45: ChoosingBetween Cross Platform of Native Development](https://reader036.vdocuments.net/reader036/viewer/2022062822/587a60051a28ab520b8b75c9/html5/thumbnails/45.jpg)
Thankyou
LinkedIn:davespringgay