Browsers

INFO 253A: Front End Web Architecture

Kay Ashaolu

What is the core?

Features of a Browser

  • Network Access
  • Interpreting the fetched data
  • Possibly fetching and interpreting dependencies like images
  • Rendering HTML with CSS rules
  • Running scripts in the context of the web page

Pinterest.com -> Web page

  • Analyze address bar to determine protocol and server
  • Connect to server, download data and all dependencies
  • Analyze HTML, generate a Document Object Model (DOM)

What is the DOM?

The DOM (Document Object Model) is an interface that represents how your HTML documents are read by the browser. It allows a language (JavaScript) to manipulate, structure, and style your website.

Pinterest.com -> Web page

  • Apply CSS to the DOM
  • Display the DOM
  • Start executing scripting code and re-render the DOM as required
  • Continue executing and interpreting user actions

Separate Browser from Websites?

  • Composability!
  • Improve the features around the website without upgrading the website
  • Original browser did not have Forward or Back buttons
  • Accessibility

Separate Browser from Websites?

  • The trade-off┬áis the layouts need to follow rules, designers must design with multiple audiences in mind

Browsers, Apps, Operating Systems

  • Traditionally browsers were applications running in an OS like Windows
  • Scripting enables browsers to run their own code
  • Complex web pages (e.g. Google Docs, Slack) behave like an application

Browsers, Apps, Operating Systems

  • Browsers could become an OS themselves (e.g. ChromeOS)
  • Frameworks enable using web technologies for native applications (e.g. Electron)
  • The lines between browsers, apps, and operating systems are increasingly blurred

Browsers interpret data as text

  • HTML
  • CSS
  • JavaScript

Browsers interpret data as other media

  • Images
  • Music
  • Video

Browsers, Apps, Operating Systems

HTML

  • HyperText Markup Language
  • HyperText is essentially text with links
  • Provides the content of a page

CSS

  • Cascading Style Sheet
  • Modifies the look and feel of the web page
  • Instructs the destination (browser) how to display the content (HTML)

JavaScript

  • General programming language, but designed with HTML in mind
  • Provides interactivity to web pages
  • Can modify HTML and CSS after a web page has been loaded
  • Some web applications are written only in JavaScript

Overview

Questions?