The Machinery of Frontend

• As a UI developer, you have two main goals:
  • Ensure the intended content is displayed to users.
  • Enable users to interact seamlessly and intuitively with the interface.
• To achieve this, you need to understand what happens inside the browser.
• Below are the key pieces involved in rendering the page you’re viewing.

I. Rendering the Page

• An HTTP request is sent to the server that hosts the web app’s files.
• The browser downloads those files (HTML, CSS, JS, assets).
• The browser parses the HTML to build the DOM.
• The browser parses the CSS to build the CSSOM.
• The layout engine computes element positions and sizes for this browser.
• The render/paint/compositor engine paints layers and composes them.
• The render engine produces the final image for the GPU.
• The GPU displays that image on screen.
• This pipeline can repeat ~60 times per second if content changes/animates.
• HTML is, by nature, added once to the DOM (unless JavaScript mutates it).
• The CSSOM mirrors/complements the DOM structure for styling purposes.

II. Interacting with the DOM

• The HTML file is parsed → a C++ DOM is generated inside the browser engine.
• HTML alone isn’t meant to modify the DOM dynamically after load.
• JavaScript is used to manipulate the DOM at runtime.
• The HTML includes a reference to a JS file that the JS engine loads and executes.
• The global document object gives access to the DOM API (bridge to the C++ DOM).
• Example: const div = document.querySelector('div')
  • Uses document to fetch a DOM node.
  • Returns a JS object representing the real (C++) DOM element.
  • Lets you read/write properties like div.textContent.

III. Handling Input with JavaScript (Example)

<!-- page.html -->
<input/>
<div></div>
<script src="app.js"></script>

// app.js
let content = '';
const input = document.querySelector('input');
const div = document.querySelector('div');

function handleInput() {
  content = input.value;
  div.textContent = content;
}

input.oninput = handleInput;

• page.html loads; the parser handles each line and adds nodes to the C++ DOM.
• Layout and render engines produce the pixels of the webpage.
• The JavaScript engine is triggered and has access to the document object.
• JavaScript provides a call stack and a global execution context.
• We declare a variable content initialized to an empty string.
• The constants input and div are assigned the results of document.querySelector(...).
• Under the hood, querySelector follows the link to the C++ DOM objects.
• It finds the first element matching the selector ('div', 'input', etc.).
• It creates a JS wrapper object with a hidden link to the original C++ element.
• That wrapper is populated with methods/properties to manipulate the element.
• We define a handleInput function.
• We assign handleInput to the input element’s oninput event.
• When a user types “Hello”:
• The oninput event fires for each character and calls handleInput.
• content is updated with input.value.
• div.textContent is updated to reflect content.