平时积累的前端资源持续更新中

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

持续更新中……

项目地址

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

目录

• vue
• react
• react-native
• Weex
• typescript
• Taro
• nodejs
• 常用库
• css
• js
• es6
• 移动端
• 微信公众号
• 小程序
• webpack
• GraphQL
• 性能与监控
• 高质文章
• 趋势
• 动效
• 数据结构与算法
• js core
• 代码规范
• 工具
• 其他必备知识

vue

文章

• Vue3.0 前的 TypeScript 最佳入门实践
• 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层
• VUE 单页应用骨架屏方案
• 一个 Vue 引发的性能问题
• 【2019 前端进阶之路】Vue 组件间通信方式完整版

react

官网

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

参考资料

• 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 千字长文 - 慎入)

组件库

• ant-design https://ant.design/index-cn
• ant-design-mobile https://mobile.ant.design/ind…
• react-intl
• rc-form https://github.com/react-comp…

框架

• 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…

Demo

react-native

参考资料

• react-native-awesome https://github.com/crazycodeb…

Weex

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…

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…

Taro

参考资料

• taro https://taro.aotu.io/
• taro 小册 https://juejin.im/book/5b73a1…
• awesome https://github.com/NervJS/awe…

组件库

• mounted https://github.com/fjc0k/mounted
• taro-ui https://taro-ui.jd.com

文章

• dva+ts+taro 小程序构建 - 资料总汇
• Taro 撸一个简版的微信读书小程序
• Abraham – 用 Taro 写个垃圾分类微信小程序

demo

• https://github.com/huangzhuan…
• https://github.com/lsqy/taro-…
• https://github.com/Izayawww/m…
• https://github.com/Duanruilon…
• https://github.com/js-newbee/…
• https://github.com/EasyTuan/t…
• https://github.com/huangjiank…
• https://juejin.im/post/5d2a07…

nodejs

官网

• 英文官网 https://nodejs.org/en/
• 中文官网 http://nodejs.cn/

参考资料

• 七天学会 NodeJS 文档 http://nqdeng.github.io/7-day…
• node 面试题 https://github.com/ElemeFE/no…
• Node 应用内存泄漏分析方法论与实战 https://github.com/alibaba/be…

常用库

数据

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

富文本编辑器

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

时间

• moment

css

less

• less 中文文档 https://less.bootcss.com/# http://lesscss.cn/
• less 官网 http://lesscss.org/
• 教程 https://segmentfault.com/a/11…

文章

• 移动端 1px 解决方案 https://juejin.im/post/5d19b7…

nodejs

• nodejs 最佳实践 https://github.com/i0natan/no…

物联网

• 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

正则表达式

• 正则表达式 30 分钟入门教程
• 2019 年常用 JavaScript 正则大全
• 正则表达式不要背
• 2019 年 JS 正则大全 (常用)

其他

• 【译】JavaScript 的工作原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
• 优秀 JavaScript 开发人员应掌握的 9 个技巧
• 浅拷贝与深拷贝
• JS 中轻松遍历对象属性的几种方式

es6

• Promise 源码详解

移动端

文章

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

常用库

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

微信公众号

实战项目

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

小程序

webpack

文章

• 前端构建秘籍

GraphQL

文章

• 前端 er 了解 GraphQL，看这篇就够了

性能与监控

文章

• GMTC 大前端时代前端监控的最佳实践

常用工具

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

高质文章

• if 我是前端团队 Leader，怎么制定前端协作规范?
• 阿里大佬浅谈大型项目前端架构设计
• 年终回顾，为你汇总一份「前端技术清单」
• 8 年前端开发的知识点沉淀 (不知道会多少字，一直写下去吧 …)
• fullstack tutorial
• 五星推荐的系列文章清单
• 端动态化方案详细设计
• 让虚拟 DOM 和 DOM-diff 不再成为你的绊脚石

趋势

• 微前端 https://www.cnblogs.com/zhuan… https://github.com/neuland/mi…

  • 了解什么是微前端
  • 微前端实践
  • 无代码编程
  • 基于 React & TypeScript & Webpack 的微前端应用模板

动效

工具库

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

demo

• 2018 最佳前端动效集锦

数据结构与算法

• 数据结构与算法（三）—— 常见排序算法和 swift 实现
• 【从蛋壳到满天飞】JS 数据结构解析和算法实现 - 集合和映射

js-core

• JavaScriptCore 全面解析
• 这一次，彻底弄懂 JavaScript 执行机制
• 你不知道的浏览器页面渲染机制

代码规范

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

工具

• VSCode 折腾 log 插件
• 21 个 VSCode 快捷键，让代码更快，更有趣

## 其他必备知识

• 前端开发者必备的 Nginx 知识
• 多站点单点登录实现方案