Do you have a great app idea? Are you a non-technical founder confused about the technology to deploy for your new website? The presentation covers the various options available for building a website and beyond...

1. September 2016
Startup Engineering Cookbook for Mobile Apps
From Slides to Mobile App

2. Overview
Slide Topic
3 I Have This Great App Idea…
4 The Lean Startup
5 Implementation Options
6-9 Mobile App Design Process
10-14 Mobile App Architecture
15-25 Backend Architecture
26-31 Reference Architecture
32-36 Monitoring
37-38 Disaster Recovery
39-40 Scaling
41-42 Internal Communication
43 Questions?

3. I Have This Great App Idea…
3
The deck will cover the technologyoptions when going
from an idea to building a mobile app and beyond...
[meant for a non-technical audience]

4. The Lean Startup
4
It’s an approach for launching businesses
and products, that relies on validated
learning, scientific experimentation, and
iterative product releases to shorten
product development cycles, measure
progress, and gain valuable customer
feedback.
[ Wikipedia ]
It is THE industry bible for startups...READ IT.
[ The Reality ]

5. Implementation Options
There are 3 options for building a mobile app:
Build internally
Outsource
Hybrid - hire a technical lead
Building a mobile app is like the Kama Sutra...
there are many ways to accomplish “it”
5
1
2
3

6. Mobile App
Design
Process
6
Creating a mobile app
involves a significant
amount of upfront design
work for the overall look,
feel and functionality of the
app.

7. Paper Prototype
Getting to the final look and feel of an mobile app requires a multi-
step process. The first step is understanding what the flow and
functionality will be of the mobile app.
mobile app paper prototype
7
Our choice: Pencil and paper. It’s free and works surprising well.

8. Wireframes
Wireframes start to give you an idea of what the mobile app will contain when it
comes to information, navigation and interface design.
mobile app wireframe tools
8
Our choice: Any of the above + InVision. The ability to share designs and make
comments can speed up the design process.
Options: Axure, Balsamiq,
Flinto, HotGloo,
Justinmind, MockFlow,
Moqups, Sketch, Solidify
and UXPin

9. Final Designs
After several rounds of discussion on the wireframes, you will have to lock down the features
and flow so the designer can deliver the final screens that the developers will need.
app design
9
Our choice: Let the designers choose.
Options: Adobe Illustrator, Adobe Photoshop, CorelDRAW
and Sketch
Creating the look is one aspect, the others include
animations and interactions the user will see on the screen.
And, what gestures a user might need to perform in the
app (ex. swipe to the right).

10. Mobile App
Architecture
10
This relates to what
the user sees on the
mobile screen.

11. Mobile Phone Platforms
There are really only two major mobile platforms that are currently in use – Android
and iOS.
Other options: Blackberry and Microsoft Windows Phone
mobile phone platforms
11
Our choice: Android and iOS. In Asia, Android is more popular but the tastemakers and
journalists tend to be on iOS. In the US and Europe you can get away with iOS initially then
Android.

12. Development Options
native hybrid mobile apps
12
Our choice: It Depends. Native development brings a much richer experience but lately React
Native is gaining traction for hybrid development.

13. One of the biggest features many mobile apps are implementing is the ability to let users chat
within the app.
Options: Firebase, Layer, PubNub, Pusher, QuickBlox, Sinch, socket.io, XMPP
In-App Chat Messaging
instant messaging
13
Our choice: For an MVP launch PubNub or Firebase are good. For the longer term building a
chat system from scratch might using Socket.io be the right option.

14. When users start to interact with the app, you will want to send them notifications such as a
transaction has been completed or someone has liked their comment or a password reset link.
4 Options:
Notifications
mobile app notifications
14
Our choice: It depends on how “noisy” you want your app to be.
In-App. When the app is
open and being used
Push. When the app is not
being used, it will send a
notification
E-mail SMS
1 2
3 4

15. Backend
Architecture
15
Although the front end
of the mobile app gets
all the glory, the real
work is done behind the
scenes.

16. Mobile Backend as a Service
mobile backend service
16
Our choice: Firebase. But your mileage may vary depending on how complex your mobile app
is. A full scale backend might be required if the app is complex such as a marketplace mobile
app.
There is a growing trend around using Mobile Backend as a Service (MBaaS) options. It simplifies
the backend services that are required for a mobile app but are not as feature rich as a full scale
backend service.
Options: AnyPresence, Appcelerator, FeedHenry, Firebase, Kinvey, Meteor, ShepHertz

17. Infrastructure Provider
If you opt for a full scale backend, those components must reside somewhere.
Options: Amazon Web Services (AWS), Google Cloud Platform, local hosting provider, Microsoft
Azure, Netmagic, Rackspace
web hosting services
17
Our choice: Amazon Web Services (AWS). They are the #1 leader in web infrastructure
services also known as cloud services.

18. Central vs. Distributed
The old way of designing the infrastructure for a backend was to put all the resources such as
databases, files, images, etc... on the same server. The problem is if your database is slow and
everything else is fine, you have to upgrade the entire server and disrupt the other functions. By
distributing the resources you can quickly pinpoint the bottleneck and scale that particular
resource.
distributed web architecture
Central
Our choice: Distributed Architecture.
Distributed
Computing Database Static
Files
Computing, database, files, etc...
18

19. Managed vs. Self-Service
If your team is technical it might not be technical in terms of hardware. Just
because someone knows a programming language does not mean they have the
infrastructure knowledge to run the backend.
Some startups prefer to outsource the management of their hardware to a
hosting provider or use the “premium” option of a cloud service provider.
Our choice: Self-Service. The tools that are provided by AWS are quite powerful
and easy to use for managing the entire AWS infrastructure.
managed server hosting
19

20. Technology Stack
The “stack” refers to a set of software components needed to create a complete platform. For
a mobile application that includes the operating system, web server, database and
programming language.
lamp lemp mean
20
Our choice: It depends. Several factors to evaluate include time to market, cost and knowledge of the
technology stack.
1 2
3 4
LAMP
Stack
LEMP
Stack
MEAN
Stack
Windows
Stack

21. Operating System
There are only two options - Microsoft Windows or Linux. Windows is limited in the type of
programming languages that you can run on the server. Linux is open source and has a large
community that is continually improving the operating system. Within Linux there are many
versions such as Debian and Red Hat to choose from.
linux hosting
21

22. Software that delivers information from the server to a mobile app.
Options: Apache, Lighttpd, Microsoft Internet Information Server (IIS), Nginx, Node.js, Rails,
Tornado
Web Server
web servers
22

23. The heart of any mobile app is the database since it stores all the user information and
everything else related to the mobile application. There are two categories to consider: SQL or
NoSQL.
Options: Amazon DynamoDB, Cassandra, CouchDB, MariaDB, Microsoft SQL, MongoDB,
MySQL, Oracle, PostgreSQL
Database
mysql nosql
23

24. If you ask 4 programmers which is the best language, you will most likely get 5 different
answers.
Options: Clojure, Express, Java, JavaScript, Microsoft’s .NET, Perl, PHP, Python, Ruby
Programming Language
Web services backend languages
24

25. An Application Programming Interface (API) is how the front end of the mobile app
communicates with the backend to display information to the user.
Web Services Architecture
Api mobile access
25
Previously Today Future
In the late 1990’s, Microsoft
released a specification called
Simple Object Access Protocol
(SOAP). It used Extensible
Markup Language (XML) to
send data to a requesting
endpoint.
In the early 2000’s a specification
was released called
Representational State Transfer
(REST). It has become the de facto
standard to enable mobile apps to
communicate with the backend.
It’s commonly referred to as a
RESTful API.
GraphQL is a new nested
query language. It’s an open
source standard published by
Facebook to enhance the
REST specification.

26. Sample
Architecture
26
How does it all
work together?

27. The app UI is
a small piece

28. Mobile App Roles
28
Visually creates
the user interface
(UI) and the
overall user
experience (UX)
Mobile
Developer
Backend
Engineer
Operations
Engineer
App Server
UI/UX
Designer
Converts the
UI/UX design into
Objective-C (iOS)
or Java (Android)
Converts the
business logic into
computer code
using Java,
JavaScript, PHP,
Python, PERL,
.NET, etc...
Manages the
servers, databases,
DNS information,
and other website
infrastructure

29. Day 0
29
Elastic Compute
Cloud (EC2)
t1.micro
RDS
MySQL
t1.micro
S3
Region: APAC- Singapore
Single Region, Single Availability Zone
Users
Internet
Availability Zone: AP-Southeast-1a

30. Day 0+X
30
RDS
MySQL
S3
Internet
Database
Replication
Elastic
Compute
Cloud (EC2)
RDS
MySQL
Availability Zone: AP-Southeast-1b
Elastic Load Balancer (ELB)
S3
Elastic
Compute
Cloud (EC2)
Region: APAC- Singapore
Availability Zone: AP-Southeast-1a
Users
Single Region, Multi Availability Zone
The fault tolerant design allows for one of the availability
zones not being available.

31. RDS
MySQL
S3
Internet
RDS
MySQL
Elastic Load Balancer (ELB)
S3
Day 0+2X
Availability Zone: US-East-1a
Elastic
Compute
Cloud (EC2)
Elastic
Compute
Cloud (EC2)
31
Region: APAC- Singapore
Availability Zone: AP-Southeast-1a
Region: US East (N. Virginia)
Users
Multi-Region
The fault tolerant design allows for one of the regions not
being available. The design also allows for users to be load
balanced based on geographic location.

32. Monitoring
32
What happens when
you are sleeping?

33. By monitoring the infrastructure, you can proactively plan if
certain components need to be upgraded.
Infrastructure Performance
33

34. Understanding how the application affects the infrastructure is essential. If
there are very few users but the servers and databases are consistently
running at peak utilization, that might indicate a programming issue.
Application Performance
34

35. Google Analytics is the industry standard for tracking app statistics such as users, usage and
many other statistics. But there are many others that provide better mobile user engagement.
User Analytics & Engagement
35

36. You may have the best programmers working on the app, but testing and bug
are a part of the developmental cycle…get used to it.
Options: BugClipper, Crashlytics, Crittercism, HockeyApp, Splunk Mint
Testing & Bug Tracking
app bug testing
36
Our choice: Crashlytics. It’s one of the most widely used services and it’s free from Twitter.

37. Disaster
Recovery
37
If disaster strikes
are you ready?

38. Having a disaster recovery plan in place is critical to ensure the website can recover from a
catastrophic event.
Taking a daily/weekly/monthly snapshot of the servers, files and databases is a minimum
requirement. The daily/weekly/monthly backup schedule is sometimes referred to as the
son/father/grandfather rotation schedule.
Backing Up & Restoring
If disaster does strikes and a complete
backup strategy is in place, then it
should not be very difficult to restore
the website from the backups that are
being maintained.
38

39. Scaling
39
What happens if your
mobile app is an
overnight success?

40. Hopefully, the app you launch is a massive success and leads to your backend having a
tough time handling the load.
With many cloud service providers you can automatically add additional resources
based on predefined rules. An example is below:
Adding Infrastructure Resources
Rule Action
If CPU utilization goes above
60% during a 5 minute
period
Upgrade the server to the
next larger size to handle the
additional load
40

41. Internal
Communication
41
How does your team
communicate?

42. Team communication is critical in a fast paced internet business. There are two main categories
that many of the tools available fall into: 1. todo list and task management 2. instant messaging
Team Communications
42

43. Questions?
Version: Ferrari
Manish Jain
Co-Founder, MProfit
@mrjain_
mrjain@gmail.com
You can contact me at
the coordinates below.