[Front End System Design] - Facebook News Feed

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:

[bpkb]

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

[aubame-bloodclut-zette]

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!!

[robdodson]

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.

[kalpanagupta]

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.

[kalpanagupta]

I believe, Accessibility, Performance, Internationalization, language, SEO, Security and Scalability are key points to consider in system design.

[markosimundza]

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

[yaroslavsemenchenko]

I'm watching this video after 2 years. It's amazing. Please don't stop and retern with new videos!

[kalpanagupta]

Other ideas to optimize rendering performance are
1. Preload resources
2. Prefetch resources for next navigation
3. Lazy loading Images
4.

[DavidProrok]

Wow this was intense. It made me feel like I didn’t know anything lol. Great explanations

[anupbid]

I think this channel deseves a lot more subscribers.. great job and keep it up.

[FragRobe]

Thanks for your video, lots of really interesting points: I passed my interview also thanks to this.

[nikoman]

this is gold! thanks you, sir, for creating a very unique and super useful content!

[virtuality_arcade]

the most full video about that kind of interview, the best

[AmanVarshneyProfile]

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.

[uttampankaj]

For more info about network connections

[Xushkkkk]

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

[leduyminh]

Can you please attach the xml in the description, thank you! Very detailed explanation that covers most of the aspect of Front End design!

[GameboyZoneRocks]

Thanks for this video on System Design for Facebook NewsFeed. It's very thorough and detail oriented.

[yashin]

Great video ! Regarding scrolling technique, I assume you are talking about virtual scrolling not infinite scrolling ? Correct?

[avinashrock]

best frontend design channel i ever found on internet