Mobile Application Architecture

System DesignFrontend & Mobile

Topic: Mobile Application Architecture

Presenter: Yi


Sign Up Form:

https://commitway.com/job-refer

QRCode

System Design Summary

Structure of the talk:

Requirements

System design

Wrap-up

Mobile system design interview tips:

Gather requirements within 10 minutes

Make decisions

Collaborative

Steps:

Requirement gathering

High level design

API

Design

Requirements:

List of chat windows

Send and receive messages

Non-functional:

Start with 10k users

Grow to support 100M users

Offline support

Memory and batter

High level design

Mobile architecture:

MVC: traditional

MVP: view model, presenter

Navigation between app screens: using navigator

Data sources

Chat app:

Http get

Web socket

Key/value data

Files

Local DB

In Memory, Key, value, files, DB

Local data

Remove data

Get, put

HTTP:

GET, POST

Polling: short polling, long polling

Poliing:

Short polling: one time query

Long polling: bi-direction

Downside: resource consumption

Details:

GraphQL

Websocket

Pagination

Offset pagination

Offset, limit

Keyset pagination

Get /feed?after2021-05-25T

ID and timestamp

Cursor pagination

/feed?after_id=t1234xyz&limit

Push notification

Can wake up application in the background

Can wake the app

Notification vs websocket

Websocket is used while app is running

Notification is used while app is not running

Offline support

Local cache as source

Key value data

Mobile DB

[background service?]

[does push notification

Files: app files (encrypted), disk files

Q: encryption for websocket

A: yes. At various layers

Q: encryption for files

A: apple key management, self encrypted,

For images and sound - usually not

Apple, Android provides built-in encryption

Q: websocket for pushing messages. What happens when the app goes to offline?

A: offline -> online, at the beginning of reconnecting websocket, retrieve the information

Q: Navigation view, there are many users. Do we need multiple sockets, one for each user?

A: alternatives:

A websocket for each user – audience thinks that is not efficient.

A websocket to support retrieving the list and a preview.

One websocket to retrieve messages for all users.

Chat window uses a websocket. Polling to support navigation view.

Peer-to-peer connections

Deep dive

User Flow

User experience: steps and state

Data Flow

Network <-> Business Model <-> View

Interesting Screens

Detail UI

Component architecture

Challenging part of particular component

“Real-time” update: Improve UX

Caching: Improve UX

View Reuse: Improve Performance

How to accommodate a big team?

Modularize

Unit test

Different feature

Common library

Dependencies

Main app

Common

Base -> navigation

Activities, fragments

Feature1

Feature2

Q: Mobile push. How does it work?

Backend ??? Platform, Client

Q: Is pushing similar to text messages?

A: similar