You’re reading the free preview.Unlock every conversation for €2.99
FreeFree previewChapter 4
Chapter 4 · Free preview
Frontend: The User's Window
Where Clicks Become Actions
What you will understand
- Build a web page with HTML, CSS and JavaScript
- Inspect and manipulate the DOM using DevTools
- Explain how the browser renders an HTML document
- Describe the core concepts of React (components, state, props)
- Explain the main differences between React, Vue and Angular
Written by EduVerse for this preview; the slides below are the book’s own words.
Slides from the chapter
Each slide is a passage from the book with the figure or listing it talks about. Swipe, use the arrow keys or the buttons.
Slide 1 of 3
From Bits to Pixels
4.1 · p. 87
Conversation from The Software Realm, Decoded
Chapter 4 · 4.1 From Bits to Pixels · p. 87
Peter
I get that TCP delivers packets. HTTP structures the message. But then what? How do bits become a webpage?
Senior developer
Let me show you what happens between ’response arrives’ and ’you see the page.’
What the book shows with it
Figure from The Software Realm, Decoded
Chapter 4 · 4.1.1 The Complete Rendering Pipeline · pp. 87–88
All in milliseconds!
Explore this figure
Pick one to highlight it and read what the book says about it.
Other labels in the figure (32)
Description
Flow diagram of six steps: 'HTML File' and 'CSS File' (Step 1) are parsed into the 'DOM' and 'CSSOM' (Step 2), which combine into the 'Render Tree' of visible elements only (Step 3). This flows down through 'Layout (Reflow)', 'Paint' and 'Composite' (Steps 4 to 6) to 'Display', visible on screen.
Description written by EduVerse; the figure itself is from the book.
The DOM: Your Live Document
4.4.1 · pp. 95–96
Conversation from The Software Realm, Decoded
Chapter 4 · 4.4.1 The DOM: Your Live Document · pp. 95–96
Peter
When I do textContent = ’new text’, what’s actually changing?
Senior developer
Great question. Your HTML file is static text on disk. When the browser loads it, it builds a live tree structure in memory: the DOM.
The paradigm shift: - HTML file = static blueprint - DOM = dynamic house you can renovate When you change textContent, you’re changing the DOM, not the HTML file.
Peter
So JavaScript manipulates the DOM, not the file?
Senior developer
Exactly. Understanding this is the moment you stop being a beginner.
The Universal Concepts
4.6.4 · p. 102
Conversation from The Software Realm, Decoded
Chapter 4 · 4.6.4 The Universal Concepts · p. 102
Senior developer
Notice how all three examples did the same thing?
Peter
Yeah, they all had a count variable, a button click handler, and automatic UI updates.
Senior developer
That’s the point. All frameworks share core concepts:
What the book shows with it
Figure from The Software Realm, Decoded
Chapter 4 · 4.6.4 The Universal Concepts · p. 102
All three frameworks solve the same four problems: Component, State, Props, and Lifecycle. Only the syntax changes.
Explore this table
Pick one to highlight it and read what the book says about it.
Other cells in the table (21)
Description
Table: 'Quick Overview' comparing React, Angular and Vue on 'Component' (function component, class + decorator @Component, single-file component .vue), 'State' (useState, class properties, data()), 'Props' (function parameters, @Input(), props) and 'Lifecycle' (useEffect, ngOnInit and friends, mounted and friends).
Description written by EduVerse; the figure itself is from the book.
Slide 1 of 3
Try it yourself
A simulation built by EduVerse around this chapter. It runs in your browser; nothing is sent anywhere.
The full chapter
This preview shows 5 of the chapter’s 30 passages. The full chapter has:
- 7 sections
- 18 conversations
- 2 figures and tables
- 5 What They Say boxes
- 7 knowledge-check questions
Sections in this chapter
- 4.1From Bits to Pixels
- 4.2The Core Triad: Structure, Style, and Behavior
- 4.3The Problem: Manual Updates Don't Scale
- 4.4The Browser's Magic: DOM and DevTools
- 4.5Server-Side vs Client-Side Rendering
- 4.6Frameworks: The Three Main Choices
- 4.7Peter's Takeaways