牧涯前端学习笔记

Appearance

前端开发生态库 ​

npm 官网 ​

生态库榜单 ​

MDN ​

TypeScript ​

流行的 Web 用户界面框架 ​

  • 一些流行的 javascript 框架的性能比较

  • web components 库

  • vue 和 React 框架对比

  • vue2

    • 介绍

      • 渐进式 JavaScript 框架

    • 网址

    • Vue2 UI 界面组件库

      • PC 端

        • Element UI

          • 介绍

            • Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

            • Element 是饿了么前端开源维护的 Vue UI 组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。

            • 组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的 Element 教程和文章比较多。

            • Element 应该是一个质量比较高的 Vue UI 组件库。

          • 网址

        • Quasar Framework

          • 介绍

            • Quasar（发音为/kweɪ.zɑɹ/)是 MIT 许可的开源框架（基于 Vue），可帮助 Web 开发人员创建：

              • 响应式网站

              • PWA（Progressive Web App）

              • 通过 Apache Cordova 构建移动 APP（Android，iOS，…）

              • 多平台桌面应用程序（使用 Electron）

            • Quasar 允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App 和 Electron App。使用最先进的 CLI 设计应用程序，并提供精心编写，速度非常快的 Quasar Web 组件。

            • 当使用 Quasar 时，你不需要像 Hammerjs，Momentjs 或 Bootstrap 这样的额外重型库。它拥有这些功能，而且体积很小

          • 网址

        • Vuetify

          • 介绍

            • Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。 不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及

            • 所有组件遵从 Material Design 设计规范，UI 体验优秀，能够媲美苹果但又完全不同的设计采用移动优先的设计；

            • 无论在手机、平板或 PC 电脑上都有完美的适配；

            • 极其丰富详细的上手文档和免费的视频教程，社区活跃，全职团队维护，长期提供支持，每周发版；

            • 支持主题定制，提供无障碍（面向缺陷人群的访问）支持。支持树摇优化，能大大减少打包体积。

          • 网址

        • View UI

          • 介绍

            • View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

            • 特性

              • 丰富的组件和功能，满足绝大部分网站场景；

              • 提供开箱即用的 Admin 系统 和 高阶组件库，极大程度节省开发成本；

              • 提供专业、优质的一对一技术支持；

              • 友好的 API ，自由灵活地使用空间；

              • 细致、漂亮的 UI；

              • 事无巨细的文档；

              • 可自定义主题。

          • 网址

        • iView

        • Bootstrap-Vue

          • 介绍

            • Bootstrap-VUE 提供了基于 vue2 的 Bootstrap V4 组件和网格系统的实现，完成了广泛和自动化的 WAI ARA 可访问性标记。

            • Bootstrap 4 是最新发布的版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。

            • 同时 Bootstrap.min.css 的体积减少了 40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。

            • 想当初刚流行响应式网站的时候，Bootstrap 是世界上最受欢迎的建立移动优先网站的框架，Bootstrap 可以说风靡全球。就算放在现在很多企业网站都是采用 Bootstrap 做的响应式。

            • Bootstrap-Vue 可以让你在 Vue 中也实现 Bootstrap 的效果。

          • 网址

        • Ant Design Vue

          • 介绍

            • Ant Design Vue 是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。

            • 在 GitHub 上可以找到几个 Ant Design 的 Vue 组件。不过相比较而言，Ant Design Vue 更胜一筹。

            • Ant Design Vue 共享 Ant Design of React 设计工具体系，实现了所有 Ant Design of React 的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉 Ant Design 的在使用 Vue 时，很容易的上手。

          • 网址

        • HEYUI

        • VEUI

        • Semantic-UI-Vue

        • Vue Material

          • 介绍

            • Vue-material 是一个建立在谷歌的 Material Design 基础上的轻量级框架，是一个实现 Google 像素材料设计的 Vue 组件库，它提供了适合所有现代 Web 浏览器的内置动态主题的组件，它的 API 也简单明了。

            • Vue Material 是一个轻量级的框架， 建立在谷歌的 Material Design 基础上。设计强大的和美观的 web 应用并适用于不同的屏幕。

          • 网址

        • Buefy

          • 介绍

            • Buefy 基于 Bulma 和 Vue.js 的轻量级 UI 组件，它提供了即装即用的轻量级组件。

            • Buefy 的特性：

              • 专注于可用性和性能，而无需过渡动画；

              • 轻松保留当前的布尔玛主题/变量；

              • 支持 Material Design 图标和 FontAwesome；

              • 非常轻巧，除了 Vue＆Bulma 之外没有任何内部依赖性；

              • 语义代码输出；

              • 遵循布尔玛设计和一些 Material Design UX；

          • 网址

        • Vuesax

          • 介绍

            • Vuesax 是基于 Vue.js 的组件框架,从零开始设计，可以逐步采用。Vuesax 致力于促进应用程序的开发，在不删除必要功能的情况下改进其设计。“我们希望所有组件具有独立的颜色，形状和设计，以实现我们前端喜欢的自由设计，同时又不损失创作和生产的速度。”

            • 2020 年已停止维护

          • 网址

        • Muse-UI

          • 介绍

            • Muse-UI 基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有 40 多个 UI 组件，用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用

            • 停止维护

          • 网址

        • BalmUI

      • 移动端

        • Vant

          • 介绍

            • Vant 是开源的移动端组件库，Vant 是一个轻量、可靠的移动端 Vue 组件库。Vant 是有赞团队开源的，主要维护也是有赞团队。于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

            • 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

            • Vant 性能极佳，组件平均体积小于 1KB（min+gzip），封装了 65+ 个高质量组件，覆盖移动端主流场景。

          • 网址

        • NutUI

          • 介绍

            • NutUI 2.0 是京东发布的 Vue 2 移动端 UI 组件库。一套京东风格的轻量级移动端 Vue 组件库

            • 特性

              • 50+ 高质量组件

              • 40+ 京东移动端项目正在使用

              • 基于京东 APP 7.0 视觉规范

              • 支持按需加载

              • 详尽的文档和示例

              • 支持定制主题

              • 支持多语言（国际化）

              • 支持 TypeScript

              • 支持服务端渲染（Vue SSR）

              • 单元测试加持

              • 配套有基于 Webpack 的构建工具，可快速创建已内置本组件库的 Vue 工程

          • 网址

        • Quasar Framework

          • 介绍

            • Quasar（发音为/kweɪ.zɑɹ/)是 MIT 许可的开源框架（基于 Vue），可帮助 Web 开发人员创建：

              • 响应式网站

              • PWA（Progressive Web App）

              • 通过 Apache Cordova 构建移动 APP（Android，iOS，…）

              • 多平台桌面应用程序（使用 Electron）

            • Quasar 允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App 和 Electron App。使用最先进的 CLI 设计应用程序，并提供精心编写，速度非常快的 Quasar Web 组件。

            • 当使用 Quasar 时，你不需要像 Hammerjs，Momentjs 或 Bootstrap 这样的额外重型库。它拥有这些功能，而且体积很小

          • 网址

        • Mand Mobile

          • 介绍

            • Mand Mobile 是面向金融场景的 Vue 移动端 UI 组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。Mand Mobile 含有丰富的组件 30+的基础组件，覆盖金融场景，极高的易用性组件均有详细说明文档、案例演示，汲取最前沿技术，组件化轻量化实现，兼顾稳定和品质，努力实现金融场景的全覆盖。

          • 网址

        • Vuetify

          • 介绍

            • Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。 不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及

            • 所有组件遵从 Material Design 设计规范，UI 体验优秀，能够媲美苹果但又完全不同的设计采用移动优先的设计；

            • 无论在手机、平板或 PC 电脑上都有完美的适配；

            • 极其丰富详细的上手文档和免费的视频教程，社区活跃，全职团队维护，长期提供支持，每周发版；

            • 支持主题定制，提供无障碍（面向缺陷人群的访问）支持。支持树摇优化，能大大减少打包体积。

          • 网址

        • Mint UI

          • 介绍

            • Mint UI 基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。

            • Mint UI 是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。

            • Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于 Mint UI 来讲的，开发移动端 web 项目还是很方便，文档也很简介明了。

            • Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。它可以实现真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

            • 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

            • 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 100kb+。

            • 2018 年后已经停止维护

          • 网址

        • Vux

          • 介绍

            • Vux 是基于 WeUI 和 Vue2.x 开发的移动端 UI 组件库，主要服务于微信页面

            • Vux 的定位已经很明确了，一是：Vue 移动端 UI 组件库，二是：WeUI 的基础样式库。

            • Vux 的组件涵盖了所有的 WeUI 的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle

            • Vux 是个人维护的。在 GitHub 上看到对 issue 的关闭还是很迅速的。Vux 文档基本的组件用法和效果都讲解到位了

          • 网址

        • AT-UI

          • 介绍

            • AT-UI 京东凹凸实验室开发，一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品，支持现代浏览器和 IE9 及以上。AT-UI 更加精简，实现了后台常用的组件。

            • 2018 年停止维护

          • 网址

        • cube-ui

          • 介绍

            • cube-ui 是基于 Vue.js 实现的精致移动端组件库。

            • 由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

            • 在交互体验方面追求极致。遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

          • 网址

    • 单组件

    • 服务端渲染

    • 地址例子

      • 介绍

      • 网址

        • github

        • 官网

  • vue3

    • 介绍

      • 易学易用，性能出色，适用场景丰富的 Web 前端框架。

    • 网址

    • Vue3 UI 界面组件库

      • PC 端

        • Arco.Design：字节跳动出品的企业级 UI 组件

        • Element Plus

        • Naive UI

        • Ant Design Vue UI

          • 介绍

            • Ant Design Vue 是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。

            • 在 GitHub 上可以找到几个 Ant Design 的 Vue 组件。不过相比较而言，Ant Design Vue 更胜一筹。

            • Ant Design Vue 共享 Ant Design of React 设计工具体系，实现了所有 Ant Design of React 的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉 Ant Design 的在使用 Vue 时，很容易的上手。

          • 网址

        • iView UI

          • 介绍

            • iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView 的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的 Vue UI 组件框架。iView 生态也做得很好，还有开源了一个 iView Admin，做后台非常方便。官网上介绍，iView 已经应用在 TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

          • 网址

        • Quasar Framework

          • 介绍

            • Quasar（发音为/kweɪ.zɑɹ/)是 MIT 许可的开源框架（基于 Vue），可帮助 Web 开发人员创建：

              • 响应式网站

              • PWA（Progressive Web App）

              • 通过 Apache Cordova 构建移动 APP（Android，iOS，…）

              • 多平台桌面应用程序（使用 Electron）

            • Quasar 允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App 和 Electron App。使用最先进的 CLI 设计应用程序，并提供精心编写，速度非常快的 Quasar Web 组件。

            • 当使用 Quasar 时，你不需要像 Hammerjs，Momentjs 或 Bootstrap 这样的额外重型库。它拥有这些功能，而且体积很小

          • 框架特点

            • 开箱即用，上手简单，UI 风格遵循 Material 指南

            • 官方提供的 CLI 对多种开发模式（SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展）提供了一流的支持，开发体验很好

            • 内置主题定制工具以及对 Sass / SCSS / Stylus 变量的支持，快速定制适合项目特性的风格

            • 性能顶级，在不同平台体验流畅，自动树摇模式，极大地减少包大小

            • 国际化和本地化，有超过 40 种 Quasar 语言包可用。 如果缺少所需的语言包，则只需 5 分钟即可添加。

            • 花费大量精力编撰的开发文档，以及很棒的中文社区

            • 频繁的更新迭代和确定的发布周期

          • 网址

        • Element 3

          • 介绍

            • 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

            • 因为 element 官方库迟迟不兼容 vue3，所以社区出的一套库

            • 现在用 Element Plus 就好了

          • 网址

        • Varlet

        • Vue DevUI

        • HEYUI

        • Vuetify

        • Nuxt3

        • Vexip UI

        • BalmUI

          • 介绍

            • 基于 vue2 和 Vue 3 的模块化且高度可定制化的 Material Design 风格 UI 组件库，一款漂亮大气、交互动效优秀的 Vue 3 UI 组件库

            • BalmUI 是一款由 Balm.js （一款类似 Vue CLI 的前端工作流工具）团队打造前端 UI 组件库，基于最新的 Vue 3 构建，开箱即用，定制化强，设计风格完全遵循谷歌的 Material Design 设计规范，是一款交互体验非常优秀的 UI 组件库。

          • 网址

        • primevue

          • 介绍

            • 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库，来自国外的一个优秀的前端 UI 组件库，很有特色，值得研究学习和上手使用。

            • PrimeVue 是一套非常优秀的 Vue UI 组件库，支持 Vue 3 的 web UI 组件库，组件丰富，定制性很强，官网文档清晰，代码例子充足，而且中文化也做得很不错，是一款可用性很强的 Vue 组件库。

          • 网址

        • Vuestic UI

          • 介绍

            • 免费开源的高质量 Vue3 UI 组件库，还内置了漂亮的 Vuestic Admin 后台框架，漂亮的 Vue 3 组件库，风格大气国际化，自带 admin 框架，开箱即用

            • Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库，最近更新发布了 Vue3 版本，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久，便成为使用 Vue 构建的最受欢迎的组件库之一。

          • 网址

        • Fighting Design

          • 介绍

            • Fighting Design 是一款灵活、优质的前端组件库，基于当前流行的 Vue3.2 + TypeScript + Vite 开发，方便开发者在 Vue3 项目中快速集成。和绝大多数开源的组件库不同，这个项目主要由来自杭州的开发者田同学 开发和维护

            • Fighting Design 目前提供了数十个前端开发常用的基础组件，UI 设计颜值在线，设计风格中性耐看，也拥有详细的使用文档，上手使用很简单。

            • Fighting Design 每一个组件都有代码示例，文档编写得也很好，使用非常简单。骨架屏、水印、日历这几个组件做得很不错，很实用。

          • Fighting Design 的技术特性

            • 使用 Vue3 最新特性开发

            • 全面基于 Vite，速度够快

            • 没有第三方依赖，够纯粹

            • 提供不同打包模式，兼容不同项目

            • 支持完整引入和按需引入，减少打包体积

            • 使用 TypeScript + Template 编写，严格的 TypeScript 类型，全局无 any 类型

            • 完善的单元测试

          • 官网

      • 移动端

        • Vant UI：有赞移动端组件库

          • 介绍

            • Vant 是一个轻量、可靠的移动端 Vue 组件库。Vant 是有赞团队开源的，主要维护也是有赞团队。

            • Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。截止到目前，Vant 已经开源了 50+ 个经过有赞线上业务检验的组件。

            • 比如：、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的，不太在意界面，实现业务逻辑的话，用 Vant 组件库开发还是很快的

          • 网址

        • NutUI：京东 Vue 3 移动端 UI 组件库

          • 介绍

            • NutUI 3.0 是京东发布的 Vue 3 移动端 UI 组件库。对移动端友好，特别针对移动端电商业务场景优化测试。70+ 高质量 UI 组件，基于京东 APP 10.0 对视觉规范开发，支持按需引用，支持 TypeScript，支持主题定制。可以使用 Vue 语言来编写在 H5、小程序平台上的应用，帮助我们提升开发效率，改善开发体验。

          • 网址

        • Quasar Framework

          • 介绍

            • Quasar（发音为/kweɪ.zɑɹ/)是 MIT 许可的开源框架（基于 Vue），可帮助 Web 开发人员创建：

              • 响应式网站

              • PWA（Progressive Web App）

              • 通过 Apache Cordova 构建移动 APP（Android，iOS，…）

              • 多平台桌面应用程序（使用 Electron）

            • Quasar 允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App 和 Electron App。使用最先进的 CLI 设计应用程序，并提供精心编写，速度非常快的 Quasar Web 组件。

            • 当使用 Quasar 时，你不需要像 Hammerjs，Momentjs 或 Bootstrap 这样的额外重型库。它拥有这些功能，而且体积很小

          • 网址

    • Vue3 快速开发模板

    • 单组件

    • 其他生态

      • Pinia：新一代状态管理工具

        • 介绍

        • 特点

          • 新一代状态管理工具

          • Vue2、Vue3 都可使用

          • 大小约 1kb

          • dev-tools 支持

            • 跟踪动作、突变的时间线

            • Store 出现在使用它们的组件中

            • time travel 和 更容易的调试

          • 热模块更换

            • 在不重新加载页面的情况下修改您的 Store

            • 在开发时保持任何现有状态

          • 插件：使用插件扩展 Pinia 功能

          • 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

          • 服务器端渲染支持

        • 网址

    • 服务端渲染

  • React

    • 介绍

      • 用于构建用户界面的 JavaScript 库

    • 网址

    • UI 界面组件库

      • Ant Design：企业级 UI 设计语言和 React UI 库

        • 介绍

          • 由阿里蚂蚁部门开发的开源免费的企业级 UI 设计语言和 React UI 库

          • GitHub 上超过 269 k 个项目使用了 Ant Design 组件库，Ant Design of React 是一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

          • Ant Design 组件库主要有以下特性：

            • 🌈 提炼自企业级中后台产品的交互语言和视觉风格。

            • 📦 开箱即用的高质量 React 组件。

            • 🛡 使用 TypeScript 开发，提供完整的类型定义文件。

            • ⚙️ 全链路开发和设计工具体系。

            • 🌍 数十个国际化语言支持。

            • 🎨 深入每个细节的主题定制能力。

          • 当然，Ant Design 也是有缺点的，其包的大小有 1.2 MB（缩小 +gzip 压缩后 349.2kB），而其他 React 库通常为几百 KB。

          • Ant Design 提供了大量高质量的组件，非常适合快速构建整个 UI 框架，也可以只使用单个组件。该库基于 43.9% 的 TypeScript、31.3% 的 JavaScript、24.5% 的 Less 和 0.3% 的其他代码。

          • 优点：

            • AntDesign 随附了大量支持文档，有一个社区，包括一个带有预制模板的单独项目（AntDesignPro）；

            • 可用来快速设计后台 / 内部应用的 UI 库。

          • 缺点：

            • 缺乏可访问性；

            • 体积很大，预计会对性能产生较大影响；

            • 污染你的 CSS（期望添加!important 以防止它样式化你的非 Ant 组件）

        • 网址

      • ant-design-mobile：用于构建移动 Web 应用的基本 UI 块

        • 介绍

          • 用于构建移动 Web 应用的基本 UI 块。

          • 特性

            • 快速：它针对恶劣场景进行了精心优化，无需配置，即可获得最佳的封装尺寸和终极性能。

            • 可自定义：基于 CSS 变量，您可以可靠有效地调整组件的外观或创建自己的主题。

            • 原子：每个组件的功能，无论是多还是少，正是你需要的。

            • 流畅：通过流畅的手势和细腻的动画，它有助于产品创造终极体验。

        • 网址

      • ice 飞冰：基于 React 的研发解决方案

      • Material UI：Google 的 Material Design 定制 React 组件库

        • 介绍

          • GitHub 上超过 781k 个项目使用了 MUI

          • 包大小（来自 BundlePhobia）：缩小后 325.7kB，缩小 +gizp 压缩 92kB，通过压缩减少体积

          • 它是一个基于 Google 的 Material Design 的简单且可定制的 React 组件库。MUI 不仅是一个组件库，而是一个完整的设计系统。它具有一套完整的指南、设计原则和 UI 设计最佳实践系统。MUI 使用了 61.4% 的 JavaScript 和 38.6% 的 TypeScript 来构建。

          • 由于 MUI 基于的 Material-UI 设计系统是由 Google 创建的，所以它也会在 Google 的一些平台上使用。因此，MUI 组件可以具有类似于 Google 的外观和感觉，这意味着 MUI 可以成为构建 Android 应用程序的绝佳选择。

          • 优点：

          • 缺点：

            • 定制起来既困难又痛苦，但却很有必要（以改善视觉效果）；

            • 性能：会渲染过多的 DOM 节点；

            • 你的应用看起来会像谷歌的产品（对于某些人来说，这可能代表一种专业风格）。

        • 网址

      • 两个带有 Bootstrap 的 React 绑定库

        • 简介

          • 优点：

            • 带有 React 绑定的 Bootstrap 库，大家都喜欢；

            • 通过 CSS-in-JS 轻松自定义；

            • 它已经流行了足够长的时间了，因此不必担心错误 / 问题；

            • 快速上手；

            • 没有 jQuery 依赖，因为它已在 React 中完全重新实现。

          • 缺点：

            • 这是 Bootstrap：如果你不做自定义，则你的网站将与其他网站没什么区别。

        • React Bootstrap

          • 介绍

            • 在 GitHub 上有大概 649k 个项目使用 React-Bootstrap，是比较古老的 React UI 组件库之一。

            • 包大小（来自 BundlePhobia）：缩小后 111kB，缩小 +gzip 压缩后 34.4kB，通过压缩减少体积

            • 它是使用 React 来重新构建了前端框架 Bootstrap。该库由完全响应并且可访问的现成的组件组成。所有设计元素都是高度可定制的。

            • React-Bootstrap 可以用于 UI 基础、网站和设计应用程序。

            • 该库使用 59.4% 的 JavaScript、38.3% 的 TypeScript 和 2.3% 的 SCSS 构建，最新版本可以与最新的 Bootstrap 5.1 版本兼容。

            • 我们可以 使用 React-Bootstrap 只导入需要使用的单个组件，这也有助于最大限度地减少代码总量。不过，React-Bootstrap 相对于其他组件库，组件会少一点。

          • 网址

        • Reactstrap

          • 介绍

            • 在 GitHub 上有 250k 个项目使用了 Reactstrap。Reactstrap 组件元素响应迅速，设计简单，适用于各种项目。

            • Reactstrap 使用 74.7% 的 JavaScript、24.9% 的 TypeScript 和 0.4% 的 Shell 构建。

            • 我们可以使用 Reactstrap 进行完整的 UI 开发或者使用单个组件开发。它提供了极大的灵活性和预构建的验证，非常适合快速构建具有出色用户体验的精美表单。

            • 由于 Reactstrap 是一个比较年轻的组件库，所以它的可用组件相对其他组件库来说会略少一点。

          • 网址

      • Semantic UI React

        • 介绍

          • Semantic UI React 被 GitHub 上 136k 个项目使用，是一个用于移动端的响应式前端组件库。

          • 它是 Semantic UI 开发框架的官方 React 集成，以响应迅速、人性化的 HTML 代码而闻名。

          • Semantic UI React 使用 99.9% 的 JavaScript 和 0.1% 的 TypeScript 构建。

        • 网址

      • Chakra UI

        • 介绍

          • Chakra UI 被 GitHub 上的 41.9k 个项目使用，提供了简单的、模块化的和可定制的 React 组件来支持应用程序和 Web 开发。所有元素也针对暗模式进行了优化，与其他一些 UI 组件库不同的，Chakra UI 完全兼容 WAI-ARIA 可访问性标准。

          • Chakra UI 使用 97.5% 的 TypeScript、1.9% 的 JavaScript 和 0.6% 的其他代码构建。

          • 包大小（来自 BundlePhobia）：缩小后为 326.2kB，缩小 +gzip 压缩后为 101.2kB，通过压缩减少体积

          • Chakra UI 的一大特点就是简单。它非常关注开发过程，并承诺将花费更少的时间编写代码，而将更多的时间用于构建出色的用户体验。

          • 但是，其他 React UI 组件库相比，Chakra UI 相对较新，所以会缺乏一些功能和组件。因此，它更适合用于不需要大量组件或高级功能的中小型项目。

        • 网址

      • semantic-ui

      • Evergreen UI

      • mantine：React 组件库

        • Mantine 是个 React 组件库，包含 120+ 可定制组件和 Hook，支持暗黑主题。你可以按需勾选所需组件，并快速构建全能的 Web 应用，Mantine 已经被 2k+ 项目采用。

        • 网址

      • nextui：高颜值 React UI 库

      • Semi Design：抖音系推出的 React UI 组件库

      • fluentui

      • rsuite

        • 介绍

          • RSUITE（React Suite）是一套用于企业系统产品的 React 组件库。由 HYPERS 前端团队和 UX 团队共同构建，主要服务于公司的大数据产品。

        • 网址

      • 28 个顶级的 React UI 组件库，请查收！_mb5fd86d34c044c 的技术博客_51CTO 博客

        • 介绍

        • 网址

          • github

          • 官网

    • 单个组件

    • 服务端渲染：Next.js

      • 介绍

        • 实际上，Next.js 是一个全栈框架，它提供了生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取 构建脚本、打包命令、开发工具、路由、状态管理、网络请求、SASS/LESS、服务端渲染 等功能 无需任何配置。

        • Next.js 则是基于 React 的一款应用框架，基于 Next.js 你可以更便捷地上手开发 React 应用。

        • Next.js 是一个用于生产环境的 React 应用框架，使用它可以快速上手开发 React 应用，而不需要花很多时间和精力去折腾各种开发工具。所谓的用于生产环境，是指功能和稳定性足够，有大量的实际应用案例。常用于 React 服务端渲染应用。

      • Next.js 的特点如下：

        • 增量静态生成： 在构建之后以增量的方式添加并更新静态预渲染的页面。

        • 支持 TypeScript： 自动配置并编译 TypeScript；

        • API 路由： 创建 API 端点（可选）以提供后端功能；

        • 内置支持 CSS： 使用 CSS 模块创建组件级的样式。内置对 Sass 的支持；

        • 代码拆分和打包： 采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法；

        • 零配置： 自动编译并打包。从一开始就为生产环境而优化；

        • 混合模式： SSG 和 SSR：在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR）；

      • 网址

    • 开发工具

      • Reactide

        • 介绍

          • Reactide 是一个非常棒的 IDE，致力于开发 React Web 应用程序。它具有许多开箱即用的功能，例如组件可视化和热模块重新加载。

          • Reactide 是 React Web 应用开发的专用 IDE

        • 网址

      • React Developer Tools

        • 介绍

          • React Developer Tools 是每个使用 React 的人的必备扩展。这是调试 React 代码并访问页面上呈现的所有组件的好方法。

          • 这将为您提供有关代码和 Web 应用程序中的组件的大量信息。因此，您可以在浏览器中下载扩展并开始将其用于项目。

        • 网址

          • github

          • 官网

      • React Three Fiber

        • 介绍

          • React Three Fiber 是 JavaScript 3D 动画库 three.js 的一个很棒的渲染器工具。

          • 如果您不了解 three.js，它是一个使用 WebGL 的 3D 动画库，您可以使用它在浏览器中创建出色的 3D 动画环境。

          • 因此，使用 React Three Fiber，您可以在 React 应用程序上创建许多很酷且令人敬畏的 3D 动画。您可以实现很多目标。这只需要一点学习，但是一旦你从他们的文档中学习，你就可以创建很多东西，比如 3D 菜单或带有很酷动画的游戏。

        • 网址

      • Web3-React

        • 介绍

          • Web3-React 是流行的库 Web3 的一个很好的 React 实现，Web3 是一个用于与以太坊区块链以及运行以太坊虚拟机的其他区块链进行通信的库，包括 Avalanche，Binance Smart chain 和 Solana

        • 网址

      • React Query

        • 介绍

          • React Query 是另一个很棒的库，用于数据获取。它为您提供了一种简单的方法来同步、检索、缓存和更新 React 应用程序中的服务器状态。

        • 网址

          • github

          • 官网

        • react-query · GitHub Topics

      • Bundle Analyzer

        • 介绍

          • Bundle Analyzer 是一个非常有用的 CLI 实用程序和 Webpack 插件。它为您提供了一个可缩放的动态树状图，提供了 application bundle 的可视化表示形式。

          • 该工具可以帮助我们查看 bundle 的内容，并确定应删除哪些模块以及哪些模块占用的空间最大。

        • 网址

          • github

          • 官网

      • React Hook Form

      • Why Did You Render?

      • React 的应用研发框架：ice

        • 介绍

          • 基于 React 的应用研发框架 icejs，支持 Vite & Webpack 模式，同时提供了微前端、Hooks、一体化等解决开发，让前端开发更加简单规范。

        • 网址

      • 基于 redux、redux-saga 和 react-router 的轻量级前端框架：dva

      • Valtio：使 React 和 Vanilla 的代理状态变得简单

      • umi：React 社区中的框架 ✨

        • 介绍

          • 用 Umi 构建你的下一个 SPA 、SSR、中后台、React、PC、移动端 应用，带给你简单而愉悦的 Web 开发体验

        • 网址

  • Angular

  • Svelte

  • Solid

    • 介绍

      • SolidJS 框架由 Ryan Carniato 创建，于 2018 年开源

      • 一个用于构建用户界面，简单高效、性能卓越的 JavaScript 库

      • Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码

      • 特性

        • 1.没有用虚拟 DOM（无 diff 算法）：它编译出来的 DOM ，就是原生 DOM ，其它语法是直接调用的，也没有那一整套复杂的虚拟 DOM。

        • 2.提前编译，按需打包：无论是 react 还是 vue，这些框架采用的是运行时才编译方案，而 Solid 是预编译，将 jsx 部分的代码，转换成原生的语法。并且，react 和 vue 使用，都需要引入整个框架本身。而 Solid 可以按需引入，比方说像 lodash、Rxjs 那样，用个某个功能，按需引入对应的组件即可。

        • 3.响应式实现，细粒度更新：如果了解 React 的原理，就会知道，只要是 props 或者 state 改变，React 组件就会重新渲染，而每一次判断是否会重新改变，值是否不一样，也是一整套算法……而 Solid 不一样，他另辟蹊径，每一个组件都是一个独立的线程，每个组件里的 createMemo 或 createEffect 里面去收集对应的依赖， 在 set 改变值后，都会重新执行这些方法。看起来就像是实时更新了一样。

    • 网址

  • Preact

  • petite-vue

    • 介绍

      • petite-vue 是 Vue 的另一种发行版，针对渐进式增强进行了优化。它提供了与标准 Vue 相同的模板语法和反应性心智模型。但是，它专门针对在服务器框架呈现的现有 HTML 页面上“洒”少量交互进行了优化。

    • 网址

  • Lit

    • 介绍

    • 特点

      • 用于构建快速、轻量级的 Web 组件

      • Lit 组件可以跨多个应用程序和站点使用

      • 使用声明式模板

      • HTML 标签增强拓展，可以像使用内置 HTML 元素一样使用组件

      • 支持响应式

      • 支持 ts

      • 大小约为 5 KB

    • 网址

  • Ember

    • 介绍

    • 网址

      • 官方开源库

      • github

      • 中文官网

      • 英文官网

  • nerv：与 IE8 和 React 16 兼容的库(停止维护)

  • Mithril.js

小众|不那么流行|停止维护或其他的框架 ​

跨端多端运行开源库 ​

Web 组件库 ​

  • stencil

    • 介绍

      • 一个工具链，用于在 TypeScript 和 Web 组件标准之上构建可扩展的企业级组件系统。Stencil 组件可以从单个与框架无关的代码库中本地分发给 React、Angular、Vue 和传统的 Web 开发人员。

      • Stencil 是一个简单的 Web 组件编译器。它结合了流行框架的设计理念，通过使用 Type、JSX、虚拟 DOM，Reactive 数据绑定和异步渲染（类似于 React Fiber）来生成 Web 组件。

      • 由于使用 Stencil 开发的组件只是 Web Components，所以这些组件可以运行在所有的主流框架（AVR）中，也可以独立地运行。这一特质使它可以成为新的前端容器框架——毕竟 Web Components 是一个新的前端容器。

    • 网址

    • 参考

  • SkateJS（停止维护）

    • 介绍

      • 由新式视图库提供支持的轻松自定义元素。

      • SkateJS 是一个 Web 组件库，旨在提供扩充 Web 组件规范能力，它重点关注功能渲染管道、清理 attribute/property 语义和较小的占用空间

      • 停止维护

    • 网址

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

模板语言引擎 ​

微信小程序开发 ​

Weex ​

开源库 ​

其他开源开发库合集 ​

  • 地址例子

    • 介绍

    • 网址

      • github

      • 官网

  • PDF 相关操作

  • 文档相关操作库

  • 动画设计：theatre

  • PyScript：降低 Web 开发门槛

    • 介绍

      • PyScript 是 Scratch、JSFiddle 或其他“易用”的编程框架的 Python 替代品，它让 Web 成为一个友好的、可攻击的、任何人都可以编写有趣的交互式应用程序的地方。参考下方示例即可使用 PyScript。

    • 网址

    • 使用

html
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
`

  • Slidev： 基于 markdown 的演示幻灯片

  • 函数库

  • 数据可视化库

    • 都是找的开源可商用的

    • D3.js

      • 介绍

        • D3.js 是一个 JavaScript 库，用于基于数据操作文档。D3 可帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。

        • D3 对 Web 标准的强调为您提供了现代浏览器的全部功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的 DOM 操作方法相结合。

        • 相比于 ECharts 更灵活，也更复杂。

        • 开源协议

      • 网址

    • three.js

      • 介绍

        • ThreeJS 是一款开源的主流 3D 绘图 JS 引擎，，基于 WebGL 实现 3d 动画，前端 3D 开发必备神器

        • 该项目的目的是创建一个易于使用，轻量级，跨浏览器，通用的 3D 库。当前的构建仅包含 WebGL 渲染器，但示例中还提供了 WebGPU（实验性），SVG 和 CSS3D 渲染器。

      • 网址

    • ECharts：百度开源图表库

    • Vue-ECharts：Vue.js Apache ECharts 的组件

    • AntV：蚂蚁集团可视化开源

      • 介绍

        • AntV 系列：包含各种数据可视化的解决方案，这一套很系统，包含了数据可视化的方方面面。

        • AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验后方敢与君见。

        • 开源协议

          • MIT 协议

      • github

      • 查看官网各个图表的使用场景

      • 包含单个库

        • G2

          • 数据驱动，高度易用，可扩展的可视化图形语法。

        • G2Plot

          • 开箱即用、易于配置、极致体验的通用图表库。

        • S2

          • 开箱即用的多维可视分析表格

        • G6

          • 便捷的关系数据可视化引擎与图分析工具。

        • Graphin

          • 基于 G6 封装的图分析应用组件。

        • X6

          • 极易定制、开箱即用、数据驱动的图编辑引擎

        • XFlow

          • 基于 X6 图编辑引擎、面向 React 用户的应用

        • L7

          • 高性能/高渲染质量的地理空间数据可视化框架。

        • L7Plot

          • 易于配置、图表丰富、支持定制的地理图表

        • F2

          • 专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境

        • F6

          • 一款可以快速、流畅运行于移动设备中的图可视化引擎

        • AVA

          • AVA 是为了更简便的可视分析而生的技术框架

    • BizCharts：阿里巴巴开源图表

      • 介绍

        • 在阿里内部又有像 G2 这样非常强大的图表底层引擎，所以在该引擎之上做一层封装是一件很自然而然的事情，而 Bizcharts 就是基于 G2 引擎的 React 版本的封装。

        • Bizcharts 的语法设计非常贴切 React 的使用方式，图表的各个部分都拆分成了独立的 React 类，如：<Tooltip /> 代表提示信息， <Axis /> 代表坐标轴。 所有图表的配置项皆为组件的 props 。

        • Bizcharts 在最新的 3.x 版本中，支持 Canvas 及 SVG 两种模式的图表渲染。如果单就图表库的视角来看，选择 Canvas 和 SVG 各有千秋，Bizcharts 两种方式都支持，适用于各种复杂的业务场景。

        • Bizcharts 在阿里内部多个部门多条业务线里反复打磨了两年之久后，于去年年底对外开源。在开源的半年时间里，做了大量的迭代优化，现在功能及性能已经做了大量的优化，非常推荐在正式环境使用。

      • 网址

    • Chart.js

    • recharts

      • 介绍

        • Recharts 是一个用 React 和 D3 构建的重新定义的图表库。这个库能帮助你在 React 应用中轻易绘制图表

        • Recharts 的主要特点：

          • 简单地使用 React 组件进行部署

          • 支持原生 SVG，轻量级应用一些 D3 子模块

      • 网址

    • vue-echarts

    • DataV：Vue 数据可视化组件库

    • nivo

      • 介绍

        • nivo 提供增压的 React 组件来轻松构建 dataviz 应用程序，它建立在 d3 之上。

        • 已经存在几个用于 React d3 集成的库，但只有少数提供了服务器端渲染能力和完全声明性的图表。

      • 网址

    • Rough.js：绘制草图外观的图形

    • apexcharts.js

    • tui.chart

    • TauCharts

      • 介绍

        • TauCharts 是一个最灵活的 JavaScript 图表库有。它也是基于 D3 的，是一个以数据为中心的 JavaScript 图表库，它允许改进数据可视化的效果。TauCharts 十分灵活，访问其 API 也十分轻松。TauCharts 为用户提供了无缝映射和可视化的数据，使用 TauCharts 能够设计出十分美观的数据界面。

        • 开源协议

      • 网址

    • NVD3

      • 介绍

        • NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。NVD3 具有很强大的图表功能，数据可视化与可爱的图表如箱形图，旭日，和 K 线图。如果你是一个 JavaScript 图表库找吨功能，NVD3 是一看出来。

        • 开源协议

      • 网址

    • C3.js

      • 介绍

        • 就像 TauCharts 一样，C3.js 也是一个非常有效的基于 D3 的图表可视化库。另外，C3.js 允许用户创建可定制的具有个人风格的类。C3.js 看起来是个比较难的库，但是一旦掌握了 C3.js 技巧，就能得心应手的使用了。C3.js 也允许用户为自己的 Web 应用程序创建可复用的图表，从而减少工作量。

      • 网址

    • Flot

      • 介绍

        • Flot 是纯 Javascript 实现的基于 jQuery 的图表插件，目前，jQuery 已经成为 Web 开发人员非常重要的工具。有了 Flot.js，前端设计也变得更加容易。

        • Flot.js 是 JavaScript 库中较为古老的图表库之一。尽管如此，Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。

        • 开源协议

      • 网址

    • n3-charts

    • 地址例子

      • 介绍

      • 网址

        • github

        • 官网

  • 动画库

    • CSS 动画

    • scrollReveal.js：元素进入/离开窗口时动画

    • Waves：点击水波纹动画效果

    • move.js：小型的 JavaScript 动画库

    • Velocity.js：动画套件

      • 介绍

        • 一个功能齐全简单易用、高性能、功能丰富的轻量级的 JavaScript 动画套件，包括诸如彩色动画、SVG 支持、循环、缓动和过渡、淡入淡出、滚动、滚动、停止、结束、翻转等动画效果

        • 它结合了 CSS 和 jQuery 的优点。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

        • 它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合。它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。

        • Velocity.js 是 velocity 模板语法的 javascript 实现。Velocity 是基于 Java 的模板引擎，广泛应用在阿里集 体各个子公司。Velocity 模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含 本数据类型、变量赋值和函数等功能。还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。Velocity.js 支持 Node.js 和浏览器环境。

        • 其具有以下特点：

          • 支持客户端和服务器端使用

          • 语法是富逻辑的，构成门微型的语言

          • 语法分析和模板渲染分离

          • 基本完全支持 velocity 语法

          • 浏览器使用支持模板之间相互引用，依据 kissy 模块加载机制

      • 网址

    • React Spring：弹簧物理学的 React 动画库

      • 介绍

        • react-spring 是一个基于弹簧物理学的 React 动画库，满足大多数与 UI 相关的动画需求，提供了足够灵活的工具，可以自信地将想法投射到不断变化的界面中。该库代表了一种现代动画方法。它继承了 animated 强大的插值和性能，以及 react-motion 的易用性。

      • 网址

    • React Reveal：React 的高性能动画库

    • React Motion：React 应用程序的动画库

    • Greensock(GSAP)：HTML 元素进行动画处理

      • 介绍

        • GreenSock 是一个 JavaScript 动画库，可轻松对 HTML 元素进行动画处理。 用于创建高性能，零依赖性，跨浏览器动画，声称在超过 400 万个网站中使用。

        • GSAP 能够查询和动画化几乎任何类型的 Web 元素（从 CSS 到 Canvas 到 DOM 对象），我们可以将它实现像微调器效果这样简单的事情，也可以实现更复杂的效果。

        • GreenSock 与大多数软件兼容，如 HTML5、SVG、jQuery、Canvas、CSS、新浏览器、旧浏览器、React、Vue 和 EaselJS。除此之外，它超级流畅，并带有精美的动画功能。GreenShock 也是模块化的，这意味着你可以独立选择和选择项目所需的库的任何部分。

        • 它与一堆小的 Javascript 文件一起工作，在浏览器中，使动画看起来更加漂亮。它流畅地链接多个动画属性并从 Web 浏览器中删除错误(如果有)。

        • 其具有以下特点：

        • 速度快，专门优化了动画性能，使之实现和 css 一样的高性能动画效果

        • 轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite 包非常小(基本上低于 7kb)。提供了 TweenLite, TimelineLite, TimelineMax 和 TweenMax 不同功能的动画模块，你可以按需使用。

        • 没有依赖。

        • 灵活控制。不用受限于线性序列，可以重叠动画序列，可以通过精确时间控制，灵活地使用最少的代码实现动画。

        • 任何对象都可以实现动画。

      • 网址

    • Lax.js：跟随页面滑动的 JavaScript 动画插件

      • 介绍

        • Lax.js 是一款原生零依赖的制作跟随页面滑动的 JavaScript 动画插件，这款插件非常的轻巧，压缩版大小只有 3kb。当滑动页面时，帮助创建酷炫的动画效果，比如滚动视差、变形移动等基本的动画效果，响应式兼容方面，比如手机端也有不错的支持。除了可以使用插件默认集成的动画属性，还可以自定义更加丰富的动画属性。

      • 网址

    • rellax.js：纯 JavaScript 滚动视觉差特效插件

    • Ani.js：简单语法创建动画样式

      • 介绍

        • AniJS 允许我们为网站创建动画样式，而无需任何 JavaScript 或 CSS 编码！ 您可以使用简单的 If - On - Do - To 语法用 HTML 指定所有动画

        • AniJS 是一个非常独特的动画库，它允许用户以逐步格式添加动画，例如句子，这对于绝对初学者来说非常有用，它的非特定性质使几乎每个人都可以在常规 UX 设计中使用它。

      • 网址

    • Typed.js：打字机形式动画库

      • 介绍

        • typed.js 是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等。

        • 这是一个简单的库，可以在设备屏幕上键入的任何内容设置动画。当你输入一个字符串时，观众可以以预定义的速度查看它。如果你想让禁用了 JS 的访问者也可以查看它，你只需要在页面上放置一个 HTML div。因此，搜索引擎也可以查看输入的单词。

      • 网址

    • Vivus：SVG 动画库

      • 介绍

        • Vivus 是一个轻量级的 JavaScript 库（没有依赖项），它允许我们对 SVG 进行动画处理，使它们看起来像是被绘制的。它有多种不同的动画可用，以及创建自定义脚本的选项，以喜欢的任何方式绘制 SVG。

      • 网址

    • ProgressBar.js：带有动画 SVG 路径的响应式和流畅的进度条

    • Popmotion：JavaScript 运动引擎

      • 介绍

        • Popmotion 是一个只有 12KB 的 JavaScript 运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的 DOM 支持：CSS，SVG，SVG 路径和 DOM 属性的支持，开箱即用。

      • 网址

    • p5.js：通用动画库

      • 介绍

        • 是 Processing 的 JavaScript 实现。

        • Processing 是一种供视觉艺术家使用的独立“语言”。

        • 与我们之前看到的那些示例不同，p5.js 是一个通用动画库，不仅为实际应用提供解决方案，还为更健壮和复杂的项目提供解决方案。这包括对 2D 和 2D 效果的全面支持。

      • 网址

    • Granim.js：小型 JavaScript 流体动画库

    • Kute.js：原生高性能和模块化的 Javascript 动画引擎

      • 介绍

        • Kute.js 是一个原生的 Javascript 动画引擎，具有优秀的性能和模块化的代码。 它提供了一大堆工具，以帮助创建自定义动画。它提供了易于使用的方法来设置高性能、跨浏览器的动画。

      • 网址

    • simpleParallax.js：小巧的 Vanilla JS 库

      • 介绍

        • simpleParallax.js 是一个非常简单且小巧的 Vanilla JS 库，可在任何图像上添加视差动画。它因其易用性和可视化渲染而脱颖而出。视差效果直接应用于图像标签，无需使用背景图像。

      • 网址

    • Barba.js：创建流畅和平滑的过渡网站的页面

      • 介绍

        • Barba.js 是一个小（4kb 的压缩和压缩），灵活和无依赖的库，可以帮助您创建流畅和平滑的过渡网站的页面。 它可以减少页面之间的延迟，最大限度地减少浏览器 HTTP 请求并增强用户的 Web 体验。

      • 网址

    • Mo.js：简洁、高效的图形动画库

    • Particles.js：轻量级的 JavaScript 颗粒效果动画库

    • tsParticles：粒子动画背景库

      • 介绍

        • tsParticles 可以轻松创建高度可定制的粒子动画并将它们用作网站的动画背景。可用于 React.js、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web 组件现成的可用组件。

      • 网址

    • Lottie-Web：轻量级的动画图形库，原生渲染 After Effects 动画

      • 介绍

        • 它是一个轻量级的动画图形库，在高质量图形及其渲染之间保持了良好的平衡。它使应用程序非常紧凑，并包含许多有用的功能。

        • 在 Web、Android 和 iOS 以及 React Native 上原生渲染 After Effects 动画。

        • 它可以在任何支持 Javascript 的 Web 浏览器上运行，没有任何问题。动画的存储格式通常是人类容易理解的纯文本。由于文本数据以 JSON 格式存储，因此可以使用任何 JavaScript 环境轻松模拟。

      • 网址

    • Rough Notation：网页上创建和动画注释

      • 介绍

        • Rough Notation 是一个小型 JavaScript 库，用于在网页上创建和动画注释。它基于使用 RoughJS 创建手绘的外观和感觉。元素可以用多种不同的样式进行注释。动画持续时间可以配置，或者只是关闭。压缩后的大小仅 3.83kb。

      • 网址

    • aos(animate-on-scroll)：在页面时创建动画

    • Bounce.js：弹性、有趣和好莱坞风格的动画

      • 介绍

        • Bounce 是一个 Javascript 动画库，顾名思义，它为网站提供弹性、有趣和好莱坞风格的动画。它附带了近十个预设，因此库的大小变得非常小。

        • Bounce 中的动画非常流畅和快速。如果你的动画需要围绕“弹入和弹出”类型的动画，并且你想要更小的动画库

      • 网址

    • Motion：React 的生产就绪运动库

      • 介绍

        • Motion 是 Framer 的 React 的生产就绪运动库。它带来了声明性动画、轻松的布局转换和手势，同时保持了 HTML 和 SVG 语义。Motion 使用强大的手势识别器扩展了 React 的事件系统。它支持悬停、点击、平移和拖动。注意，Motion 需要 React 16.8 或更高版本。

      • 网址

    • CSShake：CSS 类来移动你的 DOM

      • 介绍

        • 它专为网页的抖动元素相关的动画而设计，并且该网页有很多变体。这个库由 Apple 推广，当输入错误的响应或面部不匹配时，它在其软件中加入了摇晃的动画。CSShake 提供了一系列有趣的“摇晃”动画，并且这个库中不乏变化。

      • 网址

    • Dynamics.js：创建物理运动动画效果

    • Parallax.js：视觉差特效引擎

    • Proton：Javascript 粒子动画库

    • Direction Reveal：根据检测用户进入或离开元素的方向，设置动画

    • Flat Surface Shader [FSS]：3D 模拟照明动画效果(停止维护)

    • 前端 PPT 演示解决方案

      • 基于 CSS 的 3D 幻灯片工具：reveal.js

        • 介绍

          • 这是一个基于 CSS 的 3D 幻灯片工具，标星 54K。

          • Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。

          • reveal.js 是一个开放源代码 HTML 表示框架。 它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。

          • 该框架具有广泛的功能，包括嵌套幻灯片，Markdown 支持，自动动画，PDF 导出，演讲者注释，LaTeX 支持，语法突出显示的代码等等。

          • reveal.js 有一下几个特点：

          • 支持标签来区分每一页幻灯片

          • 可以使用 markdown 来写内容

          • 支持 pdf 的导出

          • 支持演说注释

          • 提供 JavaScript API 来控制页面

          • 提供了多个默认主题和切换方式

          • 自适应移动端和 PC 端

        • 网址

      • 使用 Markdown 和 HTML 写逼格满满的 PPT：reveal-md

    • Animsition：CSS 动画页面过渡 jQuery 插件(停止维护)

    • Framer Motion：React 的动画库

      • 介绍

        • 其带有预构建的 API，可让 React 开发人员简化构建动画组件的过程，同时也减轻了学习 CSS 及其动画属性的一些障碍，特别是它很容易使用。

      • 网址

        • github

        • 官网

    • Paper.js：矢量图形动画

      • 介绍

        • Paper.js 专注于矢量图形动画领域。让您不仅可以制作静态效果，还可以制作交互式动态体验。可以通过层对对象进行分类，每个层都有一个自定义动画规范，当处理复杂的结构时，这能很好的帮助我们。

      • 网址

    • Web Animations：Web Animation API 的直接的 JS 接口

    • three.js：通用 JavaScript 3D 库

      • 介绍

        • three.js 是一个易于使用、轻量级、跨浏览器的通用 JavaScript 3D 库，它是一套基于 WebGL 开发出的 Javascript 函式库，它提供了比 WebGL 更简单的 Javascript API，让开发者能够轻易在浏览器制作 3D 绘图。

      • 网址

    • watching-you

      • 介绍

      • 网址

        • 官网

        • github

  • 颜色选择器组件

    • Colorjoe

      • 介绍

        • colorjoe 是一个具有触控和 AMD 支持的可扩展颜色选择器。可以通过 CSS 定义其实际尺寸和布局。通过这种方式，该组件非常适合响应式布局。

        • 与那里的许多其他颜色选择器不同，colorjoe 是真正可扩展的。它基于 CSS，不依赖于外部图像。因此，您可以调整其大小以适应您的目的。还支持触控和 AMD 模块定义。

        • colorjoe 受到 ColorJack 和 RightJS Colorpicker 的启发。与那些不同的是，它实际上可以很好地扩展。从本质上讲，这意味着您将能够使用一些 CSS 定义其实际尺寸和布局。通过这种方式，小部件非常适合响应式布局。

        • 此外，由于它提供的简单 API，实现缺失的功能（RGB 字段等）相对容易。

      • 如果您更喜欢独立的 dist，请将预打包的 dist/colorjoe.js 和添加 css/colorjoe.css 到您的页面或从 src/使用 AMD

      • 项目地址：https://github.com/bebraw/colorjoe

    • Huebee

      • Huebee 是一个 JavaScript 库，用于创建以用户为中心的颜色选择器。Huebee 显示一组有限的颜色，因此用户可以一目了然地查看所有颜色，做出明确的决定，并通过单击选择一种颜色。

      • 项目地址：https://github.com/metafizzy/huebee

    • iro.js

      • iro.js 是一个用于 JavaScript 的模块化、注重设计的颜色颜色选择器组件 - 支持多种颜色格式。所有 iro.js 都可以从单个脚本运行 - 不需要额外的 CSS、图像或第三方库！

      • 地址

  • 滚动库

  • 轮播图

  • 时间日期处理

  • Markdown 编辑|查看器|辅助工具

  • 富文本编辑器

  • 视频播放器

    • Plyr

      • 介绍

        • 是一个简单、轻量级、可访问和可定制的 HTML5、YouTube 和 Vimeo 媒体播放器，支持现代浏览器。

      • 特点

        • 📼 HTML 视频和音频、YouTube 和 Vimeo 支持主要格式

        • 💪 无障碍- 完全支持 VTT 字幕和屏幕阅读器

        • 🔧 可定制- 使用您想要的标记使播放器看起来像你想要的样子

        • 📱 响应式- 适用于任何屏幕尺寸

        • 📹 流式传输- 支持 hls.js、Shaka 和 dash.js 流式播放

        • 🎛 API - 通过标准化 API 切换播放、音量、搜索等

        • 🎤 事件- 不用搞乱 Vimeo 和 YouTube API，所有事件都是跨格式标准化的

        • 🔎 全屏- 支持原生全屏并回退到“全窗口”模式

        • ⌨️ 快捷键- 支持键盘快捷键

        • 🖥 画中画- 支持画中画模式

        • 📱 Playsinline - 支持 playsinline 属性

        • 🏎 速度控制- 即时调整速度

        • 📖 支持多个字幕- 支持多个字幕轨道

        • 🌎 i18n 支持- 支持控件的国际化

        • 👌 预览缩略图- 支持显示预览缩略图

        • 🤟 没有框架- 用 ES6 JavaScript 编写，不需要 jQuery

      • 网址

    • flv.js

    • Chimee

    • DPlayer：HTML5 弹幕视频播放器

    • ckplayer：www.ckplayer.com/

      • 介绍

      • 网址

        • github

        • 官网

    • jplayer：www.jplayer.cn/

      • 介绍

      • 网址

        • github

        • 官网

    • html5player：juejin.cn/post/684490…

      • 介绍

      • 网址

        • github

        • 官网

    • Video.js - 开源、免费的 HTML5 和 Flash 视频播放器

      • 介绍

      • 网址

        • github

        • 官网

    • videojs-markers：通用的在网页上嵌入视频播放器的 JS 库(停止维护)

      • 介绍

        • Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

        • 有了这个插件，你可以在你网站上存在的视频上放置必要的标记，这样就可以轻松地切换到我们需要的时间代码。

      • 网址

    • 多青：dogeek.net/

      • 介绍

      • 网址

        • github

        • 官网

      • 介绍

      • 网址

        • github

        • 官网

  • 文档库操作

    • PDF

    • 办公文档

  • 消息通知

  • 图片操作库

  • 字符串解析库

  • 前端机器学习库

    • Brain.js

      • brain 是一个允许你快速简单创建神经网络并且基于输入/输出进行训练的类库。虽然一个 CDN 浏览器版本可以直接将类库加载到 web 页面中， 因为这个训练过程占用了大量的资源， 所以将这个类库运行在了一格 Node.js 环境下 。 这个类库包含了一个非常迷你的在线演示， 可以用来训练识别颜色的对比度

      • Brain.js 是一个基于 JavaScript 的快速运行库，用于机器学习和神经网络。 它可以在浏览器中使用，也可以与 Node.js 一起使用。 使用 Brain.JS，不同类型的网络可用于不同的任务。 它为各种神经网络提供支持，例如长短期记忆神经网络、循环神经网络和前馈神经网络。

      • Brain.js 是一个快速处理库，因为它使用 GPU 进行计算。 即使 GPU 不可用，它也会恢复为纯 JS 并继续处理。 Brain.js 提供多种神经网络实现，并鼓励在服务器端与 Node.js 一起构建训练和运行这些神经网络。

      • 这个库的另一个好处是你不必严格熟悉神经网络就可以使用它。 为了将您的网站与这些网络模型集成，您只需将它们实现为函数或使用 JSON 格式。

      • Brain.js 可用于使用高级语言快速创建简单的神经网络。 它允许你用几行代码和一个好的数据集构建一些非常有趣的功能。 此外，Brain.JS 提供了在客户端 javascript 上运行的能力。

    • TensorFlow.js

      • TensorFlow.js 是由 Google Brain 收集构建的开源 JavaScript 库。 它通过其完整而灵活的各种工具来推动硬件加速。 由于其深度学习层和全面的线性代数，该库已成为所有基于机器学习的 JavaScript 项目的基础。

      • TensorFlow.js 允许用户在浏览器的帮助下训练神经网络，或者在推理模式下执行预训练的模型，同时将机器学习构建块引入网络。 您可以运行当前可用的默认 TensorFlow 模型，甚至可以将它们转换为一些 python 模型作为附加。

      • 此外，TensorFlow.js 使得使用 Javascript 的低级线性代数从头开始构建模型变得非常容易。

      • TensorFlow.js 还包括一些预先存在的机器学习模型。 它们可用于重新训练您自己的数据。 它还提供了在任何地方（包括设备）部署机器学习模型的能力，无论您使用何种语言、本地、浏览器或云。

      • 你可以考虑将 TensorFlow.js 用于你的下一个基于机器学习的 JavaScript 项目。 它提供了更好的计算图可视化，同时还提供了一些好处，例如频繁的新版本、快速更新和无缝性能。

      • 此外，TensorFlow.js 具有高度并行性，可与众多后端软件（如 ASIC、GPU 等）结合使用。

      • 此外，TensorFlow.js 是 TensorFlow 的一个版本，包括许多其他子版本，例如用于完整体验的 TensorFlow Extended、用于移动设备的 TensorFlow Lite 和用于 Rust 绑定的 TensorFlow Rust 等。

    • Deep playground

      • 这个教育化的 web 应用允许你把玩神经网络，并且探索不同的组件。 拥有非常设计良好的 UI， 可以允许你控制输入数据，神经元数量， 使用的算法等， 各种相关的度量将会影响最终的结果。 当然这里在后台中有大量值得学习的东西， 代码是开源的， 使用了自定义的 机器学习语言 （typescript）， 并且拥有非常好的文档

    • FlappyLearning

      • 这是一个使用 800 行代码实现的机器学习 Javasript 类库， 实现了一个机器学习 flappy bird 游戏的 demo。 在这个类库中使用了 AI 技巧：，应用了来自“自然”杂志的神经系统算法， 动态的从每一个迭代的成功和失败中学习。 demo 运行非常简单， 直接使用浏览器打开 index.html 即可

      • 截图中可以看到经过了 20 代的学习， 这只鸟， 在我截屏的时候，依然还没有挂掉 ！

    • Synaptic

      • 可能是最活跃维护的项目之一， Synaptic 是一个 node.js 和浏览器类库， 这个类库被设计为架构不可知的状态， 允许了开发人员创建任何类型的神经网络。 拥有很少的内建架构， 是的能够快速的测试和算法比较。 同时包含了一个非常完整的神经网络说明， 一些实际的演示， 很多其它相关的教程，来介绍机器学习如何工作滴

    • Land Lines

      • land lines 是一个非常有趣的 Chrome Web 实验， 它查找地球的卫星图片，找出类似用户的涂鸦。 这个 app 没有服务器调用， 完全在浏览器里运行， 使用了 webGL 和机器学习， 在移动端也有很好的体验。

    • ConvNetJS

      • ConvNetJS 是一个 JavaScript 库，专为训练深度学习模型和使用神经网络而设计。 该库最重要的特点是它完全依赖于浏览器，因此根本不需要任何其他特殊软件，如 GPU、编译器。 ConvNetJS 也支持 Node.js。

      • ConvNetJS 由具有完全连接层和非线性的常见神经网络模块组成。 该库具有使用简单 JavaScript 制定和解决神经网络的能力，同时提供对一些常见网络模块的支持。

      • 它还提供了用于指定神经网络和分类问题、用于图像处理的卷积网络、基于 Deep Q 学习的实验性强化学习模块以及仍处于实验水平的补充学习模块的功能。

      • 虽然已经不再活跃的维护了， ConvNetJS 是 Javascript 机器学习的最先进的类库。 最早是斯坦福大学开发， 后来在 Github 上非常知名， 拥有了很多社区开发的特性和教程。 直接在浏览器里运行， 支持多学习技巧， 偏底层， 是的它非常适合神经网络中比较大的体验

    • Thing Translator

      • 这是一个 web 实验演示， 允许你使用手机来识别现实生活中的物品，并且用不同语言来命名。 这个 app 使用 web 技术和两个来自 Google 的机器学习 API 实现，包括：

    • Cloud Vision （图片识别） 和 Translate API（语言翻译）

    • Machine_learning

      • 另外一个允许我们设置/训练神经网络的 Javascript 类库。 使用 node.js 和客户端安装非常简单， 拥有非常干净的 API， 对于不同技术水平的开发人员来说，都非常适应。这个类库包含了大量的演示， 包含了很多流行的算法， 帮助你理解核心的及其学习语言原则

    • DeepForge

      • 这是一个用户友好的深度学习开发环境， 允许你使用一格简单图形界面设计神经网络， 支持远程机器的训练模型， 内建版本控制， 这个项目基于 Node.js 和 MongoDB，运行在浏览器里， 安装过程非常类似大多数的 web 开发过程

    • Mind

      • Mind 使用 JavaScript 编写脚本，是一个绝对灵活的神经网络库，可以处理浏览器和 Node.js 以做出更好的预测。 Mind 的主要功能之一是它使用矩阵实现来处理训练数据，同时允许开发人员自定义网络拓扑。

      • 开始使用这个库非常方便，因为它可以快速插入，并且比其他库更容易下载和上传插件。 易于配置预训练网络也是 Mind 的另一个优点。

    • ML5.js

      • 不仅如此，ML5.js 还允许随机数生成、排序、对数组和哈希表的位操作——它甚至为用户提供了优化、数组操作和线性代数的例程。这个库的另一个巨大优势是它支持交叉验证。

      • ML5.js 是一个完全打包的综合开源库，用于使用 Node.js 和浏览器进行机器学习。。

      • **它基于 TensorFlow 构建，没有任何外部依赖项。**与 Tensorflow 类似，除了管理机器学习算法的内存外，该库还可以处理由 GPU 加速的数学运算。

      • ML5.js 使得在浏览器中访问许多预训练的机器学习算法变得很容易，因此它可以用于各种目的，例如检测人体语言和音调、自定义图像、生成文本、查找英语语言关系、作曲音乐曲目等

      • 该库能够提供对机器学习的深入理解，以及各种复杂性，例如道德计算和数据收集，使其适合，即使是初学者。

      • ML5.js 为无监督和监督问题以及关键任务和简单模型提供实用程序。此外，它是一个多合一的通用 JavaScript 机器学习库，适用于 Typescript 和 JavaScript 开发人员，包括数学和统计支持库、回归算法、人工神经网络、无监督和监督学习、特征提取、线性模型、装袋、集成、分解、聚类等。

    • Neuro.js

      • Neuro.js 库的性能驱动和简单性质使任何使用它的人都可以访问和实用机器学习：

      • 基于“增强学习“的 AI 系统框架。 很可惜这个项目没有正确的文档说明， 但是有一个自动驾驶的演示，拥有很多相关细节的文字描述。 这个类库纯 Javascript，可以使用 webpack 或者 babel 来编译打包

      • Neuro.js 是一个 JavaScript 框架，用于开发和训练强化学习模型和深度学习模型，广泛用于使用 AI 技术和聊天机器人制作助手。

      • 许多开发人员使用这个库来开发、实践和训练深度学习和机器学习模型，然后将它们部署在 Web 浏览器或带有 JS 脚本的 Node.js 上。

      • 这个库的一些主要优点是它有助于进行实时分类，为学习提供在线支持，并在创建 ML 项目时支持多标签表单的分类。 看看下面使用 Neuro.js 库构建的颜色分类代码示例。

    • Keras.Js

      • Netflix 和 Uber 等许多领先公司正在使用 Keras 神经网络模型来增强用户体验。 许多科学组织，如 NASA、CERN 等，都将这项技术用于他们与人工智能相关的项目。 Keras 被认为是人工智能库的 JS 替代品，它允许您在项目中执行不同的模型并利用 WebGL 3D 设计的 API 提供的 GPU 支持。

      • Keras.js 可以被认为是继 TensorFlow.js 之后第二个使用最广泛的深度学习 JS 框架。 它在使用神经网络库的开发人员中非常流行。 由于 Keras 使用多个框架作为后端，你可以在 CNTK、TensorFlow 和其他框架中训练模型。

      • 使用 Keras 构建的机器学习模型可以在浏览器中运行。 尽管模型也可以在 Node.js 中运行，但只有 CPU 模式可用。 不会有 GPU 加速。

    • tracking.js

      • tracking.js 库将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代 HTML5 规范，我们使您能够进行实时色彩跟踪，人脸检测等等 - 所有这些都具有轻量级核心（约 7 KB）和直观的界面

      • 网址

    • face.js

  • RxJS：组合异步和基于事件模块化的库

    • 介绍

      • 用于 JavaScript 的反应式编程库

      • RxJS 是一组模块化的库，用于使用 JavaScript 中的可观察集合和组合来组合异步和基于事件的程序。

    • 网址

  • mitt：微型 200b 功能事件发射器/发布订阅

  • Validato：字符串验证器和清理器库

  • yup：复杂的、相互依赖的验证和转换的模式构建器

    • 介绍

      • Yup 是用于运行时值解析和验证的架构生成器。定义架构、转换值以进行匹配、断言现有值的形状或两者。Yup 架构具有极强的表现力，允许对复杂、相互依赖的验证或值转换进行建模。

    • 网址

  • Jsonwebtoken：对 JSON Web 令牌进行签名、验证和解码

  • UUID：用于创建 RFC4122 通用唯一标识符的库

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

  • 用户关注引导：教程步骤|新手引导

    • Driver.js：推动用户在页面上的注意力

      • 介绍

        • 一个轻量级，无依赖性，普通的 JavaScript 引擎，可推动用户在页面上的注意力

        • 通过 Driver.js，您可以突出显示页面上的项目，推动用户对整个页面的关注，以吸引用户的注意力。

        • 它是用户友好的，非常轻量级和高度可定制的

      • 网址

  • 弹出框

  • 下拉框

  • 表单验证

  • 树插件

  • 图片懒加载

  • 瀑布流

  • 弹幕插件

  • 复制粘贴插件

  • 条形码插件

    • barcode

      • 介绍

      • 网址

        • github

        • 官网

  • 二维码插件

  • 拖拽

  • 手机端事件

    • touch.js

      • 介绍

      • 网址

        • github

        • 官网

  • 文件上传

    • WebUploader：以 HTML5 为主，FLASH 为辅的现代文件上传组件

      • 介绍

        • WebUploader 是一个简单的以 HTML5 为主，FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势，同时又不摒弃主流 IE 浏览器，延用原来的 FLASH 运行时，兼容 IE6+，Andorid 4+，IOS 6+。两套运行时，同样的调用方式，可供用户任意选用。

        • 支持大文件分片并发上传，极大的提高了文件上传效率。

      • 网址

    • FilePond：灵活有趣的 JavaScript 文件上传库

      • 介绍

        • 一个灵活有趣的 JavaScript 文件上传库

        • 用于上传任何类型文件的 JavaScript 库。利用 API 你可以删除、复制或者粘贴文件，浏览文件系统。它适用于目录，本地和远程 URL 以及 blob。该库具有内置的图像自动优化和图像大小调整和裁剪。

      • 网址

    • 示例

      • 介绍

      • 网址

        • github

        • 官网

  • 地图

  • 地图操作库

    • 交互式地图库：Leaflet

      • 介绍

        • Leaflet 移动端友好的交互式地图库，仅有 39 KB 的 gzip 压缩 JS 加上 4 KB 的 gzip 压缩 CSS 代码，却能让开发人员开发在线地图的大部分功能。

        • Leaflet 是用于创建交互式地图的开源库。它为地图库提供了一些最重要的功能，如标记，图层，缩放等等。它适用于所有主流桌面和移动平台，没有外部依赖关系，并且可以使用大量插件进行扩展。

      • 网址

  • 代码高亮

  • 前端国际化 i18n

  • 网页即时通讯

  • 主题色提取

    • RGBaster：github.com/briangonzal…

      • 介绍

      • 网址

        • github

        • 官网

    • Color Thief

      • 介绍

      • 网址

        • github

        • 官网

    • vibrant.js

      • 介绍

      • 网址

        • github

        • 官网

  • 前端存储

  • 数据 Mock

  • 分享

    • bShare

      • 介绍

      • 网址

        • github

        • 官网

    • JiaThis（关闭了！！！）

      • 介绍

      • 网址

        • github

        • 官网

    • QQ 分享组件

      • 介绍

      • 网址

        • github

        • 官网

    • 百度分享

      • 介绍

      • 网址

        • github

        • 官网

  • 评论

    • Gitalk

      • 介绍

      • 网址

        • github

        • 官网

    • gitment

      • 介绍

      • 网址

        • github

        • 官网

    • 畅言

      • 介绍

      • 网址

        • github

        • 官网

    • 来必力

      • 介绍

      • 网址

        • github

        • 官网

    • 友言（关闭了！！！）

      • 介绍

      • 网址

        • github

        • 官网

    • 网易云跟贴（关闭了！！！）

      • 介绍

      • 网址

        • github

        • 官网

    • 其他

      • 介绍

      • 网址

        • github

        • 官网

  • Magic-Grid：自适应网格

  • HotKeys：捕获键盘输入和按键的 JavaScript 库

    • 介绍

      • 这是一个用于捕获键盘输入和按键的 JavaScript 库。它非常简单和用户友好，不依赖于 IE 6+，Safari，Firefox 和 Chrome。与其他库一起使用时必须特别小心，因为这可能会干扰键盘处理。

    • 网址

  • React Content Loader：基于 React 的 SVG 占位符加载，可自定义的 SVG 组件

  • Vue Content Loader：基于 Vue.js 的 SVG 占位符加载，可自定义的 SVG 组件

  • react-image-gallery：具有缩略图支持的反应轮播图像库组件

  • react-motion：React 弹性动画库

    • 介绍

      • React Motion 是一个 React 弹性动画库，使用 0-10 的弹性参数进行动画处理：
    jsx
    import {Motion, spring} from 'react-motion';// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>}</Motion>`

    • 对于 95% 的动画组件使用案例，我们没有必要用硬编码(把配置写死)式的缓冲曲线和时间过渡来重排序。只需要给你的 UI 设置一个刚度系数和阻尼系数，接下来让神奇的物理原理处理即可。用这种方式，根本无需担心如中断动画等小问题。它也极大的简化了 API 。

    • 网址

  • screenfull：屏幕全屏

  • IEalert.js：IE 浏览器版本过低提示插件

  • fastclick - 消除 click 移动浏览器 300ms 延迟

  • js-base64 - Base64 编码解码

  • store.js：跨浏览器存储(停止维护)

  • vConsole：针对手机网页的前端开发者调试面板

    • 介绍

      • 一个轻量、可拓展、针对手机网页的前端开发者调试面板。

      • vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用

      • 现在 vConsole 是微信小程序的官方调试工具。

    • 网址

  • seajs：用于 Web 的模块加载器

  • Cropper.js：JavaScript 图像裁剪器

  • WebSlides：HTML 幻灯片

    • 介绍

      • WebSlides 是一个开源的 HTML 幻灯片项目，能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片。页面中的每个 <section> 都是一个独立的幻灯片，只需要很少的 CSS 代码装饰即可。

    • 网址

  • Zdog：圆形、扁平、设计师友好的伪 3D 引擎

    • 介绍

      • zdog 是一个圆形、扁平、设计师友好的伪 3D 引擎，通过这个库，可以创建伪 3D 元素，不需要知道几何或代数来创建几何图形

    • 网址

  • popperjs：工具提示和弹出定位引擎

  • Tippy.js：网页工具提示，弹出框，下拉列表和菜单

    • 介绍

      • Tippy.js 是完整的网页工具提示，弹出框，下拉列表和菜单解决方案，由Popper提供支持。

      • 它提供了元素的逻辑和可选样式，这些元素从文档流中“弹出”并浮动在目标元素旁边。

      • 智能：始终以最佳方式漂浮在视图中

      • 通用：与鼠标、键盘和触摸输入兼容

      • 可定制：精细可调功能，可通过 CSS 完全风格化

      • 类型：类型脚本支持

    • 网址

  • n8n：可扩展的工作流自动化工具

    • 介绍

      • 一个可扩展的工作流自动化工具。通过 n8n 你可以连接各类节点，让他们进行数据通信。目前 n8n 支持 300+ 类节点，可快速在不同应用和数据库之间进行数据转换，不用烦恼去读 API 文档及排查 CORS 错误。

    • 网址

  • NoSleep.js

    • 介绍

      • 这个 JS 库可以让手机不进入休眠状态，网页窗口始终亮屏，原理是在页面插入一段不可见的、一直在播放的视频，代价是增加 CPU 负载和耗电。

    • 网址

  • tesseract.js：图像文字识别库

    • 介绍

      • 一个图像文字识别库，它不仅能识别英文，而且也支持中文的识别，几乎所有的语言它都能够识别，它不仅能在服务器上工作，而且也能在浏览器中运行

    • 网址

  • 地址例子

    • 介绍

    • 网址

      • github

      • 官网

开发库收集网站 ​

Node.js 源码推荐-面试哥 (mianshigee.com)

-# Node 后端框架

  • SSR 服务端渲染框架

  • 后端框架

    • Express

      • 介绍

        • Express 的排名不算靠前，作为 Node 界最老牌的 Web 框架

      • 网址

        • github

        • 官网

    • Koa

      • 介绍

        • Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。

        • 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。

        • Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

      • 网址

    • Egg.js

    • Nest.JS

      • 介绍

        • Nest.JS 是一个用于构建高效 Node.JS 服务器端应用程序的框架，它使用渐进式 JavaScript，使用 TypeScript 构建并且完全支持 TypeScript，并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数式响应式编程）的元素。

      • 网址

        • github

        • 官网

    • SvelteKit

      • 介绍

        • SvelteKit 是一个由 Svelte 提供支持的应用程序框架——以更小的占用空间构建更大的应用程序，凭借复杂的基于文件的路由系统脱颖而出。通过高级路由、服务器端渲染、代码拆分、离线支持等功能立即开始运行。

      • 网址

        • github

        • 官网

    • Fastify

      • 介绍

        • Fastify 致力于用最少的开销和强大的插件架构提供最好的开发体验，它的灵感来自于 Hapi 和 Express。Fastify 是这一领域中最快的 web 框架之一，取决于代码的复杂性，Fastify 最多可以处理每秒 3 万次的请求。

        • 高度专注于以最少的开销和强大的插件架构提供最佳开发者体验的 Web 框架。Fastify 是最快的 Node.js Web 之一 构架。

      • 网址

        • github

        • 官网

    • Strapi

      • 介绍

        • strapi 是免费开源的 Nodejs 无头 CMS 内容管理框架，可以通过后台管理界面创建自定义 API，并且完全使用 JavaScript 实现

        • Strapi 在开源 Headless CMS 中处于领先地位，是一个可以简单、快速、自动生成安全可靠后端 api 的框架，可谓是补齐了后端的短板。

        • Strapi 还允许开发者自由使用自己喜欢的工具和框架，而且几乎可以与任何语言、框架或者前端库集成。

        • 可以生成 JSON schema，有了 JSON schema， strapi 便会自动生成 Restful API

      • 网址

      • 教程

    • Remix

      • 介绍

        • Remix 是近年来增长速度最快的全栈构架之一，它通过利用分布式系统和本地浏览器两者的特点一起来加快页面的加载速度。2021 年 11 月，Remix 宣布关闭付费订阅模式，正式开源后，跟 Next.JS 可以说是势均力敌又各有千秋。

        • 和传统框架不同，Remix 不创建基于瀑布流的结构，相反，数据是在服务器端并行加载，然后作为然后作为 HTML 页面提供。这也意味着，如果用户禁用了 JavaScript，基于 JavaScript 的功能（如表单提交）不会破坏网站。

      • 网址

        • github

        • 官网

    • Redwood

      • 介绍

        • 2020 年 GitHub 联合创始人 Tom Preston-Werner 发布了 Redwood.JS，一款全新的面向边缘的全栈 JavaScript Web 框架。Redwood 集成了预先确定的后端和前端技术栈，并努力为开发者提供类似 Ruby on rails 的开发体验。

        • Redwood 技术栈包括 React、GraphQL(Apollo)、Prisma、Babel、Webpack 等等，此外，Redwood 还支持 JAMstack（一种基于客户端 JavaScript、可重用 API 和预构建标记的现代 Web 开发架构）。凭借这一点也得到了许多喜欢 JAMstack 和 API 的开发者的支持。

      • 网址

        • github

        • 官网

    • Adonis

      • 介绍

        • Adonis 包含了创建一个完整的 Web 应用程序或 API 服务器所需要的一切，尽管 Adonis 官方将自己描述成后端框架，但实际上在全栈开发方面它也同样出色。对 TypeScript 的原生支持使 Adonis 收获了许多开发人员的喜爱。

      • 网址

        • github

        • 官网

    • Keystone

      • 介绍

        • Keystone.JS 是一个基于 Node.JS 的 CMS 和 Web 应用程序框架，是构建 Node.JS 应用程序的可扩展开源平台。KeystoneJS 支持 GraphQL，体系结构高度可扩展，使用了 Admin UI。

      • 网址

        • github

        • 官网

    • hapi

      • 介绍

        • HapiJS 是一个开源的、基于 Node.js 的应用框架，它适用于构建应用程序和服务，其设计目标是让开发者把精力集中于开发可重用的应用程序的业务逻辑，向开发者提供构建应用程序业务逻辑所需的基础设施

        • Hapi.js 是一个用来构建基于 Node.js 的应用和服务的富框架，使得开发者把重点放在便携可重用的应用逻辑而不是构建架构。内建输入验证、缓存、认证和其他 Web 应用开发常用的功能。

      • 网址

    • Sail.js

    • FeatherJS

      • 介绍

        • Feathers 是轻量级的网络框架，用于使用 JavaScript 或 TypeScript 创建实时应用程序和 REST API。在几分钟内构建原型，在几天内构建可用于生产的应用程序。

      • 网址

        • github

        • 官网

    • Sapper

      • 介绍

      • 网址

        • github

        • 官网

      • 介绍

      • 网址

        • github

        • 官网

    • thinkjs：(停止维护)

    • trpc：轻松用 API

      • 介绍

        • tRPC 让你更轻松地构建和使用全类型安全的 API，而不需要模式或代码生成。

        • 部分特性：

          • 可用在生产环境；

          • 无代码、运行时膨胀、管道构建；

          • 轻量，DEP 为 0 且客户端痕迹很小；

          • 易于集成到现有的项目中；

          • 支持订阅；

          • 支持批量处理请求

      • 网址

    • fresh：下一代 Web 框架

      • 介绍

        • Fresh 是下一代 Web 框架，具有快速、可靠、简洁等特性。

        • 特性

          • 边缘的即时渲染；

          • Runtime 零开销：默认情况下不存在 JS 客户端的传输；

          • 没有构建环节；

          • 免配置；

          • 开箱即用，支持 TS；

      • 网址

    • Midway

      • 介绍

        • 🍔 面向前端/全栈开发人员的节点.js 无服务器框架。构建未来十年的应用程序。适用于 AWS、阿里云、腾讯云和传统虚拟机/容器。与 React 和 Vue 超级容易集成。

      • 网址

开发工具相关库解决方案收集 ​

  • StoryBook：UI 组件资源管理器

    • 介绍

      • UI 组件资源管理器。开发，记录和测试 React，Vue，Angular，Web Components，Ember，Svelte 等。

      • 有了它，你可以浏览组件库，查看每个组件的不同状态，并交互式地开发和测试组件。

    • 网址

  • APIJSON：专为 API 而生的 JSON 网络传输协议

    • 功能介绍

      • API JSON 是腾讯开发一种专为 API 而生的 JSON 网络传输协议以及基于这套协议实现的 ORM 库。适合中小型前后端分离的项目，为各种增删改查提供了完全自动化的万能 API，零代码实时满足千变万化的各种新增和变更需求。能大幅降低开发和沟通成本，简化开发流程，缩短开发周期。

      • 通过万能的 API，前端可以定制任何数据、任何结构。大部分 HTTP 请求后端再也不用写接口了，更不用写文档了。前端再也不用和后端沟通接口或文档问题了。

    • 网址

  • Wechatsync：文章同步插件工具

    • 键同步文章到多个内容平台，支持今日头条、WordPress、知乎、简书、掘金、CSDN、typecho 各大平台，一次发布，多平台同步发布。解放个人生产力。

    • 网址

  • Nginxconfig：Nginx 配置可视化神器

  • wails：Go 构建漂亮的跨平台桌面应用

    • 介绍

      • 使用 Go 和 Web 技术构建桌面应用程序。为 Go 程序提供 Web 界面的传统方法是通过内置 Web 服务器。

      • Wails 提供了一种不同的方法：它提供了将 Go 代码和 Web 前端一起打包成单个二进制文件的能力。通过提供的工具，可以很轻松的完成项目的创建、编译和打包。你所要做的就是发挥想象力！

    • 网址

    • img

  • Elux：跨平台跨框架 Web 解决方案

  • appwrite：后端服务

    • 介绍

      • Appwrite 是一个万星项目，它为 Web、Mobile 和 Flutter 开发人员提供的安全、端到端后端服务器。Appwrite 服务器打包为一组 Docker 微服务，用户可使用 docker compose 命令轻松使用。它免去了从零开始构建现代后端 API 复杂和重复性，允许用户更快地构建安全的应用程序。

    • 网址

  • amplication：解放 Node.js 开发生产力

    • 介绍

      • Amplication 可帮助 Node.js 从业人员开发出高质量的 Node.js 应用程序，而无需花费时间在重复的编码任务上。Amplication 可自动生成用 TypeScript 和 Node.js 构建的后端应用，以及用 React 构建的客户端。

    • 网址

  • hackathon-starter：解放 Node.js 开发生产力

    • 介绍

      • hackathon-starter 一个 Node.js 应用程序模版，具有以下特性：

      • 邮箱和密码进行本地身份验证；

      • 支持 Twitter、Google、GitHub、Linkedin、Instagram 等第三方登录验证；

      • Flash 通知；

      • MVC 项目结构；

      • 支持 Node.js 集群；

      • 可通过中间件自动编译 Sass 样式表；

      • 支持表格信息收集；

    • 网址

  • pkg：Node.js 打包工具

    • 介绍

      • pkg 命令接口可让你把 Node.js 项目打包成可执行文件，甚至在没有安装 Node.js 的设备上运行。值得注意的是，pkg 本身是为了在容器中使用的，所以并不提倡在无服务器环境中用 pkg。

    • 网址

  • wiki 开源项目

    • wiki.js

      • 介绍

        • 它是一款轻量级、功能强大的 wiki 开源项目，拥有评论、Markdown 编辑器、图片上传、标签、全局搜索、协同编辑、编辑历史、用户管理、谷歌分析等功能，而且支持高度自定义。

        • 用到的技术栈也不同于老旧的 wiki 系统，它采用了 Node.js、PostgreSQL、Vue.js、Docker 等技术。基于 Docker 实现的一键部署，颇有 WordPress 之风，不要太爽！

      • 网址

  • supabase：FireBase 替代方案

  • zx.js： 使用 JS 编写更高效便捷 shell 脚本

    • 介绍

      • 时至今日，前端工程化已经是越来越火热，前端人需要面对的工程化问题也已经越来越复杂，经常出现需要前端研发需要动手写 shell 脚本。

      • 但因为技术栈的关系，脚本质量和开发效率都非常着急。

      • zx.js 的出现，正是为了解决这一尴尬困境

      • 如果你尝试编写一个在 Node.js 下运行的 Shell 脚本，你可能会发现它并不像你希望的那样流畅。而 Google 的 zx 库有助于使用 Node.js 高效且愉快地编写 Shell 脚本。

    • 网址

  • Tauri： 构建更小更快的跨平台桌面应用

    • 介绍

      • 那 Tauri 凭什么在 2022 年异军突起呢？凭两个杀招：

        • 更小！它的构建物比 Electron 的构建物更小，因为它放弃了体积巨大的 Chromium 和 nodejs，前端使用操作系统的 webview，后端集成了 Rust。

        • 更加小！它对内存的开销更加小。

      • 和 electron.js 一样，同样的写 HTML/JS/CSS，同样的跨平台，同样的桌面应用。

      • Tauri 是一个为所有主流桌面平台构建小型、快速二进制文件的框架。开发人员可以集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 Rust 二进制文件，具有前端可以与之交互的 API。

    • 网址

  • Nut.js：Node.js 桌面自动化框架

  • 前端 PPT 演示解决方案

    • 基于 CSS 的 3D 幻灯片工具：reveal.js

      • 介绍

        • 这是一个基于 CSS 的 3D 幻灯片工具，标星 54K。

        • Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。

        • reveal.js 是一个开放源代码 HTML 表示框架。 它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。

        • 该框架具有广泛的功能，包括嵌套幻灯片，Markdown 支持，自动动画，PDF 导出，演讲者注释，LaTeX 支持，语法突出显示的代码等等。

        • reveal.js 有一下几个特点：

        • 支持标签来区分每一页幻灯片

        • 可以使用 markdown 来写内容

        • 支持 pdf 的导出

        • 支持演说注释

        • 提供 JavaScript API 来控制页面

        • 提供了多个默认主题和切换方式

        • 自适应移动端和 PC 端

      • 网址

    • 使用 Markdown 和 HTML 写逼格满满的 PPT：reveal-md

  • 精选低代码 (LowCode) 资源列表

    • 介绍

      • LowCode - 最近几年前端领域最火的概念, Awesome LowCode Component 项目为您收集了各种 LowCode 组件和前沿的技术方案, 可用于快速构建企业级项目或者直接用于开发, 大幅提高业务需求和商业变现的效率。

    • 网址

  • wp2vite：让 webpack 项目支持 vite

  • WebAssembly：可移植、体积小、加载快并且兼容 Web 的全新格式

  • nodePPT：用 node 写 PPT

  • Tina：开源编辑器，可帮助将可视化编辑构建到自己的项目中

    • 介绍

      • Tina 是一个开源工具包，用于将内容管理直接构建到您的网站中

      • Tina 使开发人员能够在不牺牲代码质量的情况下为其团队提供上下文和直观的编辑体验。

    • 网址

  • Mermaid：是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改

  • Vue3 和 Vite3 使用的库

    • 目前 vue3 和 vite3 都是一个 monorepo 仓库，且都是使用 pnpm workspace 来进行仓库管理的；

      • 所以了解 monorepo 和 pnpm workspace 对源码的阅读也是有很大的帮助的；

    • vitest：快速单元测试框架

    • chalk：终端修改输出字符样式

    • picocolors：终端修改输出字符样式

      • 介绍

        • 为什么选择 picocolors：

        • 无依赖包；

        • 比 chalk 体积小 14 倍，速度快 2 倍；

        • 支持 CJS 和 ESM 项目；

        • 因为 picocolors 包比较小，所以功能边界没有 chalk 的全面，但是用在一些自研等绝大部分的需求中是完全可以满足的。

      • 网址

    • prompts | enquirer | inquirer：实现命令行交互式界面

    • commander：构建 CLI 应用程序

      • 介绍

        • 完整的 node.js 命令行解决方案。

        • 你想写一个功能较多的 cli 工具，也是可以选择 commander 和 yargs 的；

        • 不过一些中小型的 cli 工具我还是推荐 cac 的；

      • 网址

    • yargs：构建 CLI 应用程序

    • cac：构建 CLI 应用程序

      • 介绍

        • 用于构建 CLI 应用程序的 JavaScript 库；

        • 通俗点讲，就是给你的 cli 工具增加自定义一些命令，例如 vite create，后面的 create 命令就是通过 cac 来增加的；

        • 因为该库较适用于一些自定义的工具库中，所以只在 vite 中使用， vue3 并不需要该工具；

        • cac 的优势：

          • 功能强大：启用默认命令，可以像使用 git 的命令一样方便去使用它，且有参数和选项的校验、自动生成 help 等完善功能；

          • 超轻量级：没有依赖，体积数倍小于 commander 和 yargs；

          • 易于学习：只需要学习 4 API cli.option、cli.version 、cli.help cli.parse 即可搞定大部分需求；

      • 网址

    • semver：语义化版本号管理

      • 介绍

        • 语义化版本号管理的 npm 库；semver 在 vue3 框架源码和 vite 工具源码中都有使用；

        • 说直白一点，你在开发一个开源库的时候，肯定会遇到要提醒用户不同版本号不同的情况，那么如何去判断用户版本过低，semver 就可以很好的帮助你解决这个问题；

        • semver 内置了许多方法，比如 判断一个版本是否合法，判断版本号命名是否正确，两个版本谁大谁小之类 等等方法；

      • 网址

    • minimist：命令行参数解析工具

    • magic-string：操作字符串和生成源映射

      • 介绍

        • 一个用于操作字符串和生成源映射的小而快的库；

        • 它最主要的功能就是对一些源代码和庞大的 AST 字符串做轻量级字符串的替换；

        • 在 vite 工具源码和 @vue/compiler-sfc 中大量使用；

      • 网址

    • fs-extra：文件操作库

    • chokidar：文件监控的库

      • 介绍

        • 一款专门用于文件监控的库；chokidar 只在 vite 工具源码中有使用；

        • 其实 Node.js 标准库中提供 fs.watch 和 fs.watchFile 两个方法用于处理文件监控，但是为什么我们还需要 chokidar 呢？

        • 主要是由于 兼容性不好、无法监听、监听多次 等大量影响性能的问题

      • 网址

    • fast-glob：快速批量导入、读取文件的库

    • debug：小型 JavaScript 调试程序库

      • 介绍

        • 一个模仿 Node.js 核心调试技术的小型 JavaScript 调试程序，在适用于 Node.js 和 Web 浏览器 都可使用；debug 只在 vite 工具源码中有使用；

        • 说直白点就是你可以使用 debug 来对你的程序进行 毫秒级别时间差的统计 对你程序代码进行优化；

      • 网址

    • dotenv：将 .env 文件 中的环境变量加载到 process.env 中

      • 介绍

        • 一个零依赖模块，可将 .env 文件 中的环境变量加载到 process.env 中

        • dotenv 只在 vite 工具源码中有使用；

      • 网址

    • esbuild：基于 Go 语言开发的 JavaScript 打包工具

      • 介绍

        • 一个基于 Go 语言开发的 JavaScript 打包工具，被 Vite 用于开发环境的依赖解析；

        • 相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍

      • 优势：

        • 没有缓存机制也有极快的打包速度

        • 支持 es6 和 cjs 模块

        • 支持 es6 modules 的 tree-shaking

        • 支持 ts 和 jsx

        • sourcemap

        • 压缩工具

        • 自定义的插件开发

      • 网址

    • rollup：JavaScript 模块打包器

      • 介绍

        • 一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。

        • 在 vite 中的生产环境（Production） 就是基于 rollup 打包来构建主要代码的。

      • 网址

    • ws：WebSocket 客户端和 服务器

      • 介绍

        • 一个简单易用、速度极快且经过全面测试的 WebSocket 客户端和 服务器 实现；完全可以是 Socket.io 的替代方案；ws 只在 vite 工具源码中有使用。

        • 说直白一点就是通过 ws，咱们可以实现服务端和客户端的长连接，且通过 ws 对象，就可以获取到 客户端发送过来的信息 和 主动推送信息给客户端。

      • 网址

    • connect：最早期的 HTTP 服务器框架

      • 介绍

        • 一个最早期的 HTTP 服务器框架，亦可称为中间件插件；express 就是基于此框架做的扩展；

        • 注意：从 vite2 开始官方已从依赖 koa 转成 connect 了；

      • 网址

    • esno：基于 esbuild 的 TS/ESNext 的 Node.js 运行时

    • tsup：由 esbuild 支持的打包工具

      • 介绍

        • 一个轻小且无需配置的，由 esbuild 支持的打包工具；

        • 它可以直接把 .ts、.tsx 转成不同格式 esm、cjs、iife 的文件，快速打包你的工具库；

      • 网址

    • vitest：快速单元测试框架

    • 介绍

    • 网址

      • github

      • 官网

请求库 ​

  • axios

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

    • 介绍

    • 网址

      • github

      • 官网

SVG ​

Cavans 库 ​

CSS 框架或预处理器 ​

  • 介绍

    • BEM 使用「模块名+元素名+修饰器名」，解决命名冲突。

    • postcss 使用「工具和插件」转换 CSS，可以为 css 选择器增加不同的「浏览器前缀」等。

    • css module 为 css 加入「局部作用域」，实现了「css 模块化」。

    • less 和 sass 等 css 预处理语言，将「css 扩展为一种编程语言」，增加变量，Mixin，函数等特性。

    • CSS-in-JS 是一种「将 css 内嵌到 js 文件中的技术方案」，现在已经有很多种 css-in-js 库，支持「动态改变样式」等功能。

    • CSS 原子化 的思想是「将基础功能小的，单用途的 css 定义为一个 class」，特点是「高复用性，低代码量」。

  • CSS-in-JS 库

    • 原子类 CSS

      • Tailwind CSS： 新时代的“原子类”CSS 功能类优先的 实用框架

        • 介绍

          • Tailwind.css 不仅是一个 utility class 的集合。它实际上定义了一个通过以 token list 语法（HTML class）承载的 DSL，用来书写等价于 CSS/Sass/Less 的样式声明。写到 class 里的每个 token 其实几乎就是一个 mixin，在现代化工具链支持下，这个 mixin 可以带参数。每个 mixin 颗粒度可大可小，有一部分做到了和具体值解耦从而可以对接 design token，也有另一部分是纯粹的原子类（一个类名等价一条固定的样式声明，比如 flex-wrap）。和纯原子类的方案的不同之处在于，这种 DSL 已经部分表达了设计上的规约，并且这种规约是可以响应全局更新的。

          • 在 HTML class 中描述样式，内容和样式就有了强耦合。场景、优势、劣势也很明确，这部分和 CSS vs inline style 其实是一样的。解耦有成本，而内联 DSL 免去了作为胶水层的 selector，降低了极大的起名负担。CSS 本身的问题，vjeux 在他那个著名的 React: CSS in JS [1] 的演讲里面其实把问题已经阐述得很清楚了。

          • 这是一个实用程序优先的 CSS 框架，它的使用方法和 10 年前的“原子类”用法类似：

          • 你可以通过诸如 flex，pt-4，text-center 这样的命名，生成相应的 CSS 代码。在目前高度组件化、CSS IN JS 横行的年代，在 Tailwind CSS 的助力下，原子化 CSS 展现了它便捷、高度语义化、高度约束性的优势。

        • 网址

        • Tailwind CSS UI 组件库

        • 工具

          • tailwind-config-viewer：本地 UI 工具

            • 介绍

              • 顺风配置查看器是一个本地 UI 工具，用于可视化您的顺风 CSS 配置文件。在开发过程中保持打开状态，以快速引用自定义顺风值/类。在配置的各个部分之间轻松导航，并通过单击将类名复制到剪贴板。

            • 网址

          • tailwindo：此工具可以将 HTML/PHP（您选择的任何）文件中的 CSS 框架（当前引导）类转换为等效的 Tailwind CSS 类

      • UnoCSS：即时按需原子 CSS 引擎

      • Windi CSS：下一代效用优先的 CSS 框架

        • 介绍

          • 如果您已经熟悉 Tailwind CSS，请考虑将 Windi CSS 作为 Tailwind 的按需替代品，Tailwind 提供更快的加载时间，与 Tailwind v2.0 完全兼容，并具有许多额外的很酷的功能。

        • 网址

      • Atomic CSS：小型，可重用的 CSS 库

    • twind：Tailwind-in-JS 解决方案

    • Emotion：专为高性能样式组合而设计的 CSS-in-JS 库

      • 介绍

        • Emotion 是一个高性能且灵活的 CSS-in-JS 库。基于许多其他 CSS-in-JS 库，它允许您使用字符串或对象样式快速设置应用程序样式。它具有可预测的组合，以避免 CSS 的特异性问题。借助源映射和标签，Emotion 具有出色的开发人员体验和出色的性能，可在生产中进行大量缓存。

      • 网址

    • vanilla-extract：零运行时样式表 in-TypeScript

      • 介绍

        • 使用本地范围的类名和 CSS 变量在 TypeScript（或 JavaScript）中编写样式，然后在构建时生成静态 CSS 文件。

        • 基本上，它是“CSS Modules-in-TypeScript”，但具有作用域 CSS 变量+堆更多。

        • 🔥 在构建时生成的所有样式 - 就像 Sass、Less 等。

        • ✨ 对标准 CSS 的最小抽象。

        • 🦄 适用于任何前端框架，甚至无需前端框架。

        • 🌳 本地范围的类名 — 就像 CSS 模块一样。

        • 🚀 本地范围的 CSS 变量和规则。@keyframes@font-face

        • 🎨 支持同步主题的高级主题系统。没有全球！

        • 🛠 用于生成基于变量的表达式的实用程序。calc

        • 💪 通过 CSSType 的类型安全样式。

        • 🏃‍♂️ 用于开发和测试的可选运行时版本。

        • 🙈 用于动态运行时主题的可选 API。

        • Vanilla Extract 是一个通用的库，没有绑定在任何 JavaScript 框架上，你可以在 React、Vue、Angular... 等框架中来使用它，但在这之前你需要先让自己的构建工具能够支持它。

        • Vanilla Extract 目前已经为最流行的前端构建工具做了集成，包括：webpack、esbuild、Vite 等。

      • 网址

    • https://github.com/MicheleBertoli/css-in-js

    • CSS in JS 简介 - 阮一峰的网络日志 (ruanyifeng.com)

    • atomizer

  • css 预处理器

    • sass

      • 介绍

        • Sass 是一种 CSS 的预编译语言，Sass 为 CSS 赋予了更强大的功能。

        • 它提供了 变量（variables）、嵌套（nested rules） [混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。

        • Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

      • 网址

    • less

      • 介绍

        • Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。

        • Less 可以运行在 Node 或浏览器端。

      • 网址

    • stylus

  • CSS 框架

  • CSS Modules

  • CSS 工具

    • PostCSS：用 JavaScript 工具和插件转换 CSS 代码的工具

      • 介绍

        • 用 JavaScript 工具和插件转换 CSS 代码的工具

      • 社区插件

        • Autoprefixer：自动补全浏览器私有前缀

        • precss：CSS 预处理（整合 Sass、LESS 或 Stylus 功能，语法基本和 Sass 的相同）

        • postcss-import：通过 @import，整合多个 CSS 文件

        • css-mqpacker：将相同的 CSS 媒体查询规则合并为一个

        • cssnano：压缩 CSS 文件

        • postcss-color-rgba-fallback：给 rgba 颜色创建降级方案(添加备用颜色)

        • postcss-opacity：给 opacity 提供降级方案（给 IE 浏览器添加滤镜属性）

        • node-pixrem：让 IE8 ⽀持 rem 单位

        • postcss-pseudoelements：将伪元素的 :: 转换为 : ( IE8 不不⽀支持 :😃

      • 网址

    • animista：CSS 在线动画生成器

      • 介绍

        • 自定义动画神器，有了它可以随心所欲的生成 css 动画代码，再 copy 到项目中，有效减少多余的未使用的 css 代码)

      • 网址

    • purifycss：显示项目中没使用到的 css

      • 介绍

        • 一个函数，它接受内容（HTML/JS/PHP/etc）和 CSS，并仅返回使用的 CSS。

        • PurifyCSS 不会修改原始 CSS 文件。您可以写入新文件，例如缩小。

        • 如果您的应用程序使用的是 CSS 框架，则此功能特别有用，因为许多选择器通常未使用。

        • 停止维护

      • 网址

    • PurgeCSS：删除无用 css 代码

    • uncss：去除样式表里面没有用到的 CSS 规则的工具

    • csso：CSS 转换压缩工具

      • 介绍

        • CSSO（CSS Optimizer）是一个 CSS minifier。它执行三种类型的转换：清理（删除冗余），压缩（替换较短的形式）和重组（合并声明，规则等）。结果，输出 CSS 的大小要小得多。

      • 网址

    • CSSNano：压缩 CSS 文件

      • 介绍

        • 这是一个用于压缩 CSS 文件的现代模块化工具。它需要您的 CSS 文件并执行一些优化，以尽可能地为生产环境压缩代码。它删除空格，注释，不必要的定义和重复样式。

      • 网址

    • normalize.css：CSS 重置的现代替代方案

    • Font Awesome：标志性的 SVG、字体和 CSS 工具包

    • css-checker：在几秒钟内减少类似&重复的 CSS 类与差异

  • stylelint：CSS 语法样式检查器：解析类似 CSS 的语法

  • 五种 CSS 设计模式

    • OOCSS（Object Oriented CSS）（‎ 面向对象的 CSS‎）

    • SMACSS（Scalable and Modular Architecture for CSS）（CSS 的可扩展和模块化架构）‎

    • BEM（Block - Element - Modifier）（块 - 元素 - 修饰符）

      • 比较流行的 class 命名规则

      • BEM

    • ITCSS（Inverted Triangle Cascading Style Sheets）（倒三角形级联样式表）‎

    • Atomic CSS（原子类 CSS）

图标库 ​

前端打包构建工具 ​

  • Esbuild： 超快的 Javascript 打包器

    • 介绍

      • 特性

        • 它基于 golang，就是比 node.js 快。

        • 高度并行的处理算法。

        • 节制的功能设计。

        • 重写核心工具链。

      • Esbuild 官方认为：“当前所有其他打包工具，都比他们理应达到的速度慢了 10-100 倍。”

      • 2021 年， Esbuild 在前端圈可谓大放异彩，本年度最大黑马 Vite 也毫不犹豫地选择了 Esbuild 作为自己的构建工具之一。

      • 可以说，在这个追求效率的年代，Esbuild 一定有更广阔的空间

    • 网址

  • Vite： 下一代前端工具

    • 介绍

      • Vite(读音类似于[weɪt]，法语，快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

      • vite 由 vue 作者：尤雨溪 开发， 一出手就直接瞄准了 webpack 最遭人诟病的软肋：“开发时构建实在太慢”。

      • vite 剑走偏锋，在 dev 时，通过 esbuild 进行 esm 格式进行模块加载，几乎实现了“秒开”的效果。让那些被 webpack 如同蜗牛般开发时构建速度折磨的研发人员直呼“牛哔”。

      • 在生产构建时，vite 则通过对老牌构建工具 rollup 进行了适度封装，降低了普通开发者的介入难度。

      • 无论你是 React 开发者亦或是 Vue 开发者，Vite 都是一款觉得值得尝试的工具。

    • 网址

  • Webpack：静态模块编译打包工具

  • Rollup：静态模块编译打包工具

    • 介绍

      • Rollup 是 JavaScript 的模块 bundler，可将一小段代码编译为更大或更复杂的内容，例如库或应用程序。

      • 它对 JavaScript 的 ES6 修订版中包含的代码模块使用了新的标准化格式，而不是先前的特殊解决方案（例如 CommonJS 和 AMD）。ES 模块使用户可以自由，无缝地结合自己喜欢的库中最有用的单个函数。

      • Rollup 是一个和 webpack 很类似但专注于 ES6 的模块打包工具，它的亮点在于，能针对 ES6 源码进行 Tree Shaking，以去除那些已被定义但没使用的代码并进行 Scope Hoisting(作用域提升)，以减小输出文件的大小和提升运行性能。rollup 的方法和 webpack 差不多

    • 网址

  • Babel：兼容语法转换工具链

  • Parcel：极速零配置 Web 应用编译打包工具

  • Grunt：任务执行者

  • Gulp：自动化任务执行器

    • 介绍

      • Gulp 是另一个自动化任务执行器，也是 Grunt 最强大的竞争对手。

      • 与 Grunt 最大的区别在于 Gulp 使用了一种更高效的自动化技术，可以加快构建时间。

      • 当 Grunt 使用临时文件来处理任务时，Gulp 执行内存中的操作，而不写入临时文件。这些内存中的操作称为节点流，可以为你节省大量时间，特别是当你希望在每个构建中处理多个任务时。

    • 网址

  • Browserify：Node.js 模块加载器

    • 介绍

      • Browserify 是一个 Node.js 模块加载器，可以绑定前端依赖项，并将它们作为单个 JavaScript 文件加载到用户浏览器中。

      • 使用 Node.js 的 require（）函数设计用于加载模块的包管理器，如服务器端的 npm 和 Yarn 加载模块。

      • Browserify 将 require（）方法带到客户端，这会带来巨大的性能提升。

    • 网址

  • Yeoman：规定最佳实践和工具

微前端解决方案 ​

管理后台模版 ​

  • 地址例子

    • 介绍

    • 网址

      • github

      • 官网

  • Vue Element Admin（Vue2）

  • Ant Design Pro（React）

    • 介绍

      • Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的用户和设计者的体验。

      • Ant Design Pro 的特点如下：

        • TypeScript: 应用程序级 JavaScript 的语言

        • 区块: 通过区块模板快速构建页面

        • 优雅美观：基于 Ant Design 体系精心设计

        • 常见设计模式：提炼自中后台应用的典型页面和场景

        • 最新技术栈：使用 React/umi/dva/antd 等前端前沿技术开发

        • 响应式：针对不同屏幕大小设计

        • 主题：可配置的主题满足多样化的品牌诉求

        • 国际化：内建业界通用的国际化方案

        • 最佳实践：良好的工程实践助您持续产出高质量代码

        • Mock 数据：实用的本地数据调试方案

        • UI 测试：自动化测试保障前端产品质量

    • 网址

  • React Admin（React）

  • iView Admin（Vue2）

    • 介绍

      • iView-admin 是 iView 生态中的成员之一，是一套采用前后端分离开发模式，基于 Vue 的后台管理系统前端解决方案。其内置了开发后台管理系统常用的逻辑功能，和开箱即用的业务组件，旨在让开发者能够以最小的成本开发后台管理系统，降低开发量。

    • 网址

  • Vue Manage System（Vue3）

    • 介绍

      • Vue Manage System 是一个后台管理系统解决方案。它作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3 + pinia，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

    • 网址

  • Vue vben admin（Vue3）

    • 介绍

      • Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3,vite2,TypeScript 等主流技术开发，开箱即用的中后台前端解决方案。

      • 其特点如下：

        • 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发

        • TypeScript: 应用程序级 JavaScript 的语言

        • 主题：可配置的主题

        • 国际化：内置完善的国际化方案

        • Mock 数据 内置 Mock 数据方案

        • 权限 内置完善的动态路由权限生成方案

        • 组件 二次封装了多个常用的组件

    • 网址

  • Vue Admin Better（Vue3）

    • vue-admin-beautiful（Vue2）

      • vue-admin-beautiful 是一款基于 vue+element-ui 的绝佳的中后台前端开发管理框架（基于 vue/cli 4 最新版，同时支持电脑，手机，平板）。

      • vue-admin-beautiful-pro 拥有四种布局（画廊布局、综合布局、纵向布局、横向布局）四种主题（默认、海洋之心、绿茵草场，荣耀典藏），共计 16 布局主题种组合，满足所有项目场景。

      • 已支持常规 bug 自动修复，前端代码自动规范，代码一键生成等众多功能，可以在完全不依赖后台的情况下独立开发完成项目，以及接口自动模拟生成，支持 JAVA、PHP、NODE、.NET、Django 等常用所有后台对接，甚至完全放弃 JAVA 等常规后端开发，内置 node 服务支持直接操作数据库进行增删改查，支持当前流行的 unicloud、serverless 云开发。

    • 介绍

      • vue-admin-better 是一个基于 vue3+element-plus 的中后台前端框架。

      • 其特点如下：

        • 40+高质量单页

        • RBAC 模型 + JWT 权限控制

        • 10 万+ 项目实际应用

        • 良好的类型定义

        • 开源版本支持免费商用

        • 跨平台 PC、手机端、平板

        • 后端路由动态渲染

    • 网址

  • Vue Pure Admin（Vue3）

  • Geeker Admin（Vue3）

  • Soybean Admin（Vue3）

    • 介绍

      • Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、Naive UI 和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案。

    • 网址

  • Vue Admin Box（Vue3）

  • Vue3.0 Template Admin（Vue3）

  • D2Admin（Vue2.7）

    • 介绍

      • D2Admin 是一个完全开源免费的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。

    • 网址

  • AntD Admin

    • 介绍

      • AntD Admin 是一套优秀的中后台前端解决方案。其特征如下：

        • 国际化，源码中抽离翻译字段，按需加载语言包

        • 动态权限，不同权限对应不同菜单

        • 优雅美观，Ant Design 设计体系

        • Mock 数据，本地数据调试

    • 网址

  • Vuestic Admin

  • Vue Antd Admin

  • ngx-admin

前端 状态管理 方案：Awesome State ​

UI 组件构建库 ​

  • UI 组件资源管理器：Storybook

    • 介绍

      • Storybook 是为许多其他库和框架制作的，而不仅仅是为 React 编写的。Storybook 的美妙之处在于，它是一个开发环境，允许您独立创建 UI 组件并在该环境中展示它们。

      • 支持的库的 UI 组件构建

        • React

        • Vue

        • Angular

        • Web Components

        • Ember

        • HTML

        • Svelte

        • Preact

    • 网址

桌面端跨端开发 ​

  • 跨端桌面应用开发的前世今生简史 - 掘金 (juejin.cn)

  • https://mp.weixin.qq.com/s/G4K3nIB1SsYDsOxMv7CyFg

  • 原生开发

    • 原生技术栈

      • 原生技术栈是指通过操作系统相关 API 或者操作系统厂家（如 Apple/Microsoft）提供的 SDK/工具来开发桌面应用的方式。使用原生技术开发的应用，通常能够在性能、体积以及系统的交互等方面做到非常不错的效果。

      • 优点

        • 构建产物体积小

        • 性能好

        • 系统 API 调用方便

        • 兼容性好

        • 和系统应用的交互融合度高，如要实现如下的一些系统原生 UI 组件非常方便

      • 缺点

        • 无法做到跨平台，所开发的应用只能在对应的平台上运行，如果需要跨平台运行，则需要在不同的操作系统上分别开发，开发成本高

        • 对于使用的技术栈有限制（Windows 使用 C#，macOS 使用 ObjC/Swift）

    • 无论是 windows、macOS、Linux 的原生开发基本都离不开 C 语言的家族，C、C++、C#、Objective-C 等

    • 优点在于更接近底层，灵活性更高，理论上性能阈值更高

    • 缺点则是学习门槛高，而且不支持跨平台

    • 类比成移动端开发的话，桌面端原生开发就有点类似 iOS 下的原生开发和安卓下的原生开发，可以做的事情相对更多、限制更少（因为跟接近系统底层），成品的性能理论上也更好。

    • Windows 平台

      • 作为目前使用率最高的操作系统，Windows 平台的 GUI 程序开发经历了漫长的迭代和演化的过程：Win32 API 作为 Windows GUI 开发的鼻祖，通过 C 语言调用 Windows 底层的绘图函数来进行开发；在 Win32 API 之后出现了 MFC（Microsoft Fundation Class），MFC 通过 C++语法将原有的 Win32 API 封装成了控件类（对话框控件、按钮控件等）；在 MFC 之后，微软推出了 Windows Form（2002 年），Windows Form 依赖于.NET 的运行时，提供了组件化的开发能力；在此之后，微软推出了 WPF（Windows Presentation Fundation，2006 年），WPF 提供了基于 XML 的语言 XAML 来描述 UI；在 Windows8 的时代，微软又推出了 UWP（Universal Windows Platform，2015 年），UWP 支持在各种平台上运行（PC/Windows Phone/Xbox），API 也支持多种语言（C++/VB/C#/JS）。

      • 从 Windows 平台应用的开发技术迭代来看，也可以大致看出 GUI 程序的技术发展史：

      • Win32API 时代：函数调用，指令式，Windows 系统处理

      • MFC 时代：面向对象，把一些指令式调用封装成类，由来自 UI 的消息驱动程序处理数据

      • Windows Form 时代：组件化，在类的基础上封装成组件，消息被封装成事件，事件驱动

      • WPF 时代：使用类 XML 语言来描述 UI，引入数据驱动 UI 的理念

      • UWP 时代：跨平台、多语言

    • macOS 平台

      • 现有的 macOS 原生应用主要基于 Cocoa 框架开发，Cocoa 是从 1980 年代由 NeXT（macOS 的前身）开发的编程环境 NeXTSTEP 和 OPENSTEP 演变而来，是面向对象的 API。

      • 在 2020 年的 WWDC 上，苹果推出了新一代的 UI 框架 SwiftUI，和 Flutter/React 等现代 GUI 框架类似，支持声明式的方式使用 Swift 语言作为 DSL 来编写 UI，同时也支持跨平台的特性，可以在 macOS/iOS/tvOS 等多平台运行。

    • Linux 平台

      • Linux 其源码只包含了操作系统内核的部分，桌面并不属于 Linux 源码的一部分，因此严格意义上来说，从「使用系统 API 和操作系统厂商提供的 SDK 开发的应用为原生应用」的定义上来说，并无所谓「原生技术栈」的概念。我们日常使用的发行版提供了桌面环境如 KDE、Gnome 等，Linux 发行版的这些桌面环境也提供了相关的一些库或者 API 来帮助绘制 GUI 程序，如 gtk+等，可以认为是「原生技术栈」。

  • Neutralinojs：系统原生组件开发桌面应用的框架

  • Chromium + Node

    • 介绍

      • Web 相关的技术在跨平台中永远是最受青睐的选择，无论是开发的便捷程度，还是庞大的 JS 开发者生态等等因素，都使得 Web 技术无论是在移动端还是桌面端的跨平台应用开发上都稳坐使用率最高的技术栈。

      • 优点

        • 开发成本比原生低，可以方便做到一套代码在不同操作系统上运行

        • 实现复杂的 UI 和动效方便，可以更快地实现一些比较炫酷的 UI 界面

      • 缺点

        • 调用系统原生 API 不方便通常需要使用打包其他的运行时环境或 JSBridge 的方式来进行调用

    • Electron.js

      • 简介

        • Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在 Windows 上运行的跨平台应用 macOS 和 Linux——不需要本地开发 经验。

        • Electron（原名为 Atom Shell）是 GitHub 开发的一个开源框架，最初用来开发 Atom 编辑器。它通过使用 Node.js（作为后端）和 Chromium 的渲染引擎（作为前端）完成跨平台的桌面 GUI 应用程序的开发。

        • 代表应用：VSCode（303M）、Figma（213M）、Bilibili（397M）、Discord（367M）、QQ Beta（747M）、1Password8（343M）、MS Teams（264M，根据参考文献[2]，微软正在替换 Electron 的实现，但目前看我电脑中下载的版本解包中，依然还有 Electron.framework 的文件）

        • 例子

          • VSCode

          • Typro

          • Postman

          • Skype

        • 优点

          • 开发方便，技术栈适合前端同学（UI 使用 Web 技术，系统 API 交互部分使用 NodeJS）

        • 缺点

          • 打包体积大，需要打包 Chromium 和 NodeJS 的运行时环境

          • 内存消耗大：Chromium 本身比较吃内存，同时 NodeJS 是 JIT 运行的，相比较 C++等 AOT 的语言来说内存消耗也更大。

        • 实际上，并不代表 Electron 技术开发的应用性能就一定不如其他技术栈，总的来说，具体的性能表现还是取决于开发者的投入，例如微软在 VSCode 的博客中给到了一个例子，能够将 VSCode 在渲染括号颜色匹配的速度提高 10000 倍[3]。

      • 网址

      • 系列工具

      • Electron Fiddle：初学者专属：官方出的快速启动的一个模板应用

    • NW.js

      • 简介

        • NW.js 是基于 和 的应用运行时。您可以使用 NW.js 用 HTML 和 JavaScript 编写本机应用。它还允许您直接从 DOM 调用 Node.js 模块，并启用一种使用所有 Web 技术（HTML/CSS/JS 跨平台）编写本机应用程序的新方法。Chromiumnode.js

        • NW.js 基于 MIT 开源，可以无忧使用

        • 开发例子

          • 微信桌面版

        • 它是在英特尔开源技术中心创建的。

      • 网址

    • react-desktop

  • 跨平台框架

    • QT

      • 介绍

        • Qt（/ˈkjuːt/）是一个跨平台的 C++应用程序开发框架，广泛用于开发 GUI 程序，在工业、嵌入式等领域的桌面程序中有着非常深入的使用。

        • 代表应用：WPS Office、剪映桌面版、AutoDesk

        • 优点

          • 性能好，与 Native 开发的应用性能相差无几

          • 支持的操作系统丰富，跨平台性能好

        • 缺点

          • C++开发成本高

          • GPL 协议，商业版本需要给钱，不符合咱们去肥增瘦的理念

      • https://www.qt.io/

    • Flutter

      • 介绍

        • Flutter 是一个由 Google 开发的跨平台应用开发框架，最初只用于移动端为 Android、iOS 开发应用。2015 年 4 月，Flutter 正式发布，其目标是希望可以在跨平台的特性上，实现 120FPS 的渲染性能。2018 年，Flutter 1.0 发布，是该框架的第一个稳定版本。2022 年 5 月，Google 在 Google I/O 2022 发布了 Flutter 3.0 版本，宣布对 Windows、macOS、Linux 桌面操作系统提供支持。

        • Flutter 是一个流行的应用程序开发框架。开发者通常使用该平台来开发移动应用程序。但它也为桌面应用程序开发提供了框架。

        • 桌面 Flutter 框架包含许多值得我们注意的功能，这些已经成为开发人员的理想工具。其中有一些是：

        • 本地功能：此框架可帮助您开发具有本机功能的应用程序。这样的桌面应用会更安全，而开发人员可以访问底层的 Cocoa 和 Win32 API。

        • 支持多平台：开发人员可以使用该框架为 Windows、Linux 和 Mac OS 开发强大的桌面应用程序。

        • 无浏览器引擎依赖：在此框架上开发的应用程序具有原生特性。因此，应用程序不依赖于浏览器引擎。

        • 该框架非常适合需要专业桌面应用程序开发框架的开发人员。

        • 优点

          • 性能好（相比较 Web 技术栈）

          • Dart 语言容易学习和上手、开发成本低

        • 缺点

          • 桌面端才刚刚发布稳定版支持，生态和稳定性都有待考量

      • 网址

    • CEF（Chromium Embedded Framework）

      • 介绍

        • 由于需要将 Chromium 和 NodeJS 的运行时打包进去，所以 Electron 构建应用的体积都会非常大，但是 CEF 的存在解决了 Electron 的这个问题（实际上，CEF 出现的时间比 Electron 早多了）。由于 Chromium 里面有许多第三方组件（如 ffmpeg 等），在开发应用的过程中，我们通常不会使用到 Chromium 的全部能力，因此 CEF 提供了一个轻量级的嵌入式 Chromium，同时还可以根据自己的需求进行裁剪。

        • CEF 提供了将 Chromium 嵌入到应用中，展示 Webview 的能力，同时也提供了 C++的一些 API，在需要做一些浏览器无法实现的原生 API 依赖的功能时（如系统文件读写等），则需要使用 C++（或其他语言，但是 CEF 的原生接口是 C++的）来编写相关的能力，并提供 JSBridge 给前端代码进行调用。

        • 代表应用：网易云音乐、Spotify、飞书等

        • 自渲染技术栈

        • 要实现跨平台的 GUI 应用，比较流行的的方式是实现自渲染的管线。上层通过提供类 Canvas 的绘制、渲染和排版能力，下层使用 OpenGL/Vulkan/Metal 等图形 API 进行绘制。在 Web 的跨平台桌面应用开发技术栈发展之前，许多应用开发框架都采用了类似的思路去实现跨平台的应用开发，如 QT（C++语言）、Flutter（Dart 语言，基于 Skia 渲染）和 Swing（Java 语言）等。相比于 Electron 和 CEF 的方案，由于不需要打包运行时环境（Swing 除外，需要打包 JRE）和减少了 Bridge 转换，所以体积和运行效率通常会优于 Web 技术栈。

        • 优点

          • 自绘性能通常会优于 Web 跨平台技术（具体还是取决于框架实现）

        • 缺点

          • 开发成本略高于 Web 技术栈

          • 实现复杂效果的能力不如原生和 Web 技术栈，通常情况下需要写更多复杂的代码（取决于具体框架的设计，这一点 Flutter 做得比较好）

    • Neutralino

      • 介绍

        • Neutralinojs 是一个流行的桌面应用程序开发框架，非常适合初学者。你只有基本的 Web 开发知识，就可以在这个框架上开发轻量级和跨平台的桌面应用程序。

        • 是，开发者必须了解 CSS、JavaScript 和 HTML 才能使用此平台。该平台的特点包括如下：

        • 丰富的库：Neutralinojs 自带轻量级、可移植的 SDK，不需要再安装 Node.js。无缝的 SDK 库可防止应用程序变臃肿；

        • 原生 API：Neutralinojs 有一个 JavaScript API，它可以让开发者访问操作系统级别的功能，例如命令执行、文件操作等。

        • 后端和前端开发：开发人员可以轻松地将这个平台与任何前端或后端框架一起使用，这提供了极大的灵活性。

        • 如果你正在寻找 Electronjs 开发框架的替代方案，Neutralinojs 是一个可行的选择。一些应用程序可能会因为 Electron 而变得非常庞大，但 Neutralinojs 可以帮助避免此类问题。

      • 网址

        • 官网

        • github

    • Xojo

      • 介绍

        • 如果你正在寻找适合初学者的框架，那 Xojo 是一个不错的选择。

        • 它是一个只需简单拖放就能生成用户界面的跨平台应用开发框架。只要具有基本 Web 开发技能的开发者就可能轻松使用该它开发桌面应用程序。

        • 该框架具有高级数据库支持、互联网协议兼容性和图形辅助。其显著特点有：

        • 原生控件：Xojo 拥有 40 多个用户界面控件，这些控件目标为开发者提供轻松的用户体验。

        • 高级功能：虽然 Xojo 对初学者很友好，但它也提供了许多高级功能。你可以从该平台获得图形化帮助，创建具有视觉吸引力的桌面应用。

        • 活跃的用户社区：初学者可以加入 Xojo 社区，寻求其它开发者伙伴的帮助。活跃的社区是此应用程序框架的一个显著优势。

        • 各种资源：资源池使该平台上的应用程序开发更容易。开发者可以访问示例项目、视频库、教程等大量有价值的资源。

        • 总体而言，Xojo 是一个快速发展的跨平台应用程序开发框架，非常适合初学者。

      • 网址

        • 官网

        • github

    • OS.js

      • 介绍

        • 如果正在寻找基于 JavaScript 的 Web 和桌面应用程序开发平台，OS.js 是你的最佳选择之一。该框架具有许多独特的功能，使开发者的工作变得更轻松，并且它带有一个独特的窗口管理器，使编码或编程变得无忧无虑。

        • 此外，OS.js 框架还提供了 GUI 图形工具包、应用程序 API、文件系统抽象等。OS.js 的主要功能包括如下：

        • Webpack：框架自带一个 webpack，由各种包和模块组成。开发者可以使用 webpack 轻松地向自己的应用程序添加功能。

        • 包：你可以在包下找到许多资源。例如应用主题，可以用它们来开发更引人注目的用户界面。

        • 模块：开发者可以使用模块改进和添加各种应用程序功能。

        • OS.js 是一个简单方便的桌面应用开发平台。如果你有 JavaScript 能力，那么这个桌面应用程序开发框架很适合你。

      • 网址

        • 官网

        • github

    • WPF 工具包

      • 介绍

        • Xceed Software 的 WPF 工具包带有用于开发下一代 Windows 应用程序的 WPF 组件、控件和实用程序。开发人员使用该工具包可为 Windows 创建高性能 WPF 应用程序。

        • WPF 工具包在开发人员中很受欢迎，它已在 NuGet 和 Codeplex 上下载超过一百万次。其主要特点是：

        • 广泛的资源：该工具包为开发人员提供了一个全面的资源库。你会发现多个控件，可以加快开发过程。

        • Plus 版：Xceed Software 的 WPF 工具提供 Basic 和 Plus 版本。如果你是 plus 会员，还可以访问更多其他控件。

        • 许可：工具包附带许可；因此，开发者在使用该平台时不会面临版权法律上的麻烦。

        • WPF Toolkit 的高级桌面应用开发适用于希望为 Windows 桌面计算机构建强大应用程序的开发者。

      • 网址

        • 官网

        • github

    • 8 th Dev

    • 介绍

      • 如果你正在找一个高级且强大的桌面应用开发框架，并且它对初学者也很友好，请尝试 8 th Dev。你可以使用此框架用最少的编码知识开发一个轻松且高级的桌面应用。

      • 优秀的是 8 th Dev 提供了与 Windows、Mac OS、Android、Linux 和其它操作系统的兼容性。

      • 令人吃惊的内置功能：有用的内置功能使应用程序开发特别适合初学者：用户将获得跨平台 GUI 支持、强大的安全加密、REST 访问、数据库支持、硬件访问等。

      • 无与伦比的安全性：虽然每个人都在寻求功能强大、多任务处理和用户友好的应用程序，但安全性已成为一项被忽视的功能。而 8 th Dev 将安全视为最关键的方面之一；

      • 具有成本效益：8 th Dev 有多个版本，具有不同的封装成本。基础版是免费的，初学者可以使用这个版本开发简单的桌面应用程序。

      • 8 th Dev 是用于高级桌面应用程序开发的强大且让人轻松的框架。这款框架非常适合初学者，免费版本可帮助初学者运行他们的测试项目。

    • 网址

      • 官网

      • github

    • Haxe

      • 介绍

        • Haxe 是一个跨平台的桌面应用程序开发框架，它可以在桌面和手持设备上运行。如果你了解 Java、C#、Python、PHP 或其它 Web 编程语言，使用此框架将是非常容易的事。

        • 该框架通常用于开发商业、游戏和娱乐应用程序。其主要特点是：

        • 开源：Haxe 是一个可靠的开源框架，拥有一个蓬勃发展的社区，许多贡献者致力于扩展其功能。

        • 多个库：开发人员可以找到大量的库，从而简化了开发过程。这将提高开发速度和准确性。

        • 高性价比：Haxe 是为处理专业应用程序开发项目而开发的高性价比平台。你可以使用该框架创建具有高级图形和复杂架构的应用程序。

        • 总体而言，该框架适用于为多个平台开发商业和娱乐应用程序。

      • 网址

        • 官网

        • github

    • Enact

      • 介绍

        • Enact 是一个适合有 React JS 知识的开发人员的应用开发框架。使用此框架，你可以轻松开发简单、功能丰富且可自定义的桌面应用程序。Enact 附带一个简单的命令行工具，使安装更简单。

        • 此外，它拥有一个蓬勃发展的用户社区，其中有许多可以帮助新手开发人员的资深开发者和贡献者。活跃的贡献者还不断向框架添加新功能。

        • 它的特点总结如下：

          • 用户友好：Enact 是一个对初学者友好的平台。丰富的 React 库使框架完全能够支持日常使用。

          • 高性能应用程序：除了初始设置外，该框架还为开发人员提供了许多益处，特别是构建一个高性能的应用程序。

          • 定制：开发人员寻找可以提供定制功能的灵活框架。该平台具有可自定义的小部件，最大化满足用户的需求。

          • 适应性强：基于 React 的应用程序具有类似原生应用程序的特性。因此，你可以使用 Enact 为各种嵌入式 Web 平台开发本机应用程序。

      • 网址

        • 官网

        • github

    • UWP

      • 介绍

        • UWP 是为 Windows 操作系统构建桌面应用程序的有效方式。使用 UWP 框架开发的应用程序将 WinRT API 用于其用户界面。其显著特点如下：

        • 安全性：你可以使用 UWP 工具包开发具有强大安全性的应用程序，该应用程序寻求用户授权以进行数据访问。因此应用程序对用户来说变得更透明且值得信赖。

        • 可用性：UWP 工具包可在 Microsoft Store 上轻松获得，适用于使用 Windows 10 或 11 操作系统运行的所有设备。

        • 更有趣：你可以开发具有推送通知、实时标题、用户活动和许多交互功能的令人兴奋的应用。

        • 使用 UWP 工具包很简单，它非常适合开发在设备上要求有安全互联网连接的应用程序。

      • 网址

        • 官网

        • github

    • Xamarin.Forms

      • 介绍

        • Xamarin.Forms 是一个开源框架，用于开发适用于不同操作系统（如 Windows、macOS、Android、iOS 等）的应用程序。

        • 开发者将获得适应桌面和移动屏幕尺寸和分辨率的响应式用户界面。

        • MVVM 模型：MVVM 模型代表一种将数据、用户界面和应用程序逻辑解耦的设计模式。Xamarin 开发者须遵循设计模式来构建应用。

        • 本地功能：Xamarin 提供对本机功能的访问权限。开发者可以构建具有强大安全性和本地无缝且高性能的应用程序。

        • Xamarin.Forms 框架非常适用于构建跨平台应用程序。

      • 网址

        • 官网

        • github

    • Swing（Java）

      • 介绍

        • Swing 是一个用于开发 Java GUI 应用的框架。它采用纯 Java 实现，不再依赖于本地平台的图形界面，所以可以在所有平台上保持相同的运行效果，对跨平台支持比较出色。

        • 代表应用：Jetbrains IDE

        • 优点

          • 跨平台性能好：write once run anywhere （write once debug everywhere)

        • 缺点

          • 需要打包 JRE，体积大

      • 网址

        • 官网

        • github

  • webview 家族

    • Tauri

      • 简介

        • Tauri 是 Rust 编写的桌面 UI 框架，可让开发者使用每个平台的 Webview 技术栈为所有主要桌面操作系统构建应用程序，目前支持 Windows/macOS/Linux 等平台。开发者通过 Tauri 几乎可以使用任何编译为 HTML、JS 和 CSS 的前端框架来构建桌面 UI。

        • Tauri 核心库采用 Rust 编写，使用 Tauri 开发的应用程序的后端是一个基于 Rust 的二进制文件，带有一个前端可以与之交互的 API，通过 JS Api 调用后台接口。

        • 相比 Electron，它摒弃了 Chromium 和 Nodejs，使用了操作系统的 webview，所以打包后体积更小。

        • 该框架的一些显着优点：

          • 应用程序更小更快：Tauri 用户可以使用操作系统的原生渲染器来开发小于 600 KB 的应用程序。因此，开发者可以构建速度更快的轻量级应用程序。

          • Rust 编程语言：Tauri 1.0 使用 Rust 编程语言，该语言作为构建下一代应用程序的语言正在迅速流行。

          • 安全性：Tauri 拥有一支专门的团队，定期开发安全补丁，使平台能够抵御复杂的网络威胁。因此你的应用程序将更安全，威胁和数据盗窃事件的风险将较低。

          • 重新许可：Tauri 允许重新许可成为 MIT 或 Apache 2.0 许可证，确保应用的版权无忧。除了重新许可之外，它还使应用程序的重新分发变得非常容易。

        • 总体而言，Tauri 适合开发能够精确渲染、快速、高性能的小型桌面应用程序。

        • 特性：

          • 性能高（optimized）：Rust 的性能和 C/C++的性能不相上下，由于 Rust 的「所有权」机制，Rust 不需要 GC，同时也能避免如 C/C++之类需要手动管理内存的语言忘记释放内存导致的内存泄露的问题；

          • 安全性强（secure）：Rust 设计了一个所有权系统，其中所有值都有一个唯一的所有者，并且值的作用域与所有者的作用域相同。值可以通过不可变引用（&T）、可变引用（&mut T）或者通过值本身（T）传递。任何时候，一个变量都可以有多个不可变引用或一个可变引用，这实际上是一个显式的读写锁。Rust 编译器在编译时强制执行这些规则，并检查所有引用是否有效。能够有效避免 C/C++等语言中的悬垂指针等问题

          • FFI 编译友好（multiplatform）：FFI 是可以用一种编程语言写的程序能调用另一种编程语言写的代码的机制，使用 Rust 可以方便地提供接口给其他语言调用；

        • 由于 Web 技术的表现力强、开发成本低的特点，与 Electron、CEF 等框架类似，Tauri 应用的前端实现也是使用 Web 技术栈编写的。

        • Tauri 就采用了这样的一个方案，WRY 是 Tauri 封装的 Webview 框架，它在不同操作系统的平台上，封装了系统 Webview 的实现：在 macOS 上使用 WebKit.WKWebview[2]，在 Windows 上使用 Webview2[3]，在 Linux 上使用 WebKitGTK[4]。这样在运行 Tauri 应用时，会直接使用系统 Webview 来渲染应用前端的展示。

        • 对于不会使用 Rust 的同学来说，学习 Rust 还是存在着不少的学习成本，但是别担心，在需求简单的情况下，你完全可以不写 Rust 代码。Tauri 框架提供了如下的一些 API，可以方便地在 JS 中对原生能力进行调用：

          • cli：解析应用启动时的命令行参数

          • clipboard：对系统剪贴板的读写

          • dialog：展示系统文件选择、文件保存弹窗

          • event：给后端发出一些事件，后端监听并处理

          • fs：文件系统的操作，提供文件读写等能力

          • globalShortcut：注册全局快捷键

          • http：使用 Rust 的 Http 客户端进行网络请求

          • notification：系统通知

          • os：获取操作系统的一些信息

          • path：文件和文件夹路径处理的一些工具

          • process：对当前的进程进行一些操作

          • shell：对系统 shell 的一些操作

          • 需要注意的是，上述的一些 API，为了保证安全性，对于权限都有着严格的限制，都是默认关闭的状态，需要修改配置以手动启用相关的功能

        • lectron 类似，Tauri 也采用的是多进程的架构（Electron 中有主进程和渲染进程），多进程的好处是能够更好更有效地利用现代多核 CPU 的能力，同时一个组件的崩溃也不会影响到其他组件的运行，因为组件被隔离在了不同的进程中。如果应用中的某个进程崩溃了，我们只要重启该进程即可。还可以通过只给每个进程分配足够完成工作的最低限度的权限，来限制潜在漏洞的破坏范围。这种模式被称为最小权限原则。

        • 在 Tauri 中，进程分为两类：主进程和 Webview 进程。每个 Tauri 应用程序都有一个主进程，它作为应用程序的入口点，是唯一可以完整访问操作系统的组件。主进程的主要职责是使用访问权限来创建和管理应用程序窗口、系统托盘菜单或通知。Tauri 实现了必要的跨平台抽象来简化该操作。它还通过核心进程路由所有的 IPC，通过类似于事件总线的机制，可以方便地拦截、过滤和操作 IPC 消息。主进程还应该负责管理全局状态，例如数据库连接。这使你能够轻松地在窗口间同步状态，并保护你的业务敏感数据。主进程自身并不渲染实际的用户界面，它会直接利用操作系统提供的 WebView 库来实现页面渲染，不同的窗口之间会拥有不同的 WebView 进程，WebView 进程用来负责渲染对应的 UI。

      • 网址

      • 初级开发教程

      • 项目开发参考

      • 编译问题

        • Mac

          • Mac 下 build 一切顺利，产物在 /src-tauri/target/release/bundle 目录下

          • img

        • Windows

          • Windows 下 build 会下载一个叫 wix311-binaries.zip 的包，失败的概率挺大的。可以直接使用浏览器下载解压到 src-tauri/WixTools 目录，相关 Issue-Build error with wix3112

            • 对于 tauri 1.0 版，把手动下载的文件夹解压到这里：

            • C：\Users[用户名]\AppData\Local\tauri\WixTools

          • 若构建时遇到 error running light.exe window 的错误，在 tauri.conf.json 的 bundle 找到 windows 的 wix 添加语言。相关 Issue -error running light.exe window

            • "windows": { "wix": { "language": "zh-CN" }}

        • 构建成功后，产物也在 /src-tauri/target/release/bundle 目录下

        • output

        • 其实 release 目录下的 exe 也能直接使用，但 bundle 目录下的是安装文件，可把 webview2 的一些东西弄进去，用户直接安装就行，不管环境，当然也可在 tauri.conf.json 中设置，排除 webview2。

        • 可根据实际情况进行策略调整，我这边选择的是不包含 webview2，直接提供裸包，提醒 windows 10 及以下系统用户进行 webview2 安装。

    • wails

      • 介绍

        • 使用 Go + HTML + CSS + JavaScript 构建漂亮的跨平台桌面应用

        • 为 Go 程序提供 Web 界面的传统方法是通过内置的 Web 服务器。Wails 提供了一种不同的方法：它提供了将 Go 代码和 Web 前端包装成单个二进制文件的能力。提供了一些工具，通过处理项目创建、编译和捆绑来简化此操作。您所要做的就是发挥创造力！

      • 网址

    • neutralinojs

      • 介绍

        • 可移植和轻量级的跨平台桌面应用程序开发框架

        • Neutralinojs 是一个轻量级和可移植的桌面应用程序开发框架。它允许您使用 JavaScript，HTML 和 CSS 开发轻量级的跨平台桌面应用程序。

        • 使用 Neutralinojs 构建的应用程序可以在 Linux、macOS、Windows、Web 和 Chrome 上运行。

        • 此外，您可以使用任何编程语言扩展 Neutralinojs（通过扩展 IPC），并使用 Neutralinojs 作为任何源文件的一部分（通过子进程 IPC）。

      • 网址

    • go-astilectron

    • electrino

      • 介绍

        • 基于 Web 技术构建的应用的实验性桌面运行时，使用系统自己的 Web 浏览器引擎。该项目还很年轻，正在接受贡献。

        • Electrino 旨在成为流行而强大的Electron的轻量级替代品。它实现了 Electron 中可用的 API 的极小部分，但输出应用程序的大小要小得多。

        • 使用 Electron 的“Hello World”应用程序需要 115 MB，但使用 Electrino 只需要 167 kB：

        • 已于 3 年前停止维护

      • 网址

    • 他们的共同点是：

      • 界面渲染部分交给系统的 webview 来执行，这样，界面部分既能确保可以使用前端三剑客编程，也可以规避 Electron 需要打包整个 Chromium 导致最终包体积过大的问题

      • 跟系统交互、做 IO 处理部分会交给一种语言处理（上述框架都有所不同），有用 rust 的，也有用 C++ 的，也有用 go 的

  • 总的来说，虽然不同大类技术栈的应用具体实现原理有所不同，但是相关开发的技术栈的大致特点可以归纳如下：

    • 系统 API 调用和交互：原生应用 > 自渲染应用 > Web 应用

    • 开发便捷程度：Web 应用 >> 自渲染应用 > 原生应用

    • 打包体积：Web 应用 > 自渲染应用 > 原生应用

    • 性能：原生应用 > 自渲染应用 > Web 应用

大厂设计体系 ​

  • AntDesign：阿里设计体系

    • 介绍

      • Ant Design 是一个带设计语言的免费 UI 框架，一个致力于提升「用户」和「设计者」使用体验的企业级设计体系，简单地说，能够让使用它的人更愉悦。

      • 使用专业的 UI 组件库，既能快速搭建项目，后期也容易维护，在敏捷开发项目中尤为常见。设计师可以下载设计文件，在做设计图时直接使用模板，既能快速出图，也保证了前端还原实现。因此，选择一个优秀的组件库，特别重要。

    • 特点

      • Ant Design 不仅是一个前端 UI 框架，在设计价值观也有着与众不同的坚持，官网的阐述都太过于学术，读起来非常难懂，下面是我读完后的理解，供大家参考：

      • 自然：我们每天接触的互联网产品日益复杂，而我们的意识和注意力是非常有限的。通过自然的设计，帮助用户理解产品，就像生来就会的技能一样；

      • 确定性：其实也可以理解为一致性，企业的设计者要考虑最终产品呈现的一致性，减少每个人的主观干扰，最终带给用户易学、符合预期、一致的体验；

      • 意义感：在遵循设计规范的同时，还要考虑通过产品设计附加有意义的交互。例如一个交互的结果是解决问题，所以目标要明确，反馈要清晰；交互过程的意义在于成就感和沉浸，产品设计时应该要考虑这些问题；

      • 生长性：产品功能和用户需求密不可分，两者之间相互影响，共同发展

    • 开发使用体验

      • Ant Design 是一款适合桌面端和移动端的组件库，组件涵盖了绝大部分产品交互界面，开箱即用，能够帮助企业在很短时间内打造出优秀的产品。

      • 为了让我们在工作中愉悦，官网提供了很多设计资源，涵盖 axure、sketch 和新宠设计工具 figma，如果能在公司内部推广开来，能够大大提高协同生产力，企业级 UI 框架名副其实。

    • 官网

  • TDesign：腾讯设计体系

  • ArcoDesign：字节跳动设计体系

    • 介绍

      • ArcoDesign 主要解决在打造中后台应用时，让产品设计和开发无缝连接，提高质量和效率。目前 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由 UED 设计和开发同学共同构建及维护。

    • ArcoDesign 的亮点

      • 提供系统且全面的设计规范和资源，覆盖产品设计、UI 设计以及后期开发

      • React 和 Vue 同步支持。同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue3.0 开发

      • 支持一键开启暗黑模式，无缝切换

      • 提供了最佳实践 Arco Pro，整理了常见的页面场景，帮助用户快速初始化项目和使用页面模板，从 0 到 1 搭建中后台应用

    • 官网

  • KingDesign：金山云出品的设计系统

    • 介绍

      • 金山云的开源组件库更新版本了，设计系统和开发工具都更完善，前端组件库支持 Vue2、Vue3 和 React 。

      • KingDesign 由组件、开发、设计资源、⼯具、解决方案、设计指南组成，我们可以用来快速构建⼀致性强的产品。

      • KingDesign 同样是基于 MIT 开源协议，任何公司和个人都可以免费下载使用，而金山云技术体也是一款全社会免费商用的艺术字体

    • KingDesign 的特性

      • 全新的前端 UI 组件库，交互动效细致，包含多个常用的业务组件，支持 Vue2 / Vue3 和 React

      • 统一、完整的设计指南，可用于产品统一设计规范，也提供了适用于 sketch / figma 等设计资源文件，方便设计师和产品经理调用

      • 全新发布的免费商用字体：金山云技术体，充满科技感

    • 官网

😎前端主流框架的UI框架 ​

PC 💻 ​

Mobile 📱 ​

React-Native ​

React ​

jaywcjlove/icongo：搜索 SVG 图标。在你的 React 项目中轻松包含流行的图标，并提供一个简单的工具将 SVG 转换为 React 组件。@icongo (github.com)

Released under the MIT License.

Copyright © 2022-2023 MuYa