Mobile System Design: Browser Application
Everything starts with ideas by defining what we want and how we want, so are applications. Let's build Browser Application together.
Table of contents:
- What is Mobile System Design?
- Design Browser Application
- Requirements
a. Functional requirements
b. Non-functional requirements
c. Out-of-scope - High Level Design
- Pagination
a. Offset-Based Pagination
b. Cursor-Based Pagination
c. Page-Based Pagination - Entities
- Endpoints
- Offline First
- Summary
What is Mobile System Design?
When there is to build an application, what differs Senior Engineer from Junior Engineer, he does not jump into implementation merely understanding what is asked, but he firstly defines the client requirements and creates overall image of the system. Here comes the role for Mobile System Design.
Mobile System Design refers to the process of planning and structuring the architecture, components and functionality of mobile applications or systems. It involves creating scalable, efficient and user-friendly solutions considering constraints and opportunities of mobile devices, such as limited resources, varying screen sizes, network connectivity, and platform-specific requirements.
Design Browser Application
Okay, we are to develop Browser Application. As a client, let's outline the overall features we want and what the application should look like. For a browser, we want to have search field on top of screen; tabs as categories below search field; profile entry on top left or redirect to authentication; settings on top right; show offline search history - 10 items - when search field is tapped; and for each search key including selected category save first 10 items when search is done and show them when user goes offline; 2 weeks of free period; localization in several languages; light and dark theme.
Now, let's move to the role of engineer and define exact requirements for MVP.
Requirements
Before moving further, let's define what we mean by Requirements.
Requirements in Mobile System Design refer to the specific set of technical, functional and non-functional needs that must be met to build a successful mobile application or system. These requirements provide a blueprint for the design, development and deployment of the system, ensuring that it aligns with user expectations and business goals.
Functional Requirements
Functional Requirements describe what the mobile system should do and the features it should provide for the user. So, let's define functional requirements for our Browser App from client's words for our MVP.
- Search screen with infinite scrolling
- Categories
- Offline search history
Non-Functional Requirements
Non-functional Requirements focus on the performance, usability, and operational aspects of the system. Speaking of our application they are but not limited to:
- Smooth scrolling
- Battery optimization
- Don't overload backend with requests
Out-of-scope
Out-of-scope Requirements are features and requirements that are not built for MVP, which are in our case:
- Profile screen
- Authentication Flow
- Settings screen
- light and dark theme
- localization
High Level Design
High Level Design refers to the diagram that divides the system into separate components and connect them together to build an overall image for data flow in both directions between mobile device and backend. The diagram contains but not limited to: Navigation, Screens with their UI handlers, Use Cases, Storage and Rest API with possible endpoints. Some entities, repositories are also useful mention in the diagram. Let's create high level design for our application.
Let's consider Search feature.
- Search screen has UI handler/ViewModel/BLoC. Search screen contains widgets, handles user gestures, displays particular UI for particular state.
- Through SearchUseCase and FetchSearchHistoryUseCase in domain layer, user interaction is handled and data is passed forward and backward between UI and data layers.
- In data layer, search history is saved in local storage, through endpoints requests bring responses for particular searches.
- Token and other sensitive data is saved in secure storage in device.
