ChoosingBetweenCrossPla1ormorNa4veAppDevelopment

DaveSpringgayNovember26,2016

DaveSpringgay

SoAwaredevelopmentmanager,userexperiencearchitectandscrummaster

Agenda

•  Historyofhybridappdevelopment•  Whyit’simportanttoday•  Discussonedecisionmakingprocess•  Theelementsofagreatuserexperience•  Evaluateonepopularapp,toseehowwecouldbuildit

KEEPCALMTherearemanywaystobuildanapp.

Let’sshareideas.

History

•  WhentheiPhonewasfirstreleasedin2007,itdidn’tsupport3rdpartyapps.

•  Itwasn’tun4lJuly2008thatApplereleasedanSDK.

•  ThefirstFacebookappwasbuiltusingHTML5–  Itsupportedmorethan500millionpeopleon7000devices

•  ThefirstLinkedInappwasbuiltusingmobile-webtechnology

HybridBackThen

•  Na4veappsthathostedamobilewebsite

•  Mul4pageapplica4ons•  Longpageload4mes•  Nolocalstoragefordata

•  Noconnec4onànoapplica4on

•  Veryli[leintegra4onwithna4vefeatures

•  Na4veappswithsmallwebviewsandsimplecontent

TheTimesofLondon•  2012•  Na4veapp•  Pagetemplatesanddataweredownloadedseparately

•  Eachpagewasrenderedinawebview

•  Offlinereading•  Performancechallenges•  Nega4vefeedbackfromAppleandGoogle

TheDisrup4on

•  InAugust,2012,Facebookreleasedtheirfirstna4veiOSapp–  “Faster,morereliableandeasiertouse”

•  InApril,2013,LinkedInreleasedtheirna4veapp–  “It’snotaperformanceissue”–  TheirHTML5appwasrunningoutofmemory

•  In2015,Flipkartabandonedtheirwebpresence–  “Ifyouwininmobile,youwinitall”

SinceThen•  Mobilefirstandresponsivedesign–  Designandbuildappsthatworkacrossmobile,tabletandweb

•  Singlepageapplica4ons–  Downloadyourappcodeonce–  RetrieveyourappdatausingRESTcalls–  Loadviewswithinthepagedynamically–  Fasterload4mes

•  PhoneGap/Cordova–  Firstclassna4vewrapper–  JavaScriptAPI’sforna4vefeatures

•  Crosspla1ormmobiledevelopmentlanguages

In2016•  Flipkartre-launchedtheirmobilewebapp–  TheywerelosingmarketsharetoAmazon–  Searchiscri4caltoretaildiscovery–  Socialsharingiscri4caltogrowth

•  Wes4llneedtobuildapplica4onsthatworkacrossmobile,tabletandweb

•  India’sstartupcommunityisthriving•  9outof10startupsfail(Forbes)–  Testyourhypothesisquickly– Minimizewaste

CrossPla1ormDevelopmentOp4ons

Na4veApp

Oneappperpla1orAdifferentlanguageoneachpla1orm

Pla1ormspecificsystemAPI’sPla1ormspecificUIlibrary

HybridApp

OnelanguageInawebview

CommonbrowserAPICommonuserinterface

Na4veifneeded

HTML5/Cordova/Ionic

CommonLanguageApp

Onecrosspla1ormlanguageSharedAPIfornetworkaccessanddatastorage

Pla1ormspecificUIlibrary

XamarinandAppcelerator

MobileWebApp

PureHTML5CommonbrowserAPI

Nopla1ormAPI

HTML5

DecisionCriteria

1.  Developmentskills,budgetand4me–  Crosspla1ormop4onsarecheaper

2.  Userexperience–  Pla1ormlookandfeel–  Performance–  Na4veop4onsarebe[er

3.  Distribu4onanddiscovery

DevelopmentEffortNa$veApp CommonLanguage

AppHybridApp

TwoormoreappsAseparatecodebaseforeachAskilleddevelopmentteamforeachpla1ormHighestdevelopmentcosts

Onecodebase/mul4plevariantsCommoncore(C#orJS)+pla1ormspecificUI60–70%reuse*Moderatedevelopmentcosts

OnecodebaseOneteamofwebdevelopers,withsomemobileknowledgeLowestdevelopmentcostsCanbethebasisforawebapp

*Some4mestheSDKlagsbehindapla1ormrelease

UserExperience

•  Pla1ormlookandfeel– Naviga4on,tabs,bu[ons,switches– Swiping,scrolling,pinchandzoom

•  Pla1ormintegra4on– Camera,deviceorienta4on,mo4on,loca4on– Pushno4fica4ons–  Inapppurchases

•  Performance•  Offlinebehavior

CrossPla1ormUserExperience

•  Theusergoal,thecontext,andtheirskills•  Mobileweb,mobile,andthedesktop•  Applica4onworkflowandinterac4on•  Designbestprac4ces– Mobilefirst,responsivedesign,materialdesign

•  Visualdesign– Pla1ormlookandfeel

Facebook

Facebook

Facebook

Facebook

LinkedIn

LinkedIn

LinkedIn

LinkedIn

Snapchat

Snapchat

Snapchat

InOtherWords

•  Thecrosspla1ormexperienceismoreimportantthanyouthink

•  Pla1ormlookandfeelislessimportantthanyouthink

UserExperienceNa$veApp CommonLanguage

AppHybridApp

Variablecrosspla1ormexperienceOp4malpla1ormlookandfeelOp4malpla1ormintegra4on

Variablecrosspla1ormexperience??

Consistentcrosspla1ormexperience??

*Some4mestheSDKlagsapla1ormrelease

Xamarin

XamarinForms

•  Ac4vityIndicataor•  Bu[ons•  DatePicker•  Editor(nlinesoftext)•  Entry(1lineoftext)•  Image•  Label

•  ListView•  Picker(list)•  ProgressBar•  SearchBar•  Slider•  Stepper•  Switch•  TimePicker

Ionic

•  “Buildgreatmobileappsandprogressivewebappsinawaythatfeelsjustlikebuildingwebsites”

•  HTML5andCordova•  Angular.jsSPAframework•  Freeandopensource•  “Beau4fuldesign”•  “Obsessedwithperformance”

Pla1ormlookandfeel

•  Ac4onsheets•  Alerts•  Badges•  Bu[ons•  Cards•  Checkboxes•  DateTime•  Gestures

•  Inputs•  Lists•  Menus•  Modals•  Popover•  Slides•  Tabs•  Toolbars

LinktoDemo

Pla1ormIntegra4on•  Ba[eryStatus•  Camera•  Contacts•  DeviceMo4on

(accelerometer)•  DeviceOrienta4on

(compass)•  File•  FileTransfer•  Geoloca4on

•  InAppPurchases•  Maps(Na4veorJS)•  MediaCapture•  NetworkInforma4on•  No4fica4ondialogs•  Pushno4fica4ons•  SocialSharing•  SqliteStorage•  StatusBar•  Vibra4on

SomeExcep4ons

•  Deeppla1ormintegra4on– Customkeyboards– Homescreenac4ons– 3DTouchoniOS

•  Peekandpop– Widgets

•  Arethereanymore?

UserExperienceNa$veApp CommonLanguage

AppHybridApp

Variablecrosspla1ormexperienceOp4malpla1ormlookandfeelOp4malpla1ormintegra4on

Variablecrosspla1ormexperienceOp4malpla1ormlookandfeel*Op4malpla1ormintegra4on*

Consistentcrosspla1ormexperienceBeau4fullookandfeel*Broadpla1ormintegra4onThereareexcep4onswherena4vecodeisneeded

*Some4mestheSDKlagsbehindapla1ormrelease

Performance

•  Poorperformanceàpoorexperience•  Factorsthataffectperformance– Load4me– Network4me(spinner)– Render4me–  Interac4veresponse(feel)

•  Scroll,flick,swipe,jank– Dataprocessing

NurevaSpan

DataProcessing

•  Heavydataprocessingisriskyinahybridapplica4on

•  Camerafilters•  Graphicmanipula4on•  Graphicallyintensivegames•  Arethereanymore?

PerformanceNa$veApp CommonLanguage

AppHybridApp

Fastload4mesFastrenderingFastinterac4onRawhorsepowerBaddesignàbadexperience

Thesameasana4veappBaddesignàbadexperience

GooddesignàgoodexperienceStorecodelocallyLoadviewsdynamicallyDoUIworkonthemainthreadDonetworkopera4onsna4velyonabackgroundthread

Distribu4onandDiscovery

•  Itshouldbeeasytodiscoveranapporservice•  Itshouldbeeasytolaunchanapp–  Install– Shortcut

•  Asadeveloper,Iwishitwaseasiertoupdatemyapp

Distribu4onandDiscoveryNa$veApp CommonLanguage

AppHybridApp

IntheappstoreEasytofind,installandlaunchYouhavetouploadanewappevery4meyoureleaseApplewillreviewit

Thesameasana4veapp IntheappstoreEasytofind,installandlaunchYouonlyhavetouploadtheapponcePushchangestoyourappdirectlyfromtheIonicserverCanbethebasisforawebapp

SummaryNa$veApp CommonLanguage

AppHybridApp

Easytofind,installandlaunchOp4malpla1ormlookandfeelOp4malpla1ormintegra4onOp4malperformanceHigherdevelopmentcosts

Almostthesameasana4veappModeratedevelopmentcosts

Easytofind,installandlaunchBeau4fullookandfeelBroadpla1ormintegra4onTherearesomeexcep4onsLowestdevelopmentcostsRapidrelease

DecisionMakingProcess 1.  Ifyouhaveamul4-milliondollarbudget,alarge

teamofexperiencedna4vedevelopers,andabilliondollarrevenuestream,buildana4veapp

2.  If4meormoneyareaconcerntoyou,consideranotherapproach

3.  Ifyouthinkit’spossibletobuildagreatexperienceforyourappusingHTML5,CordovaandIonic,buildahybridapp

4.  Ifyoureleaseyourapponaweeklybasis,buildahybridapp

5.  Otherwise,buildacommonlanguageapp

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

Thankyou

LinkedIn:davespringgay