Feb 10, 2014 By Dylan Steele and Malachy Walsh

The Anatomy of a Mobile App

in Mobile, Platform

Last week, we talked about the four back-end layers behind every great mobile app. Theoretically, you’ve made a lot of great technology decisions driven by the business objective you have for the app.

Now, we'll get into the mobile device itself, including features, tools, and the engaging experiences apps create.

Split up into four layers, each part of the front-end is defined by the device's capabilities. The decisions made here build on each other and, if made correctly, work in concert with the back-end layers to create a truly stunning experience.

This can turn a useful app into a truly loved app.

Front-end Layer 1: Container

The Container Layer is the first layer of the app on the mobile device itself. Think of it as the secure, enclosed wire mesh made of code, where all your back-end data will meet the data and features that live on the mobile device.

In general, there are three types of containers.

Completely native: designed for a specific device or platform. While there has been a recent strong shift toward native apps, and they often have clear performance superiority, developing native apps can be daunting.
HTML5 based: This is not always the smoothest experience, but data inside this sort of app is always up-to-date and secure.
Hybrid: A hybrid of the two, this allows for information to be updated and used in real-time but also gives the app a native feel. It’s generally thought that hybrid apps help reduce the costs of cross platform development, as well.

Front-end Layer2: Device Data Layer

Understanding what kind of device-created data will be needed by the app will naturally change the way you build it. Here are some typical questions to consider:

What data captured locally (photos, geo-location services) will be relevant for the app?
Do contact and calendar info need to be integrated?
What news/alert/feed updates are required?

Front-end Layer3: Offline Syncing

This layer helps determine what functions and formulas will operate even when the app is being used offline. Other considerations include:

What client-side processing is required?
How is business logic mapped to app execution?
Do multiple users need to access, edit, or change the same data?

Front-end Layer4: User Experience

If you were in the food business, this layer would be called “the presentation.” It’s how the app looks and feels to the end user. It’s what makes the app sexy and fun. If you’ve considered all the other layers thoroughly, you’ll be able to spend the kind of time that will really pay off. Get this layer right, and your app will deliver results for your user and ROI for your company. And it will get used.

Here are a few things to consider here:

Does the app represent a broad or focused use case?
How advanced does the UI need to be? Slick animations? Static forms?
What is the screen flow? Will is use panels? Or sliding menus?
How will users interact with the app and enter information, eg, sliders vs. text?
What content will be displayed and how? Interactive video? Lists? Scrolling text?

An app takes a village. Special thanks to the Saleforce1 Platform Dev team for their input and time on this piece.

For a more in depth look at these four layers, plus an explanation of the four “backend” foundation layers, download the free ebook, The Anatomy of a Mobile App, by clicking the button below.