Front End System Design Fundamentals (All In One Comprehensive Guide)

[@shivam_bhalla]

Hi all, just launched a discord for frontend engineers who are preparing for interviews: discord.gg/qZmAxRs2E8

[@Vitalik186]

It is worth mentioning, that GraphQL makes BE caching much more complex - and this is a trade-off as well. And the biggest plus is not just pulling the data you need - you avoid creating DTO's and redundant queries

[@ivanseredkin1090]

Great video, thank you!

[@itsdavidmora]

❗29:12 "Server-side rendering is mostly for React.js" - Did you mean *Next.js* is React-specific? Because *any web app* that has to take in some form of data, then render a UI as a result, can be server-side rendered. Not just React. Basically, the server itself is pre-pulling the data/images/etc that you need, rendering out the HTML document, then sending THAT to the client. As opposed to just sending a starting set of html and JS, and then having the client fetch data/js/etc and render it all itself as it streams in.

[@shivam_bhalla]

Yes, thanks for the correction. Lots of topics to cover in one video so easy to misspeak in certain sections.

[@vishalpatil7994]

Thank you for the detailed video, really like the content.

[@cats_lao_jiao]

This video is my first attempt on understanding what a frontend system design interview looks like. It helps a lot! Thanks!

[@shivam_bhalla]

So glad you found it helpful!

[@Mr.x.187]

Amazing video. Just what i needed for my upcoming interviews! Thank You

[@shivam_bhalla]

Glad it was helpful!

[@alexhu98]

This is the best front end system design in KZbin. I aced an interview with this RADIO concept. Thank you SO MUCH.

[@shivam_bhalla]

Thank you so much for the kind words! I am planning to produce a lot more content coming up. It’s been busy launching the new version of frontendlead.com :)

[@AdamFiregate]

Well done! 🌞

[@CoreyAlejandro]

This is such a brilliant video. The RADIO concept coupled with Shivam’s succinct yet comprehensive commentary makes for a must have master class. If I were teaching a course or running a bootcamp on Frontend Design I’d start with this video. And then return to it often. 🎉

[@shivam_bhalla]

Thank you!

[@maxwell1234hertz]

Amazing presentation Shivam Bhai. Keep up the good work.

[@kevinziechmann5438]

Nice walthrough of general concerns for implementing a front end thanks for making this. I think inlining CSS is not the right wording. Literal inline css will override the cascading part of CSS and will make the rules hard to debug. I think 'scope' might be more accurate for lutting CSS in the right place to only load where needed

[@clumsycoco]

Absolute gold mine !

[@shivam_bhalla]

Thank you!

[@dreamzsiva]

This is a great video and you have covered a large amount of topics in a short time. I do have a few thoughts. 1. I would spend little more time on the actual UI development strategy - SSR/CSR, state management, UI library considerations, responsive design choices, virtual dom based scrolling, interactivity etc 2. Some of the biggest challenges in building a news feed on frontend are - scroll performance and data fetching - I think that needs to be given special attention 3. Back of envelope calculations need to be frontend focused - what amount of data the component needs to render / filter / parse, how often data needs to be pulled from server and how often, how often the component nees to be repainted on screen,how many dom elements in the compoent etc . These will determine caching strategy, choice of rendering - canvas/svg/plain html/webgl etc,

[@shivam_bhalla]

Thanks! The goal of this video was not to walk through a specific question per say but rather discuss Frontend System Design interviews holistically. I generally agree with your points, thank you for the feedback :D

[@大盗江南]

Thank you!

[@lelandrb]

As a senior (L5) frontend engineer, state management is like a solid 1/3 of most system designs I've been in

[@kerenwigelman7131]

I'm trying to start digging in into system design which seems a bundle of huge content for me (I know some of the mentioned consepts). This video has helped me make some order to it, thanks!

[@shivam_bhalla]

Thank you!

[@ditiashova]

wow that's REALLY comprehensive guide!! thanks a lot, I have System Design Interview tomorrow, this video is super helpful!

[@DaveRaspberry]

Hi, how did your interview go? I have mine in a few days and watching this right now.

[@ditiashova]

@@DaveRaspberry, this guide was super helpful, and I knew what to expect at this stage of the interview! Although, in my case, the interviewer placed more emphasis on technical details and less on gathering requirements, he wanted to skip this part.

[@nikolamiticdev]

OK so this looks very great! I was a part of many frontend system design interview and they all expect me to design instagram, facebook youtube and it is always about backend architecture. This seems to be focused on frontend, I hope I get such questions on the next interview. Thanks!

[@shivam_bhalla]

Thank you!

[@SeansChannel-hd5zg]

Found a gold mine. Thank you for this superior content.

[@shivam_bhalla]

Glad to hear it!

[@alexmstudio]

Excellent overview. Thank you for sharing this!

[@ofeklevy1242]

Gained 1 more subscriber , the content is super high quality . hopefully the video and sounds will be better in the future. good luck

[@shivam_bhalla]

Thanks for the feedback!

[@zaursuleymanov5921]

Greate job👏May I ask you to share the link of this layout with this system design what you have created?

[@shivam_bhalla]

Hi, yes you can find it here: frontendlead.com/system-design/frontend-system-design-interview-guide

[@rsmeloba]

amazing work my friend. thank you very much

[@shivam_bhalla]

Thank you!

[@rushilsaraogi3917]

I was a little confused by the http1 vs http2 part, what's the point of bringing that up? When would you choose http1 over http2?

[@shivam_bhalla]

You wouldn’t choose http1 over 2, the goal here is to give you enough context between the two so that you can explain to the interviewer why you chose http2 (keep it short and high level)

[@titolstwo]

Genuine question - if we're comparing HTTP protocoles, shouldn't it be HTTP2 vs HTTP3? HTTP1 has been superseded by 2 & 3 a while ago and I don't see any use cases unless for legacy reasons

[@shivam_bhalla]

Don’t spend too much time during your interview about comparing http1/2/3, spend maybe 1 min just discussing the differences if it’s applicable. You should always mention historical data and why you choose to use 3/2 vs 1.

[@torontodev525]

Great Video brother Shivam, thanks!

[@shivam_bhalla]

Thank you!

[@akib001]

Your video is really good. Can you provide the diagram? It will be really helpfull for me

[@satwindersinghsaini5000]

Which sofware are you using to draw diagrams in this video?

[@skid2138]

The video starts at @2:37

[@thecarrotdude]

I'm not sure if the MVC pattern discussion and diagram are necessary to talk about in this type of interview. At least in the video, your discussion of it wasn't really specific to the feature being asked about. It was almost a generic discussion of how data flows in MVC pattern.

[@shivam_bhalla]

This video is meant to be a high level overview of Frontend system design fundamentals with using designing Facebook as an example. It’s important to demonstrate and be aware of various design patterns for if and when they come up.

[@ShashaDev]

Great Content... really helpful.. Hoping to see some more complex design architecture explanation from you like Myntra and Amazon .. Thanks

[@CathalMacDonnacha]

Great job. Would you still use the MVC pattern when using React? Since React is really just the 'V' in MVC.

[@shivam_bhalla]

Thank you! During the system design interview, it’s framework agnostic, you can refer to any design pattern, MVC, MVVM, it’s your preference, I find explaining MVC is a lot easier. Regarding actual development, I prefer to use an MVVM pattern for react, more information on how that works can be found on this article (I will create a video to explain this design pattern in react) paulallies.medium.com/clean-mvvm-with-react-and-react-hooks-ebc37b22542f

[@ronaldomaia]

I missed some important topics regarding Hidh Level Design. I believe that discussing design patterns is related to low level design. When we mention Architecture I imagine that we should discuss Microfrontends, SPA and so on. But your work is pretty neat and I appreciate the summary that you made. Keep the good work.

[@Leo-yw1fj]

SPA is a given in FE now who builds JSP pages for FE ? MFE is a good topic to broach but it was not as prominent two years ago.

[@Dopamine432]

thank you very much for the detailed explanation 👌🏻

[@shivam_bhalla]

Glad it’s helpful, I am working on the next video, designing an asana board. Stay tuned.

[@glenchaku9536]

Excellent content! Love your material, its very well explained and thorough. Proud supporter of frontendlead!

[@shivam_bhalla]

Thank you for the support, really appreciate the kind words. There is a lot in the works for Frontendlead, more system design solutions, in app ide, private community for Frontend engineers to share their interview experience.

[@Pulpdood]

Aren't compression headers automatically sent by the web browser depending on whether it's supported by the browser or not?

[@jatthundeaaaaa]

Amazing video sir, need more such videos Hoping your reach 1m subscribers soon😊

[@shivam_bhalla]

Appreciate the kind words. I am planning to make more videos related to Frontend system design.

[@jatthundeaaaaa]

@@shivam_bhalla I saw on the website frontend lead that it offers a 7 day trial, any idea how I can avail that

[@rohithsrivathsav6110]

Excellent content! I am hiring a lead FE engineer and my expectations from system design round are much higher after watching this video :)

[@shivam_bhalla]

Glad it was helpful!

[@sarazamani4914]

Thanks a lot

[@shivam_bhalla]

You are welcome!

[@adrian333dev]

Excellent content!

[@shivam_bhalla]

Glad you think so!

[@JulieYue]

Love this video! Creating a diagram gives a great visualization of need-to-know concepts. Just out of curiosity, which pattern would be best for a Next.js application? In your opinion, is MVC or MVVC better?

[@shivam_bhalla]

Thanks! One over the other isn’t better, it depends on the use case. For interviews, to keep things simple, I recommend MVC

[@labrajthakurathi5754]

The MVC pattern says the Modal layers should not directly interact with the View Layer, rather, the Modal Layer can only interact with the Controller Layer. I don't see it here. Is there any reason for that?

[@varagor23]

Love the video. One caveat, though. I don't think MVC is a very used pattern in front end design these days. React pretty much killed MVC and the concept of separation of concerns (at least in the traditional sense). Otherwise the video is great!

[@shivam_bhalla]

React is a primarily a view framework, however, you can and should utilize a design pattern principles when developing code, such as MVC or MVVM. For example, you can break apart your giant view, by extracting out the business logic (usually your hooks and dependencies above the render logic) into a custom hook, so that is considered your controller. Your view, is the rendering logic, which can be in its own file and utilized in a wrapper component along with your controller, and finally, your model is the api, network layer, consider gql for instance, your response needs to conform to a readable object in your frontend code. Personally, I love to use MVVM for my react component, because, you are able to extract out each part into its own logic and write unit tests explicitly for each thing. Here is a great article that dives a bit deeper into this and I’ll be making a future video on this concept too: paulallies.medium.com/clean-mvvm-with-react-and-react-hooks-ebc37b22542f

[@PrashanthBalakrishnan]

Thank you so much for this

[@shivam_bhalla]

Glad you found it helpful!

[@ccy0246]

Bringing MVC pattern in your discussion mean you're kind of covering backend architecture as well isn't it correct ? I'd think the frontend would only come into the "View" part. So is it still good idea to talk about MVC pattern when you're focused on Frontend system design ?

[@shivam_bhalla]

MVC is a design pattern and isn't limited to the server. Scalable client applications (not just web, like iOS/Android) should always be built with a design pattern in mind. Take a look at this article medium.com/swlh/elements-of-mvc-in-react-9382de427c09

[@thecarrotdude]

Another issue is with your discussion of the API options. You describe what each one is, pros and cons, but you don't explain WHY you picked graphQL over the others for this use case.

[@magdaz3562]

Also at some point the Author said that graghQL is a protocol, which it isn't, it is simply HTTP POST

[@shivam_bhalla]

Thanks for the feedback!

[@shreyacasmalert]

Hi @shivam_bhalla, great video! Can you share the link to the diagram?

[@kevingonzalez9790]

Can you post this document?

[@shivam_bhalla]

It’s available on frontendlead.com

[@navdeepsinghsowanni1658]

@@shivam_bhalla Where?

[@paulina7497]

ty

[@Fam-m4i]

Please send this template to me

[@shivam_bhalla]

You can find it here: frontendlead.com/system-design/frontend-system-design-interview-guide

[@mozart223]

can you share the design file?

[@shivam_bhalla]

It’s available on frontendlead

[@navdeepsinghsowanni1658]

@@shivam_bhalla do we need to enroll for the course to get this design file?

[@shivam_bhalla]

@@navdeepsinghsowanni1658 Hello, we offer 3 free system design articles but the rest are paid, check it out here: frontendlead.com/system-design/frontend-system-design-interview-guide

[@navdeepsinghsowanni1658]

@@shivam_bhalla Thank you Shivam. I have cleared the interview for which I was looking for this. This video was super helpful

[@jay_wright_thats_right]

I saw the name of the channel and thought I wasn't going to be able to understand one word you said. I was completely wrong. No accent, no tongue rolling, etc.

[@shivam_bhalla]

lol I guess I’ll take that as a compliment 😅

[@yagnikvadi]

Hi @shivam_bhalla, great video! Can you share the link to the diagram?