awesome-dev-web-front-end

Awesome-Web-Front-End-List

:heart: 收藏列表 - :+1: 很棒的 Web 前端基本技术 JavaScript、CSS、HTML 相关框架、库、工具等。

Favorites list - Great basic web front-end technologies JavaScript, CSS, HTML related frameworks, libraries, tools, etc.

（Recommend）推荐看看 W3C（World Wide Web Consortium，万维网联盟） 官方网站， 👉 https://www.w3.org/

目录

Resource navigation list.

• 技术标准规范（Technical Standard Specification）
• 技术参考文档（Technical Reference Document）
• HTML
  • 代码风格规范（Code Style Specifications）
  • 在线资源（Online Resources）
  • 工具库（Library）
• CSS
  • 代码风格规范（Code Style Specifications）
  • 在线资源（Online Resources）
  • 工具库（Library）
• JavaScript
  • 代码风格规范（Code Style Specifications）
  • 在线资源（Online Resources）
  • 工具库（Library）
• TypeScript
• 构建工具（Build Tools）
• UI 资源（UI Resources）
  • 字体图标（Font Icon）
  • UI 设计系统（UI Design System）
  • UI 组件（UI Component）
    • 组件库（Component Library）
    • 独立组件（Independent Components）
  • UI 模板（UI Template）
• 数据可视化（Data Visualization）
• 开发框架（Framework）
• 应用状态管理（Application State Management）
• 渐进式 Web 应用（Progressive Web Apps）
• WebAssembly
• 深入探索（Explore In Depth）
• 更多（More）
  • CDN
  • 在线工具（Online Tools）
  • 文章（Article）
  • 其它（Others）

技术标准规范

Technical standard specification.

• W3C - 万维网联盟创建于 1994 年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
• WHATWG community - 网络超文本应用技术工作组（WHATWG）维护的一些规范性文档。
• Promises/A+ Specification

More others 👉 Awesome-Development-Technical-Standard-Specifications

Go Top ↑

技术参考文档

Official and unofficial technical reference documents.

• 标准实现状态（Standard implementation status）

  • 官方（Official）
    • Chrome Blink status - Google Chrome 的 Blink 引擎功能特性的官方实现和标准化的开发状态查询列表，官方网站。
    • Firefox status - Firefox 的 Web 平台功能的官方实现和标准化路线图查询列表，官方网站。
    • Webkit - Webkit 浏览器引擎的官方网站，可查询其功能特性的实现和标准化状态，官方网站。
  • 社区（Community）
    • Can I use - 可以查询特定 Web API（H5、CSS3）在各个浏览器平台的实现和标准化状态，非官方网站。
    • Web Platform Status
    • Can I email - 可以查询特定 Web API（H5、CSS3）在各个邮件客户端平台的实现和标准化状态，非官方网站。
    • compatibility table - 可以查询 ECMAScript API 在各平台实现的状态，非官方网站。
    • web-platform-tests
    • Dataset
      • browser-compat-data - MDN 网站上的 Web 技术兼容性数据。
      • web-features

• 开发文档（Dev docs）

  • MDN Developer Document - MDN Web Docs 网站提供开放网络（Open Web）技术有关的信息，包括用于网站和渐进式网络应用的 HTML、CSS 和 API，是提供给 Web 开发者最好的学习资料和技术文档，可作为官方标准参阅学习。
  • Chrome Developers - Chrome 开发者中心，Chrome 官方站点。
  • Google Developers for Web - 谷歌开发者中心，Web 站点，众多工具和资源。
    • web.dev - Web 关键概念学习、实践。
  • The Front-End Checklist - 前端清单，前端知识点及其最佳实践。

• 路线图（Roadmap）

  • Frontend Developer Roadmap - 前端开发技术路线图。

• 备忘单与代码片段（Cheatsheet & Code Snippets）

  • this vs that - 类似概念区分理解。

Go Top ↑

HTML

W3C HTML 官方规范标准（W3C HTML Official Specification Standard）

HTML 代码风格规范

Code Style Specifications.

• Google HTML Style Guide
• @mdo's Code Guide HTML

HTML 在线资源

HTML related online tools and documents, etc.

• HTML Reference - HTML 指南。
• HTML DOM - 有用的 HTML 代码片段。
• Entity Code - 快速的实体代码索引查询。

HTML 工具库

HTML tool library, dealing with compatibility issues, etc.

• HTML Boilerplates - HTML 文件模板。
• HTML5 Boilerplate - HTML5 文件模板。

Go Top ↑

CSS

W3C CSS 官方规范标准（W3C CSS Official Specification Standard）

• css-modules - CSS 模块。（ ⚠️ 没有被标准化）

CSS 代码风格规范

Code Style Specifications.

• CSS 代码风格（CSS Code Style）

  • Google CSS Style Guide
  • Airbnb CSS / Sass Styleguide
  • @mdo's Code Guide CSS

• CSS 类命名规则（CSS class naming rules）

  • CSS BEM
  • OOCSS
  • SMACSS
  • Atomic CSS
  • SUIT CSS

CSS 在线资源

CSS related online tools and documents, etc.

• 文档（Documentation）

  • cssdb - CSS 新特性列表。
  • CSS Triggers - 一些改变会导致重绘、重布局的 CSS 属性。
    • What forces layout / reflow - 一些会导致重绘、重布局的 DOM 操作。
  • CSS Reference - CSS 视觉指南，通过示例直观的学习 css。

• 工具（Tools）

  • CSS Layout - 流行的 CSS 布局方案参考。
  • 动画（Animation）
    • Animista - 在线生成 CSS 动画样式代码。
    • easings.co - 测试 CSS 动画函数效果。
  • Keyframes - CSS 效果预览小工具集合。
  • enjoyCSS - 便捷的组件样式设计输出在线工具。
  • CSS 渐变（Gradient）
    • Gradient Magic - 渐变设计，CSS 渐变画廊。
    • Conic.css - CSS 渐变。
  • 毛玻璃效果（Frosted Glass Effect）
    • Glassmorphism CSS Generator - 毛玻璃效果。
    • Glassmorphism CSS Generator - 毛玻璃效果。
  • Animated Backgrounds - CSS 动画背景。
  • My Device - 测量当前设备相关的 CSS 值，例如视区宽度等等。
  • bienvenida al laboratorio - 一些 CSS 特性相关的用例。
  • Scrollbar.app - 调试自定义滚动条样式。

• 其它（Others）

  • CSS Script - 设计现代 Web 的 CSS 脚本。
  • cursor-effects - 一些鼠标光标效果。

CSS 工具库

CSS tool library, dealing with compatibility issues, etc.

• CSS 重置（CSS Reset）

  • Normalize.css - 现代化的 Reset CSS 工具库，统一浏览器默认样式。（ ⚠️ 不再更新）
  • @csstools/normalize.css
  • modern-normalize
  • sanitize.css
  • ress

• Utility-first CSS

  • Tailwind CSS - 可定制设计的低级 CSS 框架，不提供组件样式，仅提供预设的工具类，来进行组合创建样式。
    • Tailwind CSS Cheat Sheet
    • Hypercolor - 渐变色集合。
    • Tailwind Components - 使用 TailwindCSS 构建的组件，社区支持。
    • daisyUI - 使用 TailwindCSS 构建的组件，支持多种主题配色。
    • headlessUI - 一组完全无样式、可访问的组件，与 TailwindCSS 集成使用，TailwindCSS 官方发布。
    • Twind.style - 将 Tailwind 与 CSS-in-JS 相结合。
  • UnoCSS
  • Windi CSS

• 实用工具（Utils）

  • Masonry - grid 布局工具。
  • clsx - 非常轻量的 CSS 类名拼接工具。
  • polished - CSS 样式辅助工具。
  • Font Face Observer - 使用 @font-face 加载第三方字体可用检测。
  • finder - CSS 选择器生成。

• 交互效果

  • Hover.css - 添加鼠标悬停动画效果。（ ⚠️ 不再更新）
  • Imagehover.css - 添加鼠标悬停，图片动画效果。（ ⚠️ 不再更新）
  • CSShake - 抖动效果。

• 加载器（Loading / Spinners）

  • Whirl - CSS Loading 动画。
  • loadership

Go Top ↑

JavaScript

ECMAScript 官方规范标准（ECMAScript Official Specification Standard）

（Recommend）推荐一个其它的收藏库，👉 https://github.com/sorrycc/awesome-javascript

• TC39 ECMAScript proposals - TC39 对 ECMAScript 标准制定提案的记录。
• OpenJS Foundation - 开源 JS 基金会，由 Node 基金会和 JS 基金会合并而成。

JS 代码风格规范

Code Style Specifications.

• JavaScript Standard Style - 支持 JSX 等语法，社区维护。
• Airbnb JavaScript Style Guide - 支持 React 技术栈，Airbnb 公司发布。
• Google JavaScript Style Guide - 仅支持原生 JavaScript，Google 公司发布。
• xo
• Principles of Writing Consistent, Idiomatic JavaScript
• clean-code-javascript - 如何编写干净简洁的 JavaScript 代码。

JS 在线资源

JavaScript related online tools.

• 关键概念（Key concepts）

  • DOM Events - DOM 事件运行机制的可视化。
  • SJSJ - JavaScript 术语介绍。
  • Modern JS Cheatsheet - 现代 JavaScript 概念要点。👉 中文翻译
  • What the f*ck JavaScript? - JavaScript 中有趣且易错的要点。
  • 33 js concepts - 包含了丰富的 JavaScript 相关的知识概念，学习资源。

• 技巧（Skills）

  • Tips, Tricks, Best Practices - 前端技巧和最佳实践。
  • Favorite JavaScript Utilities - JavaScript 编程技巧，一行代码。
  • Vanilla JavaScript Toolkit - 原生 JS 代码片段集合。
  • JS The Right Way - 一些 JavaScript 最佳实践。

• 工具集（Toolset）

  • JavaScripting - JavaScript 库、插件、框架资源。
  • Javascript.FUN - 在线网站，JavaScript 开发资源集合。
  • best of js

• 其它（Other）

  • ECMAScript 6 — New Features: Overview & Comparison - ES6 新特性与旧代码差异对比。
  • The Modern JavaScript Tutorial - 现代 JavaScript 教程。
  • Learn Vanilla JavaScript - 原生 JS 学习资源。
  • JSchallenger - 在线 JavaScript 编程训练。

JS 工具库

JavaScript tool libraries (browser-side), such as file manipulation, Canvas drawing, HTTP requests, etc.

see also 👉 Node.JS-工具库

• 实用工具（Utils）

• 文档对象模型（DOM）

  • jQuery - 前几年非常流行的 DOM 操作工具库，处理了兼容性的细节问题。
    • You might not need jQuery
    • Zepto.js - 兼容 jQuery API 的轻量级工具库，适合移动端使用。（ ⚠️ 不再更新）
    • cash-dom - 轻量级 DOM 工具库，可作为 jQuery 的替代，但仅支持现代浏览器。
    • Umbrella JS - 可替代 jQuery 的轻量级工具库。
    • Bliss.js - 基于原生 API 的轻量级工具库。
  • Lazy load
    • Lozad.js - 轻量、高性能图片懒加载工具，使用了 Intersection Observer API。
    • unlazy
    • imagesloaded - 检测图片何时加载完成。
    • infinite-scroll - 无限滚动。
  • clipboard.js - 现代的粘贴板工具库。
  • share-url - 现代的链接分享。
  • Tether - 元素跟踪定位工具。
    • popper.js - 元素定位工具。
  • Quicklink - 预请求视区内的资源，加快页面加载速度。
  • Dom operation
    • fastdom - 批处理 DOM 操作。
    • morphdom - 以优化的方式更新 DOM。
  • Canvas
    • print.js - 网页打印工具。
    • DOM to Image - 利用 HTML5 Canvas 生成 DOM 节点的快照图片。
      • html2canvas
      • rasterizeHTML.js
      • html-to-image
      • SnapDOM
    • signature_pad - 手写签名。
    • atrament - 手绘。
  • satori - 将 HTML 和 CSS 转换为 SVG。
  • linkifyjs - 处理文本中的链接、邮箱地址等，将其转为相应的 HTML 标签。

• 事件（Event）

  • BOM / Browser
    • history - 管理页面路由。
    • screenfull.js - 跨浏览器的 Fullscreen API。
  • Mobile Event / Gestures
    • Hammer.js - 支持移动端触摸事件，以及手势操作、多点触控。（ ⚠️ 不再维护）
    • zingtouch - （ ⚠️ 不再维护）
    • interact.js
    • @use-gesture/vanilla - 轻量级。
    • panzoom - 平移缩放。
  • Keyboard Event
    • Mousetrap - 处理键盘事件。
    • Hotkeys - 处理键盘事件。
    • Hotkey - 处理键盘事件。
  • Selecto.js - 拖动选择元素，支持鼠标和触摸事件。
  • Swapy - 使布局支持拖动交换。

• Cookie

  • js-cookie - 轻量的 Cookie 处理工具库。
  • universal-cookie

• 搜索（Search）

  • lunr.js - （ ⚠️ 不再更新）
  • fuzzy - （ ⚠️ 不再更新）
  • Stork
  • Orama Search
  • Fuse.js - 支持多字段搜索、加权搜索、以及高度可定制的模糊匹配算法。
  • fuzzysort - 模糊搜索并排序。
  • FlexSearch
  • search-index
  • MiniSearch
  • pagefind - 页面搜索工具。
  • uFuzzy - 轻量、高效的模糊搜索。
  • match-sorter -

• 客户端数据库（Client Database）

  • localForage - 离线存储，对 IndexedDB、WebSQL、localStorage 的封装。
  • SQL.js
  • LokiJS - 文档型内存数据库。
  • lowdb - 本地 JSON 数据库。
  • Dexie - 对 IndexedDB API 的轻量级封装。

• 多线程（Web Worker）

  • Comlink - 使 Web Worker 的使用更加简单、方便，Chrome 实验室发布。
  • web-worker - 跨平台的 Web Worker 实现， 支持 Node.js 与 Web 浏览器环境。

• 文件（File）

  • utils
    • FileSaver.js - Web 浏览器客户端文件保存 api 实现。
    • StreamSaver.js - Web 浏览器客户端异步保存文件 api 实现，解决了 FileSaver 的大小限制问题。
  • image
    • Jimp - 图片操作库。
    • Pica - 图片质量调整。
    • merge-images - 图片拼接合并。
    • blurify - 图片模糊化。
    • Compressor.js - 图片压缩。
    • Lena.js - 图片滤镜。
    • image-js - 图片数据科学处理。
  • audio / video
    • howler.js - 强大的音频处理工具库，支持所有的编解码器，跨浏览器支持。
    • Mediabunny
  • svg
    • Trianglify - 通过算法生成三角网 SCG 背景图。( 👉 https://trianglify.io/)

• 套接字（Socket / TCP）

  • socket.io-client - 优秀的实时通信客户端框架。
  • sockjs-client - 实时工具库，支持多种语言实现的后端。

• WebRTC

  • PeerJS - 对 WebRTC API 的简单抽象。

• 其它（Other）

  • HyperFormula - 计算引擎，商业产品 Handsontable 团队维护。

Go Top ↑

TypeScript

TypeScript 官网 - JavaScript 超集，强类型语言。

• TypeScript Performance Tips - TypeScript 性能优化，官方。

• typescript-cheatsheet - TypeScript 备忘单。

• TypeScript Deep Dive - 深入理解 TypeScript 相关概念知识。

• type-challenges

• 工具（Tools）

  • TypeScriptToLua - 用 TypeScript 编写 Lua。
  • type-fest - 包含一系列工具类型的库。
  • api-extractor - 帮助更好的管理 TypeScript 编写的包。
  • ts-reset - 增强内置类型。
  • tsdiagram - 可视化类型定义。
  • tsc-alias - 支持为生成的 js 文件添加扩展名。

Go Top ↑

UI 资源

UI resources.

21st.dev - 为设计师提供的 npm 平台。

字体图标

👉 设计工具 - 字体图标

UI 设计系统

Some open source, shared UI design kits.

• Primer - GitHub 设计，包含组件库、图标等资源，GitHub 官方发布。
• Material Design - Material 设计，包含组件库、图标等资源，Google 公司发布。
• Fluent UI - Fluent UI，包含组件库、图标等资源，Microsoft 公司发布。
• Carbon - Carbon 设计，包含组件库、图标、数据可视化工具等资源，IBM 公司发布。
• Spectrum - Spectrum 设计，包含组件库、图标、字体等资源，Adobe 公司发布。
• Ant Design - Ant 设计，包含组件库、图标、数据可视化工具等资源，阿里巴巴公司发布。
• TOAST UI - 包含日历、编辑器、网格组件，以及图表库，NHN 公司发布。

UI 组件

UI Component

Open UI

Bit，共享组件发布平台。

组件库

UI component library, providing a set of components with consistent design style.

Bootstrap

• Bootstrap - 最流行的 CSS UI 框架，Twitter 公司发布。
• Bootswatch - 开源免费的 Bootstrap 主题集合，非官方。
• MDB - 基于 Bootstrap 实现 Material Design 的 UI 组件库，非官方。

Material Design

• Material Design Lite - 基于 Material Design 的轻量级 CSS UI 框架，Google 官方发布。（ ⚠️ 不再更新）
• Material Components Web - 基于 Material Design 的 Web 组件库，Google 官方实现。
• Materialize - 最流行的实现了 Google Material Design 的 CSS UI 框架。

Animation Components

• Magic UI - 动画组件。
• Spark UI - 动画组件。
• Aceternity UI
• Animate UI

AI Chat

• LangUI

其它（Others）

• shadcn/ui
  • tweakcn.com - 设计 shadcn/ui 主题。
• UIkit - 轻量级的现代化前端模块化 CSS 框架。
• Framework7 - 跨平台 UI 库，支持 Android/ios/Desktop 平台，且主题样式设计适配相应平台。
  • Tailwind Mobile
• Onsen UI - 跨平台 UI 库，支持 Android/ios 平台，且主题样式设计适配相应平台。
• Metro 4
• Bulma
• Office UI Fabric Core - Office 风格的 UI 库，Microsoft 公司发布。
• carbon-components - Carbon 设计风格，IBM 公司发布。
• Spectrum CSS - Spectrum 设计，Adobe 公司发布。
• Pure.CSS - 一组小的，响应式的 CSS 模块。
• Pico.css - 极小的针对语义化 HTML 的 CSS 框架。
• Layui - 适合后端开发使用。
• Semantic UI - 很受欢迎的组件库。（ ⚠️ 不再更新）
• Skeleton - 简单的响应式 CSS 框架。（ ⚠️ 不再更新）
• egjs - 提供多个可用的独立组件。
• Theme UI - 设计图框架。
• WebTUI - 命令行终端风格。

独立组件

Independent UI components, only providing component modules that implement an interactive function.

• 表单组件（Form）

  • Cleave.js - 格式化输入框。
  • imask.js
  • tagify - 标签输入框。
  • flatpickr - 时间日期选择器。
  • layDate - 时间日期选择器。
  • Choices.js - 轻量的，可配置的输入框和选择器。
  • PicMo - Emoji 表情选择器。

• 轮播（Carousel）

  • Swiper
  • slick-carousel - 功能丰富的轮播组件。（ ⚠️ 不再更新）
  • Glider.js - 轻量级滑动组件。
  • Flickity
  • lory.js - 轻量级滑动组件。（ ⚠️ 不再更新）
  • keen-slider - 轻量级滑动组件。
  • Siema - 无任何依赖的轻量级轮播组件。（ ⚠️ 不再维护）
  • Flicking
  • splide.js - 轻量的轮播组件。

• Lightbox

  • GLightbox
  • spotlight
  • lightGallery
  • Parvus

• 模态框（Modal box）

  • SweetAlert - 浏览器 Alert 弹框的替代，更漂亮美观。（ ⚠️ 不再更新）
  • SweetAlert2 - SweetAlert 的继承者。
  • Noty - 浏览器 Alert 弹框的替代，提供动画效果。（ ⚠️ 不再更新）

• 图片浏览（Image Browse）

  • Viewer.js - 图片列表预览。
  • Image Compare Viewer - 图片对比预览。
  • Cropper.js - 图片裁剪。
  • Medium Zoom - 图片缩放预览。

• 表格（Table）

  • Grid.js - 高级表格插件。
  • Frappe Datatable
  • RevoGrid
  • Cheetah-Grid
  • Glide Data Grid - 快速的高性能的网格组件。

• H5 媒体（Audio & Video）

  • hls.js - HLS 协议支持。
  • video.js - 兼容大部分视频格式的视频播放器。
  • MediaElement.js - 非常漂亮的视、音频播放器。
  • Plyr - 很棒的视、音频播放器。
  • clappr - 视频播放器。
  • APlayer - 非常漂亮的音乐播放器。
  • DPlayer - 视频播放器。
  • Vime - 视频播放器。
  • Artplayer - 全功能 H5 播放器。
  • moovie - 转为电影播放的播放器。
  • wavesurfer.js - 音频可视化。
  • shaka-player - 视频播放器。

• 文件上传（File Upload）

  • FilePond - 文件上传。
  • DropzoneJS - 文件上传组件，支持拖放文件、图片预览功能。

• 拖拽布局（Drag Layout）

  • Muuri - 支持拖放布局、过滤动画等。（ ⚠️ 不再维护）
  • Packery
  • gridstack.js
  • DragSelect - 拖放布局，拖拽框选。
  • plain-draggable
  • draggable
  • DFlex

• 列表与网格（List & Grid）

  • List.js - 为列表提供过滤、排序等功能。
  • Dragula - 支持拖放排序的列表组件。（ ⚠️ 不再维护）
  • SortableJS - 支持拖放排序的列表组件，支持 React.js、Vue.js 等。
  • InfiniteGrid - 无限网格布局。
  • Masonry - 堆砌、瀑布流布局。

• 过滤器（Filter）

  • Isotope - 列表过滤动画。
  • FilterizR - 过滤搜索动画。

• 用户引导（User guided tours）

  • Driver.js
  • Shepherd
  • intro.js - 商业收费。

• 编辑器（Editor）

  • ProseMirror - 用来构建富文本编辑器的工具包。
  • TOAST UI Editor - 所见即所得编辑器。
  • slate
    • Platejs
  • Quill
  • Editor.js
  • CodeMirror - 代码编辑器。
  • Ace Editor - 代码编辑器。
  • Monaco Editor - 代码编辑器，VSCode 底层编辑器。
  • Lexical
  • Trix - 富文本编辑器。
  • BlockNote - 基于块的富文本编辑器。
  • overtype

• 窗口布局（Window layout）

  • WinBox - 窗口组件。
  • golden-layout - 多窗口布局管理。
  • split.js - 可拆分调整大小的窗口布局。

• HTML 邮件（HTML Email）

  • mjml

• 控制器面板（Controller Panel）

  • Tweakpane
  • lil-gui
  • dat.gui

• 其它（Others）

  • NProgress - 页面顶部进度条，加载指示器。
    • PACE - 页面加载指示器。
  • TOAST UI Calendar - 强大的日历日程组件。
    • FullCalendar - 日历日程组件。
  • fullPage - 全屏滚动页面，商业许可。
  • mailgo - 邮件和电话系统行为。
  • PulltoRefresh - 下拉刷新。
  • Holder.js - 图像占位符。
  • simple-drawing-board.js - 简单画板。
  • simple-keyboard - 虚拟键盘。
  • Tippy.js - 工具提示组件。
  • Smooth Scrollbar - 自定义滚动条，替代原生滚动事件。
    • OverlayScrollbars - 自定义滚动条。
    • BetterScroll
  • sharer.js - 创建社交网站分享按钮。
  • ninja-keys - 为页面添加键盘快捷键导航功能界面。
  • Atropos - 轻量的用于创建 3D 悬停视差效果的组件。
  • Barba.js - 在页面之间创建平滑的过渡动画。

UI 模板

UI template.

• tabler - 开源免费的可视化管理页面模板。

Go Top ↑

开发框架

Web front-end development framework (library).

• virtual DOM

  • React.js - 数据驱动的视图库，Facebook 公司发布。
    • Awesome-React.js
    • htm - 直接在浏览器中编写 React 组件。
  • Vue.js
  • Hyperapp - 轻量的，纯函数式，声明式开发框架。
  • Snabbdom - 基于虚拟 DOM 机制，模块化、高性能开发框架。
  • mithril.js
  • blockdom

• MVC

  • Backbone.js - 为 Web 应用开发引入 MVC 模型概念。

• MVVM

  • Knockout.js - （ ⚠️ 不再更新）

• Angular.js - 一个比较重型的功能齐全的前端开发框架，Google 公司发布。（ ⚠️ 不再更新）

  • Angular - Angular.js 的继承者，支持全平台开发。

• Ember.js - 基于 Glimmer 引擎的 Web 全栈框架。

  • Glimmer.js - DOM 渲染引擎。

• Svelte - 更轻量的前端 UI 库。

  • Sapper - 基于 Svelte 的 Web App 开发框架。

• Web Components

  • LitElement - 用于创建 Web 组件的基类工具库。
  • Hybrids - 用于创建 Web 组件的 UI 库。
  • Riot.js - 基于组件的 UI 库。
  • stencil.js

• Marko - 声明式、响应式开发框架，流式渲染。

• Inferno - 类 React API 的 UI 库。

• Solid - 纯粹的反应式框架，基于 React 的理念，底层实现不再使用虚拟 DOM。

• Alpine.js - 轻量的 JavaScript 框架。

• Aurelia

• Astro

• htmx - 轻量级属性指令驱动 Web 开发。

• Web 浏览器扩展（Web Browser Extension）

  • WXT

Go Top ↑

应用状态管理

Application state management tool for modern web application development.

（Recommend）Redux 生态技术，👉 https://github.com/markerikson/redux-ecosystem-links

• Redux

  • Redux Thunk - 中间件，提供异步支持，官方发布。
  • Redux-Saga - 提供异步支持，比 Redux Thunk 功能更丰富，易于测试。
  • Reselect - 状态缓存，提高性能，官方发布。
  • Redux-Persist - 状态持久化。
  • Redux Logger - 中间件，调试工具，追踪状态变更日志。
  • Redux DevTools - Chrome 插件，调试工具，追踪状态变更日志，重放、快照等功能。
  • Redux Toolkit - 集成大部分第三方库、预配置的工具套件，使 Redux 更易于使用，官方发布。
  • Rematch - 对 Redux 进行了封装，提供更简单、更易理解、更容易使用的 API。

• MobX

• Flux - 应用状态管理，Facebook 公司发布。（ ⚠️ 不再积极更新）

• xstate - 基于状态机模型。

• Tools

  • Immutable.js - 不可变数据。
  • Immer - 不可变数据。
  • Mutative - 比 Immer 性能更高。

Go Top ↑

PWA

Progressive web apps.

• PWA Inside - PWA 应用资源和商店。
• Progressive Web Apps - PWA 应用相关文章。
• Add a web app manifest - PWA 应用 manifest.webmanifest 文件中建议的字段。
• What PWA Can Do Today - 在线测试 PWA 应用可以调用的 Web API。
• Progressier - 轻松创建 PWA。
• WorkBox - Google 专门为构建 PWA （Progressive Web App，渐进式 Web 应用）提供的一套开发工具，支持多个平台，并提供了方便的 webpack 插件。

Go Top ↑

深入探索

Explore the principles behind the technology, the underlying architecture, etc.

JS 引擎/运行时

Javascript Engine/Runtime.

• 核心库（Core Library）

  • SpiderMonkey - Firefox 浏览器 JS 引擎，Mozilla 开发。
  • QuickJS
  • JavaScriptCore
  • Hermes - 为 React Native 准备的 JS 引擎，Facebook 开发。

• 实现分析（Implementation Analysis）

  • Tasks, microtasks, queues and schedules - JS 中的任务、微任务、队列和调度过程。
    • JavaScript Visualizer 9000 - 可视化脚本执行，任务队列，微任务队列，UI 更新的过程。
    • Shared Event-loop for Same-Origin Windows - 同源窗口可能会共享事件循环。
  • JavaScript Event Loop vs Node JS Event Loop - 浏览器中的 JS 事件循环。
  • ES modules: A cartoon deep-dive - ES module 的实现分析。
    • import-maps - importmap 规范。

抽象语法树

Abstract syntax tree.

• Read JavaScript Source Code, Using an AST - 文章，通过 AST 了解 JavaScript 源码。
• AST Explorer - 在线预览 JavaScript 代码片段的 AST。
• ts-ast-viewer - 语法抽象树查看器。

性能分析

Performance analysis.

• 概念（Concept）

  • Web Vitals - Web 性能指标，Google 提出，并提供 npm 工具包。
  • Front-End Performance Checklist 2021 - 前端性能检查清单。

• 工具（Tools）

  • Perfume.js - 性能监控工具。
  • stats.js - 性能监控调试面板。
  • fpsmeter - FPS 监视器。

• 其它（Others）

  • Maybe you don't need Rust and WASM to speed up your JS

应用架构

Application architecture patterns.

• Jamstack - 一种构建现代 Web 应用或网页的架构模式。
• Theoretical foundations for server-side rendering and static-rendering

其它

something more in-depth.

• What does 100% mean in CSS - CSS 中 100% 的含义。
• The complete guide to CSS media queries
• Web Applications 101
• The Super Tiny Compiler - 了解一些编译原理。
• Client-side Rendering - 客户端渲染案例研究。

Go Top ↑

更多

More useful related resources.

CDN

Content distribution network, static resource hosting.

• Global

  • jsDelivr
  • UNPKG
  • cdnjs
  • Google Hosted Libraries
  • ES Module 格式
    • ESM
    • Skypack
    • jspm

• China

  • BootCDN - Bootstrap 中文网维护，cdnjs 的国内同步源。
  • 75CDN - 奇虎 360 前端团队奇舞团维护。
  • Staticfile CDN - 七牛云与掘金维护。
  • loli.net - cdnjs 的国内同步源。

在线工具

Some online resources, such as CDN, image compression tools, online IDE, etc.

• Web 安全（Web Security）

  • SRI Hash Generator - SRI 的 hash 生成。

• Web 优化（Web Optimization）

  • Lighthouse - Google 提供的一个网站优化检测分析工具，已被集成在 Chrome 开发工具中，也可以作为 Chrome 扩展或者命令行工具使用，Google 官方提供。
  • PageSpeed Insights - Google 提供的在线网站性能检测工具，提供优化建议和技巧，Google 官方提供。
  • Mobile Friendly - 测试网页是否移动端友好。
  • webhint - 类似 Lighthouse，OpenJS 基金会项目。
  • Waterfaller - 用来分析站点网络请求并提供优化建议的工具。
  • Yellow Lab Tools - 站点分析优化工具。
  • Varvy SEO tool - 一个在线网站 SEO、性能检测工具，提供优化建议和技巧。
  • What Web Can Do - 可以检测当前设备所支持的 Web API，主要检测硬件设备传感器等，非官方网站。

• 其它（Others）

  • bit - 构建可重用组件的协作平台。
  • Prettier Playground - Prettier 代码格式化工具的在线版本。

其它

Other unclassified resources.

• JavaScript Open Source Award - JavaScript 开源项目奖，非官方。
• You Don't Need - 随着语言规范的更新，一些第三方工具库可以不再使用，用原生 JS 来实现。

Go Top ↑