Skip to content

huaize2020/awesome-frontend

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

104 Commits

LICENSE

LICENSE

 
 

README-en.md

README-en.md

 
 

README.md

README.md

 
 

Repository files navigation

English | 简体中文

正在持续建设中...

同时推荐你查看我正在维护的其他仓库

目录

官方文档

Web技术

ECMAScript

资源

教程

前沿技术

  • 前端精读周刊 - 前端精读周刊。帮你理解最前沿、实用的技术。
  • Web 技术周刊 - 汇总平时看到的优秀文章，前端为主，兼含其它技术及少量产品、设计、管理内容。
  • 前端日报 - 每日会挑选一些比较有用的文章发在公众号上，欢迎关注。

面试题

算法

GIT仓库

CSS

框架

  • tailwindcss - 一个功能类优先的 CSS 框架。
  • bulma - 基于 Flexbox 的现代CSS框架。

CSS动画

  • animate.css - 跨浏览器CSS动画库。简单易用。
  • Hover.css - 一个悬停效果的CSS3集合，可应用于链接、按钮、徽标、SVG、特色图像等。提供CSS、Sass等版本。
  • Loaders.css - 令人愉快的、注重性能的纯 css 加载动画。
  • csshake - 让你的 DOM 颤抖起来。

数字

  • Numeral.js - 格式化和操作数字。
  • bignumber.js - 用于任意精度十进制和非十进制算术的 JavaScript 库。
  • decimal.js - JavaScript的任意精度的十进制类型。
  • big.js - 一个小型，快速的JavaScript库，用于任意精度的十进制算术运算。
  • round-to - 将数字四舍五入到指定的小数位数：1.234→1.2`。
  • unique-random - 生成连续唯一的随机数。
  • random-int - 生成随机整数。
  • random-float - 生成随机浮点数。

数学运算

  • mathjs - 广泛的数学运算库。
  • ndarray - 多维数组。
  • algebra - 代数结构。
  • multimath - 在WebAssembly和JS中进行快速图像数学运算。

日期 和 时间

  • moment - 解析、校验、操作和显示日期。
  • dayjs - 仅2KB，不可变的日期时间库。使用与Moment.js同样的API，Moment.js的替代库。
  • date-fns - 现代JavaScript日期工具库。
  • luxon - 用于处理日期和时间的库。
  • timeago.js - timeago.js是一个很小的（2.0 kb）库，用于使用 *** time ago 语句格式化日期。
    • timeago-react - 简单高效的react组件使用 *** time ago 语句格式化日期。 例如：'3 hours ago'。
  • ms - 毫秒转换工具。
  • dateformat - 日期格式化。
  • pretty-ms - 将毫秒转换为人类可读的字符串，如: 1337000000 → 15d 11h 23m 20s。
  • strftime - JavaScript版时间格式化Strftime。
  • date-utils - 用于Node.js和浏览器的日期垫片（Polyfills）。

JavaScript框架

  • vue - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • react - 用于构建用户界面的 JavaScript 库。 (你也许会喜欢 awesome-react)
  • angular - 现代 Web 开发平台。
  • svelte - Svelte 是一种全新的构建用户界面的方法，增强的Web应用程序。
  • preact - Preact 是 React 的轻量化替代方案，仅有 3KB。并且提供了相同的 ES6 API，还具有组件和 Virtual DOM。
  • petite-vue - Vue子集，优化渐进增强，仅 5kb。

跨端/多端框架

  • uni-app - Uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架。
  • Taro - 开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。
  • rax - Rax 是阿里巴巴应用最广泛的跨端解决方案，支持开发者通过类 React DSL 编写 Web、小程序、Flutter 等不同容器的跨端应用。

表单相关

上传

  • uppy - Uppy 是一款时尚的模块化 JavaScript 文件上传器，可与任何应用程序无缝集成。 它快速、易于使用，让您可以考虑比搭建文件上传器更重要的问题。
  • dropzone - Dropzone 是一个易于使用的拖放库。 它支持图像预览并显示漂亮的进度条。
  • webuploader - WebUploader是一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
  • plupload - Plupload 是用于构建文件上传器的 JavaScript API。 它支持多文件选择、文件过滤、分块上传、客户端图像缩小，并且在必要时可以回退到替代运行时，如 Flash 和 Silverlight。

交互相关

键盘操作

  • mousetrap - 处理键盘快捷方式的简单库。
  • keymaster - 一个用于定义和触发键盘快捷键的微型库。 它没有任何依赖。

微前端

  • qiankun - 快速、简单和完整的微前端解决方案。
  • single-spa - 简单微前端的路由器。
  • emp - 这是一个面向未来的，基于Webpack5 Module Federation搭建的微前端解决方案。
  • piral - 使用微前端的下一代 Web 应用程序框架。
  • garfish - 一个功能强大的微前端框架。🚚

Canvas/SVG

你也许会喜欢 awesome-canvas

  • fabric.js - Javascript Canvas 库，SVG-to-Canvas（和 canvas-to-SVG）解析器。
  • rough - 创建具有手绘、粗略外观的图形。
  • konva - Konva.js是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互来扩展2d上下文。
  • concrete - 一个轻量级的 Html5 Canvas 框架，支持命中检测、支持图层、像素比管理、导出和下载。

WebGL

  • three.js - JavaScript 3D库。
  • pixijs - HTML5创意引擎：用最快、最灵活的2D WebGL渲染器创建漂亮的数码内容。
  • gl-matrix - 用于操作矩阵和向量，开发高性能的 WebGL 应用程序的JavaScript库。
  • Oasis Engine - Oasis Engine 是一个Web优先 和 移动端优先的高性能实时开发平台。

全屏

  • screenfull - 跨浏览器使用 JavaScript Fullscreen API 的封装。

存储

  • localForage - 💾 离线存储增强。 基于 IndexedDB、WebSQL 或 localStorage 封装的使用简单但功能强大的 API 。

动画

  • anime.js - JavaScript 动画引擎。
  • lottie-web - 在Web、Android和iOS以及React Native上渲染After Effects动画。
  • mojs - 用于Web的动态图形工具。
  • velocity - Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖jQuery，可单独使用。
  • svg.js - 用于操作和使SVG动画的轻量级库。
  • dynamics.js - 创建基于物理的动画。
  • animsition - 一个简易的jQuery插件用于CSS页面切换过渡效果
  • TweenJS - 一个简单但功能强大的tweening/animation库。CreateJS库套件的一部分。

视觉差

  • parallax - 对智能设备的方向做出响应的视觉差引擎。
  • rellax - 轻量、原生Javascript的视觉差库。

波纹

  • wavesurfer.js - 以Web音频和Canvas的音频波纹。
  • wavedrom - 数字时序图（波形）渲染引擎。
  • waveforms - 一个互动的、可探索的声波纹描绘特效。
  • siriwave - Apple® Siri 波纹特效
  • waveform-playlist - 具有画布波形预览的多轨网络音频编辑器和播放器。
  • waves- 模拟海浪效果。

粒子/路径动画

  • Proton - 粒子效果库。
  • bubbly-bg - 小于 1kB 的漂亮气泡背景(gzipped后750字节)。
  • react-particle-effect-button - 基于React的爆裂粒子效果按钮。
  • pasition - 轻量级 Path 过渡库，可以渲染到任何地方。
  • three.proton - 一个神奇的 3d 粒子引擎，使用了three.js库和Proton。

表情

  • emoji-mart - Emoji Mart 是一个可定制的表情选择器组件。

数据可视化

你也许会喜欢 awesome-react数据可视化

引擎

  • D3.js - 一个可以基于数据来操作文档的 JavaScript 库。 (你也许会喜欢 awesome-d3)
    • visx - 🐯 visx | 可视化组件。
  • Raphaël - Raphaël 是一个小型 JavaScript 库，它可以简化您在网站上操作矢量图形的工作。
  • zrender - 2d 绘图的轻量级图形库。
  • g - 强大的渲染引擎，为 G2 和 G6 提供 Canvas 和 SVG 绘制。

通用

  • ECharts - 来自百度的强大图表库。
    • v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件。
    • vue-echarts - 使用 Apache ECharts 5，同时支持 Vue.js 2/3。
    • echarts-for-weixin - Apache ECharts (incubating) 的微信小程序版本
  • plotly.js - 开源 JavaScript 图形库。
  • HighCharts - 为您的 Web 项目轻松创建交互式图表。

图表

  • Chart.js - 使用 <canvas> 标签创建 HTML5 图表。
  • charts - 简单、响应式、零依赖的现代 SVG 图表。
  • chartist-js - Simple responsive charts.
  • G2 - JavaScript 中的图形语法。
    • BizCharts - 基于 G2 和 React 的强大数据可视化库。
    • g2plot - 一个交互式响应式的图表库。
    • viser - Viser 是一个适用于数据可视化工程师的工具。
  • ApexCharts - 基于 SVG 的交互式 JavaScript 图表。
  • F2 - 一个优雅的、交互式的、灵活的移动图表库。
  • uPlot - 小而快速的图表k库，可制作时序图、折线图、面积图、OHLC图和饼图。
  • flot - 基于jQuery的优雅的JavaScript图表库。
  • Peity - 渐进式 svg 饼图、圆环图、条形图和折线图。

关系图

  • Sigma - Sigma 是一个专门用于关系图绘制的 JavaScript 库。
  • G6 - 便捷的关系数据可视化引擎与图分析工具。
    • graphin - 基于 G6 封装的React图分析应用组件。
  • cytoscape.js - 用于可视化和分析的图论（网络）库。
  • Springy - 一个力导图布局算法。
  • WebCola - Javascript版约束图形布局。

流程图

  • Flowy - 用于创建流程图的最小 Javascript 库。
  • flowchart.js - 基于文本描述绘制简单的 SVG 流程图。
  • js-sequence-diagrams - 从图表表示的文本中绘制简单的 SVG 序列图。
  • GoJS - 交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库。
  • mermaid - 通过解析类Markdown语法生成图表和流程图等。
  • wireflow - 用户流程图实时协作工具。
  • butterfly - 基于JavaScript/React/Vue2 的流程图组件。
  • Drawflow - 简单的流程库。

地图

  • Leaflet - Leaflet 是对移动端友好的开源领先的交互式地图库。
  • deck.gl - WebGL2 支持的地理空间可视化层。
  • OpenLayers - 高性能、功能丰富的库，用于在 Web 上创建交互式地图。
  • cesium - 用于世界级 3D 地球仪和地图的开源 JavaScript 库。
  • L7 - 基于 WebGL 的开源大规模地理空间数据可视分析开发框架。
  • tangram - 用于创造性制图的WebGL地图绘制引擎。

甘特图

  • gantt - 开源的Javascript甘特图。基于SVG .
  • jQueryGantt - jQuery甘特图编辑器。
  • gantt-schedule-timeline-calendar - JS甘特图，项目甘特图，时间线，调度图，甘特时间线，预订时间线，React甘特图，Angular甘特图，Vue甘特图，svelte甘特图

其他

游戏

  • phaser - Phaser 是一个有趣、免费且快速的 2D 游戏框架，用于为桌面和移动的浏览器制作 HTML5 游戏，支持 Canvas 和 WebGL 渲染。
  • Babylon.js - Babylon.js 是一个功能强大、美观、简单、开放的游戏和渲染引擎。
  • cocos2d-html5 - 用于 Web 浏览器的 Cocos2d。 使用 JavaScript 构建。
  • limejs - 网页和iOS的HTML5游戏框架。

代码查看/代码高亮

  • highlight.js - 语言自动检测 和 零依赖的 JavaScript 语法高亮器。
  • prism - 轻量级、健壮、优雅的语法高亮。

编辑器

富文本编辑器框架

  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。

富文本编辑器

  • quill - 为兼容性和可扩展性而构建的现代所见即所得(WYSIWYG)编辑器。
  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • editor.js - 具有干净 JSON 输出的块式编辑器。
  • trix - 用于日常写作的富文本编辑器。
  • medium-editor - 从Medium.com 所见即所得编辑器 克隆 而出。使用 contenteditable API 实现富文本解决方案。
  • wangEditor - 轻量级web富文本框。
  • pell - 简单、小巧的 Web 所见即所得文本编辑器，无依赖项。
  • tinymce - 用于富文本编辑的 JavaScript 库。 适用于 React、Vue 和 Angular。
  • prosemirror - 基于 contentEditable 的表现良好的丰富语义内容编辑器，支持协作编辑和自定义文档模式。
  • ckeditor4 - 最好的企业级所见即所得编辑器。完全可定制的无数功能和插件。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。
  • simditor - 一个简单快速的所见即所得(WYSIWYG)编辑器。
  • substance - 用于基于 Web 的内容编辑的 JavaScript 库。
  • neditor - 基于ueditor的更现代化的富文本编辑器，支持HTTPS。

代码编辑器

  • monaco-editor - 基于浏览器端代码编辑器。
  • ace - Ace是使用JavaScript编写的独立代码编辑器。
  • CodeMirror - 浏览器端代码编辑器。

Markdown编辑器

  • stackedit - 浏览器端Markdown编辑器。
  • TOAST UI Editor - Markdown 所见即所得编辑器。 GFM 标准 + 图表和 UML 可扩展。
  • Editor.md - 开源可嵌入在线编辑器（组件）。
  • Markdown Plus - 具有额外功能的 Markdown 编辑器。
  • bytemd - 一个用 Svelte 构建 (hackable) 的 Markdown 编辑器组件。

图形绘制编辑器

  • DrawerJs - 可定制的所见即所得 HTML 画布编辑器。
  • fabric-js-editor - 基于Fabric.js构建的HTML5矢量图像编辑器。

办公软件

Excel/在线表格

  • sheetjs - 电子表格数据工具箱。
  • handsontable - 带有电子表格外观的 JavaScript 数据网格。 适用于 React、Angular 和 Vue。
  • x-spreadsheet - 基于Web Canvas的在线表格。
  • Luckysheet - Luckysheet，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
  • exceljs - Excel工作表管理工具。
  • SlickGrid - 极快的JavaScript网格/电子表格
  • xlsx-populate - Excel XLSX生成和解析工具，可运行在Node和浏览器。

PDF

演示/幻灯片

  • reveal.js - HTML展示框架。
  • impress.js - 它是一个基于现代浏览器中CSS3 transforms和transitions的强大功能的展示框架。
  • slidev - 为开发者准备的演示幻灯片。
  • deck.js - 现代HTML演示文稿。
  • bespoke.js - DIY展示的微框架。
  • shower - Shower HTML演示引擎。

命令终端

构建工具

  • webpack - 打包浏览器的模块和资产。

  • parcel - 快速，零配置的 Web 应用构建工具。

  • gulp - 流式快速构建系统，支持代码而不是配置。

  • esbuild - 极快的 JavaScript 打包压缩工具。

  • rollup - 新一代的 ES2015 打包构建工具。

  • pkg - 将 Node.js 项目打包成可执行文件。

  • Grunt - JavaScript 任务执行器。

  • Brunch - 前端 web 应用程序构建工具，具有简单的声明性配置、快速的增量编译和自定的工作流。

  • FuseBox - 快速构建系统，结合了 webpack，JSPM 和 SystemJS 的强大功能，并具有一流的 TypeScript 支持。

  • rspack - 一个快速的基于 Rust 的 Web 打包工具 🦀️。

  • Broccoli - 快速、可靠的资产管道，支持固定时间重建和紧凑的构建定义。

  • ESM

    • Vite - 新一代前端构建工具。
    • snowpack - 由 ESM 支持的前端构建工具。 即时，轻量级，无捆绑开发。

Web Components

(你也许喜欢 awesome-webcomponents)

  • polymer - Web Component 库。
  • stencil - Stencil 是一个简单的编译器，用于生成 Web Components和静态站点生成的渐进 Web 应用程序(PWA)。
  • lit - Lit是一个简易的用于构建快速、轻量的Web Components库。
  • skatejs - Skate 是基于 Web Components 标准的函数式响应式抽象，使您能够使用流行的视图库（如 React、Preact 和 LitHTML一样）编写小型、快速和可扩展的 Web 组件。
  • x-tag - 现代浏览器自定义组件。
  • slim.js - Slim是一个用于Web Components开发的超快，原生和优雅的库。

指纹

  • clientjs - 设备信息 和 数字指纹。

About

前端开发资源大全中文版。An awesome front end develop packages and resources

Topics

javascript front-end awesome awesome-list front-end-development awesome-lists awesome-javascript awesome-front-end awesome-frontend awesome-fe awesome-npm

Resources

Readme

License

MIT license
Activity

Stars

203 stars

Watchers

5 watching

Forks

29 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •