Sigma Software provides top-notch software solutions and IT consulting to more than 170 customers all over the globe.
This article will be of interest to most developers who create UI in their applications. Here you'll find some approaches for creating UI with UI First in mind, and which can be applied to any platform in general.
A year and a half ago we finished the development of an MVP Android application. Our team managed to stay within the estimates and the scope drawn up at the start of the project. During the development, the number of UI bugs was insignificant and the review of our application by the design team was highly positive.
Based on the results of the work done, here are some things that allowed us to achieve a high quality of the final product.
At the beginning of the development, we decided to use the UI First approach. The main idea of this approach is that when you start working on a new feature, you first create a UI for it, test the implementation on the test data, collect feedback from the team, designers, and, ideally, the customer, and only after this you get down to the implementation of the business logic for this feature.
This approach allows achieving the following results:
To look through various states of the UI without rebuilding the project, we were in need of an appropriate tool.
This is where the Storybook came in handy. The Storybook is a list of all screens (modal windows, standalone views, if necessary).
A sample view of the Storybook in our application
After selecting one element, we can select the state of this screen that we are interested in and then see the screen itself in the state selected earlier.
Selecting a state for the Onboarding screen
The Onboarding screen with test data
This approach enables us to see various states of each screen without restarting the application. It also allows us to implement features faster, as opening a certain screen requires us to put the application into a certain state. This might be rather time-consuming as you need to do it after each change and build of the project.
Therefore, with the help of the Storybook, any screen can be reached in two clicks, without performing any other related actions.
The idea of creating a Storybook is not new. An example of its implementation for web development can be found at this link. We adapted it for mobile technologies to ensure the viability of this solution and to understand what advantage it can give us.
The selected development method requires certain approaches to the architecture. We used Data-Driven UI, which enables giving real or test data to the screen. At the same time, our UI is absolutely unaware of which data it is showing. This approach ensures the correspondence of the design that we create within the Storybook with test data and design with real data.
The aim of this article was to describe the overall approaches, without touching the specifics of the Android frameworks that we used.
Here is a link to a GitHub project that is essentially a replica of all frameworks and approaches used in our real project. There you can also find detailed architecture documentation. The provided example project includes only one screen showing a list of all repositories of GitHub API.