English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 35 Lessons (4h 37m) | 924 MB
Focus on the fundamentals of Frontend System Design using Vanilla JavaScript, the DOM, Browser APIs, Design Patterns, and Networking Protocols.
In the modern UI world, there are hundreds of frameworks and methodologies for building large-scale UI apps. However, most of these libraries and frameworks are based on core principles that recur across them. As UI specialists, we need to understand these fundamentals and how to apply them in building large and complex apps. This course is designed to dive one level deeper, going beyond frameworks and libraries. We are going to focus on the fundamentals of Frontend System Design using Vanilla JavaScript, the DOM, and Browser APIs, Design Patterns, and Networking Protocols.
You’ll learn:
- Learn how the Browser Rendering Mechanism works
- Explore how CSS Box Model Spec allows to scale and support different types of layouts
- Understand how Stacking, Formatting and Graphic contexts work together to optimize the performance of the UI
- Learn Core DOM API, which is used behind all popular libraries and frameworks
- Learn how to build popular UX Patterns (Infinite Scroll, Grid, Modal, etc) in a scalable way
- Learn different UI Architecture patterns
- Deep dive into Storing the data in the Browser and the ways to optimize it
- Learn more about HTTP Protocol and different ways to load the data on the UI depending on the use case
- Explore ways to optimize the performance of the application
- Design complex app from scratch, applying the knowledge from the workshop
Table of Contents
1 Introduction
2 Box Model
3 Browser Formatting Context
4 Browser Positioning
5 Reflow
6 Composition Layers
7 Browser Rendering
8 DOM Querying
9 DOM Performance Best Practices
10 DOM Templating Exercise
11 Observer API
12 Infinite Scroll with IntersectionObserver
13 MutationObserver
14 MutationObserver Exercise
15 ResizeObserver
16 ResizeObserver Exercise
17 Virtualization Technique
18 Coding Virtualization from Scratch
19 Loading New Data
20 Creating a Virtualization Pool
21 Recycling Elements
22 Virtualization Pool QA
23 Handle Top Virtualization
24 Application State Design
25 Network Connectivity
26 Server-Sent Events
27 Web Sockets
28 Classic REST GraphQL
29 Performance Optimization
30 JavaScript Bundling Loading
31 CSS Images Rendering
32 Requirements Mock-Up
33 Application State API
34 Optimizing Performance
35 Wrapping Up
Resolve the captcha to access the links!