Introduction

[00:00:00]
>> Evgenii Ray: Hello everyone, and welcome to the Frontend System Design Fundamentals Workshop. My name is Evgenii Ray, and I'm your workshop host today. So before we start our workshop, I'd like to quickly introduce myself. So I've been working in the industry for the last decade, and I spent a good chunk of my career working on complex UI apps.

[00:00:23]
So, I was working at the JetBrains for three years, and currently I work as a frontend engineer at Meta. So, when I was building this course, I was thinking that it could be useful to have some fundamental course that would explain how all these libraries and frameworks that we as a UI specialist use every day work.

[00:00:48]
So the idea of this course is to give you this fundamental knowledge that you can apply in everyday job or when you have the job interview. So you know how every library is designed. What are the API used for a certain complex patterns? And before we start, let's understand what's the frontend system design.

[00:01:13]
So if we split the application design into three parts, it's a backend API and the frontend. So to me, the frontend is about API communication, how we communicate with the API and how we manage the data that we get from the server. So it's about how we store this data in a way that we can utilize the device resource efficiently, so we don't overuse the memory of the device and so on.

[00:01:44]
It's also about how we're handling the complex user interactions. So for instance, you need to display thousands of elements on a screen, how will you do that? Having the limited gram or having the small screen. And same applies to the asset management. So the complex apps tends to have multiple chunks that we need to load.

[00:02:08]
So how would we load them efficiently? So our application loads fast and all our web vitals metrics are on the high level. First of all start with the core fundamentals. So this is one of the most important section of the course. Because it will give you the exposure of how browser treats the HTML elements, how staking context is connected to the formatting context, and how everything is connected to the GPU.

[00:02:37]
So we're gonna look at the browser rendering cycle. And also, what are the composition layers and how can we utilize the GPU to optimize the rendering? So, once we finish with core fundamentals, we're gonna look at the DOM API. So it will be kind of a DOM API refresher because the DOM API for us is like a shovel.

[00:02:57]
We need to know how to work with the low level APIs to modify the DOM tree. So once we're done with the DOM, we're gonna look at the Observer API. The Observer API is a very efficient tool to design complex patterns. And we're gonna look using the live-coding exercises.

[00:03:17]
How can we utilize the observer to build such complex patterns. The fourth section will be very code-heavy, so we're gonna take a look at how virtualization works. And we're also going to live-code it from scratch, so you can understand how everything is applied together. So once we finish with our code-heavy part, we'll move to application state design.

[00:03:41]
So we're gonna check how can we design the state in a way that the search operation is efficient, the access operation is also efficient. And how can we utilize the browser storage API to offload the device memory. Then we'll move to network section. So we're gonna look what are the protocols of communication available to us.

[00:04:03]
And we're also gonna take a look what are the ways of talking to server we have on the UI. And I'm going to discuss a very Hollywood topic, which is the REST/GraphQL, and I'll provide my opinion on that. And then we'll finish up with web application performance, we're gonna look at how can we optimize our JavaScript assets, CSS assets, images, and fonts.

[00:04:28]
And the last section is kind of a bonus section, we're going to simulate the interview environment and try to design the 3D like application newsfeed.
>> Student: Before we get started, what would you say the prerequisites of the course are?
>> Student: Things that you should know prior to-
>> Evgenii Ray: I think it's good to know how the browser renders the page, how it reads the HTML, basic networking knowledge also would be good.

[00:04:56]
And some basic JavaScript, so you don't need to be very proficient. And you also need to have the latest Chrome browser, because we're not going to utilize any bundlers and we're just gonna run everything natively.