跳到主要内容

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.

  • 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）

    • Chrome Blink status - Google Chrome 的 Blink 引擎功能特性的官方实现和标准化的开发状态查询列表，官方网站。
    • Firefox status - Firefox 的 Web 平台功能的官方实现和标准化路线图查询列表，官方网站。
    • Webkit - Webkit 浏览器引擎的官方网站，可查询其功能特性的实现和标准化状态，官方网站。
    • Can I use - 可以查询特定 Web API（H5、CSS3）在各个浏览器平台的实现和标准化状态，非官方网站。
    • Can I email - 可以查询特定 Web API（H5、CSS3）在各个邮件客户端平台的实现和标准化状态，非官方网站。
    • compatibility table - 可以查询 ECMAScript API 在各平台实现的状态，非官方网站。

  • 开发文档（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）

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

Go Top ↑

HTML​

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

HTML 代码风格规范​

Code Style Specifications.

HTML 在线资源​

HTML related online tools and documents, etc.

HTML 工具库​

HTML tool library, dealing with compatibility issues, etc.

Go Top ↑

CSS​

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

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

CSS 代码风格规范​

Code Style Specifications.

CSS 在线资源​

CSS related online tools and documents, etc.

CSS 工具库​

CSS tool library, dealing with compatibility issues, etc.

Go Top ↑

JavaScript​

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

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

JS 代码风格规范​

Code Style Specifications.

JS 在线资源​

JavaScript related online tools.

JS 工具库​

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

see also 👉 Node.JS-工具库

Go Top ↑

TypeScript​

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

Go Top ↑

UI 资源​

UI resources.

字体图标​

👉 设计工具 - 字体图标

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 框架。
其它（Others）​
  • UIkit - 轻量级的现代化前端模块化 CSS 框架。
  • Framework7 - 跨平台 UI 库，支持 Android/ios/Desktop 平台，且主题样式设计适配相应平台。
  • 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 - 设计图框架。
  • shadcn/ui

独立组件​

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

UI 模板​

UI template.

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

Go Top ↑

开发框架​

Web front-end development framework (library).

  • virtual DOM

  • MVC

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

  • MVVM

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

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

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

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

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

  • Web Components

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

  • Inferno - 类 React API 的 UI 库。

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

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

  • Aurelia

  • Astro

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

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

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

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.

抽象语法树​

Abstract syntax tree.

性能分析​

Performance analysis.

应用架构​

Application architecture patterns.

其它​

something more in-depth.

Go Top ↑

更多​

More useful related resources.

CDN​

Content distribution network, static resource hosting.

在线工具​

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

  • Web 安全（Web Security）

  • 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.

Go Top ↑