Front End System Design

Question 1

What are the different steps/processes in solving a front end system design question?

Answer 1

1. General/Product Requirements
2. Functional Requirements
3. Client Side Architecture
4. API Design
5. Data Entities/Data Storage
6. Optimization
7. Accessibility

Question 2

What are common optimization strategies for Network

Answer 2

• use HTTP2 if possible (e.g. allows for multiplexing which enables for multiple requests to be served via one connection)
• for images, have an image compression service work with the CDN to compress images
• use webp image format instead of png (use instead for fallback)
• brotli compress content
• zip all assets to minimize bundle size
• use CDN caching to cache all resources and appropriate assets

Question 3

What are common optimization strategies for Javascript

Answer 3

• Move asynchronous javascript to worker thread/web workers to block render thread
• Delegate filtering and computationally heavy operations to the server

Question 4

What are common optimization strategies for rendering

Answer 4

• Use css naming conventions
• Use css animations (which are more efficient than JS based ones which involve reflow or repainting the browser based on changes)
• in line critical resources
• add lazy loading/placeholders
• optimize DOM perf by using constant nodes and editing node content (as opposed to adding/deleting nodes)
• mimify assets/code

Question 5

What are common strategies for accessibility

Answer 5

• Keyboard based navigation (based on feature)
• Usage of rems as opposed to pixel (to fit into particular view)
• Color schemas available for those with color blindness
• Screen reader compatibility (aria-live fields)

Question 6

What are the pros/cons of long polling

Answer 6

Long Polling (simple request in some interval):
Pros: 
* HTTP benefits 
* Simple to implement 
Cons: 
* Latency can be long 
* Connection time outs due to proxies/having to reconnect 
* sending full requests

Question 7

What are the pros/cons of web sockets

Answer 7

Pros:

• allows for a 2 way connection (from client to server, as well as server to client)
• Very fast

Cons:

• have to maintain multiple connections for each particular process
• no HTTP 2 compatibility
• use constant TCP connection, which is resource expensive

Question 8

What are the pros/cons of Server Side Events

Answer 8

Pros:

• HTTP 2 benefits (scalability, load balancing, asset zipping, caching)
• contains minimal information (doesn’t contain additional headers)
• don’t waste device resources
• easier to load balance

Cons:
* one direction only from server to client

Question 9

Create the front end store for a chat application with contacts, messages, attachments

Answer 9

Store Normalized:
contacts: {[cid]: contact}
messages: {[contact id]: messages[]}
attachments{[cid]: attachments[]}

Question 10

Draw dependency tree of a chat app with data flow (consider contact list, chat view, messages, and attachments)

Answer 10

Refer to Front End System Design Notes

Question 11

Draw dependency tree of Pinterest with data flow (consider pin, pin details, pin comments, pin feed)

Answer 11

refer to Front End System Design Notes