ASKiIMAN™ REALM 12 / COMPUTING
--:-- · -- --- ----

The Digital Frontier

Web Architecture, Applications & Software Engineering

Central Doctrine

Modern computing becomes visible to humanity through applications. This realm maps the frontier where hardware, networks, and databases converge into digital services. We explore how browsers render interfaces, how servers process logic via APIs, and the rigorous software engineering practices required to build, deploy, and scale systems for millions of users.

BROWSER → FRONT END → API / HTTP → SERVER → BACK END → CI/CD → CLOUD → USER EXPERIENCE

The Internal Chambers

Ontology of Web & Application Architecture

CHAMBER 01

What is the Web?

WWW vs INTERNET
  • The World Wide Web vs. The Internet
  • Web pages, applications, browsers, and servers
  • Hyperlinks, Hypermedia, and Web standards
CHAMBER 03

Client-Server Arch

CLI
SRV
  • Client (Request) ↔ Server (Response)
  • Front end vs. Back end separation
  • Stateless communication paradigms
CHAMBER 04

Three-Tier Architecture

PRESENTATION
APPLICATION
DATA
  • Separation of concerns (UI, Logic, Database)
  • Scalability and maintainability advantages
CHAMBER 05

URLs

https://api.example.com
/users/123?active=true
  • Uniform Resource Locator components
  • Scheme, Domain, Port, Path, Query, Fragment
  • Absolute vs. Relative URLs
CHAMBER 07

Web Browsers

  • Browser and Rendering engines
  • JavaScript execution environment
  • Local storage, cookies, and the security sandbox
CHAMBER 08

How a Page Loads

DNS / HTTP
PARSE HTML
BUILD DOM
RENDER
  • DNS lookup → TCP/TLS Connection → HTTP Request
  • DOM and CSSOM construction
  • Layout, Paint, and Compositing pipeline
CHAMBER 09

HTML

<div>
<h1>TITLE</h1>
</div>
  • HyperText Markup Language structure
  • Elements, Tags, Attributes
  • The structural skeleton of the web
CHAMBER 10

Semantic HTML

HEADER / NAV
MAIN
ASIDE
FOOTER
  • Meaningful document structure
  • Crucial for Accessibility and Screen Readers
  • Improves Search Engine Optimization (SEO)
CHAMBER 12

CSS

.card {
color: #fff;
margin: 10px;
}
  • Cascading Style Sheets (Visual presentation)
  • Selectors, Properties, Inheritance, and Specificity
  • The Box Model (Content, Padding, Border, Margin)
CHAMBER 13

CSS Layout

  • Normal flow vs. Flexbox vs. CSS Grid
  • Positioning (Relative, Absolute, Fixed, Sticky)
  • Responsive design and Media queries
CHAMBER 15

JavaScript

CLICK
onClick()
  • Adding dynamic behavior and logic to the browser
  • Variables, functions, arrays, objects, loops
  • Interacting with Browser APIs
CHAMBER 16

The DOM

body
div
p
  • Document Object Model tree
  • Selecting, creating, and modifying HTML nodes via JS
  • Attaching Event Listeners to user actions
CHAMBER 18

Async Programming

SYNC
ASYNC
  • Non-blocking operations in a single-threaded language
  • Callbacks, Promises, and async/await
  • The Event Loop and Task Queues
CHAMBER 19

Fetch & Web Requests

fetch()
HTTP
  • Making asynchronous network requests from the browser
  • Sending GET/POST requests and handling JSON responses
  • Client-server communication without page reloads
CHAMBER 21

REST APIs

GET (Read)
POST (Create)
PUT (Update)
DELETE (Drop)
  • Representational State Transfer
  • Mapping HTTP methods to CRUD operations
  • Statelessness and resource-oriented URLs
CHAMBER 22

JSON

{
"user": "Al",
"id": 42
}
  • JavaScript Object Notation
  • The universal data format for web APIs
  • Serialization (Object → String) and Deserialization
CHAMBER 24

Sessions & Cookies

B
↔
S
  • Adding state to stateless HTTP
  • Browser storage mechanisms (Cookies, LocalStorage)
  • Server-side session tracking via session identifiers
CHAMBER 26

Front End

  • The User Interface and client-side logic
  • Component-based architecture and State management
  • Client-side vs. Server-side rendering (CSR vs. SSR)
CHAMBER 27

Back End

API
  • Server applications and business logic
  • Authentication, validation, and database access
  • Runtimes: Node.js, Python, Java, Go
CHAMBER 31

Architecture Patterns

MONO
VS
  • Monolithic: Unified, single codebase.
  • Microservices: Distributed, independently deployable services.
  • Serverless and Event-driven architectures.
CHAMBER 32

Software Dev Lifecycle

PLAN → DESIGN
↑ ↓
MAINT ← DEPLOY
  • Requirements → Design → Implementation
  • Testing → Deployment → Maintenance
  • Iterative development and feedback loops
CHAMBER 36

Version Control (Git)

  • Tracking source-code history and changes
  • Repository, Commit, Branch, Merge
  • Safe collaborative development via Pull Requests
CHAMBER 38

Software Testing

UNIT
INTEG
E2E
API
  • Unit: Testing isolated functions.
  • Integration: Testing component interaction.
  • End-to-End (E2E): Simulating full user flows.
  • Regression testing and test coverage.
CHAMBER 42

CI / CD

CODE
→
BUILD/TEST
→
DEPLOY
  • Continuous Integration & Continuous Deployment
  • Automating builds, testing, and releases
  • Ensuring code quality before it reaches production
CHAMBER 44/45

Web Security

  • Authentication vs. Authorization
  • Vulnerabilities: XSS, CSRF, SQL Injection
  • Input validation, output encoding, and secure cookies
CHAMBER 48

Web Performance

  • First Contentful Paint (FCP) & Largest Contentful Paint (LCP)
  • Network latency, bundle sizes, and image optimization
  • Caching, compression, and lazy loading
CHAMBER 51

Responsive Web Design

  • Adapting layouts to different viewports
  • Media queries, fluid layouts, flexible images
  • Mobile-first design philosophy
CHAMBER 60

Containers (Docker)

  • Packaging applications with their dependencies
  • Ensuring environment consistency (Dev vs. Prod)
  • Lighter and faster than full Virtual Machines
CHAMBER 61

Serverless

  • Function as a Service (FaaS)
  • Event-driven execution on managed infrastructure
  • Stateless, auto-scaling, pay-per-execution model
CHAMBER 67

CDN & Edge Delivery

  • Content Delivery Networks
  • Caching static assets at geographic "Edge" locations
  • Drastically reduces latency by serving users locally
FINAL CHAMBER

The Bridge to Security

REALM 12 mapped the open web:
BROWSER → API → SERVER → DB
↓
But every connected system creates RISK.
How do we DEFEND the frontier?
  • We have built applications for millions of users.
  • Next, we explore how to secure identity, data, and access against constant threat.
Proceed to REALM 13 → THE SHIELD