Design google photos mobile frontend
Topic: Design google photos mobile frontend
Interviewer: Lei
Interviewee: Yi
Level: L5 (Senior)
Topic
Mock System Design Interview Summary
Interview Overview
Date: 4/24/2022
Target level: L5
Duration: 45 minutes
Topic covered: Design google photos mobile frontend
Drawing tool used: whimsical.com
Requirements
Functional requirements
Design google photos mobile frontend
List of photos in alphabetical order or date order. Sort by date and time is better
Pagination (indexing, separate thread)
Infinite scroll
Out of scope: album sharing
Non functional requirements
Emerging market vs developed market? Bandwidth requirements?
Assume high bandwidth
System Design
External APIs
Resource provider
HTTP API design
System design
Q: Android view/API to use
A: RecyclerView is based on GridLayout, row + col
Q: GridLayoutManager?
Yes
Q: Do we need to worry about the rows vs columns?
Set 3-4 columns, the rows will be dynamically created
MVC/MVx architecture
Fetching photos:
Protocols:
HTTP
GraphQL
WebSocket
SSE (server sent event)
Graph
Q: URL and query parameters?
A:
Network request:
GET HTTP:
Headers {
token: “tokenid”
}
Base_URL + PATH_URL + params
BASE_URL: mockURL
PATH_URL: “getListOfPhotos”
Params:
startIndex: 0
pageAmount: 50
Return value:
[Image {timestamp, resolution, URL: }, Image {URL: }, ]
Resolution is there to support user drilling down detail of the image
Infinite scroll:
receptor, size of the current view. Starting index to fetch from server.
We can use picasso or android worker
Loading image URL
Q: HTTP request: on main thread or on worker threads
A: a separate thread. Update the UI on main thread
Issue request on worker thread
Network callback will automatically be called on main thread
Q: first trip, list of images with URL. How do know when we need to download image?
Once we receive the response from server, we inform recycler view that result is available.
Recycler view to calculate the right position
Rotating the screen will also change the right position
When do we know it’s time to load more images? How does infinite scrolling work?
receive new images: Long pulling, server side event, websocket
Q: How to handle scroll down?
What event triggers the code to get more photos?
A: there is a callback for new photos from server. API to get new photos.
Q: scroll down to some place. Recycler view asks retrofit to fetch more photos
A: a new holder in recycler view waiting for data to come in.
Interviewer and Audience Feedback
Interviewer:
Listed framework and tradeoffs
Android specific UI: view and API for displaying. Recycler view, gridlayout
Should be gridlayoutmanager not grid layout
Getting photos: need to design API calls. No need to compare websocket, SSE, long poll. Consumed too much time. We can make an HTTP request. Interviewer likes to see the details: base and detail path/parameter.
GET request
Token (interviewee should bring up the location of token)
Things to improve: usually 2 steps:
First metadata, then body of the image
I was waiting for some keywords
Image loading tools: picasso/glide. Metadata: image loading process
Binding data and view. Afterward the loading will be triggered automatically
Flow to show the photos. Should break into 3 steps
HTTP call
Get data
Download image
Infinite scroll.
Long poll, websocket.
Usually static, no new photos, unlike chat apps
I was hoping for scrolling down triggering loading of the photos.
I wanted you to compare the pros and cons of 2 ways of loading photos.
Interviewee:
I needed to bring up the framework upfront
Should make sure we know the requirements
Wasted some time from my end
Will go back to study recycle view
Audience
Authentication should come up earlier on in the interview. We need a module for authentication
Requirement gathering: regional requirement. A good solution about network request. Data provider for abstraction layer. Data provider, network, cache. This will gain you more bonus points.
Have you think about testability. Mock up, unit tests, difference between senior and non-senior.
Audience
Emphasis
Interviewer: end-to-end design.
Not very focused on how to get image from server
Audience:
WebSocket
Seems we don’t need long poll or websocket. Is it a redflag?
Interviewer: yes, possibly a redflag.
Interviewee: I thought we needed new photos.
Audience How do we handle scrolldown? Should we download ahead of time?
Interviewer
Loading spinner
We can trigger HTTP request ahead of time when we are near the end
How do we know which image is for which spot?
Interviewer:
Not today’s focus
Should be trigger onBindViewHolder function.
Want to know Picaso and Glide interface. Interface and view API are both passed into the 3rd party libraries
Image downloading API/library. Very important and basic to android development. Similar to hashmap
Audience:
Scroll down, scroll up. What happens when we have already downloaded images?
Glide and Picaso handles it
It can also be an isolated frontend interview question
Audience
What does a typical mobile frontend look like?
Usually will provide requirement and UX.
Usually ask about view
How to achieve HTTP calls. What do we send to server, what do we get from server.
Deeper topics:
Authenticate
What happens when server calls fail?
Robinhood. Realtime UI. Notification, SSE
Push notification design
Base URL, request (GET, query parameter. POST)
Data structure of the response.
Download photos: Chunk by chunk?
One photo at a time, or 10 photos at a time.
Mobile network is not stable. How do we handle broken connections?
Can use Glide or Picaso.
Local and remote photos. Go back to functionalities.
Audience: different resolution of photos.
You can download pixelated image. Then load higher resolution images.
https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/
Can be an good question for drill down, to handle slow connections
How are tokens generated? Authorization token
Usually during login. Server sends an encrypted token. Mobile can persist locally. There is a time to live
Everytime we send the token. If it has expired, then a new user may be able to retrieve a new token.
Token cannot be revoked.
Using shorter TTL. If you can intercept the token, then you may get access for a long time.
Sharing token.
Authorization. Is it usually separate from authentication token?
A: requires separate logic.
Flutter: covers android and iOS. Do you recommend such framework, or do you recommend native frameworks?
In industry we still use native development. Android: java or kotlin. Apple, Swift. Web: react
React native and flutter can cover multiple platforms.
Web vs mobile development. Do they have different focus?
Mobile, 2-3 weeks release. We can ask the interviewer how to release bug fixes.
Web can be released very frequently.
Mobile hotfix, cherry pick.
Mobile: user needs to download.
Normally we try to make it the same.
iOS and android have some small differences.
Which view we should recommend people to be familiar with.
Rx, declaration based.
Lots of views are list based. Inside it probably is implemented as a table view.
Android: should be able to recycler view
Sometimes they require you to build an app on the spot.
Audience: trend is declarative UI. Flutter, jbCompose. They are all very similar.
Small company may adopt it quickly.
How to render data: “compose” is getting traction
If we are starting to learn mobile frontend, which framework should we learn?
ReactNative - can be deployed to 3 different platforms
Android and iOS have steep learning curves.
What does it mean that UI view is declarative?
Search for swiftUI
Bind data with view.
May take 2-4 years to adopt “compose”. Hybrid
To get a job today, still learn the basics in