• 前端全栈学习目录
  • 1、网页三剑客(html/js/css)
    • html
    • js
    • css
  • 2、js运行时环境
    • 浏览器
    • node
    • deno
  • 3、js(视图类)框架
    • jq
    • vue
    • react
    • 小程序
  • 4、前端工程化
    • 构建工具
    • 自动化测试
    • 持续构建/部署
  • 5、性能优化
    • 全链路性能优化
    • 前端监控
  • 6、程序员必备知识
    • 编程
    • 网络
    • 服务端
    • 工具类
  • 7、项目实战
    • 全栈系列
    • 微信相关
    • 服务端
    • 好玩的小项目
• 8、架构

前端全栈学习目录

1、网页三剑客(html/js/css)

html

js

理论

• JavaScript 指南

• es6+next

• ts

• 一些零碎的js知识

• json

实战

• 数据拦截

css

• 预处理
  • less
  • sass
• 原生
  • css2
  • css3
  • cssNext
  • css的一些技巧、code
• 后处理
  • postcss

2、js运行时环境

浏览器

v8

浏览器工作原理与实践

node

理论

实战

• node+koa2 +ssr(Nextjs)搭建小程序服务端+管理后台

• node-crawler 初体验

• node BFF

deno

理论

一个基于v8引擎的安全的TypeScript运行时

实战

桌端应用

理论

实战

3、js(视图类)框架

jq

vue

vue源码

react

理论

• react源码

实战

• react16.8 中 hooks 结合 dav.js 使用方法
• react+TS+UI组件库

小程序

小程序底层源码解析

框架：vuemini

4、前端工程化

构建工具

构建工具

• 玩转webpack code仓库 webpack思维导图
• webpack 5.* module-federation的应用（微前端）
• [rollup]适用于js库打包构建

规范

• Angular commit
• 语义化版本（Semantic-Versioning）规范格式
• 代码检查工作流 husky（避免糟糕的 git commit） 和 lint-staged（执行所需脚本）

自动化测试

• 自动化测试概念
• [postman接口自动化测试]

持续构建/部署

• gitlab &gitlab-ci 自动化部署
• Travis CI & github 自动发布 npm 插件
• Settings Sync & github 同步 vscode 配置
• 前端工程化实践指南

5、性能优化

全链路性能优化

前端监控

• rrweb录屏重放
• 搭建前端监控平台

6、程序员必备知识

编程

• leetcode
• 常用算法
• 设计模式 code

网络

• http协议
• WebSocket
• Web安全攻防实战

服务端

• linux
• docker
• nginx

工具类

• git 常用命令

7、项目实战

全栈系列

• 微前端IFrame\WebComponent\Single-SPA

微信相关

• 微信小程序全栈开发
• 微信公众号

服务端

• 大前端bff(Backend for Frontends)
  • node+koa or eggjs
  • Apollo+graphql
• nignx 服务器配置

好玩的小项目

• 1、即刻换颜小程序 （头像 DIY）

• 2、JSTP 实现简单聊天室DOM

• 3、chrome插件 百晓生书签管理

8、架构

• 中台