Master the 2025 Frontend & Full‑Stack Knowledge System: Server Basics to DevOps

Server Basics

Server is a broad concept; this article only discusses JavaScript‑based server development.

JS Runtime

Nodejs – mature ecosystem, widely used.

Deno – supports TypeScript, default security, WebAPI compatible.

Bun – extreme performance, all‑in‑one.

Nodejs API

Modules – CommonJS, ES‑Module.

Command Line

Network – HTTP/HTTPS services.

File System (fs) – read, write, create, delete files.

Stream – readline.

Process

Cluster – PM2.

Debugger

Testing

Databases

MySQL – relational database.

PostgreSQL – relational database.

MongoDB – No‑SQL database.

Redis – in‑memory database, fast.

Cloud Databases – Supabase, Cloudflare, etc.

Storage

Alibaba Cloud OSS

Tencent Cloud COS

Amazon S3

Cloud Servers

All major cloud platforms offer free trials or low‑price promotions; for learning you can rotate “free‑bie” offers.

Linux Login – create accounts.

Linux Basic Commands

Vim Commands

Nginx Configuration

Security Groups & Firewalls

Docker

Image

Container

Dockerfile

Docker Compose

DockerHub

Serverless

Alibaba Cloud Function Compute

AWS Lambda

Other Small Providers – Vercel, Netlify, Railway, Fly.io, etc.

Micro‑services

Frameworks / Libraries

React Usage

JSX Syntax – introduced earlier.

Functional Component – pure functions, side effects, lifecycle, component communication.

Props

State – immutable data, immer.js, merge updates, async updates, controlled forms.

Hooks – useState, useEffect, useRef, useContext, custom hooks, react‑use.

Context – Provider, Consumer.

Performance Optimization – useMemo, useCallback, React.memo, React compiler.

Suspense & Async Components

ErrorBoundary

Server‑Side Components (RSC) – SSR.

React Principles

Virtual DOM – React’s virtual DOM optimizes updates.

Diff Algorithm – compares old and new VDOM to update real DOM.

Reconciliation – efficient diff and minimal updates.

React Fiber – rewritten rendering engine introduced in React 16.

Synthetic Events – event delegation on the root node.

React Concurrency – time‑slicing and task scheduling in React 18.

Batching Updates – multiple state updates are merged into a single render.

React Ecosystem

Frameworks – umijs, Next.js, Remix (react‑router), Gatsby, React‑Native.

UI Component Libraries – AntD, MUI, ShadcnUI.

State Management – Redux, Zustand, MobX, Recoil.

CSS Solutions – TailwindCSS, Styled‑components.

Form & Validation – Formik, React Hook Form.

Data Fetching – React Query, SWR, Apollo Client.

i18n – react‑i18next.

Testing – Jest, React Testing Library, Storybook.

Vue Usage

Scaffolding

Template Syntax – class, style, conditional rendering, list rendering, event binding, directives.

Reactivity – ref, reactive, limitations.

Computed

Watch – watchEffect.

Form & v‑model

Components – lifecycle, communication, props.

Slots

Async Components

Dynamic Components

KeepAlive

Composable Functions – custom composables, vue‑use.

Setup Script

Vue Principles

Virtual DOM – Vue uses a virtual DOM for performance.

Diff Algorithm – compares VDOM to update real DOM.

Reactivity Core – data hijacking via Object.defineProperty or Proxy for two‑way binding.

Template Compilation – compiles HTML templates into render functions.

Async Rendering – nextTick.

Vue Ecosystem

Frameworks – Nuxt.js, VuePress.

Router – Vue‑router.

UI Libraries – ElementPlus, AntDesignVue, VantUI, Vuetify.

State Management – Vuex, Pinia.

i18n – vue‑i18n.

Testing – Vitest, Vue‑test‑utils, Storybook.

Other Front‑End Frameworks / Libraries

Angular – classic all‑round framework.

Solid – no VDOM, reactive programming, efficient rendering.

Svelte – compile‑time framework, no VDOM, lightweight.

Node Services

Express – classic Node.js server framework, simple.

Koa – from the Express team, minimal API using async/await.

Egg – Alibaba’s enterprise‑grade framework built on Koa.

Nest.js – Spring‑like framework for Node.js.

Node Ecosystem

Database ORMs – Prisma, Drizzle.

Auth – NextAuth.

tRPC Communication

i18n

Queue Services – RabbitMQ, Kafka.

Cache

Logging

AI Services – ChatGPT (API unavailable in China), DeepSeek.

Email Services – free SMTP from major providers, Resend, etc.

SMS Services – Tencent Cloud, Alibaba Cloud.

Payments – WeChat Pay, Alipay, Stripe.

Want to learn the Node full‑stack ecosystem? I recommend the Node full‑stack AIGC knowledge‑base project I lead www.huashuiAI.com – includes document management, rich‑text editing, AI writing, collaborative editing, and more. Free group access available.

Mini‑Program Development

Frameworks – uni‑app, Taro, WePY for cross‑platform development.

Componentization – custom components for reuse.

WXML – markup language similar to HTML.

WXSS – style language similar to CSS.

APIs – WeChat Pay, location services, sharing, etc.

Routing – wx.navigateTo, wx.redirectTo, wx.switchTab.

Lifecycle – onLaunch, onShow, onHide.

Cloud Development – cloud functions, database, storage.

Publish & Debug – use WeChat Developer Tools.

Mobile Development

React Native – React‑based mobile framework.

Weex – Alibaba’s Vue‑based mobile framework (no longer maintained).

Flutter – Google’s UI toolkit using Dart.

PC Client

Electron – build cross‑platform desktop apps with HTML, CSS, JavaScript.

Micro‑Frontend

Single‑SPA – enables multiple frameworks on one page.

Qiankun – Alibaba’s micro‑frontend framework based on Single‑SPA.

Module Federation (webpack 5) – runtime module sharing.

PWA

Engineering

Code Repository Management

Git – Github, Gitlab, git commands, commits, pre‑commit hooks, pull requests.

Monorepo – manage multiple projects in a single repository.

Scaffolding

CLI tools for React, Vue, etc.

AI Code Generation Tools – v0, bolt.new.

Bundlers

Webpack – classic bundler.

Vite – fast ES‑module dev server.

Parcel – zero‑config bundler.

esbuild – Go‑based fast compiler/bundler.

Rspack – Go‑based fast compiler/bundler.

Turbopack – Rust‑based bundler used by Vercel.

Rollup – tree‑shaking bundler, used inside Vite.

Rolldown – new Rust‑based tool used by Vite.

JS Compilers

Babel, SWC, etc.

Babel – classic JS compiler.

SWC – Rust‑based compiler 20‑70× faster than Babel, native TS/JSX support; used by Vite.

Respack – Go‑based fast compiler.

esbuild – Go‑based fast compiler.

Code Compression

UglifyJS – classic compressor.

Terser – ES6‑aware fork of UglifyJS.

Many bundlers integrate compression (SWC, esbuild).

CSS Processing

Sass/SCSS – CSS extension with variables, nesting, mixins, inheritance.

Less – CSS pre‑processor similar to Sass.

PostCSS – JavaScript tool with plugins for CSS transformations.

Autoprefixer – PostCSS plugin adding vendor prefixes.

Coding Standards & Formatting

ESLint – style guides (Recommended, Airbnb, Google, StandardJS).

Prettier

CI/CD

GitHub Actions – CI/CD platform for automated workflows.

GitLab CI – uses .gitlab-ci.yml for pipelines.

Jenkins – automation server for build and test.

Development Environment

IDE Editors

VSCode – integrates GitHub Copilot for AI coding.

WebStorm

Cursor – AI‑enhanced paid IDE.

CodePen – online IDE.

StackBlitz – online IDE.

Debugging

Debugger & Breakpoints

Chrome DevTools – Elements, Console, Network, Performance, Memory, etc.

Network Capture

Chrome DevTools Network

Charles

Fiddler

Mocking

Mock.js

Online Mock Services

Testing

Combined with CI/CD for automated testing.

Unit Testing

Jest – widely used JavaScript test framework.

Vitest – fast, lightweight, Jest‑compatible, built on Vite.

React Testing Library – focuses on user interactions.

Vue Test Utils – official Vue component testing utilities.

E2E Testing

Cypress – end‑to‑end testing framework.

Playwright – cross‑browser automation.

Puppeteer – Node.js library to control Chromium.

Statistics, Monitoring, Security & Optimization

Statistics & Monitoring

Baidu Analytics – PV, UV, etc.

Sentry – APM platform for error and performance monitoring.

Security

XSS – cross‑site scripting attacks.

CSRF – cross‑site request forgery.

SQL Injection

Performance Optimization

Web Vitals – TTFB, FCP, LCP, FID, CLS, INP.

Code Splitting – cacheable modules.

Lazy Loading – JS and images.

Resource Compression – code and images.

Render Optimization – reduce reflow/repaint.

CDN

Edge Computing

Project Management

Roles

Product Owner

Product Manager – planning, schedule, resource coordination, risk control.

Front‑End Developer

Back‑End Developer

Full‑Stack Developer

UI/UX Designer

QA Engineer

Scrum Agile

Sprint – 1‑4 week iteration.

Backlog – product backlog managed by PO.

Daily Standup – 15‑minute daily sync.

Sprint Review – demo and feedback.

Sprint Retrospective – reflect and improve.

Kanban Agile

More flexible than Scrum, no fixed cycles or roles, suitable for continuous delivery.

Software Development Process

Requirement review & UI design.

Technical solution design.

Development – coding, debugging, unit testing, self‑testing, documentation, code review.

Integration testing.

Testing phase.

Release – full rollout, gray release, A/B testing.

Project Management Tools

Task Management – Jira, GitHub Projects.

Issue Tracking – GitHub/GitLab Issues.

Knowledge Base / Docs – Yuque, Notion, etc.

Non‑Technical Matters

Continuous learning and staying updated with new technologies.

Independent thinking, questioning the essence and value, asking “why”.

Work hard, step back occasionally, clear mind.

Time management with goals, plans, and todo lists.

Maintain a good personal image – appropriate clothing, shoes, hairstyle.

Regular health check‑ups, care for hair, neck, and back; healthy diet and sleep.

Conclusion

After a week of intense research and organization (2 hours daily), this detailed reference guide is ready for all front‑end developers. If you find any omissions, please comment.

AI Coding Zone Guide: https://aicoding.juejin.cn/aicoding