Видео

In terms of dealing with scaling either Redis pub/sub or Kafka

amazing man! your knowledge is excellent but your teaching is fantastic. keep going it please! 👌

in 17:40 I think the build-time definition is not quite right. build time is the process before the project is served to the server not to the client.

thanks

💫

thanks for all details

Great content ❤

Gem channel.

Superb content.. thanks for clearing the gaps..🎉

great

Perfectly explained!

Hi, thank you for the detailed video explanation, just a request can you share the images as slides, so that we have a reference for future.

thanks a lot man, really i owe you alot , the way you are providing content is very usefull for senior and lead level and manager level thank you once again keep going

Great explanation. Is it possible to get the slides of the video

How about scaling in server side rendered application, don't we need to worry about traffic there?

Notes: ## Introduction - Web rendering includes steps from user opening a site to full page display - Key steps: DNS lookup, HTTP request, HTML parsing, CSS parsing, JavaScript execution - Different rendering approaches exist due to varied site requirements ## Key Metrics 1. Time to First Byte (TTFB): Time between clicking a link and first content byte loading 2. First Contentful Paint (FCP): Time when any part of page content is rendered 3. Largest Contentful Paint (LCP): Time until largest image/text block is rendered 4. Total Blocking Time (TBT): Measures main thread blocking during page load ## Business Considerations - Types of applications: - B2B (Business-to-Business) - B2C (Business-to-Consumer) - Internal Tools - Profit Centers vs. Cost Centers ## Rendering Patterns ### 1. Server-Side Rendering (SSR) - Types: Dynamic SSR, Static Site Generation (SSG) - Advantages: - Fast time to content - Good SEO - Improved Core Web Vitals - Disadvantages: - Full page reloads - Increased server load - More complex server configuration ### 2. Static Site Generation (SSG) - Generates static HTML files during build time - Advantages: - Fast load times - Reduced server load - Good SEO - Disadvantages: - Limited to static content - Frequent rebuilds for content updates ### 3. Client-Side Rendering (CSR) - Renders content in the browser using JavaScript - Advantages: - Smooth user experience - Easier development and maintenance - Reduced server load - Disadvantages: - Poor SEO (if not mitigated) - Slower initial load - Performance issues on low-power devices ### 4. Hydration - Process of making server-side rendered static HTML interactive - Types: - Full Hydration - Partial/Selective Hydration - Progressive Hydration - Island Architecture - Challenges: - Uncanny Valley effect - "One app for the price of two" problem ### 5. Resumability - Recovers application state without re-executing components on client-side - Implemented in Qwik framework - Solves "one app for the price of two" problem ### 6. Pre-rendering - Creates SEO-friendly single-page applications - Serves different versions for users and web crawlers - Advantages: - Good SEO for SPAs - Smooth single-page experience - Disadvantages: - More complex setup - Higher server load ## Advanced Techniques 1. Code Splitting 2. Preloading 3. Lazy Loading 4. Application Shell Architecture 5. Trimorphic Rendering (combines SSR, CSR, and Service Workers) ## Choosing the Right Approach Consider: - Website vs. Web Application - Static vs. Dynamic content - SEO requirements - Initial loading time importance - UI responsiveness needs - Budget constraints - Offline support requirements Use the decision tree provided in the lecture to guide your choice. ## Use Cases 1. Social Network: SSR with Hydration (Progressive/Island Architecture) 2. Dashboard: Client-Side Rendering with optimization techniques 3. Marketplace (e.g., Amazon): SSR or SSR with Hydration Remember to always consider specific project requirements and constraints when choosing a rendering pattern.

You gave the great explanation of rendering patterns and I am fortunate I found this channel in recommendations

Great video, thank you. Just one small advice, in your next videos speak slower ❤

can you please share the slides that you have used in the video. Thanks for free knowledge.

About to start reactjs and i found the goldmine I guess. as soon as I complete reactjs ill study from you. keep them coming

Is there a way to filter out the breathing noise? It's hurting my ears. :'(

thank you , great video

Your explanation is clear as crystal! Thank you❤

great video

Thank you! Very useful. Important topic and unique content

Dang, This is gold! Going to binge watch all these this weekend!

brother i cannot express my love ♥for watching and gaining so much of knowledge from this YT channel, eagerly wait for your videos tbh. Lots of love and keep bringing more content

Thank you! I've been waiting for it ❤

Thank you so much for this video! I messaged you on linkedin as I have some questions if that's okay!

Супер, спасибо

Спасибо большое! Видосы отличные! Мне кажется делались вместе с ИИ, но получилось отлично. Делай еще. Будет отлично если будешь делиться ссылками на что еще посмотреть/почитать по теме из полезного, спасибо!

Спасибо большое! Видосы отличные! Мне кажется делались вместе с ИИ, но получилось отлично. Делай еще. Будет отлично если будешь делиться ссылками на что еще посмотреть/почитать по теме из полезного, спасибо!

Great work!

please consitent make video like this, you're explanations make me good at it

Great video, but there are problems with p2p. You also need to scan files, but this will be transferred to user machines. In addition, what if user 2 wants to download a file that is now not in the centralized storage, but user 1, but he is not online. Then you will not be able to download the file. In general, many questions arise

would be great if you can share the slides link

Great video, thank you very much. Please tell me what resources you used to prepare the video?

god speed

Hey nice series, i really liked it, is it possible we can get the slides you made. great job thanks.

Keep these coming! Great!

Dude, I've been chasing for a Frontend Architecture channel on youtube for a long time, thanks god I found your channel! Thanks a lot for your content!

I'm planning to build an Admin Dashboard with Micro-Frontend (Nx + Webpack Module Federation)

this channel is a gem. saved my ass

waiting for part 2!

Thank you Dmitiry 🙏

Thank for your teaching. When you release part 2?

It's ironic how the video with "Frontend System Design" in the title starts its substantial part with "We're gonna talk about Architecture, instead!"

Thank you so much

Despite the fact the video is really cool, i cant say that is a good example of the table component for the system design interview. Time wise this kind of explanation and drawings would take at least 2 hours, which is far beyond regular 1 hour format.

Hello, great topic you bring! Can you share what font you're using on the slides? Very clean :) Thanks!