乐趣区

前端资源汇总

项目地址

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

↑ 返回目录 ↑

退出移动版