前端开发工具大全(Web Front End Awesome)【不断更新,与时俱进】

前言

回顾 4、5 年前开始,我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来,方便查阅与使用。4、5 年前,那应该还算是一个 jQuery 一招鲜的年代,使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件,基本可以解决一切的问题;但随着前端 MVC 的框架 backbone.js 已经被广泛应用,虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心,紧接着就是 AngularJS、React、Vue.js 的兴起,再到前端实现多端 / hybrid APP 广泛应用(React Native,Weex,phoneGap,Ionic,Electron / nw.js,Flutter);往后再有 微前端 / 低代码前端 / 前端机器学习 TensorFlow.js 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主,现下面重新整理一下,逐渐增加一些新的东西吧

前端开发工具大全 – Web Front End Awesome

前端代码编辑器与调试工具 / IDE & Debug

VS code(Visual Studio Code) | Webstorm | HBuilder(国产) | Sublime Text | Atom
Chrome 开发者工具 | Debugger | vConsole (移动端 App 内嵌 Web 调试) | Postman (接口调试与管理) | Postwoman (接口调试与管理) | Fiddler (网页 / 接口抓包调试) | DoraemonKit/miniapp

前端编码规范(Code Standards & Style)

Javascript ES 6 | Javascript ES 5 | Learn ES2015 | JSDoc 中文文档 | TypeScript Handbook | DefinitelyTyped | awesome-typescript | typescript-definition-style-guide | Eslint | CSS | React | FP (Functional Programming in javascript) | html5-boilerplate
CamelCase | PascalCase | Hungarian notation
OOCSS | BEM
CommonJS / CMD | Asynchronous module definition / AMD
FLIP Your Animations
WAI-ARIA roles

Javascript 库(Javascript Libraries)

jQuery | Zepto | Immutable-js | Lodash | Ramda | Underscore | Mootools | rxjs – A reactive programming library for JavaScript  | You-Dont-Need-jQuery

前端 MV+ 框架、单页面程序及相关(MV+ & SPA)

React | Vue.js | Angular.jsElmHybridssvelteBackbone.js
Awesome-vue | Awesome-react | Redux | Flux | Angular-Styleguide | Backbone.marionette | Backbone-fundamentals
Redux 中文文档 | todomvc [MV* framework 入门必备]

Web Component

Web Components | lit-element | lit-html | omi | riot

静态网站生成 / 服务器端渲染(static site generator / SSR)

next.js | nuxt.js | gatsby | vuepress | hexo

微前端(Microfrontends)

qiankun(乾坤) | microfrontends | single-spa | mooa

大前端多端实现 小程序 / Native & Hybrid Native / 桌面端(Native)

mina | wepy | uni-app | taro | mpvue
react-native | weex | PhoneGap | ionic | meteor | WebViewJavascriptBridge | framework7
electron | nw.js
Flutter | quasar (多端不含小程序)

前端构建工具 / 包管理工具 / 打包工具(Bundle & Build)

Npm – a package manager for javascript | Yarn – a dependency management | lerna – A tool for managing JavaScript projects with multiple packages. | Webpack – a bundler for modules | Rollup – Next-generation ES module bundler | Grunt | Gulp | Bower – package manager | Browserify | FIS
snowpack | vite (used by Vue 3) | esbuild (used by vite & snowpack)

Javascript 模块加载器(Module Loaders)

Requirejs | Seajs

样式预处理工具(Style Preproccessing)

Less | Sass / Scss | Stylus

UI 库 / UI 管理后台模版(UI / Admin Template) / 全栈解决方案(Full Stack Solutions)

Bootstrap | Framework7 | SUI Mobile | WeUI | jQuery WeUI | Bootstrap Material Design | Material Design Lite | carbon | Materialize | SUI | Amaze UI | AdminLTE | Foundation-sites | Ant Design(React / Vue)Element UI(Vue)iview(Vue) | vuetify | Semantic-UI | Primer | Jquery-ui | Jquery-ui-bootstrap | Bulma | Milligram | Mint UI(Vue Mobile) | Vant UI(Vue Mobile) | Cube UI(Vue Mobile) | Vue Strap | Kendo UI[收费专业级] | DataV[类似阿里DataV,大屏数据展示] | microsoft / fluentui
EasyUI | Extjs
vue-element-admin | iview-admin | ant-design-pro | vue-manage-system | antd-admin | yezihaohao/react-admin | marmelab/react-admin | marmelab/ngx-admin | coreui-free-bootstrap-admin-template
jeecg-boot【java 一键生成前后端代码】 | renren-fast【java 一键生成前后端代码】 | eladmin【java 一键生成前后端代码】 | RuoYi【java 一键生成前后端代码】 | mall-admin-web【java】 | Springboot_v2【java】 | yii2_fecshop【php】 | CRMEB【php】 | laravel-vue-spa【php】 | laravue【php】 | SpringBoot-Shiro-Vue【Java】 | Davinci【Java】 | gin-vue-admin【Go】

低代码前端(Low code for FE)

amis | react-jsonschema-form | form-render | form-create | vue-form-generator | vue-form-making | form-generator | alibaba / formily | react-visual-editor

轮播插件(Carousels)

Swiper | Slidesjs | Swipe | jQuery Cycle Plugin | Nivo-Slider | OwlCarousel
Reveal.js | FullPage.js | Impress.js

瀑布流布局(Waterfall)

Masonry | Waterfall

图片懒加载(Lazy load)

Lazyload | Echo | lazysizes

监听触屏 / 划动事件 / 滚动(Swipe touch / Scroll)

WipeTouch | TouchSwipe | Hammer.js | iscroll | mobileSelect

媒体播放(Media Player Html5 / flash)

videojs/video.js | Selz/plyr | Bilibili/flv.js | mediaelement | DPlayer

CSS 3 动画库(CSS 3 Animation)

animate.css | css-loaders | hamburgers | Hover.css | animateplus | hint.css

图形 / 图表 / 图库 / 流程图(Charts / Flow Charts)

Highcharts | Echarts | Chart.js | d3 | morris.js | c3 | fabric.js | rough | paper.js | zrender(A lightweight canvas library which providing 2d draw for ECharts) | cube.js(Cube.js – Open Source Analytics Framework 开源全栈 BI 框架)
mermaid | bpmn-js | GoJS | mxGraph | react-diagrams | svgedit
JsBarcode | node-qrcode

3D / Html5 游戏制作 / 3D 引擎 / AR / VR(3D / Game & 3D Engines)

phaser | Egret | Cocos2d | layabox(小游戏) | Createjs | Pixi.js | Playcanvas
Three.js | AR.js | ogl | Aframe VR | greensock / GSAP | Babylon.js | Hilo3d (Alibaba Group) | ThingJS (国内闭源) | Hightopo / HT for Web (国内闭源)
webgl-fundamentals | gl-matrix | twgl.js | GLSL ES 1.0 spec | webgl 官网(OpenGL ES for the Web) | WebGL State Diagram | WebGLSamples

地图(MAP)

百度地图 | 高德地图 | Leaflet | Openlayers | deck.gl | cesium | mapbox-gl-js | webgl-wind

时间库 / 插件(Date & Time)

dayjs | moment | date-fns | bootstrap-datepicker | fullcalendar | Pikaday | My97DatePicker

富文本编辑器(Editor)/ 代码高亮、代码编辑器(Highlighted)

wysiwyg-editor | quillCKEditor | alloy-editor | ueditor | umeditor | mavonEditor
Prism | CodeMirror | highlight.js

进度条 / 可调进度条(Progress Bar)

nprogress | bootstrap-slider | progressbar.js | pace

上传文件(File Uploader)

dropzone | jQuery-File-Upload | fine-uploader | plupload | uppy | webuploader

html 模版引擎(Template compiler)

ArtTemplate | BaiduTemplate | mustache.js | Underscore Templates | Pug (jade)

加密解密(Encode / Decode)

js-base64 | JavaScript-MD5 | jwt-decode | crypto-js

测试 / 单元测试(Test / Unit Test)

jest | mocha | enzyme | jasmine | nightwatch

其他(others)

clipboard.js | fastclick | html2canvas | pico | sheetjs(excel) | jexcel | x-spreadsheet | tesseract.js(OCR) | brain.js(Neural networks in JavaScript) | jsPDF | pdf-lib | awesome-javascript | qs(Query String) | draggable | js-cookie | Mock | Font-Awesome | lib-flexible | json2csv
faker.js | Mock

    1. 本文作者:Nelson Kuang,欢迎大家留言及多多指教
    2. 版权声明:欢迎转载学习 => 请标注信息来源于http://www.a4z.cn/fe/2019/11/22/web-front-end-awesome/

作者: 博主

Talk is cheap, show me the code!

发表评论

电子邮件地址不会被公开。

Captcha Code