现代 web 开发魔法全书


Spellbook of Modern Web Dev


A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development


Spellbook of Modern Web Dev
  • This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
  • For each problem domain and each technology, I try my best to pick only one or a few links that are most important, typical, common or popular and not outdated, base on the clear trends, public data and empirical observation.
  • Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
  • Ideally, each line is a unique category. The “ / “ symbol between the links means they are replaceable. The “, “ symbol between the links means they are complementary.
  • I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
  • It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)
  • Feel free to submit the missing or better links in your opinion. Also, please provide the reason.

Link https://github.com/dexteryy/spellbook-of-modern-webdev/


Table of Contents

  • Platforms and Languages
    • Open Web Platform
      • Learning, Reference, Visual Tools
      • Performance, Security, Semantics / SEO / Accessibility
    • HTML5 Features
      • HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing…
    • CSS Features
      • RWD, Layout, Typography, Text, Animation, Effects…
    • Next Generation CSS
      • CSS Module, PostCSS, CSS in JS
      • Best Practices (Skeleton, Methodology, Code Style…)
      • Web Design (RWD, Atomic Design, Grid System, Typography, Style Guide…)
    • Next Generation JS
      • ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style…
    • Node.js
      • Intro, Workshop, Best Practices…
    • Platform Compatibility and Proposal Status
      • Platform Status / Releases / Updates, ECMAScript Compatibility
      • Proposal Status (W3C WG, WICG, WHATWG, ECMA TC39, Node.js CTC)
      • JS Engine (V8, JSC, Chakra), Web/JS Runtime (Electron, Cordova, React Native…), Device…
    • Cross-browser / Polyfill Libraries
      • Appearance, Interaction, Access, Network, Performance, Offline, Media…
    • npm Ecosystem
      • Finding Packages (Search, Stats, Rank)
      • Dependency Management / Release / Maintenance (npm, yarn, lerna, ncp…)
      • Convention (Open Source, SemVer, package.json, Small modules, Isomorphic JS / Universal JS…)
    • Universal Utility Libraries
      • Standard Library Extensions (FP, OOP, Async…)
      • Hashing / Generating
      • Parsing / Manipulating (URL, Validator, i18n, Date, Numbers, Color, Text, Buffer / Blob…)
      • Logic, Network, Storage, NLP, ML…
  • Universal Web Apps / Web Pages
    • GUI Framework
      • View / ViewModel / ViewController (React)
      • Model / App State (Redux)
      • API (GraphQL)
      • GUI Architectures (MVC, MVP, PM, MVVM, Flux, Redux, Elm, MVI, SAM…)
    • UI Toolkits
      • CSS, React…
    • Standalone UI Components
      • Layout, Icon, Button, Form, Overlay, Picker, Content, Editor…
  • Client Side
    • UX Libraries
      • Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour…
    • Graphic Libraries
      • Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path…)
      • 2D (Canvas, SVG, Physics…), 3D (WebGL, Physics…)
      • Data Visualization, Game…
    • Hybrid Libraries
      • Electron, React Native
  • Server Side
    • Network
      • HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC…)
      • TCP, UDP…
    • Server-side Best Practices
      • Restful API, SaaS, Microservices (API Gateway, Serverless)
      • Cloud / Distributed, Web Hosting / Non-distributed
      • Authentication / Authorization, Security, Logging / Monitoring, DevOps…
    • Microservices / API Services (Node.js)
      • Frameworks (RESTful API, Microservices, Serverless, Bots…), GraphQL, DocGen + CodeGen…
    • Server-side Libraries (Node.js)
      • Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP…
    • Cloud Services (Global)
      • Compute (FaaS / Serverless / WebHook, PaaS, CaaS)
      • Storage (Object Storage, DBaaS)
      • BaaS (CRUD, Auth, Search, Email, SMS…)
      • AIaaS / BDaaS (Natural Language, Computer Vision…)
    • Cloud Services (China)
      • The evil twins inside the Great Firewall of China
  • Tooling
    • Testing
      • Unit Testing / Test Runner, Test Doubles
      • Web Testing (Integration Testing, Functional Testing, Visual testing, Monkey Testing, Headless Browsers)
      • Server-side Testing (Functional Testing, Load Testing)
      • Benchmark Testing
      • Analysis (Code Coverage, Node.js Security…)
    • Documentation
      • JS, API, CLI, CSS / Style Guide, Writing
    • Toolchain
      • Compiler / Transpiler / Preprocessor (Babel, PostCSS…)
      • Loader / Builder / Bundler (Webpack, Rollup…)
      • Minifier / Compressor / Optimizer (Prepack, Babili / Uglify, imagemin, cssnano / clean-css…)
      • Formatter (Prettier, Stylefmt…)
      • Static Analysis (ESLint, Flow, StyleLint…)
      • Task Automation (npm scripts, Gulp…)
    • Workflow
      • Development (Micro Generator, Live Reload / Watch / Preview, Dev Tools, HTTP Inspector, Debugging Proxy…)
      • Deployment (Process Supervisor, Containers, Container Clusters, PaaS)
      • Monitoring (Error Tracking, Logging, APM…)
    • Command-line Environment (Mac)
      • Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities…
    • Command-line Libraries (Node.js)
      • Input (Options/Arguments Parser, Interactive, Configuration…)
      • Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing…)
      • Delivery, OS, API, Parser…
    • IDE / Editors
      • Atom Plugins (UI, Formating, Operating, Static Analysis, Docs, Assistant, Integration…)
      • Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts…
    • Useful Apps
      • Playground, Visual Tools, Viewer, Docs, Automation…
    • Collaboration
      • Version Control, ChatOps, Kanban, Markdown, Design…

A Subset as a Learning Path

  1. Open Web Platform
  2. HTML5 Features
  3. CSS Features
  4. Next Generation CSS
  5. Next Generation JS
  6. Platform Compatibility and Proposal Status
  7. Network
  8. Node.js
  9. npm Ecosystem
  10. Command-line Environment (Mac)
  11. IDE / Editors
  12. GUI Framework
  13. Microservices / API Services (Node.js)
  14. Testing

A Subset for Finding Libraries

A Subset for Architecture and Infrastructure


Platforms and Languages

Open Web Platform

HTML5 Features

CSS Features

Next Generation CSS

Next Generation JS

Node.js

Platform Compatibility and Proposal Status

Cross-browser / Polyfill Libraries

npm Ecosystem

Universal Utility Libraries

Universal Web Apps / Web Pages

GUI Framework

UI Toolkits

Standalone UI Components

Client Side

UX Libraries

Graphic Libraries

Hybrid Libraries

Server Side

Network

Server-side Best Practices

Microservices / API Services (Node.js)

Server-side Libraries (Node.js)

Cloud Services (Global)

Cloud Services (China)

The evil twins inside the Great Firewall of China

Tooling

Testing

Documentation

Toolchain

Workflow

Command-line Environment (Mac)

Command-line Libraries (Node.js)

IDE / Editors

Useful Apps

Collaboration

目录

  1. 1. Spellbook of Modern Web Dev
    1. 1.1. Platforms and Languages
      1. 1.1.1. Open Web Platform
      2. 1.1.2. HTML5 Features
      3. 1.1.3. CSS Features
      4. 1.1.4. Next Generation CSS
      5. 1.1.5. Next Generation JS
      6. 1.1.6. Node.js
      7. 1.1.7. Platform Compatibility and Proposal Status
      8. 1.1.8. Cross-browser / Polyfill Libraries
      9. 1.1.9. npm Ecosystem
      10. 1.1.10. Universal Utility Libraries
    2. 1.2. Universal Web Apps / Web Pages
      1. 1.2.1. GUI Framework
      2. 1.2.2. UI Toolkits
      3. 1.2.3. Standalone UI Components
    3. 1.3. Client Side
      1. 1.3.1. UX Libraries
      2. 1.3.2. Graphic Libraries
      3. 1.3.3. Hybrid Libraries
    4. 1.4. Server Side
      1. 1.4.1. Network
      2. 1.4.2. Server-side Best Practices
      3. 1.4.3. Microservices / API Services (Node.js)
      4. 1.4.4. Server-side Libraries (Node.js)
      5. 1.4.5. Cloud Services (Global)
      6. 1.4.6. Cloud Services (China)
    5. 1.5. Tooling
      1. 1.5.1. Testing
      2. 1.5.2. Documentation
      3. 1.5.3. Toolchain
      4. 1.5.4. Workflow
      5. 1.5.5. Command-line Environment (Mac)
      6. 1.5.6. Command-line Libraries (Node.js)
      7. 1.5.7. IDE / Editors
      8. 1.5.8. Useful Apps
      9. 1.5.9. Collaboration