Software Engineering Module 2: Programming for the Web

Data Packet

Data is broken down into smaller segments to transmit independently on different routes then reassemble

Components of a Data Packet

Header, Payload, Trailer

Data Packet Header

Contains crucial information required for data transmission such as Sender's IP Address, Receiver's IP Address, Protocol, Packet Number

Data Packet Payload

The actual data being transmitted

Data Packet Trailer

Marks the end of the packet and includes Error Detection Data to help verify integrity of data, and End of Packet Signal

Packet-Switching Network

Packets can travel different routes to the destination allowing multiple devices to send data simultaneously. Protocols reassemble them in the correct order.

Internet Protocol Version 4 (IPv4)

Most widely used IP version consisting of 8-bit segments separated by periods ranging from 0 to 255

Internet Protocol Version 6 (IPv6)

Response to the limitations of IPv4, with much larger, 128-bit address space

Hyper Text Transfer Protocol (HTTP)

Protocol responsible for transmitting web pages and other resources across the web. Each request is independent and stateless making it fast but not secure (data is transmitted in plain text)

Hyper Text Transfer Protocol Secure (HTTPS)

Secure version of HTTP using encryption methods such as SSL or TLS. All data transmitted is encrypted which makes is a standard for securing websites

Transmission Control Protocol (TCP)

Connection oriented protocol which establishes connection before data transfer. It breaks data into packets, ensures they are received, and reassembles

Internet Protocol (IP)

Responsible for addressing packets and routing them across different networks

Domain Name System (DNS)

Translates domain names into IP Addresses

File Transfer Protocol (FTP)

Protocol used to transfer files between computers over a network. It's not secure (plain text) but is efficient and operates in active or passive mode

Secure File Transfer Protocol (SFTP)

Extension of SSH securing file transfers by encrypting the commands and data.

Secure Sockets Layer (SSL)

Cryptographic protocol securing communications by encrypting the data transmitted. Largely depreciated in favour of TLS

Transport Layer Security (TLS)

Successor to SSL providing improved encryption, security, and performance

Simple Mail Transfer Protocol (SMTP)

Used to send email between servers or from client to server. Used in conjunction with mail retrieval protocols like IMAP or POP3

Post Office Protocol v3 (POP3)

Used to retrieve emails from server to local device. Often emails are deleted from server after retrieval making this suitable for single device users

Internet Message Access Protocol (IMAP)

Allows users to access emails from multiple devices storing messages in server until explicit deletion. Syncs emails across device

SSL Certificate Components

Certificate Authority (CA), Public and Private Keys, Digital Certificate

SSL Certificate Process

1. Handshake (browser connects to server, server sends SSL certificate)

2. Certificate Verification

3. Session Key Generation

4. Secure Communication

Symmetric Encryption

Single key is used to encrypt and decrypt

Asymmetric Encryption

Uses public key for encryption and private key for decryption or vice versa

Authentication

Confirms the identity of a user or system commonly with PINs, Passwords, Biometrics, Tokens, or Multi-Factor Authentication (MFA)

Authorisation

Determines what resources or actions an authenticated user can access commonly using Role-Based Access Control (RBAC) or Attribute-Based Access Control (ABAC)

Big Data

Extremely large and complex datasets that cannot be managed or processed using traditional data processing tools

Six Vs of Big Data

Volume, Variety, Velocity, Veracity, Value, Variability

Data Mining

The process of discovering patterns, correlations, and insights from large datasets

Web Accessibility Initiative (WAI)

Develops strategies, guidelines, and resources to make the web accessible to people with disabilities

Client-Side (Front-End) Frameworks/Libraries

JavaScript: React, Angular, Vue.js

CSS: Bootstrap, Tailwind CSS

Server-Side (Back-End) Frameworks/Libraries

Express.js (Node.js), Django and Flask (Python), Spring Boot (Java), Ruby on Rails (Ruby), Laravel (PHP)

SQL (Structured Query Language)

Relational databases that use structured tables with predefined schemas

Developer Tools

Elements Panel, Console Panel, Network Panel, Performance Panel, Application Panel

Network Panel

Tracks all network requests for monitoring performance, size of assets, and debugging AJAX requests

Cross-Browser Compatibility Considerations

CSS Layout Differences, JavaScript API Support, HTML Element Rendering

Performance Optimisation Techniques

Page Load Time, Largest Contentful Paint (LCP), Time To First Byte (TTFB)

CSS Maintenance Tools

Preprocessors, PostCSS, CSS-in-JS Libraries, Stylelint, Atomic CSS and Utility-First Frameworks, CSS Architecture Methodologies

CSS Preprocessors

Add functionality like variables, nesting, and mixins (Sass, LESS)

PostCSS

Tool for transforming CSS with JavaScript plugins

Why Use Version Control?

Collaboration, Change Tracking, Backup and Recovery, Branching and Merging

Version Control in Web Application Development

Project Initialisation, Collaboration and Code Reviews, Continuous Integration and Deployment (CI/CD), Managing Releases

JavaScript Frameworks

Reusable UI components, state management, hooks, e.g. React.js, Vue.js, Svelete

Full-Stack Frontend Frameworks

Includes UI rendering, extending this to include file-based routing and server-side rendering e.g. Next.js, Angular

Static Site Generators

Generates pre-rendered HTML pages for fast loading and optimisation e.g. Gatsby, Hugo, Flask

How Web Frameworks Changed Development

Prebuilt Functions & Components, Faster Development, Scalability & Maintainability, Huge Community Support

Template Engines

Allow developers to reuse HTML components across pages, avoiding duplication of HTML

Server-Side Template Engines

Generates HTML on the server before sending it to the browser for display e.g. Jinja2, EJS

Client-Side Template Engines

Dynamically generate and update HTML without server interaction e.g. Mustache, Handlebars

How Template Engines Changed Development

Reusable Components, Separation of Concerns, Scalability & Maintainability, Server-Side Rendering (SSR) Support

UI Frameworks

Provide a comprehensive set of components that are pre-styled and responsive e.g. Bootstrap, Foundation, Bulma

Utility-First CSS Frameworks

Providing utility for common styling needs e.g. Tailwind CSS

Impact of CSS Classes

Speeds Up Development, Ensures Consistent Design, Responsive Design, Customisability

Open-Source in Web Development

Accessibility and Community Support, Flexibility and Customisation, Accelerated Development and Innovation

Key Areas of Open-Source

Frameworks and Libraries, Content Management Systems, Development Tools, Web Servers and Databases

Open Source Initiative (OSI)

Non-Profit founded in 1988 that promotes and protects open-source software, maintains the Open Source Definition

Impact of Open Source on Web Development

Standardisation and Best Practices, Democratisation of Technology, Driving Innovation and New Technologies

Front-End Optimisation

Minification and Compression, Image Optimisation, JavaScript and CSS Optimisation, Reducing HTTP Requests, Caching Strategies

Minification

Stripping unnecessary characters such as spaces, comments, and line breaks from CSS, JS, and HTML files

Backend Optimisation

Database Optimisation, Server-Side Caching, Load Balancing, API Optimisation

Web Content Management System (CMS)

Software application that simplifies web development by allowing users to manage content without the need for extensive coding knowledge

Key Features of a CMS

Content Creation and Editing, Content Organisation, Publishing and Scheduling, User Management, Themes and Templates, Plugins and Extensions

Components of Back-End

Server, Database, APIs, Security

Backend Contribution to Web Application

Performance and Speed, Scalability, Data Management and Integrity, Security , Reliability and Availability, API and Third-Party Integration

Role of Webserver Software

Request Handling, Static Content Delivery, Proxying to Application Server

Popular Webservers

Apache, Nginx, IIS (Internet Information Services)

Web Framework

Provides structure and reusable components that simplify development

Object-Relational Mapping (ORM)

Map database objects to tables

Data Manipulation (Objects)

Allow developers to interact with data as if they were working with in-memory objects in code

Types of Libraries

Utility Libraries, Database Libraries, Authentication and Authorisation, Form Processing Libraries

Relational Databases (SQL)

Data is stored in tables rows and columns (highly structured)

Non-Relational Databases (NoSQL)

Designed for unstructured or semi-structured data, allowing for data in formats such as JSON or key-value pairs

Interactions Between Framework and Database

Database Queries, Connection Management, Query Optimisation

Shell Script

Program written for the command-line interface (CLI) to automate tasks by executing a series of commands

Bash Commands for Creating and Managing Directories

mkdir: create new directory
rmdir: remove empty directory
cd: change current directory

Bash Commands for Creating and Managing Files

touch: create empty file
rm: remove file
cp: copy file or directory

Bash Commands for Searching for Text in Files

grep: search for specific patterns or text in file
cat: output content of file

Hash Bang

Special sequence of characters at the beginning of script (#!/) followed by the path to the interpreter

Shell Scripts in Web Development

Automating Server Management, Handling Log Files and Data, Efficient File and Directory Management, Streamlining Development Processes, Customising Web Application Behaviour

Key Characteristics of SQL

Declarative Language, Relational Databases, Standardised Language, SQL Operations

SQL Operations

Data Retrieval (SELECT)

Data Manipulation (INSERT, UPDATE, DELETE)

Data Definition (CREATE TABLE, ALTER TABLE)

Data Control (GRANT, REVOKE)

SELECT (SQL)

Retrieve specific data from a table

FROM (SQL)

Used in conjunction with WHERE to join tables

WHERE (SQL)

Specify conditions for what is included in the result of a query

ORDER BY (SQL)

Sort the results of a query

GROUP BY (SQL)

Group rows that have the same value in specified columns

Advantages of ORM

Increased Productivity, Database-Agnostic, Less Boilerplate, Object-Oriented Approach

Disadvantages of ORM

Performance Overhead, Less Fine-Grained, Learning Curve

Collaborative Work Practises

Clear Communication, Efficient Integration, Rapid Prototyping, Shared Responsibility, Problem Solving

Efficient Integration Best Practices

Collaborate early in defining API endpoints, data formats, and setting up testing environments

Problem Solving Best Practices

Conduct joint debugging sessions where all developers analyse issues together

PWA Key Features

Progressive, Responsive, Offline Capabilities, App-Like Feel, Installable, Secure

Components of a PWA

Caching, Service Workers, Web Manifest, Responsive Design

Caching Steps

1. First Visit

2. Saving Files

3. Reusing Files

Service Workers

Help configure web app and manage offline capabilities. They Run Separately, and are Event-Driven

Web Manifest

The manifest.json file managing App Appearance, Behaviour, and Navigation

Responsive Design

Flexible Layouts, Media Queries, Viewport

UI/UX Principles

Fonts, Colour, Audio and Video, Navigation

Font Considerations

Readability, Web-Safe Fonts, Consistency

Colour Considerations

Contrast, Branding and Visual Identity, Colour Psychology, Accessibility