Appatomy 101: What’s inside an App?

Mobile apps are more than what you see on your smartphone. Here's a simple breakdown of how Web Sites, Servers and Databases all come together to form an 'app'.

When you hear ‘app’, you probably think of the program that launches when you tap a icon on your smartphone’s home screen. You might be surprised to learn that many apps are actually made up of many components, some that live on your phone and others that live on the web, that come together to form a single ‘app’. Depending on the kind of app you are building, you might need to build  back end servers, databases and web sites in addition to the app code that runs on the phone.

Let’s say you are building a simple alarm clock app, then you generally won’t need anything more than the app that runs on the phone. However, if you wanted to include functionality that allows a user to stream a radio station for their alarm, or to manage their alarms via a web site, then your app will also need a web site, server and database to work. As a rule of thumb, if your app retrieves or stores data on the web (or in the ‘cloud’ as the Glitterati refer to it) then you will likely need to build additional back-end components that the app on the phone can talk to. The exception to this rule is if your app will be plugging into existing online services, like Google Maps, Facebook, or RSS,  then your app can usually plug right into them.

Here is a simple breakdown of common components that make up an ‘app’:

 
Component Description
App
  • Software that typically lives on the phone and that the user interacts with.
  • “Native” apps are downloaded from an App Store, installed on the phone and run as an individual application.
  • “Mobile Web” apps (sometimes called “HTML5″) live on the web, and run within the web browser of a smartphone. 
Web Site
  • Live on the web and are used to present and display documents through a web browser (duh)
  • Typically used to provide marketing and support information for users of an app.
  • Used to enable sharing of content from the app to Facebook, Twitter, etc. For example, when you click on a photo shared from the Instagram app to Facebook, you are directed to the Instagram web site where you view the photo.
  • If you are building a “Mobile Web” app, then the Web Site is where your app lives and is run from.
Server
  • Like a web site, except instead of displaying content for people to view, a Server returns content for a native app running a smartphone to consume.
  • Apps communicate with a Server through the Internet and use the Server as a means to store and retrieve data. When you upload a picture with the Facebook mobile app, the app is sending the photo to a Facebook Server that lives on the Internet.
  • Servers act as an intermediary between the App on the smartphone, and a centralized Database which physically stores the data.
  • Servers are generally custom built components designed to support the particular functionality of the mobile app. A well designed Server can support apps that run across all platforms in addition to providing data to any Mobile Web Apps.
Database
  • The Database is where all data sent to your Server is permanently stored. Think of a Database as a giant warehouse that holds the data of your app. 
  • A Server uses the Database to store and retrieve data sent to it by the App. If the Database is a warehouse, then the Server is like the window agent that takes requests and instructs the Database to retrieve whatever piece of data is required by the App.

With this breakdown, let’s now look compare 2 different apps and see which components they each have. For this example, we’ll use the photo-captioning game Bahndr and the  frequent flier point management app TravelWallet

Component Bahndr TravelWallet
App
  • Yes
  • Native app for iPhone.
  • Yes
  • Native app for Windows Phone.
Web Site
  • Yes
  • Used for sharing photos and captions to Twitter and Facebook.
  • Also used for marketing and support purposes.
  • No
Server
  • Yes
  • Handles all requests from the Bahndr app to create new captions, ‘like’ a photo, or share to Twitter/Facebook.
  • Bahndr app retrieves all photo, caption and user data that is needed for the current user through web calls made to the Bahndr Server.
  • No
Database
  • Yes
  • Uses a web-hosted database where all captions, photos and user data for the app is stored.
  • No

If you compare the two apps side-by-side, its not immediately obvious that Bahndr is more complex app of an app to build than Travel Wallet. The TravelWallet App exists solely on a user’s smartphone, with no backend communication at all. Every thing about TravelWallet app lives on the smartphone. On the other hand, the Bahndr App requires a Server, Web Site and Database components to be available over the Internet for it to work. Each of those components needed to be built alongside the actual iPhone App and ready to launch at the same time.

If you are designing an app, think about the types of interactions it will have and what/if any additional components might be needed to build your app. Its important because having to build these components in addition to the smartphone  will add both to the overall cost of the project and increase the time it takes to build it. Case in point: TravelWallet took roughly 4 weeks to develop end-to-end, Bahndr was a 4-month effort that required multiple engineers working across many different technologies.  Apps are much more than what you see on your smartphone, know what components will make up your app.

About Bobby Gill

I am the creator of Bahndr, founder of New York based app development lab, Blue Label Labs and editor at Idea to Appster. I like crepes and I am fascinated by big data.

  • http://www.bonkage.com/cs/user/CreateUser.aspx?ReturnUrl=%2fcs%2fblogs%2fbcb%2farchive%2f2011%2f02%2f03%2fbest-generation-ever.aspx Website Design

    Excellent post. I was checking constantly this blog and I am inspired! Very helpful info specially the closing phase :) I handle such info a lot. I was looking for this certain information for a long time. Thanks and good luck.