前端资源汇总

项目地址

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

↑ 返回目录 ↑