[Front-End System Design] - Chat application

Episode 4 - Chat application

Hi, this is Ray, today, we'll look at the common system design problem - Chat Application. This is my favorite one because we have to look at all possible network protocols for transferring our message data and make inevitable design tradeoffs.

Feel free to add comments. Let's make the content better together.

Follow me:

[PavloD]

Thanks for your video! It is a pleasure to watch such well prepared videos. Some questions for the API part:

1) Why is it easier to load-balance SSE connection than a websocket? Technically, both are using persistent TCP connection under the hood. If connection breaks, browser reconnects to the LB (same or different node) in the same way.
2) Websockets and firewall issues - when using SSL, all three methods will look the same for the outside observer - a firewall will only see the SSL handshake and then some random encrypted data
3) Keeping a websocket connection is expensive - why is it more expensive than keeping any other TCP connection? A single websocket connection can be shared between browser tabs using a localStorage
4) Long polling connection timeouts - isn't it applicable to Websockets and HTTP/2 as well?
5) Long polling latency and traffic overhead - when using HTTP/2 connection multiplexing and keep-alive, the overhead will be close to zero, because TCP and SSL handshake will not be required (which is the most time consuming part of connection). Or am I missing something else?

[kalpanagupta]

@Front-End Engineer Great job. I would like to suggest a few more things that are important in Web development
1. Security
2. Performance, Fatals errors and event metrics
3. SEO
4. Rate limiter

[ripplesr]

This channel deserves more recognition! Thank you so much!

[KamalTesting-ctcx]

Thank you for sharing such informative session with us. Totally appreciate your efforts. Keep making and sharing this wonderful session. Thanks

[williamernesto]

Great video! This is as thorough of an explanation of FE architecture as i have seen in one of these. One thing that would help thoroughly is if you don't mind sharing your design document.

[gj]

This is gold! Thank you for creating this video and sharing your thought process. You’re amazing!

[blank]

This channel is highly under rated such a good content and good explanation, keep it up man.

[huhuanxin]

good video man, thanks for your time and making this front end architecture/system design series videos. Learn a lot from your videos.

[jeffb]

FYI everything you have under "general reqs" are actually functional reqs, and everything under "functional reqs" are actually non-functional reqs

[ayaramzy]

First Thank you I had this question in my last interview .. He asked me about data flow in the chat itself view how I can divide the components and then ask me about data entities for chatting private or in a group so add this part please in the video .. hope this comment found by others who preparing for frontend design system

[oRiGiNaLMrInsaf]

so many information, that was useful, thank you

[BhavikGosrani]

awesome content... learnt a lot for frontend system design

[anandkanu]

While I appreciate the effort to come up with frontend system design, I think the difference b/w Long Polling/Web Sockets/SSE is very opinionated and not generalised.
Eg. SSE => not sure how it is resource efficient? client would have to send messages through different mechanism (maybe REST), and receive through SSE, which leads to inconsistent application design. Also, adaption of HTTP 2 is very limited. (Google tried pushing the first draft with Server Push, and failed, since the protocol and the transport was very buggy).

[Ravi_Goyal]

one correction preconnect is typically used for critical resources that are needed early in the page load process to improve performance.

[NisargThakkar]

@Front-End Engineer excellent details. Can you please make e-commerce frontend system design ?

[karthikjoshi]

excellent video but I have question around websockets vs SSE applications like discord are using websocket that proves it is scalable with proper configuration and handling where as applications like chatgpt are using SSE this also brings question why they are not using web sockets as their main functionality is chat any insights on this will be very helpful

[gururajchadaga]

having authorId and recieverId in the message will make it hard to scale for group messages.
we need another entity called conversation, which will hold the name and id of the conversation.
The message entity can only have the authorId, and all the members of the chat(1:1 or groups) can go into another entity called conversationUsers, which will have the userId and the conversationId.
This way, scaling a 1:1 chat into group chat is just a matter of adding another row into the converstationUser table.

[ArshadKhan-dkzf]

Thanks a lot for this video. I have been searching for frontend system design for chatting app.
It will be great if you could share the design doc as image/xml file for quick access.
Once again thank you for the system design content.🙂

[gauravkesarwani]

You are missing the search bar in the contact list in your component architecture. I think you should have a ContactsContainer with ContactsList and Search as two sub-components. Wdyt ?

[gauravkesarwani]

The fetch contacts api call should be when you render the ContactList so should be one level above in the diagram