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?