前端乐园

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

持续更新中……

所有可以用 JavaScript 编写的应用程序最终都会用 JavaScript 编写 -- Jeff Atwood @2007

目录

• 中后台

• 混合应用

• 小程序

• css

• 前端代码片段汇总

• 工具

• awesome chrome 插件

• awesome 微前端

• vue

• react

• typescript

• 常用库

• js

• es6

• 移动端

• h5 游戏

• 微信公众号

• webpack

• 性能与监控、seo

• 高质文章

• 趋势

• 动效

• 可视化

• 数据结构与算法 机器学习

• js core

• 代码规范

• canvas

• 测试

• 网络请求

• pwa

• 其他必备知识

• git

• 安全

• 框架

• jquery

• 学习网站

• 工程化

• 值得注意的库

vue

• benchmark(各个框架对比)

官方

• awesome-vue
• mpvue(vue 小程序)
• vuepress
• vue-i18n
• vuepress(静态网站生成器)
• jsx
• Vue Template Explorer (Vue version: 2.6.11)

vue3

• vue3

• vue-next-template-explorer

• Vue3.0】尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播完整版

• 尤雨溪-VueConf 2019-上海演讲视频

• Vue 作者尤雨溪为你分享：Vue 3.0 进展@VueConf CN 2018

• 从零实现 Vue3.0 响应式源码(正式版)

• Vue Composition API

• Vue3 中的数据侦测

• Vue3.0 前的 TypeScript 最佳入门实践

• Vue3 究竟好在哪里？（和 React Hook 的详细对比）

• Vue3 体验卡～

组件库或框架

• 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

• kpc(同时支持 vue 和 react 的组件库)

• 如何开发跨框架的组件

• vue-echarts
• v-charts
• vue-awesome-swiper
• vee-validate
• vue-lazyload
• vue-quill-editor
• vue-form-making
• vuex-router-sync

文章

• 逐行分析 vue(vue 源码分析)

• learnVue(vue 源码分析)

• vue-analysis(vue 源码分析)

• 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

• VUE 单页应用骨架屏方案

• 一个 Vue 引发的性能问题

• Vue.js 组件精讲

• 剖析 Vue.js 内部运行机制

• Vuejs 建议和最佳实践

• Vue 项目性能优化 — 实践指南（网上最全 / 详细）

• vue / react 的 UI 库都在用的几个 DOM API🚀

• 观众老爷们，来试试这个用 Vue 撸的数据可视化后台吧

• 收下这波 vue 技巧，让开发效率翻倍

• vue-router 源码：实现一个简单的 vue-router

• 前端路由简介以及 vue-router 实现原理

• vue-router 源码分析-整体流程

• 解密 vue-router: 从源码开始

• vue-router 源码：实现一个简单的 vue-router

• Github 上 36 个最实用的 Vue 开源库

• 利用 VuePress 快速搭建项目文档管理系统

• 50 个好用的前端框架，千万收好以留备用

• 1 小时搞定 vuepress 快速制作 vue 文档/博客+免费部署预览

开源项目

• marktext(markdown editor)
• 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
• gridea(一个静态博客写作客户端 ts vue )
• postwoman(接口管理 类似 postman)
• 微人事(SpringBoot+Vue)
• V 部落(SpringBoot+Vue)
• KTV 点歌系统,含后台管理系统(完整版)
• profile-summary-for-github(Tool for visualizing GitHub profiles)
• Vue + Koa 从零打造一个 H5 页面可视化编辑器——Quark-h5
• vue-admin-beautiful(适配 pc 移动端)

vue ssr

https://github.com/zbysir/go-vue-ssr

• 实测 Vue SSR 的渲染性能：避开 20 倍耗时
• SSR 性能优化的误区
• 基于 VUE-SSR 的性能优化
• https://github.com/BFjacky/vue-ssr-template

常用工具

husky

• husky(git hook)
• yorkie(git hook 与 husky 功能相同) 注意：一定要使用 npm 安装 eslint 和 husky，因为在 windows 操作系统下, 用 yarn 安装依赖，不会触发 husky pre-commit 钩子命令。 还有就是注意 husky 的版本，否则也可能不触发 git 钩子

lerna

• lerna(多个包在一起打包)
• 基于 Lerna 管理 packages 的 Monorepo 项目最佳实践
• Vue CLI 3 结合 Lerna 进行 UI 框架设计

常用组件或工具

• vue-count-to
• vue-cookieconsent-component
• vue-if-bot(防止机器人看到)
• vue-cropperjs

nuxt

• nuxt(vue 服务端渲染)
• 官网
• 中文官网
• awesome-nuxt

常见问题

• vue 项目使用 svg 图片（svg-sprite-loader 以及 vue2-svg-icon 的使用）
• VUE-cli3 使用 svg-sprite-loader

react

官网

• React 官网 https://reactjs.org/
• React 中文网 https://react.docschina.org/
• React-router https://reacttraining.com/react-router
• redux https://redux.js.org/introduction/getting-started
• redux 中文 http://cn.redux.js.org/
• umi https://umijs.org/
• dva https://dvajs.com

• react-devtools-tutorial
• react-native-web(rn 转 web)

参考资料

• React 技术揭秘
• React 源码解析
• 你真的了解 React 生命周期吗

• awesome https://github.com/enaqx/awesome-react
• react-hook https://github.com/streamich/react-use
• React.js 小书 https://juejin.im/post/58c7a16e2f301e006bd03dbe
• React 入门看这篇就够了 https://segmentfault.com/a/1190000012921279#articleHeader0
• 掘金最污的 React16.x 图文视频教程(2 万 5 千字长文-慎入) https://juejin.im/post/5d085be0f265da1bac401937?utm_source=gold_browser_extension
• react demo https://gist.github.com/sAbakumoff/7b8510adcb16bded189d747e34f5e114
• 一文速览 React 全栈 https://juejin.im/post/5d0ee2906fb9a07ea33c1f8b
• React 同构与极致的性能优化 https://segmentfault.com/a/1190000012464033
• 阿里开源项目 https://segmentfault.com/a/1190000016773002

• 一文速览 React 全栈
• 掘金最污的 React16.x 图文视频教程(2 万 5 千字长文-慎入)
• 你要的 React 面试知识点，都在这了
• 如何优化你的超大型 React 应用 【原创精读】
• React 实战：设计模式和最佳实践
• 21 个让 React 开发更高效更有趣的工具
• 在 react/redux 中使用 Immutable
• 从头开始，彻底理解服务端渲染原理(8 千字汇总长文)
• 【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
• React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
• Profiling React performance with React 16 and Chrome Devtools.
• React 性能优化技巧总结
• 介绍 React Profiler
• React Router 中文文档（一）
• React Router 4 简易入门
• 看完这篇，你也能把 React Hooks 玩出花
• React16 常用 api 解析以及原理剖析
• React 面试全解
• React 路由鉴权
• ReactRouter-V5 免费图文视频教程（我免费，有培训机构什么事，就出！）
• 精读《React Hooks 最佳实践》
• 收藏！送给 React 研发人员的 22 款超强工具
• 全栈 React + GraphQL 教程（一）
• React Hooks 详解 【近 1W 字】+ 项目实战
• React 之 CLODOP 实战：(一)手写并打印快递单

常用库

• ant-design

• ant-design-mobile

• redux-actions

• react-intl
• rc-form https://github.com/react-component/form

• nivo(React 数据可视化库)
• react-virtualized(无尽列表)
• react-window(无尽列表)
• immerjs(数据不可变)
• immutable https://github.com/immutable-js/immutable-js
• immer.js:也许更适合你的 immutable js 库

框架

• umi https://umijs.org/
• dumi(react 文档站点)
• 飞冰 https://ice.work/
• beidou https://github.com/alibaba/beidou
• egg-react-ssr https://github.com/ykfe/egg-react-ssr
• react-server https://github.com/redfin/react-server

• Vulcan.js(The full-stack React+GraphQL framework)

服务端渲染

• next.js https://github.com/zeit/next.js
• nextjs 官网
• nextjs 官网

Demo

• realworld ★31k+

开源项目

• wexond(A privacy-focused, extensible and beautiful web browser)
• 房屋租赁平台(React/ApolloGraphQL/Node/Mongo demo written in Typescript)
• lz-h5-edit(react 版 h5 微场景编辑器 )
• 基于中间件思想设计可扩展的 UI 组件库

typescript

官网

参考资料

• 深入理解 TypeScript https://github.com/jkchao/typescript-book-chinese https://jkchao.github.io/typescript-book-chinese/ https://github.com/basarat/typescript-book/
• typescript 中文 https://www.tslang.cn/
• typescript 中文 https://ts.xcatliu.com/ https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html
• typescript https://www.html.cn/doc/typescript/doc/handbook/tutorials/React.html
• typescript 进阶 https://www.jianshu.com/p/13a4eb1001f1
• awesome https://github.com/dzharii/awesome-typescript
• TypeScript 入门指南（基础篇） https://juejin.im/post/5d3bb567f265da1b8f1b09c1
• TypeScript 入门指南 https://mp.weixin.qq.com/s/Oyawvb5BD-OKvMuF2tQ0pw?

react+typescript demo

• React+redux+typescript https://github.com/piotrwitek/react-redux-typescript-guide

• https://github.com/fi3ework/blog/tree/master/react-typescript-cheatsheet-cn

• typescript-tutorial https://github.com/xcatliu/typescript-tutorial

• https://github.com/Lemoncode/react-typescript-samples

• https://github.com/rokoroku/react-redux-typescript-boilerplate

• https://github.com/alibaba/pont(前端接口层工具)

文章

• 三千字讲清 TypeScript 与 React 的实战技巧
• 一篇朴实的文章带你 30 分钟捋完 TypeScript,方法是正反对比

常用库

• core-js(es6 垫片)

数据

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

富文本编辑器

• simditor https://github.com/mycolorway/simditor
• https://mdnice.com/?from=juejin

时间

• moment

• dayjs(时间格式转换)

网络请求

• axios

图片

• cropperjs(图片裁剪)
• imgcook(由设计稿一键智能生成代码)

canvas

• spritejs(360)

其他

• clipboard(剪贴板)
• FileSaver(文件另存为)
• excel-js (xlsx 转换)
• jsPDF(生成 pdf)
• fileApi(上传, 支持进度/分段)
• swiper(轮播)
• qrcodejs(二维码生成器)
• autosize(textara 高度自适应文字)
• shake.js(监听手机震动)
• progressbar(进度条)
• DoraemonKit(简称 "DoKit" 。一款功能齐全的客户端（ iOS 、Android、微信小程序 ）研发助手，你值得拥有。)

物联网

• mosca https://github.com/mcollina/mosca
• MQTT https://github.com/mqttjs/MQTT.js

文章

• 一步步搭建物联网系统
• 11 个开源物联网平台和工具

demo

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

js

• JS 官方教程
• JS 代码片段
• JavaScript 八张思维导图
• 前端开发中 79 条不可忽视的知识点汇总
• 一张刮刮卡竟包含这么多前端知识点
• 透过现象看本质: 常见的前端架构风格和案例
• 灵活运用 JS 开发技巧
• JavaScript 工具函数大全（新）
• js 运算符优先级
• 书到用时方恨少，一大波 JS 开发工具函数来了

正则表达式

• 练完这篇就会写正则
• learn-regex ★22k+
• 正则表达式 30 分钟入门教程
• 正则表达式不要背
• 2019 年 JS 正则大全(常用)
• JS 正则表达式完整教程（略长）

函数式编程

• Pragmatic, balanced FP in JavaScript(English)
• JavaScript 轻量级函数式编程(中文翻译)
• 「前端进阶」彻底弄懂函数组合
• 函数式编程，真香
• 深入学习 javascript 函数式编程
• 一文带你了解 JavaScript 函数式编程
• 不要再尝试函数式编程了
• 范式篇 - 如何把函数式编程合理运用到日常工作中
• 帮你揭开函数式编程的底层面纱——喜提国庆 buff
• Typescript 版图解 Functor , Applicative 和 Monad
• Ramda 函数库参考教程

兼容性

• 在 javascript 中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

其他

• 【THE LAST TIME】彻底吃透 JavaScript 执行机制
• 【译】JavaScript 的工作原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
• 优秀 JavaScript 开发人员应掌握的 9 个技巧
• JS 中轻松遍历对象属性的几种方式
• 你不懂 JS（系列丛书）
• 前端开发变量命名系列 - JavaScript 篇
• 一文带你了解 JavaScript 函数式编程
• 你真的知道 0.1+0.2 为何不等于 0.3 吗？
• 收下这波 JS 技巧，从此少加班
• JavaScript 基础——前端不懂它，会再多框架也不过只是会用而已
• Tasks, microtasks, queues and schedules
• 尾调用和尾递归
• js 中的 stopImmediatePropagation 方法和 stopPropagation 方法的区别
• 二进制(原码、反码、补码)
• 用 js 获取页面元素的位置图文总结

开源项目

• layout-ui(可视化布局 纯 css 布局 Layout-UI)
• resume(A service that creates a résumé based on your GitHub repos/activity.)
• 10 个后台管理 UI 框架
• muuri(Responsive, sortable, filterable and draggable grid layouts)
• odoo(免费开源的企业数智化管理平台)

常用库

• velocity(js 动画库)
• TweenJS
• tween.js
• GSAP(高性能 js 动画库)
• color-js(A color management API )
• path-to-regexp(用正则匹配路径)

es6

• 1.5 万字概括 ES6 全部特性(看图就能记下，值得收藏)
• ECMAScript 6 入门
• 前端模块化详解(完整版)
• 一口(很长的)气了解 babel
• Promise 源码详解
• 最后一次搞懂 Event Loop
• 深入浅出 Babel 上篇：架构和原理 + 实战
• babel-handbook

babel

• 你真的会用 Babel 吗?

移动端

文章

• 移动端适配深度探究
• 第三代移动端布局方案
• 移动端 1px 解决方案
• 拿到一份设计稿，我该如何进行移动端开发？
• 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
• 移动端 1px 细线解决方案总结
• 稍微整理了几个经常在 H5 移动端开发遇到的东西

常用库

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

常见问题

• iOS 上拉边界 下拉出现 白色空白
• ios input输入时弹出键盘框 页面整体上移键盘框消失后页面不能回弹的问题
• 12个前端必会 H5 问题及解决方法
• VUE前端界面在iOS中遇到的坑

h5 游戏

开源项目

• Hilo - HTML5 互动游戏引擎

demo

• [🎮 你见过凌晨 4 点的洛杉矶吗？]（https://juejin.im/post/5e37ec2a6fb9a02fec665530)

微信公众号

实战项目

• wechaty https://github.com/Chatie/wechaty
• wechatBot https://github.com/gengchen528/wechatBot

文章

• 微信 H5 页面兼容性解决方案

webpack

官网

• webpack
• webpack 官方文档
• webpack 中文文档(https://webpack.docschina.org/)
• 深入浅出 Webpack(书)

webpack

• webpack 源码阅读之主流程分析
• webpack 系列之一总览(滴滴)
• Webpack 源码（二）—— 如何阅读源码
• Webpack 源码解读：理清编译主流程
• 从 Webpack 源码探究打包流程，萌新也能看懂～
• webpack4.0 源码分析之 Tapable
• webpack 原理
• webpack 详解
• Webpack 4 配置最佳实践

loader

• 编写一个 loader
• webpack loader—自己写一个按需加载插件
• 手把手教你撸一个 Webpack Loader
• 编写自己的 Webpack Loader

插件

• 编写一个插件
• 干货！撸一个 webpack 插件(内含 tapable 详解+webpack 流程)
• 编写自定义 webpack 插件从理解 Tapable 开始

文章

• 前端构建秘籍
• 【Cute-Webpack】Webpack4 入门手册（共 18 章）
• Webpack 实用技巧高效实战
• 一步步从零开始用 webpack 搭建一个大型项目
• 手写 webpack 核心原理，再也不怕面试官问我 webpack 原理
• 手写一个简易的 Webpack
• 从 0 到 1，手写 webpack 的开发之路

性能与监控

• quicklink(prefetch 视野内的链接)

文章

• 悟空活动中台 - H5 活动加载优化
• 前端性能优化原理与实践
• GMTC 大前端时代前端监控的最佳实践
• 你必须懂的前端性能优化
• 前端性能优化不完全手册
• 那些你不知道的 meta 标签
• node 实战前端缓存总结
• 前端异常监控解决方案研究 – 腾讯 CDC
• 从 0 到 1 的前端异常监控项目实战
• 炫技，从 12.67s 到 1.06s 的网站性能优化实战
• H5 秒开方案大全
• 撸一个前端监控系统（React + Node + Mysql + Webpack plugin + Docker）—— （上）

性能

文章

• 「中高级前端」高性能渲染十万条数据
• 2018 前端性能优化清单
• Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
• 关于用户访问请求慢,TTFB 时间长的问题分析
• 性能优化魔法师：中文字体实践篇

监控

开源库

• https://github.com/BetterJS
• https://github.com/iv-web/aegis-report
• https://github.com/RicardoCao-Biker/Front-End-Monitoring
• https://github.com/MriLiuJY/monitorFE
• https://github.com/710leo/urlooker

文章

• 搭建一个前端监控系统,不再错过 BUG
• 捕获未处理的 Promise 错误方法
• 前端异常监控、上报及 js 压缩代码定位
• 5 分钟撸一个前端性能监控工具
• 前端异常监控解决方案研究
• 从无到有<前端异常监控系统>落地
• 轨迹回放（录屏）功能- 前端监控之数据收集篇
• 前端性能监控新工具 perfume
• 自己动手打造前端性能监控系统
• 蚂蚁金服如何把前端性能监控做到极致?
• DIY 一个前端监控平台（上）
• 手刃前端监控系统
• 一步一步搭建前端监控系统：如何监控资源加载错误？
• 撸一个前端监控系统（React + Node + Mysql + Webpack plugin + Docker）—— （上）

常用工具

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

开源库

• hiper *2k+

SEO

• 为什么单页面的 seo 不友好？如何解决这一问题？

高质文章

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

趋势

• 从微前端到智能化：2020 前端开源技术趋势

微前端

• awesome-microfrontends
• 一线大厂前端怎么做？百度资深前端工程师，带你手写微前端框架
• 字节跳动的微前端沙盒实践
• 微前端在美团外卖的实践
• 未来魔法校的微前端实践
• Berial，一个硬了的微前端框架

WebAssembly

• 花椒前端基于 WebAssembly 的 H.265 播放器研发

Serverless

• serverless
• Serverless——前端的 3.0 时代
• 基于 Serverless 的 VuePress 极简静态网站
• webiny-js

web components

• w3c webcomponents
• Web Components 是个什么样的东西
• Web Components 入门实例教程
• lit-element(下一代 polymer)
• polymer
• 深度介绍：💾 你听说过原生 HTML 组件吗？
• [译] 2018 来谈谈 Web Component
• JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！
• 再加 150 行代码教你实现一个低配版的 web component 库

打包

• vite
• snowpack
• open-wc

动效

工具库

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

demo

• 2018 最佳前端动效集锦

可视化

• 数据可视化工具目录

库

• Echart
• zrender(A lightweight canvas library which providing 2d draw for ECharts)
• chartjs
• D3
• Highchart
• plotly(基于 d3 的 chart 库)
• zdog
• Leaflet
• zeu
• SandDance(microsoft 出品)

• Antv
• recharts
• BizCharts

• vue-echarts
• v-charts

开源项目

• Vue + Koa 从零打造一个 H5 页面可视化编辑器——Quark-h5
• h5-Dooring
• luban-h5(类似易企秀的H5制作、建站工具)

文章

• 14 个最好的 JavaScript 数据可视化库
• 前端必看的数据可视化入门指南
• 一步步带你实现 web 全景看房——three.js
• 阿里基于 G6 和 React 打造的开源可视化图形编辑器——GGEditor
• ECharts 实现地图散点图（上）
• 一些好用的开源监控工具汇总
• 美团外卖前端可视化界面组装平台 —— 乐高
• 页面可视化搭建工具前生今世
• 可视化搭建前端工程 - 阿里飞冰了解一下
• 前端工程实践之可视化搭建系统（一）
• 【第 1282 期】页面可视化搭建工具前生今世
• 【第 1524 期】页面可视化搭建工具技术要点
• 几个开源的自定义表单设计器源码，推荐给需要的人
• 看似复杂炫酷的数据可视化设计，用这波神器轻松搞定
• H5DS 编辑器技术解析
• [第 1 期] H5 海报生成 核心原理解析
• 一篇文章彻底搞定富文本原理 + 实战

数据结构与算法

算法

官网

• leetcode
• leetcode 中国

文章

• 优秀程序员都应该学习的数据结构与算法项目（GitHub 开源清单）
• labuladong 的算法小抄
• 数据结构与算法（三）—— 常见排序算法和 swift 实现
• 大家都是如何刷 LeetCode 的？
• 程序员必须掌握哪些算法？
• 怎么学好数据结构？
• (1.8w 字)负重前行，前端工程师如何系统练习数据结构和算法？【上】
• 一份我转行数据分析时候的学习清单

开源库

• 和小浩学算法
• javascript-algorithms
• leetcode
• LeetCodeAnimation *39k+
• algorithm-visualizer
• Algorithm_Interview_Notes-Chinese
• JavaScriptAlgorithms(算法 js 实现)
• fucking-algorithm

机器学习

• tfjs(tensorflow.js)
• pipcook(基于 tfjs-node 的前端算法工程框架)
• 一文看尽 TensorFlow“奋斗史”！| CSDN 博文精选
• tensorflow 中文
• TensorFlow 如何入门，如何快速学习？
• 前端如何学习机器学习之 TensorFlow.js
• DeepLearning-500-questions(深度学习 500 问)
• 斯坦福机器学习 CS229 课程讲义的中文翻译
• 吴恩达《Machine Learning Yearning》完整中文版开源

项目

• christmas-hat
• goddess-hat

js-core

库

• QuickJS

文章

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

代码规范

• 前端小纠结--集成 gitflow 和 standard-version 使用

• 前端团队代码评审 CheckList 清单

• 【译】Google 官方文章——如何去做 coder review

• 如何保证前端项目代码质量

• 前端规范

• 作为 CTO，我为什么必须要求代码进行 Code Review

• Git 进阶：如何提交标准化的 Git Commit Message

• 让你的 commit 更有价值(规范)

• Git 在团队中的最佳实践--如何正确使用 Git Flow

• 解决 vscode eslint 与 prettier 冲突 - 知乎

• sonarqube(代码检查)

• 字节研发设施下的 Git 工作流

• Introduction to GitLab Flow

canvas

开源项目

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

测试

文章

• javascript-testing-best-practices
• 2018 前端自动化测试综述 [英]
• 2019 前端自动化测试综述 [英]
• 测试你的前端代码（介绍篇）[英]
• 万字长文总结前端测试体系建设与最佳实践
• 花椒测试平台 - 接口篇
• 浅谈前端单元测试
• 从 0 到 1 构建美团压测工具

单元测试

测试框架：

• 推荐 jest,功能比较完善，包含断言(facebook 开发)
• mocha + chai/expect
• karma + mocha + chai

用 sinonjs 生成函数

站在程序员的角度测试 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 )
• sinonjs(模拟生成函数)

文章

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

• 脱离 996，Chrome DevTools 面板全攻略！！！
• vivo 快应用归档
• 快应用 IDE 定制 Devtools 元素面板系列一：背景需求及方案分析
• devtools-frontend/wiki
• devtools-protocol/
• chrome-devtools
• chrome-remote-interface
• Chrome DevTools 远程调试协议分析及实战
• Web 调试技术详解

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 文档编写工具对比

自动化

• Auto.js(安卓平台上的 JavaScript 自动化工具)
• taobaoVisitingVenues(双十一活动自动化地操作淘宝浏览店铺得喵币脚本 for Android)
• travis-ci(自动触发 GitHub 项目测试)

网络请求

• axios 中文文档翻译
• 封装 axios 拦截器实现用户无感刷新 access_token

pwa

• progressive-web-apps
• 饿了么的 PWA 升级实践

其他必备知识

• 前端开发者必备的 Nginx 知识
• 多站点单点登录实现方案
• github 开发官方文档
• 【10 个基于 JavaScript 的机器学习实例】
• 中文技术文档的写作规范
• 一文看懂：网址，URL，域名，IP 地址，DNS，域名解析
• 87 个前端必备开发网站
• 前端开发的历史和趋势
• 什么是 SEO

常用技术

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

git

安全

• 我知道的跨域与安全
• 前端安全知识

框架

编译器 compiler

• js-code-to-svg-flowchart
• the-super-tiny-compiler

AST

• 平庸前端码农之蜕变 — AST
• 从 babel 讲到 AST
• AST 与前端工程化实战
• 高级前端基础-JavaScript 抽象语法树 AST
• astexplorer
• 面试官: 你了解过 Babel 吗？写过 Babel 插件吗? 答: 没有。卒

html

• htmlparser2

数据响应式

• observable-membrane(vue3 proxy 机制)

框架

• cyclejs
• functional-frontend-architecture

jquery

ui 框架

• []
• semantic-ui

学习网站

• frontendmasters(各种大牛视频 英文)

架构

• 前端架构-让重构不那么痛苦（译）(推荐！！！)
• 基于 React 的 PC 网站前端架构分析
• 大型项目前端架构浅谈（8000 字原创）
• 十年•杭研技术秀 | 网易蜂巢的工业化前端架构
• 阿里 9 年，我总结的前端架构演进 3 大阶段及团队管理心法
• 【第 1399 期】美菜无线前端架构模型 2018
• 前端插拔式 SPA 应用架构实现方案

工程化

• 喜大普奔，Pont 1.0 发布了(前后端数据服务层解决方案)
• 为什么你在辛苦做项目国际化，而别人在喝茶？(国际化全流程解决方案)
• 研发效能提升和敏捷实施 36 计 资料合集

值得注意的库

• hyperapp(类似 react vue)

• 开发者手册

↑ 返回目录 ↑