[Front-End System Design] - Chat application

[@PavloD9]

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?

[@FrontEndEngineer]

Hi, Pavel. Thank you for the great questions. I'll try to answer :) 1. with a WS, as you said, you need to break the connection with a server and reestablish this. This can lead to negative side effects of handling such an event both on the client and on the server. With SSE, there is no need to re-connect to the LB instance because HTTP2 enables multiplexing, which will allow the app to receive the data from the different server node without breaking the connection with LB 2. Depends on the configuration and org filtering level. With a WS, your browser sends an upgrade header, which switches the HTTP protocol to TCP. If you org configured TCP traffic filtering, then you can have a problem. But, I should say, I am not an expert here. I was involved in solving such a problem indirectly :) 3. You're right. Excellent point. Thank you :) This is not a problem until you need to think about multiplexing and handling multiple sources. Basically, we can solve the performance issue by making a single socket connection. Still, we need to re-invent a wheel to send multi-source message data on the server, which greatly increases architecture complexity. 4. Yep, you're right :) 5. You're right, but the latency is still a problem. When you're using a mobile device, you're constantly switching between the network cells. This is called - "Retransmitting," the message is carried over the network cells, which possibly can lead to longer latency. You can't avoid headers traffic overhead, which is not a problem in the SSE case.

[@geethurajasekharan1883]

Thank you both!! This is exactly the kind of questions an interviewer might ask and you've given us a feel of that too! And great answers from the author!

[@Vitalik186]

for number 1, I would add that the main reason why it's easier to balance SSE, is that the connection type is unidirectional - and from the server perspective - a client is stateless - so no additional logic required after a connection is broken

[@kalpanagupta6166]

@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

[@jeffb587]

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

[@SincerelyLucia_]

He made this mistake in every video lol

[@chrisrey2516]

Thanks. I thought I was going crazy but it could just be language barrier

[@MidhunDarvin625]

Thanks, would have made the same mistake

[@KamalTesting-ct6cx]

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

[@ripplesr5655]

This channel deserves more recognition! Thank you so much!

[@ayaramzy6815]

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

[@gj677]

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

[@huhuanxin4178]

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

[@FrontEndEngineer]

Thank you 🙏

[@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.

[@blank001]

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

[@anandkanu12]

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).

[@大盗江南]

Great point of view! So many talented dev out in the world

[@oRiGiNaLMrInsaf]

so many information, that was useful, thank you

[@BhavikGosrani]

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

[@gauravkesarwani1918]

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 ?

[@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.

[@karthikjoshi6386]

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

[@gauravkesarwani1918]

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

[@shreyasd9103]

What is the reason to store attachments seperately in the data store? Is it not a part of messages?

[@kanishmalviya]

Third column should be non-functional req. based on sub points you have written ?

[@jingjiejiang8919]

SSE is not good for chat applicaiton, coz chatting is not a "server" driven events, it is about both ends. Websocket is the option

[@NovaMenteMedia]

what about getting messages by contact id?

[@saqomelqon1618]

SSE is a terrible idea for a chat app. It’s unidirectional. It’s good for things like live stock price updates pushed from server to client but not chat. Yes, scaling and managing websockets is a pain but needed in this case.

[@ArshadKhan-dk5zf]

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.🙂

[@gauravkesarwani1918]

Which collaboration tool are you using for drawing diagrams ?

[@tsaregrad]

I’ve seen many videos about designing chat applications, mostly from BE perspective though. Why no one is considering WebRTC for the task?

[@bos9824]

its better for video

[@yoshitaarora4180]

28:24 - Optimization

[@keksinjo]

I don't really understand why you separate requirements to general and functional? Imho it's more common to use functional/non-functional. Functional like: users can send messages, attach media ...; non-functional: perfomance, stability, memory usage and many others.

[@SanekZZZ1]

Unfortunately, you didn't attach this diagram to the video. ;(

[@ayaramzy6815]

where is the diagram link?

[@ayaramzy6815]

can I really prepare schemas before the interview ... It is not bad to appear as I saw the question before ??

[@ZhekaMechsheryakov]

You are right, better to focus on the questions and draw needed diagrams in live mode

[@jlrobert]

how come the ids are "string" and not "number"? thanks for the vids!

[@brianschermerhorn7294]

If you want a unique ID - usually they have to be long enough such that an integer doesn't hold enough characters to make it so. A string however - works. Such as UUIDs.

[@LytbII]

What is brottle? Didn't find anything

[@keksinjo]

brotli

[@jhalakmaheshwari234]

What is brottle format?

[@OleBjrnMichelsen]

I think he's referring to Brotli, an improved (over gzip) compression format for HTTP.

[@yahwehagape]

Unidirectional

[@yahwehagape]

Server-Sent Events

[@Soileau]

I love your videos, it's awesome to see these system design questions from a frontend perspective. But you gotta turn off grammarly, man. That is so distracting. I had to rewind several times because the popups distracted me over and over.