In this article I will share with you the process that I follow to develop mobile web apps. According to the answers that you provided in my reader survey, many of you are curious about this topic. Here’s my approach.
For most projects, I perform two or more iterations with the following steps.
As you would suspect, for this step I prefer to go to the people who know the most about what is needed, preferably the end users of the future app or software.
Development Environment Setup
This is where I set up my workstation to develop the project. It entails creating directories for source code, documentation and other resources; setting up source control (I normally use Bitbucket); and installing code libraries, frameworks and third-party software needed for the project.
Low Fidelity UI Prototyping
This is where I create low-fidelity prototypes of the user interface of the app. I use Balsamiq and Pencil as the tools for this step. I prefer short work sessions with the users or clients until they are satisfied with the prototypes.
High Fidelity UI Prototyping
I also make high-fidelity prototypes of the UI, based on the low-fidelity prototypes. I prefer to create these prototypes with jQuery Mobile due to the ease of use of this framework. As with the previous step, I work with users or clients until we agree on the prototypes.
UI Implementation with Mock Data
Once I have UI prototypes that my clients believe are very close to the final product, I start to implement the UI of the app. During this phase I use mock data to populate the screens. I also simulate network connections and other processes that need to be in place in the production app.
Once I finish this stage, I know that I can focus on implementing the controllers and services that will drive the UI, with the confidence that there will be little changes to the UI going forward.
Implementation of Client-Side Controllers and Services
The client-side controllers and services drive the app’s UI and perform tasks such as communications with the server and local data access. During this phase, I perform mini-iterations consisting of the following steps:
- Create behavior-driven tests for the controllers and services layer.
- Implement the controller and services layer functions.
- Wire the UI to the controller and remove mock data.
The test-first approach makes it easy to create lean controller and service methods that do what’s needed for the specific task, without code bloat.
It’s simple to create good behavior-driven tests once the UI is well defined. If I need to make changes to the UI down the road, the tests also make it easy to find the places where I need to change the controller or services to respond to the UI changes.
Implementation of Server-Side Endpoints and Services
The server-side endpoints and services store application data and run tasks on behalf of the mobile app. During this phase, I perform mini-iterations consisting of the following steps:
- Create behavior-driven tests of endpoints with fake data, using Postman or similar tools.
- Implement the endpoints.
- Create behavior-driven tests for the services layer (authentication, authorization, data access, etc.).
- Implement the services layer.
Tests on Emulator and Physical Devices
This phase is all about end-to-end tests of the application on different emulators and physical devices. I first perform functional tests that cover the features of the app; then I move on to non-functional tests, paying particular attention to usability and performance issues.
The packaging step is where I package the application (if needed) so it can be deployed through an enterprise portal or app store.
A Question for You
How do you develop your apps? I’d like to know if you have a set process or if you change based on the project.
Share your answers in the comments form below.
Make sure to sign up for my newsletter so you can be among the first to know when new tutorials are available. When you sign up, I will send you a free Mobile User Interface Recipes Kit with mockups packages for two real-world mobile apps.