Front-End System Design

Wrapping Up

Evgenii Ray

Evgenii Ray

Staff UI Engineer
Front-End System Design

Check out a free preview of the full Front-End System Design course

The "Wrapping Up" Lesson is part of the full, Front-End System Design course featured in this preview video. Here's what you'd learn in this lesson:

Evgenii wraps up the course by summarizing the topics discussed and sharing a few key takeaways. He also answers a question about best practices for updating the UI from a stream of data.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> Evgenii Ray: Okay, let's summarize. So we went through the core fundamentals section where you got the knowledge of how the browser renders the element. Then when we brush up the knowledge on our DOM API, on a DOM API usage, and also the intersection observer. So we built a virtualization from scratch utilizing this core fundamentals knowledge.

[00:00:23]
So also we went through the application state design, so now you know how you could potentially optimize the way you store the data on the client to minimize the device memory usage and CPU usage. And we also overviewed all network protocols that are available to us as a web developers and how can we fetch the data efficiently.

[00:00:46]
And we also looked at the way how can we optimize the JavaScript assets. So I hope that this will be useful to you and you will be able to apply this knowledge in your real life and daily job.
>> Speaker 2: What is the best practice for updating UI when streaming?

[00:01:06]
>> Evgenii Ray: Updating the UI when?
>> Speaker 2: Streaming updates. So, for instance, probably, just thinking like ChatGPT responses.
>> Evgenii Ray: So first of all, you need to connect to your endpoint that allows us to stream the text data. And the server-sent events is very good way how you can stream the text data.

[00:01:31]
But one thing about the data streaming is when you see that the ChatGPT streams the text, it's actually already received the chunk of data that it wants to render. So the way you can wait until you get the chunk of data that you want to render. And once this chunk is ready, you'll be able to kind of simulate the streaming of the answer.

[00:01:53]
This is how I would implement this.
>> Speaker 2: When the final slide says, minimize run time state, does that mean normalizing it or simplifying the data so there's less to consider over time?
>> Evgenii Ray: It's actually both, so you minimize duplication, so you store less nested objects, and you also store things on the hard drive.

[00:02:19]
So when you offload the data to the hard drive, you reduce the RAM consumption by the device. Yeah, all right, thanks a lot for watching the course, I hope you liked it. And yeah, feel free to subscribe to my YouTube channel and also share the course with your friends.

[00:02:41]
>> [APPLAUSE]
>> Evgenii Ray: Thank you.
>> [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now