Startup Engineering Cookbook for Mobile Apps

September 2016

StartupEngineeringCookbookforMobileAppsFromSlidestoMobileApp

OverviewSlide Topic

3 IHaveThisGreatAppIdea…4 TheLeanStartup5 ImplementationOptions6-9 MobileAppDesignProcess10-14 MobileAppArchitecture15-25 BackendArchitecture26-31 Reference Architecture32-36 Monitoring37-38 DisasterRecovery39-40 Scaling41-42 InternalCommunication43 Questions?

IHaveThisGreatAppIdea…

3

Thedeckwillcoverthetechnology optionswhengoingfromanideatobuildingamobileappandbeyond...

[meantforanon-technicalaudience]

TheLeanStartup

4

It’sanapproachforlaunchingbusinessesandproducts,thatreliesonvalidatedlearning,scientificexperimentation,anditerativeproductreleasestoshortenproductdevelopmentcycles,measureprogress,andgainvaluablecustomerfeedback.

[Wikipedia ]

ItisTHEindustrybibleforstartups...READIT.

[TheReality]

ImplementationOptionsThereare3optionsforbuildingamobileapp:

Buildinternally

Outsource

Hybrid- hireatechnicallead

BuildingamobileappisliketheKamaSutra...therearemanywaystoaccomplish“it”

5

1

2

3

MobileAppDesignProcess

6

Creatingamobileappinvolvesasignificantamountofupfrontdesignworkfortheoveralllook,feelandfunctionalityoftheapp.

PaperPrototypeGettingtothefinallookandfeelofanmobileapprequiresamulti-stepprocess.Thefirststepisunderstandingwhattheflowandfunctionalitywillbeofthemobileapp.

mobile app paper prototype 7

Ourchoice:Pencilandpaper. It’sfreeandworkssurprisingwell.

WireframesWireframesstarttogiveyouanideaofwhatthemobileappwillcontainwhenitcomestoinformation,navigationandinterfacedesign.

mobile app wireframe tools 8

Ourchoice:Anyoftheabove+InVision. Theabilitytosharedesignsandmakecommentscanspeedupthedesignprocess.

Options:Axure,Balsamiq,Flinto,HotGloo,Justinmind,MockFlow,Moqups,Sketch,SolidifyandUXPin

FinalDesignsAfterseveralroundsofdiscussiononthewireframes,youwillhavetolockdownthefeaturesandflowsothedesignercandeliverthefinalscreensthatthedeveloperswillneed.

app design 9

Ourchoice:Letthedesignerschoose.

Options:AdobeIllustrator,AdobePhotoshop,CorelDRAWandSketch

Creatingthelookisoneaspect,theothersincludeanimationsandinteractionstheuserwillseeonthescreen.And,whatgesturesausermightneedtoperformintheapp(ex.swipetotheright).

MobileAppArchitecture

10

Thisrelatestowhattheuserseesonthemobilescreen.

MobilePhonePlatformsTherearereallyonlytwo majormobileplatformsthatarecurrentlyinuse – AndroidandiOS.

Otheroptions:Blackberry and MicrosoftWindowsPhone

mobile phone platforms 11

Ourchoice:AndroidandiOS.InAsia,AndroidismorepopularbutthetastemakersandjournaliststendtobeoniOS.IntheUSandEuropeyoucangetawaywithiOSinitiallythenAndroid.

DevelopmentOptions

native hybrid mobile apps 12

Ourchoice: ItDepends.NativedevelopmentbringsamuchricherexperiencebutlatelyReactNativeisgainingtractionforhybriddevelopment.

Oneofthebiggestfeaturesmanymobileappsareimplementingistheabilitytoletuserschatwithintheapp.

Options:Firebase,Layer,PubNub,Pusher,QuickBlox,Sinch,socket.io,XMPP

In-AppChatMessaging

instant messaging 13

Ourchoice:ForanMVPlaunchPubNuborFirebasearegood.ForthelongertermbuildingachatsystemfromscratchmightusingSocket.io betherightoption.

Whenusersstarttointeractwiththeapp,youwillwanttosendthemnotificationssuchasatransactionhasbeencompletedorsomeonehaslikedtheircommentorapasswordresetlink.

4Options:

Notifications

mobile app notifications 14

Ourchoice:Itdependsonhow“noisy”youwantyourapptobe.

In-App.Whentheappisopenandbeingused

Push.Whentheappisnotbeingused,itwillsendanotification

E-mail SMS

1 2

3 4

BackendArchitecture

15

Althoughthefrontendofthemobileappgetsalltheglory,therealworkisdonebehindthescenes.

MobileBackendasaService

mobile backend service 16

Ourchoice:Firebase.Butyourmileagemayvarydependingonhowcomplexyourmobileappis.Afullscalebackendmightberequirediftheappiscomplexsuchasamarketplacemobileapp.

ThereisagrowingtrendaroundusingMobileBackendasaService(MBaaS)options.Itsimplifiesthebackendservicesthatarerequiredforamobileappbutarenotasfeaturerichasafullscalebackendservice.

Options:AnyPresence,Appcelerator,FeedHenry,Firebase,Kinvey,Meteor,ShepHertz

InfrastructureProviderIfyouoptforafullscalebackend,thosecomponentsmustresidesomewhere.

Options:AmazonWebServices(AWS),GoogleCloudPlatform,localhostingprovider,MicrosoftAzure,Netmagic,Rackspace

web hosting services 17

Ourchoice:AmazonWebServices(AWS).Theyarethe#1leaderinwebinfrastructureservicesalsoknownascloudservices.

Centralvs.DistributedTheoldwayofdesigningtheinfrastructureforabackendwastoputalltheresourcessuchasdatabases,files,images,etc...onthesameserver.Theproblemisifyourdatabaseisslowandeverythingelseisfine,youhavetoupgradetheentireserveranddisrupttheotherfunctions. Bydistributingtheresourcesyoucanquicklypinpointthebottleneckandscalethatparticularresource.

distributed web architecture

Central

Ourchoice:DistributedArchitecture.

Distributed

Computing Database StaticFiles

Computing,database,files,etc...

18

Managedvs.Self-ServiceIfyourteamistechnicalitmightnotbetechnicalintermsofhardware.Justbecausesomeoneknowsaprogramminglanguagedoesnotmeantheyhavetheinfrastructureknowledgetorunthebackend.

Somestartupsprefertooutsourcethemanagementoftheirhardwaretoahostingproviderorusethe“premium”optionofacloudserviceprovider.

Ourchoice:Self-Service. ThetoolsthatareprovidedbyAWSarequitepowerfulandeasytouseformanagingtheentireAWSinfrastructure.

managed server hosting 19

TechnologyStackThe“stack”referstoasetofsoftwarecomponentsneededtocreateacompleteplatform.Foramobileapplicationthatincludestheoperatingsystem,webserver,databaseandprogramminglanguage.

lamp lemp mean 20

Ourchoice:Itdepends.Severalfactorstoevaluateincludetimetomarket, costandknowledgeofthetechnologystack.

1 2

3 4

LAMPStack

LEMPStack

MEANStack

WindowsStack

OperatingSystemThereareonlytwooptions- MicrosoftWindowsorLinux.Windowsislimitedinthetypeofprogramminglanguagesthatyoucanrunontheserver. Linuxisopensourceandhasalargecommunitythatiscontinuallyimprovingtheoperatingsystem.WithinLinuxtherearemanyversions suchasDebianandRedHattochoosefrom.

linux hosting 21

Softwarethatdeliversinformationfromtheservertoamobileapp.

Options:Apache,Lighttpd,MicrosoftInternetInformationServer(IIS),Nginx,Node.js,Rails,Tornado

WebServer

web servers 22

Theheartofanymobileappisthedatabasesinceitstoresalltheuserinformationandeverythingelserelatedtothemobileapplication.Therearetwocategoriestoconsider:SQLorNoSQL.

Options:AmazonDynamoDB,Cassandra,CouchDB,MariaDB,MicrosoftSQL,MongoDB,MySQL,Oracle,PostgreSQL

Database

mysql nosql 23

Ifyouask4programmerswhichisthebestlanguage,youwillmostlikelyget5differentanswers.

Options:Clojure,Express,Java,JavaScript,Microsoft’s.NET,Perl,PHP,Python,Ruby

ProgrammingLanguage

Web services backend languages 24

AnApplicationProgrammingInterface(API)ishowthefrontendofthemobileappcommunicateswiththebackendtodisplayinformationtotheuser.

WebServicesArchitecture

Api mobile access 25

Previously Today Future

Inthelate1990’s,MicrosoftreleasedaspecificationcalledSimpleObjectAccessProtocol(SOAP).ItusedExtensibleMarkupLanguage (XML)tosenddatatoarequestingendpoint.

Intheearly2000’saspecificationwasreleasedcalledRepresentationalStateTransfer(REST).Ithasbecomethedefactostandard toenablemobileappstocommunicatewiththebackend.It’scommonlyreferredtoasaRESTful API.

GraphQL isanewnestedquerylanguage. It’sanopensourcestandardpublishedbyFacebooktoenhancetheRESTspecification.

SampleArchitecture

26

Howdoesitallworktogether?

TheappUIisa smallpiece

MobileAppRoles

28

Visuallycreatestheuserinterface(UI)andtheoveralluserexperience(UX)

MobileDeveloper

BackendEngineer

OperationsEngineer

App Server

UI/UXDesigner

ConvertstheUI/UXdesignintoObjective-C(iOS)orJava(Android)

ConvertsthebusinesslogicintocomputercodeusingJava,JavaScript,PHP,Python,PERL,.NET,etc...

Managestheservers,databases,DNSinformation,andotherwebsiteinfrastructure

Day0

29

ElasticComputeCloud(EC2)t1.micro

RDSMySQLt1.micro

S3

Region:APAC- Singapore

SingleRegion,SingleAvailabilityZone

Users

Internet

AvailabilityZone:AP-Southeast-1a

Day0+X

30

RDSMySQL

S3

Internet

DatabaseReplication

ElasticComputeCloud(EC2)

RDSMySQL

AvailabilityZone:AP-Southeast-1b

ElasticLoadBalancer(ELB)

S3




Users

SingleRegion,Multi AvailabilityZone

Thefaulttolerantdesign allowsforoneoftheavailabilityzonesnotbeingavailable.

RDSMySQL

S3

InternetRDSMySQL

ElasticLoadBalancer(ELB)

S3

Day0+2X

AvailabilityZone:US-East-1a



31



Region:USEast(N.Virginia)

Users

Multi-Region

Thefaulttolerantdesign allowsforoneoftheregionsnotbeingavailable.Thedesignalsoallowsforuserstobeloadbalancedbasedongeographiclocation.

Monitoring

32

Whathappenswhenyouaresleeping?

Bymonitoringtheinfrastructure,youcanproactivelyplanifcertaincomponentsneedtobeupgraded.

InfrastructurePerformance

33

Understandinghowtheapplicationaffectstheinfrastructureisessential.Ifthereareveryfewusersbuttheserversanddatabasesareconsistentlyrunningatpeakutilization,thatmightindicateaprogrammingissue.

ApplicationPerformance

34

GoogleAnalyticsistheindustrystandardfortrackingappstatisticssuchasusers,usageandmanyotherstatistics.Buttherearemanyothersthatprovidebettermobileuserengagement.

UserAnalytics&Engagement

35

Youmayhavethebestprogrammersworkingontheapp,buttestingandbugareapartofthedevelopmentalcycle…getusedtoit.

Options:BugClipper,Crashlytics,Crittercism,HockeyApp,SplunkMint

Testing&BugTracking

app bug testing 36

Ourchoice:Crashlytics.It’soneofthemostwidelyusedservices andit’sfreefromTwitter.

DisasterRecovery

37

Ifdisasterstrikesareyouready?

Havingadisasterrecoveryplaninplaceiscriticaltoensurethewebsitecanrecoverfromacatastrophicevent.

Takingadaily/weekly/monthlysnapshotoftheservers, filesanddatabasesisaminimumrequirement.Thedaily/weekly/monthlybackupscheduleissometimesreferred toastheson/father/grandfatherrotationschedule.

BackingUp&Restoring

Ifdisasterdoesstrikesandacompletebackupstrategyisinplace,thenitshouldnotbeverydifficulttorestorethewebsitefromthebackupsthatarebeingmaintained.

38

Scaling

39

Whathappensifyourmobileappisanovernightsuccess?

Hopefully,theappyoulaunchisamassivesuccessandleadstoyourbackendhavingatoughtimehandlingtheload.

Withmanycloudserviceprovidersyoucanautomaticallyaddadditionalresourcesbasedonpredefinedrules.Anexampleisbelow:

AddingInfrastructureResources

Rule Action

IfCPUutilizationgoesabove60%duringa5minuteperiod

Upgradetheservertothenextlargersizetohandletheadditionalload

40

InternalCommunication

41

Howdoesyourteamcommunicate?

Teamcommunicationiscriticalinafastpacedinternet business.Therearetwomaincategoriesthatmanyofthetoolsavailablefallinto:1.todolistandtaskmanagement2.instantmessaging

TeamCommunications

42

Questions?

Version:Ferrari

ManishJainCo-Founder,MProfit@[email protected]

Youcancontactmeatthecoordinatesbelow.