Web_Development

#

​ This post is an introduction to web development—meant to build a modern, reasonably complete mental model. Frankly, I have finished my sophomore year and still lack a deep grasp of web development; my experience is mostly some frontend and Java. Starting from here, I want to explore web development properly, hoping it becomes a compass for my own path as a developer.

​ What follows is general knowledge only—personal notes.

​ “What is it,” not “how to use it.”

Part 1: Enlightenment and the Monolith Age

#

1. First Look at B/S Software and Web Development

#

For a gentle start on frontend, freecodecamp is solid (though frontend itself is complex).

Systematic study is still required.

C/S B/S —› general case: the browser (Browser/Server)

HTML —› basic page content and structure CSS (Cascading Style Sheets) selects elements in HTML for styling Javascript —› a real programming language; site interaction (user ↔ browser, browser ↔ server)

Early jQuery

2. First Look at Frontend–Backend Interaction

#

How are things like history and login verification handled?

How do users add friends and send messages to each other?

Backend: mainly about data processing

#

1. Servers

2. Languages: Java, PHP, Golang, Ruby, Rust, Python, Node.js

3. Frameworks: Spring, Spring Boot, Flask, Gin, Beego, Rails

4. Databases: CRUD — MySQL, MongoDB, Redis —› non-relational, mainly for caching

5. Linux, possibly including ops-related topics

6. API: Application Programming Interface

3. Monolithic Applications

#

Frontend and backend live in one codebase; every change rebuilds the whole project.

1. The chaotic period:

2005: blogs, forums, early e-commerce

#

Monolithic Architecture (Monolithic Architecture)

All features of a piece of software live in one unit. Frontend and backend are not separated —› a PHP project, for example.

Stack: the LAMP/WAMP combo.

L/W: Linux server or Windows server.

A: Apache, the mainstream web server. Receives HTTP requests from the browser and forwards them to backend programs (HTTP Server).

P: PHP, invoked by Apache—or Python (not ideal for web at the time) / Perl.

Workflow:

1. The browser sends a request to the server: GET / Products?id=123

2. Apache Server receives it, sees it is a PHP request, product 123.

3. The PHP script runs, mixes data with a pre-written HTML template (static), and dynamically renders a full page (different users see different data—customized, like a Bilibili personal homepage).

4. That text returns to Apache, then to the user’s browser.

5. The browser renders it. JS adds animations and similar effects.

PHP: scripts written inside HTML (frontend and backend mixed). JSP is similar—direct interaction with the database, and so on.

As features grow complex and modular, PHP and JSP have largely been phased out.

4. The Path of Frontend–Backend Separation and Technical Evolution

#

2004–2010: the budding of separation

#

​ Ajax: a technique implemented with JS. Asynchronous: update or maintain data locally without requesting the whole page.

​ XML: a data format.

​ Today we use JSON: JavaScript Object Notation.

2010–2014: standard frontend–backend separation

#

SPA: Single-Page Application.

Web API standards: conventions for communication between frontend and backend.

RESTful API:

​ API: application programming interface

​ 1. What data to request 2. In what format 3. What format comes back

REST: REpresentational State Transfer

Everything is a resource; each resource has a unique identifier—the URL.

That “link” is a URL.

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

Representation layer:

JSON XML HTML — the forms transferred between Client and Server

State transfer:

The process by which resources change—e.g. a user initiates a delete.

login.jsp: already obsolete.

Computer networks: how Cookie works. For every user, create an object.

Why not use session (it can hurt efficiency).

Load balancing: share traffic.

RESTful API — stateless

Six constraints:

1. Client and server must be independent.

2. Stateless — the server must not store any session — why we study Spring

​ Every request must carry all information the server needs.

3. Cacheable

4. Uniform interface

​ Resource identifiers; JSON; operate on resources via the representation layer

​ Self-describing messages; HATEOAS; hypermedia as the engine of application state

5. Layered system

​ The client does not know exactly whom it is talking to.

6. Code on demand

5. HTTP, RESTful API, Token, GraphQL

#

Introducing the related concepts.

HTTP Verbs: the purpose of an action. GET, POST, …

After writing a server in assembly, these ideas land much more deeply.

What action you take on an address: fetch information or submit a form.

CRUD: originally mapped to HTTP verbs.

GET: fetch information.

POST: create. Login, register.

PUT: update / replace.

DEL: delete.

PATCH: partial update.

In practice, many companies only use POST and GET. Prefer soft delete over physical delete—mark a status.

Cookie: insecure. Avoid Session and Cookie for holding state.

Man-in-the-middle attacks; traffic hijacking.

Modern approach: Token. JWT (JSON Web Token) token format.

Authorization protocol

OAuth 2.0

1. Access token JWT

2. Refresh token

Authentication protocol

OpenID Connect OIDC

Identity protocol

ID TOKEN

2015 to present

#

Birth of React, Vue.js; Angular

Node.js

GraphQL: an architectural style. What problem does it solve?

Popular technology.

Quite interesting.

/users/123 returns too much data—over-fetching

/users/123/posts?limit=5 multiple requests

Precisely specify what data you need—no over-fetching.

One request can fetch multiple pieces of data.

For example, the query:

{
  me {
    name
  }
}

Could produce the following JSON result:

{
  "data": {
    "me": {
      "name": "Luke Skywalker"
    }
  }
}

Frontend engineering.

Four pillars:

1. Package managers (many libraries): NPM, Yarn to install third-party libs

2. Build tools: webpack — parallel development, stacks evolve independently, clear responsibility boundaries.

​ Integration tooling.

3. Frameworks / libraries: React, Vue

4. Compilers / transpilers: relatively new. ECMAScript is a design specification.

Next: a practical demo of frontend–backend separation.

Server software.

Having just studied web security, this is easier to absorb; as general knowledge it is still fairly approachable.

6. Backend Frameworks: Java and the Spring Ecosystem’s Evolution

#

The heavy past: Servlet API → Java Web / J2EE

The Spring ecosystem

#

Package as a WAR, deploy on Tomcat — heavyweight and tedious

Spring Boot

2004: Spring Framework is born

1. IoC: Inversion of Control — the container; DI (Dependency Injection)

2. AOP: Aspect-Oriented Programming — e.g. authorization concerns

Spring MVC (Model–View–Controller): a design approach

Specializes in web requests and HTTP verbs

Controller: routing control; complex business goes to Service—e.g. database operations

Configuration was very tedious and complex, so:

Spring Boot — a “assembly manual” that wires components for you; since 2014, used by many large projects

Convention over configuration. Strengths: stability; laid groundwork for microservices.

Part 2: Industrial Revolution and Light of the Future

#

7. Microservices, Distributed Systems: Timeline and Technical Evolution

#

The microservices revolution

#

Thanks for creating more jobs. ( )

Originally: monoliths

2015–present: business needs evolve

​ Not one simple app—split into many service modules. Bilibili’s live-streaming app is its own application; so are various verticals. We separate these things.

Microservices:

The three independences.

1. Independent development — different teams own different modules with full control

2. Independent deployment — the biggest advantage

3. Independent data stores — each microservice has its own database; no cross-database queries

Services interact through their own APIs.

Advantages

1. Technology heterogeneity — each team can use different tech

WeChat mini programs also depend on microservice APIs

So for big companies we say language and framework matter less.

Performance: Rust, Golang

Stability / core: Java Spring

Recommenders / data science: Python

2. Extreme scalability — surgical, precise scaling

3. Fault tolerance and isolation

Robustness comes from independence

Local failure is OK — circuit breakers, service degradation

Distributed — distributed systems (“Misaka Network”): a set of networked computers

Netflix’s deployment

Blindly chasing microservices for some e-commerce projects.

2019: the year of tech chicken soup—microservices overused. Splitting is not always a win.

Problems distributed systems must solve:

How to assign work? Load balancing: share traffic.

How to communicate? Network communication.

Failures? Fault tolerance, high availability.

Versions? Configuration management.

Debugging failures? Distributed tracing.

Microservices architecture is a kind of distributed system (like Bitcoin)—a design principle.

Clusters

Three classic papers: problems around distributed databases.

GFS

MapReduce

Bigtable

They ushered in the big-data era.

Hadoop, HBase

Cloud computing: compute on these distributed systems.

AWS — Amazon cloud, on-demand allocation

Resource sharing and high-performance computing.

Spark, TensorFlow

Geographic distribution, low latency

CDN — Content Delivery Network, which we also cover in computer networks.

A simple implementation

#

Student service CRUD on port 3001 (must not conflict)

Course service port 3002

Frontend app

API gateway — the front desk port 3000

npm, Vite, Vue, Node.js for a quick microservices scaffold

Aside: RPC and gRPC

#

Services must not access each other’s databases directly; they can use APIs.

Here: RPC — Remote Procedure Call: invoke a method on another machine without worrying about the network details—more convenient.

Same layer as TCP conceptually.

gRPC uses HTTP; faster and more efficient.

.proto files

Nginx reverse proxy

#

service a localhost:3001

service b localhost:3002

I need to manage these services.

When a domain is hit, which service to choose.

8. New Currents in Frontend Engineering

#

yarn, npm, pnpm (newer)

Package managers

Services more often use TypeScript now—more pleasant than JS

express — older framework; also simform, Rspack, Bun

Deno

New libraries and frameworks keep pouring out—dizzying pace of change.

CSS — Tailwind CSS

Compilers: Babel, etc.

Preprocessors: sass-lang, less-css

CSS frameworks: getbootstrap, bulma

Frontend testing: jest, mocha, js

State management: redux, mobX, VueX, Zustand

Frontend security: CORS (web security)

Static generators: Hugo — this site is built with Hugo

Vercel: server deployment — a trend (important)

Frontend monitoring: Sentry — large scale

Code quality: eslint, prettier

Docs: storybook, gitbook

Component libraries: Ant Design, Material (MD style, very Android), Element UI

Animation: GSAP, Framer Motion, anime.js

Charts: d3.js, chart.js, echarts

Modularization: ES modules, CommonJS, AMD, etc.

Frontend cross-platform: React Native (many rewritten projects); Flutter (feels more advanced) — a trend; Dart

PWA — Progressive Web Apps

9. Backend Trends and Buzzwords Again

#

Small companies: JS or TS for both ends — full-stack engineers; messy tech surface; heavy reliance on individual skill and team norms; not ideal for CPU-bound work. TypeScript addresses some of this—a superset of JS.

Spring ecosystem: a super aircraft carrier—more reliable.

It depends on the application scenario.

Spring Cloud: service discovery, API gateway, declarative HTTP clients, circuit breakers, distributed config center

Python? Simple syntax. Django, Flask, FastAPI

Lower efficiency; Global Interpreter Lock; still used heavily in some microservice projects

WebSockets, RabbitMQ, RocketMQ

Webhooks — event-callback mechanisms between servers

ORM — Object–Relational Mapping; Java’s DB frameworks like MyBatis without raw JDBC

Prisma (Python DB), TypeORM, Sequelize

What if you cannot change a field?

Backend testing: pytest, unit testing, mocha, integration, API tests, JSON, Postman (you must know this)

Web server: Nginx

10. The Cloud-Native Era: Containers, Orchestration, DevOps — Where Is Golang’s Wave?

#

The cloud-native wave and modern engineering

#

Containerization — solves hard deployment across many servers and version issues

Environment isolation via VMs

Physical machine → virtual machine

A VM hypervisor on the server simulates a computer

Each VM needs a full OS—cumbersome—so containers arrived.

2013: Docker containers

#

We have also studied some Docker.

Lightweight; container images do not include the OS kernel.

Linux namespaces — the process believes it is isolated

Docker registries: pull images of almost anything.

Container orchestration

#

Google Kubernetes (k8s)

Idea: a declarative way of working.

Control loop: compare current vs desired state; advanced deploy strategies; auto-scale; self-heal.

Storage orchestration.

A solution for managing microservice clusters.

CI/CD and DevOps

#

CI: Continuous Integration — developers merge and build code automatically every day.

CD: Continuous Delivery / Deployment.

DevOps: the silo effect — over-specialization.

YOU BUILD IT, YOU RUN IT.

Golang

#

Its brightest stage: high-concurrency scenarios.

Goroutine: ultra-lightweight threads. Millions are possible.

Non-blocking high concurrency. Cross-platform compilation. Performance king.

​ Bilibili’s main-site microservices (~1600 services, all in Golang), Bangumi, YouTube—suited to live streaming and huge traffic.

​ Kratos — Bilibili’s open-source project.

​ The Docker engine itself is written in Go.

Close to C/C++ but safer and more convenient.

Gin, Fiber — Go frameworks

11. Meta-Frameworks: Present and Future

#

Meta-framework consolidation

Next.js → React

Nuxt.js → Vue.js

1. Hybrid rendering modes

CSR — dashboards, frequently changing data — choose frontend or backend rendering

SSR — Server-Side Rendering

Reactive data

SSG — Static Site Generation

ISR — Incremental Static Regeneration — e.g. dynamic walls

2. *API routes — internalizing the backend

Folders as routes as APIs

12. Serverless and Edge Computing: Trends and Future

#

Physical machines — configure everything yourself

VMs — buy a cloud server + domain; simpler

Containers

Serverless — developers should not worry about ops

FaaS — Function as a Service — no charge when idle; billed when the function runs (event-driven)

Elastic scaling.

Scenarios: real-time processing, AI-generated content, IoT. Problem: state—need a database.

BaaS — Backend as a Service; call platform SDKs; no need to install services yourself.

Supabase

Edge computing — light-speed is still finite

How game accelerators work

Central warehouse CDN content delivery

Vercel is excellent

​ AI-assisted development is fine, but in the foreseeable future companies will not rely on it for real projects—or at most for a small slice of testing. Assistive, not fully automated.

13. Version Control (VCS) History and Git

#

How does git actually work?

Track history

Roll back versions

Collaborate — many developers

Backup and recovery

1. Local VCS — track code/file changes; no multi-user

SCCS — Source Code Control System

1970s, Bell Labs

RCS — Revision Control System

2. Centralized VCS

CVS — 1980s; no atomic commits

SVN Subversion — better versioning; 2000; single point of failure on the central server

3. Distributed DVCS

2005: git

Linus

Every developer has a full repository with full history.

Local operations are fast; powerful branching model.

Data integrity.

Hosting platforms: GitHub launched 2008 and shaped today’s baseline

When stuck, read the docs—git’s docs are excellent; look things up.

14. Why Dependency Management Matters

#

Third-party libraries — feels like topological sorting

Libraries you import depend on each other, often at different versions.

Manual management is a disaster.

Dependency managers — automation

Discovery

Manifest File

Lock file

​ In short: web development today is no longer “just” web development—it is a vast ecosystem, interesting and complex. Jobs are hard to get, but learning driven by interest at the start is still right (when you have the time). If the goal is internships and jobs, that is another conversation.

​ 2025.12.16: Looking back—it really is another conversation: exhausting, and short on motivation!