An Introduction to Frontend FrameworksAn Introduction to Frontend Frameworks

What will this article teach you?What will this article teach you?

Each chapter begins with "Why do we need this technology?" so you understand the logic behind each evolution.Each chapter begins with "Why do we need this technology?" so you understand the logic behind each evolution.

------

1. Motivation for Caring About Frontend Evolution1. Motivation for Caring About Frontend Evolution

1.1 From "Digital Poster" to "Desktop Application"1.1 From "Digital Poster" to "Desktop Application"

Think about a poster you see on the street:Think about a poster you see on the street:

• ✅ Has content (text, images)✅ Has content (text, images)
• ✅ Has design (colors, layout)✅ Has design (colors, layout)
• ❌ But if you talk to it, it won't respond❌ But if you talk to it, it won't respond
• ❌ If you tap somewhere, nothing happens❌ If you tap somewhere, nothing happens

The earliest web pages were just like these "digital posters": view-only, unchangeable, with fixed content.The earliest web pages were just like these "digital posters": view-only, unchangeable, with fixed content.

Modern web pages are completely different. They're like desktop applications (VS Code, Figma):Modern web pages are completely different. They're like desktop applications (VS Code, Figma):

• ✅ You can edit documents, draw, play games✅ You can edit documents, draw, play games
• ✅ They respond to your every action in real time✅ They respond to your every action in real time
• ✅ They can even work offline✅ They can even work offline

The core reason for this transformation: web page functionality has become increasingly complex, requiring more efficient technologies and development approaches.The core reason for this transformation: web page functionality has become increasingly complex, requiring more efficient technologies and development approaches.

1.2 A Real-Life Analogy: Building a House1.2 A Real-Life Analogy: Building a House

The evolution of frontend technology is like the evolution of house construction:The evolution of frontend technology is like the evolution of house construction:

------

------

2. Phase 1: Static Web Pages and "Image Slicing" (2000s)2. Phase 1: Static Web Pages and "Image Slicing" (2000s)

2.1 What Was ThOverview of Era Like2.1 What Was ThOverview of Era Like

Development approach:Development approach:

• Write a few HTML filesWrite a few HTML files
• Embed some CSS and JavaScriptEmbed some CSS and JavaScript
• Drag the files directly into a browser to see the resultDrag the files directly into a browser to see the result
• Upload the folder to a server to deployUpload the folder to a server to deploy

Characteristics:Characteristics:

• ✅ Pros: Simple and direct, no learning cost, write and run✅ Pros: Simple and direct, no learning cost, write and run
• ❌ Cons: No complex interactivity, code becomes messy as it grows❌ Cons: No complex interactivity, code becomes messy as it grows

2.2 Overview of "Image Slicing"2.2 Overview of "Image Slicing"

You may have heard the term "image slicing." It was the main task of early frontend work:You may have heard the term "image slicing." It was the main task of early frontend work:

What is image slicing?What is image slicing?

A designer creates a page layout in Photoshop → the frontend developer slices the design into small images → uses HTML to piece the images together into a pageA designer creates a page layout in Photoshop → the frontend developer slices the design into small images → uses HTML to piece the images together into a page

Why was it so slow?Why was it so slow?

Every small image on a web page required a separate network request from the browser. More requests meant slower loading.Every small image on a web page required a separate network request from the browser. More requests meant slower loading.

👇 Try it yourself: Observe how image requests affect loading performance👇 Try it yourself: Observe how image requests affect loading performance

------

------

3. Phase 2: The jQuery Era — "Manual Labor" (2010s)3. Phase 2: The jQuery Era — "Manual Labor" (2010s)

3.1 Motivation for jQuerying Needed3.1 Motivation for jQuerying Needed

As web pages grew more complex, the problems of vanilla JavaScript became apparent:As web pages grew more complex, the problems of vanilla JavaScript became apparent:

• ❌ Verbose APIs: Simple operations required lots of code❌ Verbose APIs: Simple operations required lots of code
• ❌ Browser compatibility: Different browsers had different APIs, requiring lots of compatibility code❌ Browser compatibility: Different browsers had different APIs, requiring lots of compatibility code
• ❌ Weak selectors: Finding elements was cumbersome❌ Weak selectors: Finding elements was cumbersome

jQuery was born. It made JavaScript simpler:jQuery was born. It made JavaScript simpler:

// Vanilla JavaScript (verbose) const element = document.getElementById('title') // jQuery (concise) const element = $('#title')

3.2 jQuery's Approach: Manually Modifying the Page3.2 jQuery's Approach: Manually Modifying the Page

jQuery's core approach is imperative: you tell the browser "how to do it."jQuery's core approach is imperative: you tell the browser "how to do it."

// Find the title element $('#title').text('New Title') // Find the button and disable it $('#submit-btn').attr('disabled', true) // Find the list and add an item $('ul').append('<li>New Item</li>')

The problem: You need to remember every element on the page, and every time data changes, you must manually update all related elements.The problem: You need to remember every element on the page, and every time data changes, you must manually update all related elements.

👇 Try it yourself: Compare jQuery and data-driven approaches👇 Try it yourself: Compare jQuery and data-driven approaches

3.3 The Rise of Mobile: Responsive Design Emerges3.3 The Rise of Mobile: Responsive Design Emerges

Another major shift in this phase: phones and tablets became mainstream.Another major shift in this phase: phones and tablets became mainstream.

Web pages had to adapt to different screens. This required responsive layout: the same HTML/CSS automatically adjusts layout based on screen width.Web pages had to adapt to different screens. This required responsive layout: the same HTML/CSS automatically adjusts layout based on screen width.

The core of responsive layout: Media QueriesThe core of responsive layout: Media Queries

/* Desktop screens (wider than 640px) */ @media (min-width: 640px) { .container { display: flex; } } /* Mobile screens (narrower than 640px) */ @media (max-width: 640px) { .container { display: block; } }

👇 Try it yourself: Resize your browser and observe responsive layout in action👇 Try it yourself: Resize your browser and observe responsive layout in action

------

------

4. Phase 3: From "Manual Labor" to "Data-Driven" (Vue/React)4. Phase 3: From "Manual Labor" to "Data-Driven" (Vue/React)

4.1 Motivation for needing New Frameworks4.1 Motivation for needing New Frameworks

The problems of the jQuery era accumulated to a tipping point:The problems of the jQuery era accumulated to a tipping point:

• Code becomes messy as it grows: DOM operations everywhere, hard to maintainCode becomes messy as it grows: DOM operations everywhere, hard to maintain
• Prone to bugs: Miss one update and the page becomes inconsistentProne to bugs: Miss one update and the page becomes inconsistent
• Difficult collaboration: Multiple people editing the same file leads to conflictsDifficult collaboration: Multiple people editing the same file leads to conflicts

Vue / React's core approach: just change the data, and the page updates automatically.Vue / React's core approach: just change the data, and the page updates automatically.

4.2 Vue/React's Approach: Declarative UI4.2 Vue/React's Approach: Declarative UI

jQuery (Imperative):jQuery (Imperative):

// You tell the browser every step to take $('#title').text('New Title') $('#title').css('color', 'red') $('#title').show()

Vue (Declarative):Vue (Declarative):

// You just tell the browser "what to display" data() { return { title: "New Title", color: "red", visible: true } }

👇 Try it yourself: Compare imperative and declarative approaches👇 Try it yourself: Compare imperative and declarative approaches

4.3 Component-Based Development: Building Pages Like LEGO4.3 Component-Based Development: Building Pages Like LEGO

Vue / React's most powerful feature is component-based development: breaking the page into independent "building blocks."Vue / React's most powerful feature is component-based development: breaking the page into independent "building blocks."

Imagine you're building with LEGO:Imagine you're building with LEGO:

• You don't need to "carve every block from scratch" (write HTML/CSS from scratch)You don't need to "carve every block from scratch" (write HTML/CSS from scratch)
• You just need to "assemble the blocks following the instructions" (combine components together)You just need to "assemble the blocks following the instructions" (combine components together)
• Each block is independent and can be reused across different setsEach block is independent and can be reused across different sets

Benefits of components:Benefits of components:

• Reusability: Write one "Product Card" component and use it 100 timesReusability: Write one "Product Card" component and use it 100 times
• Encapsulation: Internal state of a component doesn't affect othersEncapsulation: Internal state of a component doesn't affect others
• Maintainability: Modify a component, and every place that uses it updatesMaintainability: Modify a component, and every place that uses it updates

4.4 SPA: The Birth of Single-Page Applications4.4 SPA: The Birth of Single-Page Applications

The Vue / React era brought another major shift: from MPA to SPA.The Vue / React era brought another major shift: from MPA to SPA.

MPA (Multi-Page Application):MPA (Multi-Page Application):

• Click a link → full page refresh → see the new pageClick a link → full page refresh → see the new page
• Like flipping through a book: each time you turn a page, you close the old book and fetch a new one from the shelfLike flipping through a book: each time you turn a page, you close the old book and fetch a new one from the shelf

SPA (Single-Page Application):SPA (Single-Page Application):

• Click a link → only the content area refreshes → the page itself doesn't reloadClick a link → only the content area refreshes → the page itself doesn't reload
• Like switching chapters in the same book: only erase the old content and write in the newLike switching chapters in the same book: only erase the old content and write in the new

👇 Try it yourself: Experience the difference between MPA and SPA👇 Try it yourself: Experience the difference between MPA and SPA

SPA advantages:SPA advantages:

• ✅ Smooth experience: Fast page transitions✅ Smooth experience: Fast page transitions
• ✅ Easy state management: Form inputs and scroll positions are preserved✅ Easy state management: Form inputs and scroll positions are preserved
• ❌ Initial load may be slow: JavaScript must be downloaded first❌ Initial load may be slow: JavaScript must be downloaded first
• ❌ SEO requires extra handling: Search engines may not index content (needs SSR/SSG)❌ SEO requires extra handling: Search engines may not index content (needs SSR/SSG)

------

------

5. Rendering Strategies: From CSR to SSR/SSG5. Rendering Strategies: From CSR to SSR/SSG

CSR (Client-Side Rendering):CSR (Client-Side Rendering):

• Browser downloads JavaScript → executes code → generates the pageBrowser downloads JavaScript → executes code → generates the page
• Pros: Smooth interactions, low server loadPros: Smooth interactions, low server load
• Cons: Slow initial load, poor for SEOCons: Slow initial load, poor for SEO

SSR (Server-Side Rendering):SSR (Server-Side Rendering):

• Server generates HTML → sends to browser → browser displays directlyServer generates HTML → sends to browser → browser displays directly
• Pros: Fast initial load, good for SEOPros: Fast initial load, good for SEO
• Cons: High server load, complex implementationCons: High server load, complex implementation

SSG (Static Site Generation):SSG (Static Site Generation):

• Generates HTML for all pages at build timeGenerates HTML for all pages at build time
• Pros: Extremely fast, fully static, CDN-friendlyPros: Extremely fast, fully static, CDN-friendly
• Cons: Not suitable for dynamic contentCons: Not suitable for dynamic content

👇 Try it yourself: Compare the characteristics of different rendering strategies👇 Try it yourself: Compare the characteristics of different rendering strategies

------

6. Phase 4: Engineering and Build Tools (2015s–2020s)6. Phase 4: Engineering and Build Tools (2015s–2020s)

6.1 Motivation for needing "Engineering"6.1 Motivation for needing "Engineering"

Frontend projects have grown too large to rely on "manually including scripts."Frontend projects have grown too large to rely on "manually including scripts."

Engineering means using tools and standards to make development more efficient, code more reliable, and collaboration smoother.Engineering means using tools and standards to make development more efficient, code more reliable, and collaboration smoother.

6.2 Build Tools: Webpack → Vite6.2 Build Tools: Webpack → Vite

Webpack (Traditional):Webpack (Traditional):

• How it works: bundle first, then serveHow it works: bundle first, then serve
• On startup: bundle all code → start the dev serverOn startup: bundle all code → start the dev server
• Problem: slow. The bigger the project, the slower the startup (can take 30+ seconds)Problem: slow. The bigger the project, the slower the startup (can take 30+ seconds)

Vite (Modern):Vite (Modern):

• How it works: compile on demandHow it works: compile on demand
• On startup: no bundling, start the dev server directlyOn startup: no bundling, start the dev server directly
• When the browser requests a file, compile it in real timeWhen the browser requests a file, compile it in real time
• Advantage: fast. Typically starts in under 1 secondAdvantage: fast. Typically starts in under 1 second

------

------

7. Comparing Mainstream Frameworks7. Comparing Mainstream Frameworks

7.1 Four-Framework Comparison7.1 Four-Framework Comparison

7.2 Vue: Progressive Framework7.2 Vue: Progressive Framework

Core philosophy: Adopt incrementally — use just a part or the full suiteCore philosophy: Adopt incrementally — use just a part or the full suite

<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello Vue' } } } </script>

Pros:Pros:

• ✅ Gentle learning curve, excellent Chinese documentation✅ Gentle learning curve, excellent Chinese documentation
• ✅ Intuitive template syntax, easy to understand✅ Intuitive template syntax, easy to understand
• ✅ Single-file components (.vue) with clear structure✅ Single-file components (.vue) with clear structure
• ✅ Great for rapid development✅ Great for rapid development

Cons:Cons:

• ❌ State management in large projects requires learning Vuex/Pinia❌ State management in large projects requires learning Vuex/Pinia
• ❌ Slightly less flexible than React❌ Slightly less flexible than React

Best for:Best for:

• Small-to-medium web applicationsSmall-to-medium web applications
• Rapid prototypingRapid prototyping
• Chinese-speaking teams (documentation-friendly)Chinese-speaking teams (documentation-friendly)

7.3 React: UI Library7.3 React: UI Library

Core philosophy: Focus only on the view layer; everything else is left to the communityCore philosophy: Focus only on the view layer; everything else is left to the community

function App() { const [message, setMessage] = useState('Hello React') return <div>{message}</div> }

Pros:Pros:

• ✅ Most mature ecosystem, rich component libraries✅ Most mature ecosystem, rich component libraries
• ✅ Flexible JSX syntax, powerful expressiveness✅ Flexible JSX syntax, powerful expressiveness
• ✅ Excellent virtual DOM performance✅ Excellent virtual DOM performance
• ✅ Great for large projects✅ Great for large projects

Cons:Cons:

• ❌ Steeper learning curve, requires grasping additional concepts❌ Steeper learning curve, requires grasping additional concepts
• ❌ Need to choose and combine various libraries yourself❌ Need to choose and combine various libraries yourself
• ❌ JSX requires compilation, can't run directly in the browser❌ JSX requires compilation, can't run directly in the browser

Best for:Best for:

• Large, complex applicationsLarge, complex applications
• Projects needing a rich ecosystemProjects needing a rich ecosystem
• Cross-platform development (React Native)Cross-platform development (React Native)

7.4 Svelte: Compile-Time Framework7.4 Svelte: Compile-Time Framework

Core philosophy: No virtual DOM — compiles components into efficient native code at build timeCore philosophy: No virtual DOM — compiles components into efficient native code at build time

<script> let message = 'Hello Svelte' </script> <div>{message}</div>

Pros:Pros:

• ✅ Best performance (no virtual DOM runtime overhead)✅ Best performance (no virtual DOM runtime overhead)
• ✅ Smallest bundle size✅ Smallest bundle size
• ✅ Simple and intuitive syntax✅ Simple and intuitive syntax
• ✅ Built-in reactive system✅ Built-in reactive system

Cons:Cons:

• ❌ Relatively smaller ecosystem❌ Relatively smaller ecosystem
• ❌ Community smaller than Vue/React❌ Community smaller than Vue/React
• ❌ Fewer third-party libraries❌ Fewer third-party libraries

Best for:Best for:

• Performance-critical applicationsPerformance-critical applications
• Bundle-size-sensitive projectsBundle-size-sensitive projects
• Teams willing to try new technologiesTeams willing to try new technologies

7.5 Angular: Complete Platform7.5 Angular: Complete Platform

Core philosophy: Provides a complete, out-of-the-box solutionCore philosophy: Provides a complete, out-of-the-box solution

@Component({ selector: 'app-root', template: '<div>{{ message }}</div>' }) export class AppComponent { message = 'Hello Angular' }

Pros:Pros:

• ✅ Full-featured — routing, HTTP, forms all included✅ Full-featured — routing, HTTP, forms all included
• ✅ Native TypeScript support✅ Native TypeScript support
• ✅ Great for large teams and projects✅ Great for large teams and projects
• ✅ Consistent code standards✅ Consistent code standards

Cons:Cons:

• ❌ Steep learning curve❌ Steep learning curve
• ❌ Many concepts, high complexity❌ Many concepts, high complexity
• ❌ Large bundle size❌ Large bundle size
• ❌ Not suitable for small projects❌ Not suitable for small projects

Best for:Best for:

• Large enterprise applicationsLarge enterprise applications
• Teams requiring strict standardsTeams requiring strict standards
• Projects already on a TypeScript stackProjects already on a TypeScript stack

------

8. Summary: The Essence of Evolution8. Summary: The Essence of Evolution

Frontend technology evolution is essentially about solving two problems:Frontend technology evolution is essentially about solving two problems:

8.1 Efficiency: From Manual to Automatic8.1 Efficiency: From Manual to Automatic

8.2 Scale: From Individual to Team8.2 Scale: From Individual to Team

------

------

9. Learning Roadmap9. Learning Roadmap

9.1 If You're a Complete Beginner9.1 If You're a Complete Beginner

Step 1: HTML/CSS/JavaScript FundamentalsStep 1: HTML/CSS/JavaScript Fundamentals

• Understand the three pillars of the webUnderstand the three pillars of the web
• Be able to write simple static pagesBe able to write simple static pages

Step 2: Learn a Framework (Vue Recommended)Step 2: Learn a Framework (Vue Recommended)

• Understand the "data-driven" mindsetUnderstand the "data-driven" mindset
• Master component-based developmentMaster component-based development

Step 3: Build a Real ProjectStep 3: Build a Real Project

• Create a complete single-page applicationCreate a complete single-page application
• Get familiar with routing, state management, and API callsGet familiar with routing, state management, and API calls

9.2 If You Have Some Experience9.2 If You Have Some Experience

Advanced directions:Advanced directions:

• Engineering: Learn Vite/Webpack, understand the build processEngineering: Learn Vite/Webpack, understand the build process
• Performance Optimization: Learn lazy loading, code splitting, caching strategiesPerformance Optimization: Learn lazy loading, code splitting, caching strategies
• TypeScript: Add types to your code for greater reliabilityTypeScript: Add types to your code for greater reliability
• Server-Side Rendering: Learn Nuxt/Next.js to solve SEO and initial-load issuesServer-Side Rendering: Learn Nuxt/Next.js to solve SEO and initial-load issues

------

10. What You Should Now Be Able to Recognize10. What You Should Now Be Able to Recognize

After reading this chapter, you should be able to:After reading this chapter, you should be able to:

• ✅ Understand the trajectory and reasons behind frontend technology evolution✅ Understand the trajectory and reasons behind frontend technology evolution
• ✅ Distinguish the characteristics of Vue, React, Svelte, and Angular✅ Distinguish the characteristics of Vue, React, Svelte, and Angular
• ✅ Understand the difference between "imperative" and "declarative"✅ Understand the difference between "imperative" and "declarative"
• ✅ Grasp the core idea of "data-driven" development✅ Grasp the core idea of "data-driven" development
• ✅ Know the value of component-based development✅ Know the value of component-based development
• ✅ Understand the use cases of CSR, SSR, and SSG✅ Understand the use cases of CSR, SSR, and SSG
• ✅ Understand the role of build tools (Webpack, Vite)✅ Understand the role of build tools (Webpack, Vite)
• ✅ Choose the right framework and tech stack for your project✅ Choose the right framework and tech stack for your project

------

GlossaryGlossary