4. Foundational Aspects
This section identifies and defines the foundational aspects of the environment in which front-end web development takes place.
4.1 — World Wide Web (aka, WWW or Web)
The World Wide Web, commonly known as the Web, is a system of interlinked hypertext documents and resources. Accessed via the internet, it utilizes browsers to render web pages, allowing users to view, navigate, and interact with a wealth of information and multimedia. The Web's inception by Tim Berners-Lee in 1989 revolutionized information sharing and communication, laying the groundwork for the modern digital era.
Learn more:
- How the web works on MDN
- The web
4.2 — The Internet
The Internet is a vast network of interconnected computers that spans the globe. It's the infrastructure that enables the World Wide Web and other services like email and file sharing. The Internet operates on a suite of protocols, the most fundamental being the Internet Protocol (IP), which orchestrates the routing of data across this vast network.
Learn more:
- Internet Fundamentals from Frontend Masters
- How does the Internet work? on MDN
- The Internet
4.3 — IP (Internet Protocol) Addresses
IP Addresses serve as unique identifiers for devices on the internet, similar to how a postal address identifies a location in the physical world. They are critical for the accurate routing and delivery of data across the internet. Each device connected to the internet, from computers to smartphones, is assigned an IP address.
There are two main types of IP address standards:
- IPv4 (Internet Protocol version 4): This is the older and most widely used standard. IPv4 addresses are 32 bits in length, allowing for a theoretical maximum of about 4.3 billion unique addresses. They are typically represented in decimal format, divided into four octets (e.g., 192.0.2.1).
- IPv6 (Internet Protocol version 6): With the rapid growth of the internet and the exhaustion of IPv4 addresses, IPv6 was introduced. IPv6 addresses are 128 bits long, greatly expanding the number of available addresses. They are expressed in hexadecimal format, separated by colons (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334). This standard not only addresses the limitation of available addresses but also improves upon various aspects of IP addressing, including simplified processing by routers and enhanced security features.
Both IP address standards are essential in the current landscape of the internet. While IPv4 is still predominant, the transition to IPv6 is gradually taking place as the need for more internet addresses continues to grow, driven by the proliferation of internet-connected devices.
4.4 — Domain Names
Domain names serve as the intuitive, human-friendly identifiers for websites on the internet, translating the technical Internet Protocol (IP) addresses into easily memorable names. Essentially, they are the cornerstone of web navigation, simplifying the process of finding and accessing websites.
For instance, a domain name like 'example.com' is far more recognizable and easier to remember than its numerical IP address counterpart. This user-friendly system allows internet users to locate and visit websites without needing to memorize complex strings of numbers (i.e.. IP Addresses). Each domain name is unique, ensuring that every website has its distinct address on the web.
The structure of domain names is hierarchical, typically consisting of a top-level domain (TLD) such as '.com', '.org', or '.net', and a second-level domain which is chosen by the website owner. The combination of these elements forms a complete domain name that represents a specific IP address.
Domain names not only facilitate ease of access to websites but also play a crucial role in branding and establishing an online identity for businesses and individuals alike. In the digital age, a domain name is more than just an address; it's a vital part of one's online presence and digital branding strategy.
Learn more:
- What is a domain name? on MDN
4.5 — DNS (Domain Name System)
The Domain Name System (DNS) is the internet's equivalent of a phone book. It translates user-friendly domain names (like www.example.com) into IP addresses that computers use. DNS is crucial for the user-friendly navigation of the internet, allowing users to access websites without needing to memorize complex numerical IP addresses.
Learn more:
4.6 — URLs (Uniform Resource Locators)
Uniform Resource Locators (URLs) are the addresses used to access resources on the internet. A URL specifies the location of a resource on a server and the protocol used to access it. It typically includes a protocol (like HTTP or HTTPS), a domain name, and a path to the resource.
Learn more:
- Guide to URLs on MDN
4.7 — Servers and Web Hosting
Servers, the powerhouses of the digital world, are specialized computers designed to process requests and distribute data over the internet and local networks. These robust machines form the backbone of the digital ecosystem, supporting everything from website hosting to the execution of complex applications.
Web hosting, a crucial service in the online sphere, entails the management and provision of server infrastructure alongside reliable internet connectivity. Essential for the uninterrupted operation of websites and online applications, web hosting offers a wide range of solutions tailored to meet diverse operational needs and scales. Whether for a personal blog or a large enterprise website, the array of web hosting options ensures a perfect fit for every unique requirement and goal.
- Shared Hosting: An economical choice where resources on a single server are shared among multiple clients. Best suited for small websites and blogs, it's budget-friendly but offers limited resources and control.
- VPS (Virtual Private Server) Hosting: Strikes a balance between affordability and functionality. Clients share a server but have individual virtual environments, providing enhanced resources and customization possibilities.
- Dedicated Server Hosting: Offers exclusive servers to clients, ensuring maximum resource availability, top-notch performance, and heightened security. Ideal for large businesses and websites with heavy traffic.
- Cloud Hosting: A versatile and scalable solution that utilizes a network of virtual servers in the cloud. It allows for resource scaling to match varying traffic needs, making it perfect for businesses with dynamic traffic patterns.
Selecting the appropriate web hosting solution is influenced by several factors, including business size, budget constraints, traffic levels, and specific technological needs. The continual advancements and diversification in server hosting technology empower businesses of all sizes to effectively establish and enhance their online footprint.
Learn more:
- What is a web server? on MDN
- Everything You Need To Know About Web Hosting
- Full Stack for Front-End Engineers, v3 from Frontend Masters
4.8 — CDN (Content Delivery Network)
A Content Delivery Network (CDN) represents a pivotal advancement in content distribution technologies. It is an extensive network of servers strategically dispersed across various geographical locations. This network collaborates seamlessly to accelerate the delivery of internet content to users worldwide.
By caching content like web pages, images, and video streams on multiple servers located closer to the end-users, CDNs significantly minimize latency. This setup is particularly beneficial for websites with high traffic volumes and online services with a global user base. The proximity of CDN servers to users ensures faster access speeds, enhancing the overall user experience by reducing loading times and improving website performance.
Beyond speed enhancement, CDNs also contribute to load balancing and handling large volumes of traffic, thereby increasing the reliability and availability of websites and web services. They effectively manage traffic spikes and mitigate potential bottlenecks, ensuring consistent content delivery even during peak times.
In today's digital landscape, where speed and reliability are paramount, the use of CDNs has become an integral part of web infrastructure for businesses seeking to optimize their online presence and provide a superior user experience.
Learn more:
4.9 — HTTP/HTTPS (Hypertext Transfer Protocol/Secure)
HTTP (HyperText Transfer Protocol) and HTTPS (HTTP Secure) are foundational protocols used for the transfer of information on the internet. HTTP forms the basis of data communication on the World Wide Web, whereas HTTPS adds a layer of security to this communication.
Key Aspects of HTTP and HTTPS:
- Basic Function: HTTP is designed to enable communication between web browsers and servers. It follows a request-response structure where the browser requests data, and the server responds with the requested information.
- Security with HTTPS: HTTPS is essentially HTTP with encryption. It uses SSL/TLS protocols to encrypt the data transferred between the browser and the server, enhancing security and protecting sensitive information from interception or tampering.
- Port Numbers: By default, HTTP uses port 80 and HTTPS uses port 443. These ports are used by web servers to listen for incoming connections from web clients.
- URL Structure: In URLs, HTTP is indicated by 'http://' while HTTPS is indicated by 'https://'. This small difference in the URL signifies whether the connection to the website is secured with encryption or not.
Differences and Usage:
- Data Security: The most significant difference is security. HTTPS provides a secure channel, especially important for websites handling sensitive data like banking, shopping, or personal information.
- SEO and Trust: Search engines like Google give preference to HTTPS websites, considering them more secure. Also, web browsers often display security warnings for HTTP sites, affecting user trust.
- Certificate Requirements: To implement HTTPS, a website must obtain an SSL/TLS certificate from a recognized Certificate Authority (CA). This certificate is crucial for establishing a trusted and encrypted connection.
- Performance: While HTTPS used to be slower than HTTP due to the encryption process, advancements in technology have significantly reduced this performance gap.
Understanding the differences between HTTP and HTTPS is crucial for web developers and users alike. The choice between them can significantly impact website security, user trust, and search engine ranking.
Learn more:
Specifications:
References:
- HTTP response status codes on MDN
4.10 — Web Browsers
Web browsers are sophisticated software applications that play a crucial role in accessing and interacting with the World Wide Web. They serve as the interface between users and web content, rendering web pages and providing a seamless user experience. Here's a deeper look into their functionality and features:
Core Functions of Web Browsers:
- Rendering Web Content: Browsers interpret and display content written in HTML, CSS, and JavaScript. They process HTML for structure, CSS for presentation, and JavaScript for interactivity, converting them into the visual and interactive web pages.
- Request and Response Cycle: When a user requests a webpage, the browser sends this request to the server where the page is hosted. The server responds with the necessary files (HTML, CSS, JavaScript, images, etc.), which the browser then processes to render the page.
- Executing JavaScript: Modern browsers come with JavaScript engines that execute JavaScript code, enabling dynamic interactions on web pages, such as form validations, animations, and asynchronous data fetching.
How Browsers Work Behind the Scenes:
- Parsing: Browsers parse HTML, CSS, and JavaScript files to understand the structure, style, and behavior of the webpage.
- Rendering Engine: Each browser has a rendering engine that translates web content into what users see on their screen. This includes layout calculations, style computations, and painting the final visual output.
- Optimization: Modern browsers optimize performance through techniques like caching (storing copies of frequently accessed resources) and lazy loading (loading non-critical resources only when needed).
The Role of Browsers in Web Development:
- Cross-browser Compatibility: Developers must ensure that websites function correctly across different browsers, each with its quirks and rendering behaviors.
- Accessibility: They provide features that assist in making web content accessible to all users, including those with disabilities.
Learn more:
- Populating the page: how browsers work on MDN
- How browsers work on web.dev
Tools:
4.11 — JavaScript Engines
JavaScript engines, sometimes referred to as "JavaScript Virtual Machines" are specialized software components designed to process, compile, and execute JavaScript code. JavaScript, being a high-level, interpreted scripting language, requires an engine to convert it into executable code that a computer can understand. These engines are not just a part of web browsers but are also used in other contexts, like servers (Node.js uses the V8 engine).
Key Functions of JavaScript Engines:
- Parsing: The engine reads the raw JavaScript code, breaking it down into elements it can understand (tokens) and constructing a structure (Abstract Syntax Tree - AST) that represents the program's syntactic structure.
- Compilation: Modern JavaScript engines use a technique called Just-In-Time (JIT) compilation. This process involves two stages in many engines:
- Baseline Compilation: Converts JavaScript into a simpler intermediate code quickly.
- Optimizing Compilation: Further compiles the code to a more optimized machine code, improving performance. The engine might de-optimize the code if certain assumptions are no longer valid.
- Execution: The compiled code is executed by the computer's processor.
- Optimization: During execution, the engine collects data to optimize the code's performance in real-time, often recompiling it for greater efficiency.
Major JavaScript Engines:
- V8 (Google Chrome, Node.js, Microsoft Edge): Known for its speed and efficiency, V8 compiles JavaScript directly to native machine code before executing it.
- SpiderMonkey (Mozilla Firefox): The first-ever JavaScript engine, it has evolved significantly, focusing on performance and scalability.
- JavaScriptCore (Safari): Also known as Nitro, it emphasizes efficient execution.
Learn more:
- JavaScript engine
- Bare Metal JavaScript: The JavaScript Virtual Machine from Frontend Masters