[Front End System Design] - Facebook News Feed
Vložit
- čas přidán 28. 06. 2024
- Episode 1 - Facebook News Feed
Facebook News Feed is a widespread problem for System Design for Front-End interviews. Let's try to design it. This is just my thoughts and it's not a guide on how to do that.
If you have any suggestions, please leave comments below. Let's make the content better together.
Follow me:
Telegram: t.me/frontend_engineer_blog
Medium: / evgeniiray
Linkedin: / evgenii-ray
![[Front-End System Design] - Pinterest](http://i.ytimg.com/vi/3MADCVqL534/mqdefault.jpg)
![[Front-End System Design] - Pinterest](/img/tr.png)
![[Front-End System Design] - Chat application](http://i.ytimg.com/vi/LEaiGjffLEs/mqdefault.jpg)
![Как задизайнить Facebook за пол часа или секреты System Design Interview [rus] / Алексей Петров](http://i.ytimg.com/vi/Be7INI_U6GY/mqdefault.jpg)
Happy to report that I passed my front end systems design interview thanks to these videos (in particular, my interviewer loved the 9-step plan and the overview of polling/WebSockets/SSE). Very big thanks! Subbed
Hey Brian. Thank you for your report. I'm really happy that this worked out for you 🚀
Good luck with a new job 👍
@@FrontEndEngineer Thanks for the great videos!. Can you share the link to schemas for all the videos?. That would be really helpful.
@@venkatkarasani You'll actually get even more out of these videos if you build the diagrams from scratch as you watch, especially since that's what you might be doing during a FE interview. I used Excalidraw.
What is the best way to study these lectures ?
can you give me your experience ?
this is probably best endorsement a youtube video could get
A quick point on accessibility - you definitely do not want all inputs and textareas to have aria-live. That will create an extremely bad experience for a blind user. aria-live should only really be used for alerts, and even then it should be used sparingly. Screen readers can already easily read the text in inputs and textareas. In general, the first rule of aria is "Don't use ARIA" because it is so often misused.
I believe, Accessibility, Performance, Internationalization, language, SEO, Security and Scalability are key points to consider in system design.
Brother I watched all of your videos and it helped me pass my system design interview and get an offer from my dream company.. Thanks so much!!
Accessibility:
Use right color contrast ratio more than 4:5:1
Dynamic font sizes
Use semantic elements
Provide proper aria-roles, attributes for custom components. Like, use alt for images, aria-haspopup to announce, this element can load another layer.
Maintain Keyboard navigation
Create guardrails to avoid human errors.
Support escape link to move to a certain part of the page.
I'm watching this video after 2 years. It's amazing. Please don't stop and retern with new videos!
I think you are mixing infinite scrolling (adds new data/DOM elements) vs virtual scrolling (replaces data, keeps dom elements constant). Aside from that a very good and informative video
This was awesome! Thank you for taking the initiative to start this.
Other ideas to optimize rendering performance are
1. Preload resources
2. Prefetch resources for next navigation
3. Lazy loading Images
4.
Lol dns-prefetch.
For more info about network connections
Long Polling: javascript.info/long-polling
WebSocket: javascript.info/websocket
Server Sent Events: javascript.info/server-sent-events
best frontend design channel i ever found on internet
the most full video about that kind of interview, the best
Wow , such great efforts for the community , This is GOLD level content , God bless you man !!!
Great! Waiting for more videos!
Thanks for this video on System Design for Facebook NewsFeed. It's very thorough and detail oriented.
Wow this was intense. It made me feel like I didn’t know anything lol. Great explanations
This is a very good and knowledgeable video to watch. Great work ,Please try to do more stuffs like this :)
Awesome content and structure. Learned a lot of new stuff from this video and more magical stuff from the comments. Now I will be looking at all your video's comments as well 😬
Awesome content brother, you are a legend in the making. very helpful content and practical
Amazing content! Thanks a lot for sharing your knowledge
Great jobs buddy. Love the way you characterized things. Definitely, this will help in preparing the interviews. We can also talk about the performance of the feed and maybe talk about the web vitals stuff specially CLS.
Yea, web vitals is definitely a good thing. Thanks for comment
Good Work Man!
Please keep it up! 👍
Hey I love your videos. Please keep that coming :)
I think this channel deseves a lot more subscribers.. great job and keep it up.
Thanks a lot!
Thanks, i learnt alot of things just by watching this video
Nice work man! Thanks a lot!
Best one from what i see for the moment. Thank you
Thank u :)
Thanks for your video, lots of really interesting points: I passed my interview also thanks to this.
I'm glad it helped!)
This is great, helped me to have a start point for Frontend Design interviews. Thanks
Superb video. Good job. Very useful. ✌
Thanks for this, very helpful!
Loved it! Would like to add that we can also talk about the lower level architecture like folder structure, component APIs (if something like React is used), & are they well defined. how would you compose the components (patterns) , design patterns used & why, choice of libraries & why (Ex: what would library would you use to have a store), when would you choose persistent storage vs in-memory storage, etc? Overall, I still love the methodical approach - if the question you get is to design a core library like a logger system, UI becomes less of a focus and we need to delve deeper into just the logic & perf
I guess one doesn't expect to get to design a logger system in a Front End Design round so those questions of choosing storage take back seat!
This is one of the best front end design videos I have seen covering so many imp topics
Amazing, thanks for sharing :) :man-bowing:
Great content!!!..👏👏👏👏👏👏👏
Can you please attach the xml in the description, thank you! Very detailed explanation that covers most of the aspect of Front End design!
Спасибо!) Отличный урок!
WOW!!! awesome!!
amazing content!!!!!!!!
keep up the good work
Love the content
Thank you so much!
Awesome video. Definitely giving me a headstart ahead of my interview. Can you please share a link to this schema. It will be very helpful for reference
great video!
had this question today, should have known it was coming. totally forgot about Comments entity. Got a bit stuck trying to mock up the design. They didn't really want to see the data model diagram, more interested in front end state management
Thank you for your effort .. in the optimization section it is Brotli not Brottle u can add a note beside on the video .. again many thanks for your efforts
Such Wow. Much Love
This was very very helpful and gave me everything I needed to pass the front end design portion of the interview at Uber. Another company though asked me to "design a tooltip". I was fully unprepared and totally lost. Have you heard of this type of design interview before?
yes there are bunch of standard widgets like tooltip, star rating, infinite scroll etc
Thank you so much!!!!
Hey!! Really good content. Do you think you could share your diagrams on a public drive? Or maybe leave a download link so we can see it and try to add improvements ourselves? That would be awesome
OMG ! Thanks men!
This video was underrated.
Thank you!
good content.
Not everyone has a camera (or the desire to broadcast) but including a video of yourself talking would help this out a lot. Non-verbal communications add a lot to complex lessons :)
Awesome!! Thank you very much for sharing it. Could you please post a video of the front end design on shopping cart functionality?
Hi, new videos are coming in May / the beginning of June. I have that question in the list
Great video, lots of things that are new for me especially in the optimization area.
Which tool are you using for this ? Is it visio ?
Hey, Great content for the frontend design. I have one doubt.
When you are fetching getFeed(I mean getPost), you have all the feed in the NewsFeed Component.
We can run the for loop and destructure the feed object within the loop as
const { comments, ...rest } = feed
and pass the comments to commentList component and rest to StoryCard component.
What's the point of storing it in store? I believe we store the state of app in the store. Like selected feed or current active page, user meta data etc.
Please let me know if I understood it incorrectly.
Thanks for creating this video. It helps a lot!
PS: Better if we can add request and response payload with API's.
Hello there. Great job on this video. Great to see videos on front end system design. Can you provide a link for the diagram so that we can download it ?
Great video ! Regarding scrolling technique, I assume you are talking about virtual scrolling not infinite scrolling ? Correct?
Great video. Could you post a video of front end design on Amazon search and filter functionality?
Hi, Srujana, thank you for your comment. I'll add this question later, meanwhile, you can check out my video about Typeahead Widget
I used to call such scrolling a virtual scroll :)
Thanks for a great video!
One tiny misspelling in the network optimization section. You talked about gzip and *brotli* (en.wikipedia.org/wiki/Brotli)
Yep, thank you. I made this typo across all videos ;)
I was going crazy trying to find out about this "brottle" optimization lol Thank you for this comment, you saved me, now with your comment addition this video became amazing!
Have found there exists web framework named bottle 😛
Thanks this is extremely useful. Could you share the charts with process for offline consumption.
Great tutorial .... by the way, Can I know which tool you are using it for designing all these
thanks
Thanks for the episode, was interesting to follow!
What do you think is it worst to highlight more infra and back-end part of such a problem on the interview? ( how to deploy, what's db to use, some cloud staff and so on )
The backend part is irrelevant for the FE position. This is not what the interviewer expects from you. I went through my on-site with FB recently :)
@@FrontEndEngineer This is amazing. I have been struggling to find design videos for full stack engineers. Since you mentioned you went ahead with FB on-site recently, is this something you expect for the "Product Design" (not System Design)?
@@girlcoder4780 Product design as I know is a bit different, it's more about API Design than the application itself. Full-stack engineers also go through a different track, I'm not fully sure, that you should expect front-endish design.
Hey buddy great job, could you please provide the architecture doc?
Hello from "we actually used HTTP2 in production" part of the world!
HTTP2 performance is a myth. With all that multiplexing going through single TCP connection, with packet loss on mobile networks _every single resource_ waits until TCP retransmission is over. That's something like 300ms of page not loading a single thing, and it happens several time during a single page load.
thank you for this video i need those charts please
Hello, congrats on the great content! I've got one question
On minute 32 I believe you are referring to virtualization. I was wondering, since the virtualization technique requires us to provide with the story height in order to perform its computations and how many items to show on the screen - how exactly they calculate the height ? because every facebook story could consist of a different content and therefore it could have a different height. Do they somehow store metadata for each story with the media height, media type, highlight comments count, etc. and based on this metadata they do their computations for the story height ? What do you think ?
The virtualization is a front-end only solution and it can be done dynamically. You can render the story on the DOM and then store the computed height. The virtualization lib will keep track of all the elements and heights and do the proper calculations.
There is no way to know the story height in advance because there are many factors involved like screen width, user-defined font-size, browser zoom, etc.
Thanks for the video，it is really helpful. I am going to prepare my interview base on this:) Just wondering where can I find the schema attachment for this video? Thanks a lot
Hi, I'm glad that you like it :)
Unfortunately, I've removed my G account with google drive files there, so basically you can copy them from the video :(
The disadvantage you mentioned for Websockets is quite confusing to me. AFAIK, websockets and https2 are two parallel or "competing" protocols, I dont know how can Websockets support http2
Quick question. In 20:33 I see you are passing the id to the store. So if I have 20 posts, then 20 stories would be fetching the data with those respective ids. Right? What if we make an API call to get the 20 story data from the parent (i.e News Feed) component?
This is a great guide, but I do have a question - how would you prepare or preload the components like you do for an actual interview? A lot of times you don't know what they will ask until the actual interview starts
I've mentioned it on my newer videos that you need to focus on the most important parts and don't spend too much time on drawing. This will be a waste of time for sure!
Please kindly attach the final snapshot, in all your system design videos.
What is the tool you’re using to create this?
By feed_id in the store, do you mean post_id?? feed_id was not defined in the apis, makes more sense if we are talking about individual posts.
thanks man, btw how do you load more data using SSE when the user scrolls to the bottom ? as far as i know in SSE the data is pushed from the server, the client is passive.
You should use a hybrid approach -
1. SSE loads data on the background
2. If user scrolls down, and there is no data, make an API call
Hey man thanks for the video. I am trying to understand at 32:20 where explains why we need add Top and Bottom Paddings. I am still not very sure why we need it. Could you explain more? I am also reading the Intersection Observer API doc but I havent see the padding part.
Thanks very much!
Hi! Not sure if you still need the answer, but I believe he used the padding approach to preserve the right scrolling behaviour (the proportions of the scroll), so that once you have some portion of data you can navigate it through the scrollbar directly and have the right feel of the list size, as under the hood you only render for example 10 stories at a moment, but the list should look like you have 150 stories already
Hi! Not sure if you still need it but here's my thoughts. Basically we are expanding the viewport vertically by giving a rootMargin to the IntersectionOberver. This means we can fetch the next set of data from the BE before the user even reaches the bottom of the screen and keep them ready.
Is the data store in the video storing in memory or local storage?
Where's the attachment, Lebowski? :)
✔ Facebook News Feed
...
🕑 I'm waiting for the next parts of your Front-End Doc.
is this just a guess or what they actually did?
which tool is being used here to draw?
What tool are you using for creating the design flow ?
what software did you use on this?
Thanks for your video! What software you use to generate those charts?
draw.io
Man, thank you for the stuff, but don't you think that all these points are extremely obvious? it looks like we're discussing how to do snowball fights with big whiteboards and block schemas?
just a question to anybody reading this. this is low level system design or high level
Which software are u using to make these diagrams?
A very good content using draw.io I too feel that they are less content on Frontend Engineer. Thanks for putting effort and sharing with us :)
can anybody share good resources for low level for frontend
how i can get that slide
Can you please share this schema?
Hey, does anyone have the xml for this?
Can you share draw.io diagram files?
Mannnn, Who are you? Do you have a linkedin profile?
Subbing - I’m a Ui developer this is not talked about.
what level of position did you apply for? is this a junior level interview question?
senior/staff
Hello, Can I get the diagram of this design an image that fully captures the drawing? Since there is a lot of scrolling its easy to miss and confuse if I dont have complete view. It will help me. and may be others thank you.