前端资源汇总

项目地址

https://github.com/abc-club/f...

本文收集学习过程中使用到的资源。

持续更新中……

vue

官方

awesome-vue
nuxt(vue服务端渲染)
mpvue(vue小程序)
vuepress
vue-i18n
awesome-nuxt

组件库或框架

electron-vue
uni-app(uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架)
chameleon(滴滴一套代码运行多端，一端所见即多端所见)
overwatch-ui
element
iview *22k+
vuetify
mint-ui *14k+
bootstrap-vue
ant-design-vue
cube-ui
v-charts
vue-awesome-swiper
vee-validate
vue-lazyload
vue-quill-editor

文章

逐行分析vue(vue源码分析)
learnVue(vue源码分析)
vue-analysis(vue源码分析)
Vue3.0 前的 TypeScript 最佳入门实践
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层
VUE单页应用骨架屏方案
一个Vue引发的性能问题
【2019 前端进阶之路】Vue 组件间通信方式完整版
Vue.js 组件精讲
剖析 Vue.js 内部运行机制
Vuejs建议和最佳实践
Vue 项目性能优化 — 实践指南（网上最全 / 详细）

开源项目

vue-sell
vue2-elm *29k+
iview-admin
vue-element-admin *38k+
vue-data-board
bilibili-vue
best-resume-ever
vue2-manage
JSUI
mall-admin-web
vue-framework-wz
Vue-cnodejs

react

官网

React官网 https://reactjs.org/
React中文网 https://react.docschina.org/
React-router https://reacttraining.com/rea...
redux https://redux.js.org/introduc...
redux中文 http://cn.redux.js.org/
umi https://umijs.org/
dva https://dvajs.com
immutable https://github.com/immutable-...
react-devtools-tutorial

参考资料

React 源码解析
awesome https://github.com/enaqx/awes...
react-hook https://github.com/streamich/...
React.js 小书 https://juejin.im/post/58c7a1...
React入门看这篇就够了 https://segmentfault.com/a/11...
掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入) https://juejin.im/post/5d085b...
react demo https://gist.github.com/sAbak...
一文速览React全栈 https://juejin.im/post/5d0ee2...
React同构与极致的性能优化 https://segmentfault.com/a/11...
阿里开源项目 https://segmentfault.com/a/11...
一文速览React全栈
掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)
你要的 React 面试知识点，都在这了
如何优化你的超大型React应用【原创精读】
React 实战：设计模式和最佳实践
21个让React 开发更高效更有趣的工具
在react/redux中使用Immutable
从头开始，彻底理解服务端渲染原理(8千字汇总长文)
React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
Profiling React performance with React 16 and Chrome Devtools.
React 性能优化技巧总结
介绍React Profiler

组件库

ant-design https://ant.design/index-cn
ant-design-mobile https://mobile.ant.design/ind...
react-intl
rc-form https://github.com/react-comp...
nivo(React 数据可视化库)

框架

umi https://umijs.org/
飞冰 https://ice.work/
next.js https://github.com/zeit/next.js
beidou https://github.com/alibaba/be...
egg-react-ssr https://github.com/ykfe/egg-r...
react-server https://github.com/redfin/rea...
Vulcan.js(The full-stack React+GraphQL framework)

Demo

typescript

官网

参考资料

typescript中文 https://www.tslang.cn/
typescript中文 https://ts.xcatliu.com/ https://zhongsp.gitbooks.io/t...
typescript https://www.html.cn/doc/types...
typescript进阶 https://www.jianshu.com/p/13a...
awesome https://github.com/dzharii/aw...
深入理解 TypeScript https://github.com/jkchao/typ... https://jkchao.github.io/type... https://github.com/basarat/ty...
TypeScript入门指南（基础篇） https://juejin.im/post/5d3bb5...
TypeScript 入门指南 https://mp.weixin.qq.com/s/Oy...

react+typescript demo

React+redux+typescript https://github.com/piotrwitek...
https://github.com/fi3ework/b...
typescript-tutorial https://github.com/xcatliu/ty...
https://github.com/Lemoncode/...
https://github.com/rokoroku/r...

文章

三千字讲清TypeScript与React的实战技巧

常用库

数据

Immutablejs https://github.com/immutable-...

富文本编辑器

simditor https://github.com/mycolorway...

时间

moment

物联网

mosca https://github.com/mcollina/m...
MQTT https://github.com/mqttjs/MQT...

demo

javascript-mqtt-demo-wearingTip https://github.com/coolnameis...
面试官(7): 聊一聊 Babel? https://juejin.im/post/5c03b8...

js

正则表达式

learn-regex ★22k+
正则表达式30分钟入门教程
2019 年常用 JavaScript 正则大全
正则表达式不要背
2019年JS正则大全(常用)

this

嗨，你真的懂this吗？

函数式编程

「前端进阶」彻底弄懂函数组合
函数式编程，真香
深入学习javascript函数式编程
一文带你了解 JavaScript 函数式编程
不要再尝试函数式编程了

其他

【译】JavaScript的工作原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
优秀 JavaScript 开发人员应掌握的 9 个技巧
浅拷贝与深拷贝
JS中轻松遍历对象属性的几种方式
你不懂JS（系列丛书）
前端开发变量命名系列 - JavaScript篇
一文带你了解 JavaScript 函数式编程

es6

前端模块化详解(完整版)
一口(很长的)气了解 babel
Promise源码详解
最后一次搞懂 Event Loop

移动端

文章

移动端适配深度探究
第三代移动端布局方案
移动端1px解决方案

常用库

lib-flexible https://github.com/amfe/lib-f...

h5游戏

开源项目

Hilo - HTML5 互动游戏引擎

微信公众号

实战项目

wechaty https://github.com/Chatie/wec...
wechatBot https://github.com/gengchen52...

webpack

官网

webpack
webpack官方文档
webpack 中文文档(https://webpack.docschina.org/)

文章

前端构建秘籍
【Cute-Webpack】Webpack4 入门手册（共 18 章）

GraphQL

文章

前端er了解GraphQL，看这篇就够了
GraphQL 入门看这篇就够了
awesome-graphql

性能与监控

文章

前端性能优化原理与实践
GMTC 大前端时代前端监控的最佳实践
你必须懂的前端性能优化
前端性能优化不完全手册
那些你不知道的meta标签
前端静态资源缓存最优解以及max-age的陷阱
node实战前端缓存总结
浏览器缓存
彻底理解浏览器的缓存机制
前端异常监控解决方案研究 – 腾讯CDC
从 0 到 1 的前端异常监控项目实战

监控

开源库

https://github.com/BetterJS
https://github.com/iv-web/aeg...
https://github.com/RicardoCao...

文章

捕获未处理的Promise错误方法
前端异常监控、上报及js压缩代码定位

常用工具

阿里云监控 (网站性能、错误等监控)
growingio (网站访问量监控)
sentry (错误监控)
fundebug (错误监控)
gtmetrix (网站访问速度)
zanePerfor (网站访问速度)
pingdom (网站状况监控)

开源库

hiper *2k+

高质文章

if 我是前端团队 Leader，怎么制定前端协作规范?
阿里大佬浅谈大型项目前端架构设计
年终回顾，为你汇总一份「前端技术清单」
8年前端开发的知识点沉淀(不知道会多少字，一直写下去吧...)
fullstack tutorial
五星推荐的系列文章清单
端动态化方案详细设计
让虚拟DOM和DOM-diff不再成为你的绊脚石
彻底理清前端单页面应用（SPA）的实现原理【精读源码】
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
使用 postMessage 解决 iframe 跨域通信问题
基于工程经验的『RESTful接口设计规范』
RESTful API 编写指南
前端技术栈干货文章链接（精品）
新时代下前端工程师的推荐书籍和必备知识

趋势

微前端 https://www.cnblogs.com/zhuan... https://github.com/neuland/mi...
- 了解什么是微前端
- 微前端实践
- 无代码编程
- 基于 React & TypeScript & Webpack 的微前端应用模板
- 哪些技术会决定前端开发者的未来发展？
- 再看2019大前端技术趋势，Web OS概念正落地
- Serverless For Frontend 前世今生
- 2019 年大前端技术趋势分析

动效

工具库

可能是最全的前端动效库汇总

demo

2018 最佳前端动效集锦

可视化

库

Echart
D3
Highchart
Antv

文章

14个最好的 JavaScript 数据可视化库
前端必看的数据可视化入门指南
一步步带你实现web全景看房——three.js
阿里基于G6和React打造的开源可视化图形编辑器——GGEditor

数据结构与算法

官网

leetcode
leetcode中国

文章

数据结构与算法（三）—— 常见排序算法和swift实现
【从蛋壳到满天飞】JS 数据结构解析和算法实现-集合和映射
前端该如何准备数据结构和算法？
大家都是如何刷 LeetCode 的？

开源库

leetcode
LeetCodeAnimation *39k+

js-core

库

QuickJS

文章

JavaScriptCore全面解析
这一次，彻底弄懂 JavaScript 执行机制
你不知道的浏览器页面渲染机制
JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切

代码规范

前端团队代码评审 CheckList 清单

工具

vscode这篇就够了
VSCode折腾log插件
21 个VSCode 快捷键，让代码更快，更有趣
VS Code 快速使用指南

canvas

开源项目

spritejs (Draw graphics on a canvas through DOM-like APIs. Vue & React/Preact supported. )

测试

文章

javascript-testing-best-practices
[2018 前端自动化测试综述 [英]](https://medium.com/welldone-s...
[2019 前端自动化测试综述 [英]](https://medium.com/welldone-s...
[测试你的前端代码（介绍篇）[英]](https://hackernoon.com/testin...

单元测试

站在程序员的角度测试
unit测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。

库

jest
karma(Spectacular Test Runner for JavaScript )
mocha(simple, flexible, fun javascript test framework for node.js & the browser)
enzyme(JavaScript Testing utilities for React )
vue-test-utils(JavaScript Testing utilities for vue )

文章

e2e测试

站在用户角度的测试
e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

库

cypress
nightwatch
puppeteer(Headless Chrome Node API )
Macaca
appium(app测试)
Selenium

文章

端到端测试哪家强？不容错过的Cypress
Puppeteer E2E测试入门
大前端神器安利之 Puppeteer

视觉回归测试

简单来说就是测试应用整体界面是否达到了UI设计图的要求。

库

hermione
PhantomCSS(archived)
gemini(DEPRECATED)

性能测试

Chrome DevTools

api测试

库

去哪儿yapi(支持接口文档、mock和api自动化测试)
- 接口文档
- Json Schema 快速入门
- 【GitHub项目推荐｜YApi打通前后端及QA可视化接口管理平台｜神级项目】
rap2
swagger(https://swagger.io/)(https://github.com/swagger-api)
丁香园api-mocker *998
大搜车Easy-Mock *6k+
APIJSON(后端接口和文档自动化)
mockjs

文章

去哪儿 Api 自动化测试实践
使用 YApi 管理 API 文档，测试， mock
YApi 新版如何查看 http 请求数据
自动更新 Swagger 接口数据到 YApi 平台
Jenkins+postman+newman之API全自动化测试
Postman调试技巧之接口签名
丁香园开源接口管理系统 - API Mocker
Swagger从入门到精通
Swagger与其他API文档编写工具对比

网络请求

axios中文文档翻译

pwa

饿了么的 PWA 升级实践

数据库

mysql

官网
mysqljs
21分钟MySQL基础入门
2019-01-11亲测Navicat Premium for Mac破解
MySQL命令，一篇文章替你全部搞定
sequelize(An easy-to-use multi SQL dialect ORM for Node.js )
bookshelf(A simple Node.js ORM for PostgreSQL, MySQL and SQLite3 built on top of Knex.js)

mongodb

mongoose中文网

redis

Redis可视化工具

kafka

震惊了！原来这才是kafka！
kafka中文教程

常见问题

mysql8.0版本报错：Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol...

其他必备知识

前端开发者必备的Nginx知识
多站点单点登录实现方案
【干货】Chrome插件(扩展)开发全攻略
如何发布一款Chrome App
- GayHub
- 打开莆田系医院网站，发出警告提醒、显示医院信息
从开发 2 个 Chrome 插件中学到的（对新手的 4 个提示和 6 个技巧）
chrome开发官方文档
github开发官方文档
【10 个基于 JavaScript 的机器学习实例】

常用技术

face++(人脸识别)
前端物料中台
- 飞冰
- lugia
- 前端物料中台建设

↑ 返回目录 ↑