Introduction to Internet and Web

Introduction to Internet and Web

• The internet functions as the backbone of the web, providing the technical infrastructure necessary for its operation.
• It is a large network of computers capable of communicating with one another.
• The internet began as a US Army-funded research project.

Internet Communication

• Computers are linked to facilitate communication.
• Linking can occur physically with an Ethernet cable, or wirelessly via Wi-Fi and Bluetooth.
• Communication complexity increases with the number of computers involved.

IP Addresses

• IP Addresses serve as unique numeric identifiers for devices connected to a computer network.
• Public IPs are assigned by Internet Service Providers.
• Private IPs are used within local networks, examples include 192.168.1.1 and 10.0.0.1.
• Static IPs remain constant over time.
• Dynamic IPs change periodically, often with each new connection.

IPv4 vs IPv6

• IPv4 is version 4 of the Internet Protocol, using 32-bit addresses and four decimal numbers (e.g., 192.168.1.1), and supports approximately 4.3 billion addresses.
• IPv6 is version 6, uses 128-bit addresses in hexadecimal format with colons (e.g., 2001:db8:ff00:42:8329), and supports trillions of addresses.
• IPv6 was created because IPv4 does not provide enough addresses for the current number of machines.

Network Address Translation (NAT)

• NAT allows multiple devices on a local network to share a single public IP address.
• Within a home network, devices have different private IPs but share the same public IP, which can be found via internet or shell commands.
• NAT replaces a device's private IP with the public IP before forwarding the request when it wants to communicate with an outside website.
• A router tracks requests to send the appropriate response back to the correct device.

Routers

• The router is a special tiny device that computers are connected to in order to ensure the message arrives at the destination.
• The router sends the message and forwards it.
• For Windows, you can check with tracert command, and in Linux you can use traceroute.
• Instead of connecting every computer to each other, every computer connects to the router.
• Routers are networking devices that direct data packets between computer networks.
• When a request is sent, it is sent via packets.
• These packets are addressed to a destination IP, and the router examines them and acts accordingly.
• If within a network, it sends it.
• If outside, it checks the routing table.
• In summary routers:
  • Receives an IP Packet
  • Checks the destination IP
  • Checks the routing table to determine the next hop
  • Forwards the packet
• Examples of dynamic routing are RIP, OSPF and BGP

Networks

• Network of networks occurs when there are hundreds, thousands or billions of computers, as a single router is no longer enough
• Routers can be connected to each other
• To connect the routers together, a modem is needed.
• Modems, or Modulator-Demodulators, turn the information from the network into information which can be manageable by the telephone infrastructure.
• Internet Service Providers (ISPs) are needed to send your network information to another network.
• These are companies with special routers that link together and can access other ISPs routers.
• Messages and information are carried to the destination networks

Finding a computer

• It is important to know who you are sending a message to.
• Every computer linked must have a unique address consisting of an IP Address
• IP Addresses are hard to remember so you can alias IP addresses with a human-readable name called a domain name.
• Domain names include google.com for example.

Internet vs Web

• It is more common to use a domain name to access a webpage on the internet.
• The internet does not equal the web.
• The internet is the the technical infrastructure which allows computers to be connected.
• Some of these are web servers.
• The internet is the infrastructure, the web is the service built on top of the infrastructure.
• Other services include email and IRC
• Intranets are private networks that are restricted to members of an organization to provide a portal for members to securely access shared resources.
• An organization might host web pages for sharing department or team information, shared drives to manage documents, portal for business administrations, wikis, etc.

Clients and Servers

• Computers connected to the internet are called clients and servers
• Clients are web user’s internet-connected devices such as computers, mobile phone etc.
• Servers are computers that store web pages, sites or apps.
• When a client wants to access a webpage, a copy of it is downloaded from the server to the client machine, and displayed in the Browser

Network Connections

• Reaching the destination is not that easy and there are some stops.
• First there needs to be an internet connection, and be online to access the web server.
• TCP/IP is a communication protocol to define how data should travel across the internet.
• DNS or Domain Name System is used when typing an address.
• It asks another place for the real Internet Protocol address for that website otherwise it cannot send HTTP messages
• HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers so they can speak to each other.

Website Access

• The browser goes to a DNS server, and finds the IP address of the server where the website lives.
• The browser sends an HTTP request message to the server, asking it to send a copy of the website.
• These messages are sent across the internet connection using TCP/IP.
• The server acknowledges the request, sending a "200 OK" message. Following this, the server delivers the website's files in small chunks called data packets.
• The browser receives the data packets, assembles them into a complete web page, and displays the page.

Order Elements are Parsed

• HTML files often contain elements referencing CSS styles and <script> elements referencing Javascript scripts.
• It's important to know the order in which those files are parsed by the browser while loading.
• The browser parses the HTML first, and recognizes the link and script element references.
• It sends requests back to the server for any CSS files, sends requests back for any JS files. And then parses the CSS and JS.
• Generates an in-memory DOM tree from the parsed HTML, generating an in-memory CSSOM structure from the parsed CSS, and compiles and executes the parsed Javascript.
• As it generates the DOM tree and CSSOM structure, a visual representation of the page is painted to the screen and presented to the user

Domain Name System (DNS)

• It's hard to remember IP addressed, so the DNS system matches a web address types into the browser, to the real IP address using special servers:
  • Recursive resolver:First and is a DNS recursor which acts as a middleman
    • Either responds with cached data, or sends a request to root nameserver followed by a TLD nameserver and authoritative nameserver.
    • Will cache received information and give the cached return if someone else requests it
  • Root nameservers: there are 13 types and these are know to every recursive resolver
    • Accepts a RR query which include a domain name
    • Responds by directing RR to a TLD nameserver based on the extension such as com, net, org etc
    • Overseen by ICANN which is a non-profit
  • TLD Nameserver: Maintains information for all domain names with the same extension.
    • A.com nameserver contains a directory for every website that ends with com.
    • This responds by pointing to authoritative nameserver
    • This is managed by IANA and breaks the TLD into 2 groups of Generic top-level domains (Not country specific such as com, org, net, etc) and Country code top-level domains (Country specific)
  • Authoritative nameserver: Is the last part of the DNS lookup and servers specific to the domain name.
    • Can be provide RR with the IP address of the server found in DNS A record, and if there is a CNAME record then it will return an alias domain where the DNS lookup must be done again, to get the DNS A record.
    • A record maps a hostname to one or more IP address
    • CNAME record maps a hostname to another hostname

Advantages of the Web

• Multiplatform: can reach from everywhere on your mobile phone, Linux, etc and is accessible on any device with a browser.
• Attractive Market

Modern Web Technologies

• Browsers- Software people use to consume the web such as Firefox, Opera, Chrome, Edge, Safari, etc.
  • These programs can interpret Javascript, HTML and CSS.
• HTTP
  • Hypertext Transfer Protocol which is a messaging protocol that allows web browsers to communicate with web servers.
• HTML, CSS, JS
  • HTML: A markup language consisting of different elements.
  • CSS: Rule-based language to apply styles to HTML.
  • JS: Programming language to add interactivity to websites: dynamic style, fetching updates, complex 3D graphics, etc.

Front-End and Client-Side Development

• Client and server relationship: The client is the browser, while the server is the webserver.
  • A client can also be an application.
• The client sends requests, and the server gives back responses.
• Focuses on presentation (how things look), and involves things like images, content and structure.
• Written by HTML, CSS and JS.

Back-End and Server-Side Development

• Involves how things work
  • What you are going to present in the front-end?
• Business logic, Databases, and Data are on the back-end
• When a user wants to create/read/update/delete something, all these are sent to the back-end.
• Any programming language can be used as back-end:
  • Python (Flask, Django), PHP (Laravel), Java (Spring, Spring Boot), C# (dotnet), Go

Mobile Development

• Mobile development is often viewed as a kind of front-end development
  • Logic is front-end though, because it is for presentation again.
• There are some areas that require additional attention and Languages and frameworks which can be divided depending on the platform:
  • IOS: Swift
  • Android: Kotlin, Java
  • There are also React Native and Flutter, which can be compiled into native apps for both IOS and Android

Javascript

• Javascript is a clientside programming Language built as a client-side programming language
  • It is EcmaScript and has nothing to do with Java.
• When Javascript is used it only works for the person viewing the page and has nothing to do with the server.
• It has lots of libraries and frameworks, previous commonly used framework libraries include: JQuery and Coffeescript with Modern now trending towards React, Vue (some angular)
• Javascript- Typescript
  • A is a strongly typed programming language which compiles to Javascript.
  • Created by Microsoft and VSCode was written in it.

Frontend Two Main Categories

• UI or User Interface:
  • CSS is very important and needs ot be able to create an imaginee
• Javascript (Interactivity & Logic)
  • DOM manipulation
  • Event handling
  • API communication
  • State Management

Backend

• It's important to have a good background in Back-End development
• Any programming language with a web framework can be used in the back-end.
  • Even Javascript (a client-side language) can be used on the backend thanks to NodeJS.
• Backend development involves interactions with file systems and databases which includes Input validation, sanitization, Database interactions, and Security
• All are done on backend.
• Ideally, there should be no business logic in the frontend but it is just responsible for sending/receiving data.