前端开发工具大全(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);往后再有 微前端 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主,现下面重新整理一下,逐渐增加一些新的东西吧。

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

前端代码编辑器 / IDE

VS code(Visual Studio Code) | Webstorm | HBuilder(国产) | Sublime Text | Atom

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

Javascript ES 6 | Javascript ES 5 | Learn ES2015 | TypeScript Handbook | awesome-typescript | 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

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

React | Vue.js | Angular.jsElmHybridssvelteBackbone.js
Awesome-vue | Awesome-react | Redux | Flux | Angular-Styleguide | Backbone.marionette | Backbone-fundamentals
Redux 中文文档

微前端(Microfrontends)

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

前端构建工具 / 包管理工具 / 打包工具(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

Javascript 模块加载器(Module Loaders)

Requirejs | Seajs

样式预处理工具(Style Preproccessing)

Less | Sass / Scss | Stylus

UI 库 / UI 管理后台模版(UI / Admin Template)

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) | Semantic-UI | Primer | Jquery-ui | Jquery-ui-bootstrap | Bulma | Milligram | Mint UI(Vue Mobile) | Vant UI(Vue Mobile) | Cube UI(Vue Mobile) | Vue Strap
EasyUI | Extjs
vue-element-admin | iview-admin | ant-design-pro | antd-admin | yezihaohao/react-admin | marmelab/react-admin | marmelab/ngx-admin |  | coreui-free-bootstrap-admin-template

轮播插件(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

媒体播放(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

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

phaser | Egret | Cocos2d | Createjs | Pixi.js | Playcanvas
Three.js | AR.js | ogl | Aframe VR

地图(MAP)

百度地图 | 高德地图 | Leaflet | Openlayers | deck.gl | cesium

时间库 / 插件(Date & Time)

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

富文本编辑器(Editor)

wysiwyg-editor | quillCKEditor | alloy-editor | ueditor | umeditor

进度条 / 可调进度条(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

加密解密(Encode / Decode)

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

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

jest | mocha | enzyme | jasmine | nightwatch

其他(others)

clipboard.js | fastclick | html2canvas | sheetjs(excel) | jexcel | x-spreadsheet | tesseract.js(OCR) | brain.js(Neural networks in JavaScript) | jsPDF | 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