Media is too big
VIEW IN TELEGRAM
21. Distributed Pros & Cons
Erik highlights the benefits of independent development and deployment in service-oriented architecture. He also discusses the challenges and complexities that come with distributed systems, such as the need for developers to consider how other systems work and the difficulties in development, testing, and data management.
#lesson
Erik highlights the benefits of independent development and deployment in service-oriented architecture. He also discusses the challenges and complexities that come with distributed systems, such as the need for developers to consider how other systems work and the difficulties in development, testing, and data management.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Distributed Use Cases
Erik provides use cases for distributed service-oriented architecture such as e-commerce platforms, social media platforms, streaming services, online gaming platforms, and large-scale IoT systems. He explains how decoupling systems and dividing functionalities into separate microservices can improve performance, scalability, and user experience in these different use cases.
#lesson
Erik provides use cases for distributed service-oriented architecture such as e-commerce platforms, social media platforms, streaming services, online gaming platforms, and large-scale IoT systems. He explains how decoupling systems and dividing functionalities into separate microservices can improve performance, scalability, and user experience in these different use cases.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
23. Serverless Architectures
Erik introduces serverless architecture and explains that serverless doesn't just mean functions as a service (FaaS), but also includes backend as a service (BaaS) platforms like Firebase and Superbase. He highlights that serverless involves shifting the responsibility of infrastructure management to the cloud provider, letting developers concentrate on running their code without worrying about scalability or uptime.
#lesson
Erik introduces serverless architecture and explains that serverless doesn't just mean functions as a service (FaaS), but also includes backend as a service (BaaS) platforms like Firebase and Superbase. He highlights that serverless involves shifting the responsibility of infrastructure management to the cloud provider, letting developers concentrate on running their code without worrying about scalability or uptime.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Serverless, API Gateways, & Lambdas
Erik discusses hosting a serverless front-end in an S3 bucket, eliminating the need for constantly running processes and saving costs. He also discusses the use of an API gateway to connect serverless functions and the scalability and cost-effectiveness of serverless databases like DynamoDB.
#lesson
Erik discusses hosting a serverless front-end in an S3 bucket, eliminating the need for constantly running processes and saving costs. He also discusses the use of an API gateway to connect serverless functions and the scalability and cost-effectiveness of serverless databases like DynamoDB.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Serverless Pros & Cons
Erik discusses the pros and cons of serverless architecture. He highlights the benefits of not having to manage servers, cost savings based on usage, and automated scaling capabilities. He also mentions the potential drawbacks, such as increased costs for long-term applications, difficulties in testing due to reliance on the internet, and troubleshooting and debugging complexities when relying on third-party services.
#lesson
Erik discusses the pros and cons of serverless architecture. He highlights the benefits of not having to manage servers, cost savings based on usage, and automated scaling capabilities. He also mentions the potential drawbacks, such as increased costs for long-term applications, difficulties in testing due to reliance on the internet, and troubleshooting and debugging complexities when relying on third-party services.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
26. Serverless Use Cases
Erik provides various use cases for serverless computing including real-time file processing, ETL (Extract, Transform, Load) processes, and serving static websites. He emphasizes the cost-effectiveness and ease of management that serverless offers for these use cases.
#lesson
Erik provides various use cases for serverless computing including real-time file processing, ETL (Extract, Transform, Load) processes, and serving static websites. He emphasizes the cost-effectiveness and ease of management that serverless offers for these use cases.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Evolution of Backend System Architectures
Erik discusses the evolution of backend system architectures, starting with a monolith, splitting the monolith into services, and finally, serverless architecture.
#lesson
Erik discusses the evolution of backend system architectures, starting with a monolith, splitting the monolith into services, and finally, serverless architecture.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Amazon & Netflix Backend Systems
Erik discusses how Amazon utilizes a microservices architecture and how they built their own infrastructure and software to solve instead of leaning on another provider. He also discusses how Netflix employs a hybrid of serverless and microservice architectures and how they have designed their architecture to solve specific problems within the company.
#lesson
Erik discusses how Amazon utilizes a microservices architecture and how they built their own infrastructure and software to solve instead of leaning on another provider. He also discusses how Netflix employs a hybrid of serverless and microservice architectures and how they have designed their architecture to solve specific problems within the company.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Google & Uber Backend Systems
Erik explains how Google's search engine architecture has evolved over time, starting with a monolithic architecture and eventually transitioning to microservices. He also highlights how Uber expanded its services by transitioning from a monolithic to a microservice architecture, allowing them to scale and customize their services for different markets.
#lesson
Erik explains how Google's search engine architecture has evolved over time, starting with a monolithic architecture and eventually transitioning to microservices. He also highlights how Uber expanded its services by transitioning from a monolithic to a microservice architecture, allowing them to scale and customize their services for different markets.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Erik wraps up the course by discussing the importance of seeking out blogs and resources from reputable sources to expand your understanding and exposure to new ideas and backend architectures. He also highlights the main conclusions to take away from this course, including systematic planning, flexibility and scalability, and continuous learning.
#lesson
Erik wraps up the course by discussing the importance of seeking out blogs and resources from reputable sources to expand your understanding and exposure to new ideas and backend architectures. He also highlights the main conclusions to take away from this course, including systematic planning, flexibility and scalability, and continuous learning.
#lesson
Title: Front-End System Design
Description: Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
Link: https://frontendmasters.com/courses/frontend-system-design/
Time: 4 hours, 37 minutes
Lessons: 35 / 35
Tags: #course #frontendmasters #720p
Description: Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
Link: https://frontendmasters.com/courses/frontend-system-design/
Time: 4 hours, 37 minutes
Lessons: 35 / 35
Tags: #course #frontendmasters #720p
Frontendmasters
Front-End System Design: Advanced UI, Performance & Architecture Techniques to Ace Interviews
Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Evgenii Ray begins the course with an overview of front-end systems design, which includes API communication, UI data management, user interface interactions, and asset management. The course will dive into these areas and conclude with a simulated systems design interview exercise.
- https://github.com/EvgeniiRay/fundamentals-of-frontend-system-design
-
- https://static.frontendmasters.com/resources/2024-05-29-systems-design/frontend-system-design-fundamentals.pdf
#lesson
Evgenii Ray begins the course with an overview of front-end systems design, which includes API communication, UI data management, user interface interactions, and asset management. The course will dive into these areas and conclude with a simulated systems design interview exercise.
- https://github.com/EvgeniiRay/fundamentals-of-frontend-system-design
-
- https://static.frontendmasters.com/resources/2024-05-29-systems-design/frontend-system-design-fundamentals.pdf
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
2. Box Model
Evgenii reviews the box model that every DOM element follows. Based on the box-sizing rule, an element's border and padding affect its measured content width. Inline elements do not respond to width and height properties. Block elements have an intrinsic height and default to 100% of the parent container width.
#lesson
Evgenii reviews the box model that every DOM element follows. Based on the box-sizing rule, an element's border and padding affect its measured content width. Inline elements do not respond to width and height properties. Block elements have an intrinsic height and default to 100% of the parent container width.
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
3. Browser Formatting Context
Evgenii introduces the concept of a formatting context within a container. Elements within a context are shielded from the rules of external contexts, and new rulesets can be added by creating a new context. For example, setting a container's display property to flex or grid.
#lesson
Evgenii introduces the concept of a formatting context within a container. Elements within a context are shielded from the rules of external contexts, and new rulesets can be added by creating a new context. For example, setting a container's display property to flex or grid.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Browser Positioning
Evgenii explains that the position CSS property allows elements to be removed from the "normal flow" of the page. The static property is the default and maintains the normal flow position. The relative property maintains the normal flow position. However, the final position is determined based on the values of the top, right, bottom, and left offsets. Other properties like absolute, fixed, and XXX completely remove the element from the normal flow, and the final position is based on the containing block.
#lesson
Evgenii explains that the position CSS property allows elements to be removed from the "normal flow" of the page. The static property is the default and maintains the normal flow position. The relative property maintains the normal flow position. However, the final position is determined based on the values of the top, right, bottom, and left offsets. Other properties like absolute, fixed, and XXX completely remove the element from the normal flow, and the final position is based on the containing block.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Reflow
Evgenii demonstrates the rendering pipeline as reflow occurs on the webpage. After the initial DOM and CSSOM subtrees are built, reflow will work through style, layout, paint, and composite phases. The pipeline required to paint the screen will rely either on the CPU or GPU, depending on the CSS properties used. GPU-based rendering will perform better than CPU-based rendering.
#lesson
Evgenii demonstrates the rendering pipeline as reflow occurs on the webpage. After the initial DOM and CSSOM subtrees are built, reflow will work through style, layout, paint, and composite phases. The pipeline required to paint the screen will rely either on the CPU or GPU, depending on the CSS properties used. GPU-based rendering will perform better than CPU-based rendering.
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
6. Composition Layers
Evgenii explains the difference between render and graphic layers. A graphic layer is constructed when a render layer has 3D or perspective transform CSS properties. Graphic layers are also responsible for video, canvas, opacity animations, CSS filters, and z-index compositing. Graphic layers can drastically increase a web page's memory but perform better since they rely on the GPU.
#lesson
Evgenii explains the difference between render and graphic layers. A graphic layer is constructed when a render layer has 3D or perspective transform CSS properties. Graphic layers are also responsible for video, canvas, opacity animations, CSS filters, and z-index compositing. Graphic layers can drastically increase a web page's memory but perform better since they rely on the GPU.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
7. Browser Rendering
Evgenii revisits the browser rendering exercise and walks through building all formatting contexts, detecting elements outside normal flow, building a stacking context, and completing the DOM, RenderObject, RenderLayer, and GraphicLayer trees.
#lesson
Evgenii revisits the browser rendering exercise and walks through building all formatting contexts, detecting elements outside normal flow, building a stacking context, and completing the DOM, RenderObject, RenderLayer, and GraphicLayer trees.
#lesson
Media is too big
VIEW IN TELEGRAM
8. DOM & Querying
Evgenii reviews the global objects and class hierarchy in the DOM API. Query methods are also discussed, and their time complexity, memory cost, and algorithms are compared. In general, getElementById provides the best space and time complexity performance. The querySelector and querySelectorAll have slightly worse performance, but due to caching and browser optimizations, the performance will improve with repetitive runs.
#lesson
Evgenii reviews the global objects and class hierarchy in the DOM API. Query methods are also discussed, and their time complexity, memory cost, and algorithms are compared. In general, getElementById provides the best space and time complexity performance. The querySelector and querySelectorAll have slightly worse performance, but due to caching and browser optimizations, the performance will improve with repetitive runs.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
9. DOM Performance Best Practices
Evgenii shares some performance best practices when querying DOM elements. Simplifying query selectors or using IDs for core containers can provide easy performance gains. This lesson also discusses the performance costs of adding and removing elements.
#lesson
Evgenii shares some performance best practices when querying DOM elements. Simplifying query selectors or using IDs for core containers can provide easy performance gains. This lesson also discusses the performance costs of adding and removing elements.
#lesson
Media is too big
VIEW IN TELEGRAM
10. DOM Templating Exercise
Evgenii live codes an exercise that implements a card template. The HTML template element creates a fragment that can be manipulated without causing a reflow. Once the template is ready, it's added to the DOM using the appendChild method.
#lesson
Evgenii live codes an exercise that implements a card template. The HTML template element creates a fragment that can be manipulated without causing a reflow. Once the template is ready, it's added to the DOM using the appendChild method.
#lesson