Thank you for reaching out to Sigma Software!
Please fill the form below. Our team will contact you shortly.
Sigma Software has offices in multiple locations in Europe, Northern America, Asia and Latin America.
4 min read
This article will be of interest to most developers who create UI in their applications. I will describe some approaches that we used creating UI with UI First in mind, and which can be applied to any platform in general. Besides, at the end of the article I will attach some examples of how the described approaches were implemented for an Android project.
Recently we have finished development of an MVP Android application. We 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, I would like to share some things that, as we see it, have allowed us to achieve 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 we start working on a new feature, we first create a UI for it, test the implementation on the test data, collect feedback from the team, UI/UX designers and, ideally, the customer, and only after this we 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. In particular, 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 at our real project. There you can also find the detailed architecture documentation. The provided example project includes only one screen showing a list of all repositories of github API.
Sergey is a Software Developer working in Mobile Software Development since 2015. He is really dedicated to the things he is doing, always tries to come up with the best solution available for each task.