前端资源汇总

项目地址

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

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

持续更新中……

目录

• vue
• react
• Weex
• typescript
• 常用库
• js
• es6
• 移动端
• h5 游戏
• 微信公众号
• webpack
• GraphQL
• 性能与监控
• 高质文章
• 趋势
• 动效
• 可视化
• 数据结构与算法
• js core
• 代码规范
• 工具
• canvas
• 测试
• 网络请求
• pwa
• 数据库
• 其他必备知识

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
  • 前端物料中台建设

↑ 返回目录 ↑