前端架构师珠峰前端架构课

实现immer不可变数据

• 共享可变状态
• 不可变数据的解决方案
• 实现immer
• 实现produce
• 实现useImmerState

实现css-loader

• css-loader实战
• 实现css-loader
• 支持@import功能
• 实现style-loader
• PostCSS抽象语法树

实现UMI3.0

• 约定式路由实战
• 源码调试UMI3.0
• 实现UMI3的运行时系统
• 实现UMI3的插件系统
• 实现编译时插件
• 实时目录生成功能
• 实现服务启动
• 实现运行时插件

实现webpack5中的模块联邦

• Module Federation工作原理
• Module Federation实战
• 通过shared处理公共依赖
• 处理双向依赖
• 支持多个remote
• 实现Module Federation

实现React性能优化

• 实现编译阶段的优化
• 实现路由切换优化
• 实现更新阶段优化
• immutable.js
• 时间分片和虚拟列表渲染大数据量
• React性能分析工具

实现JSX转换模块

• AST抽象语法树
• babel工作流
• 实现旧版JSX转换
• 实现新版JSX转换
• 实现属性的转换

实现实用的ReactHooks

• 实现useRequest实现分页请求
• 实现useDrag实现拖拽
• 实现useForm实现表单自动托管
• useAnimation实现自定义动画

实现@vue/cli脚手架4.0

• @vue/cli4.0源码调试
• 实现参数解析
• 实现脚手架的插件系统
• 实现create命令
• 实现@vue/cli-service插件

实现create-react-app

• create-react-app源码调试
• 实现init方法
• 实现createApp方法
• 实现run方法

实现react-scripts

• react-scripts源码调试
• 实现build命令
• 实现start方法

实现rollup和tree-shaking

• rollup项目实战
• AST和作用域分析
• 实现rollup
• 实现tree-shaking
• 实现变量重命名

实现px2rem-loader

• 移动端适配实践方案
• CSS抽象语法树
• px2rem-loader实战
• 如何编写自定义loader
• 实现实现px2rem-loader

实现React的keepalive组件

• 基于fiber实现React缓存组件
• 支持保持滚动状态
• 支持缓存生命周期管理
• 使用LRU管理缓存

前端人的健康之道

• 颈腰椎病痛的原理及对策
• 肩周炎和鼠标手的原理和对策
• 干眼症的分级症状和对策
• 跑步之道-科学跑姿
• 跑前热身
• 跑后拉伸

V8 内存管理

• JavaScript 中的垃圾收集
• JavaScript 中的内存管理
• V8 垃圾回收机制分类
• 引用计数、标记清除、标记整理和增量标记

前端编译原理

• 编译器工作流程
• 有限状态机
• 语法分析
• 递归下降算法
• 上下文无关文法
• 语法分析器
• 遍历语法树
• 语法树转换器
• 代码生成器
• 实现babel和babel插件
• 从零实现JSX到JS的babel转换插件

sourcemap

• sourcemap的实现原理,手写实现算法
• webpack中的source-map详细配置和最佳实践
• 生产环境里无source-map如何线上调试
• source-map-loader详解

前端二进制应用实战

• 计算机原码、反码和补码的原理
• 前端浮点数精度问题和超大数求和原理
• 前端中的FormData、Blob、File、ArrayBuffer、TypedArray、DataView、DataURL、 ObjectURL、Text
• 前端图片裁剪和上传预览
• 纯前端实现音频的合并剪辑处理

手写Nest.js版的IOC容器

• 控制反转和依赖注入
• 实现服务的注册
• 实现值的获取
• 实现注入和获取

Typescript

• 开发环境
• TypeScript 安装和编译
• 数据类型
• 函数
• 类
• 接口
• 泛型
• 结构类型系统
• 类型变换
• 模块 VS 命名空间
• 类型声明
• 声明文件
• Typescript+React 集成开发
• Typescript+Vue 集成开发
• Typescript 工程化

PWA

• manifest.json 配置
• service worker 生命周期
• fetch
• 请求拦截
• cache api 以及缓存策略
• Notification
• API
• workbox 应用
• Vue 中应用 PWA

从零实现 vue-cli

• 脚手架项目创建
• 解析命令行参数
• create 命令实现
• config 命令实现
• 项目发布和布署

前端监控和埋点系统

• 前端监控目标
• 前端埋点方案
• 监控 JS、Promise、资源加载错误
• 接口异常采集
• 白屏和加载时间
• 性能指标和卡顿
• PV 和用户停留时间
• 可视化报表查询
• 前端监控项目实战

serverless 云开发

• serverless framework
• Serverless Components
• 云函数 SCF 组件
• API 网关组件
• 布署静态网站
• 布署 express 项目
• 布署 express+layer 项目
• 部署 Vue+Express 全栈应用

微前端实战与原理

• 微前端工程化
• 同时支持 angular、vue、react 的微前端框架实战
• single-spa和qiankun实战
• 从零编写一个微前端框架
• 应用状态管理
• 应用的加载管理
• 路由管理

GraphQL

• GraphQL 概念
• 使用 GraphQL 查询和变更数据
• 后端搭建 GraphQL 服务器
• ReactHooks 和 GraphQL 项目实战

GraphQL+Nest.js 微服务开发

• TypeScript+Nest.js 项目构建
• Nest.js 模块定义
• GraphQL 的服务器搭建与查询操作
• Nest 实现后端微服务

flutter

• dart 语法
• flutter 环境配置
• 常用组件
• 布局
• 导航和动画
• flutter 版珠峰课堂项目实战

electron

• 配置 electron 环境
• 主进程和渲染进程
• 进程间通信
• 文件对话框操作
• 消息通知和快捷键
• electron 版珠峰课堂项目实战

uni-app

• 调试
• 使用 hbuilder
• flex 布局
• 多端发布
• 路由和动画
• 微信分享
• uni-app 版珠峰课堂项目实战

ReactNative

• UIExplorer 项目
• css 盒子模型和样式
• css 元素浮动
• flexbox 布局
• ReactNative 长度单位
• RN 事件
• React 动画原理
• 实现一个 Navigator
• App 架构之目录结构、路由和组件
• App 架构之网络和 Container
• App 架构之命名空间
• ReactNative 第三方插件
• 珠峰课堂项目实战

阿里企业级开发框架 egg.js

• 项目架构
• 配置路由
• 静态文件中间件
• 模版引擎
• 远程接口服务
• 计划任务
• 集成 MYSQL
• Restful 接口
• Sequelize 持久化工具
• 国际化
• 扩展工具方法
• 中间件
• 运行环境
• 单元测试
• 服务器部署和运维
• 手写自己的 Egg.js 框架，包括 egg-core、egg-init、egg-cluster
• 自定义插件和框架 ,手写 egg-socket.io 插件

网络安全

• Web 漏洞的分析与防御
• XSS(跨站脚本攻击)
• CSRF(跨站请求伪造)

前端性能优化

• webpack 优化方案
• 浏览器缓存原理和最佳设置策略
• CDN 缓存优化
• EventLoop 异步更新
• 避免回流和重绘
• 节流与防抖
• 通过 Performance 监控性能

计算机网络

• OSI 七层模型
• TCP/IP 参考模型
• 物理层
• 数据链路层
• 互联网层(网络层)
• 传输层
• 应用层

网络协议实现

• 基于Node的TCP服务器从零实现HTTPS协议
• 基于Node从零实现websocket协议
• 基于Node从零实现Ajax对象XMLHttpRequest

Linux

• Linux 与 Windows 的不同
• Linux 安装和虚拟机的使用
• 桥接、NAT、Host-Only 等网络连接
• 快照、克隆、挂载点和分区
• Linux 常用命令 VI 编辑器、用户与权限管理、服务管理、软件管理、网络管理、系统命令
• Shell 实战 监控服务和主机网络状态

Nginx

• nginx 的安装和使用
• 模块和基本配置
• 正向反向代理等应用场景
• CDN
• 浏览器缓存
• 跨域
• 防盗链
• rewrite
• 负载均衡集群

Docker

• 虚拟机
• Linux 容器
• Docker 核心概念
• Docker 架构
• Docker 镜像
• Docker 容器
• Dockerfile
• Docker 数据盘
• 网络配置
• docker-compose

CI/CD 持续集成

• jenkins job
• shell 集成
• 集成 nginx 和 git
• 持续集成和部署
• travis gitlab ci

Mongodb

• Mongodb 安装和使用
• Mongodb 的系统架构
• Mongodb 高级查询
• Mongodb 索引
• Mongodb 安全与权限
• mongoose 模块之 Schema
• mongoose 模块之 Model

MYSQL

• MYSQL 安装与使用
• MYSQL 系统架构
• 数据处理之增删改查
• 数据类型和约束分页
• 索引和慢查询性能分析
• 数据库安全之防止 SQL 注入
• 数据库设计 ER 图设计
• 数据库事务和锁
• 数据库设计之三大范式
• 分组和聚合函数
• 基于角色的权限访问控制（Role-Based Access Control）

Redis

• 5 种数据结构及使用场景
• API 的理解和使用
• Redis 客户端
• 发布订阅
• 事务
• 备份和恢复

express+mongoose 多人博客

• 初始化项目和依赖的模块
• 跑通路由
• 使用 bootstrap 渲染模板
• 实现用户注册的功能
• 实现用户的登录功能
• 实现会话功能并控制菜单显示
• 增加登录状态判断中间件
• 成功和失败时的消息提示
• 实现上传头像并在导航的右上角显示个人信息
• 新增发表文章
• 首页显示文章列表
• 删除文章
• 更新文章
• 实现搜索功能
• 实现分页的功能

Typescript+React+Redux 网校课堂

• webpack 环境搭建
• 底部页签导航
• React 动画
• Redux 改变课程分类
• 实现头部轮播图
• 课程列表列表
• 长列表优化(只渲染可视区域)
• 下拉刷新(节流)
• 上拉加载(防抖)
• 记录滚动条位置
• 课程详情
• 用户注册和登录
• 受保护的个人中心
• 购物车动画

Egg.js+AntDesignPro+MySQL 开发企业级管理系统

• 用户注册和登录
• JWT 权限认证
• 用户头像上传
• 用户手机号注册与登录
• 页面和按钮菜单权限
• 用户列表管理
• 为角色分配权限
• 为角色分配用户
• egg.js+mysql 实现后端接口

React+Mongodb+websocket 开发多人聊天室

• 什么是实时通信
• 什么是 Websocket
• websocket 数据帧格式解析
• 从零实现 websocket 协议
• websocket 和 http 的对比
• 使用 socket.io 实现聊天室
• 匿名聊天
• 有用户名的聊天和用户列表
• 用户私聊
• 划分不同的聊天房间
• 消息持久化

cheerio+mysql+nodemailer 开发个性化新闻爬虫

• 用 superagent+cheerio 爬取网页内容
• 数据持久化到 mysql 数据库
• 用户个性化邮箱订阅标签
• 数据更新按兴趣分发推送邮件
• 用 ElasticSearch 实现全文检索

使用 canvas 开发开发 flappy bird

• canvas 基础知识
• 画布和画图
• background 实现
• 实现大地
• 绘制管道
• 绘制小鸟
• 碰撞检测
• 场景管理

使用 three.js 开发微信小游戏跳一跳

• 基础信息属性配置
• 几何体创建以及相机镜头位置改变
• 更新相机坐标实现视觉动画
• 绑定事件实现 jumper 跳跃功能
• 回顾思路梳理逻辑
• 最终完成实现成功和失败的处理和重置操作
• 场景管理之场景

Nest.js 实战

• Nest.js 核心概念
• TypeORM 集成使用
• 文件上传
• 微信支付和支付宝支付
• antdesign 实现权限用户后台管理系统

设计模式

• UML 模型图
• 用例图
• 类图和对象图
• 活动图
• 时序图
• 协作图
• 组件图
• 部署图

面向对象

• 什么是面向对象
• 封装、继承和多态
• 面向对象和面向过程

设计原则

• 开放封闭原则
• 单一职责原则
• 里氏替换原则
• 依赖倒置原则
• 接口隔离原则
• 迪米特法则
• 合成复用原则

创建型模式

• 抽象工厂模式(Abstract Factory)
• 建造者模式(Builder)
• 工厂方法模式(Factory Method)
• 原型模式(Prototype)
• 单例模式(Singleton)

结构型模式

• 适配器模式(Adapter)
• 桥接模式(Bridge)
• 组合模式(Composite)
• 装饰模式(Decorator)
• 外观模式(Facade)
• 享元模式(Flyweight)
• 代理模式(Proxy)

行为型模式

• 职责链模式(Chain of Responsibility)
• 命令模式(Command)
• 解释器模式(Interpreter)
• 迭代器模式(Iterator)
• 中介者模式(Mediator)
• 备忘录模式(Memento)
• 观察者模式(Observer)
• 状态模式(State)
• 策略模式(Strategy)
• 模板方法模式(Template Method)
• 访问者模式(Visitor)

前端数据结构和算法

• 算法的基础知识
• 输入、输出和数量级 | 计算能力的变革
• CPU、寄存器和内存 | 二分查找 | 插入排序 | 冒泡排序

算法的衡量和优化

• 时间复杂度和空间复杂度 | 复杂度的本质
• 合并排序 | 递归函数复杂度分析
• 递归表达式分析法 | 递归数学归纳法分析
• 主定理

排序算法

• 排序算法介绍
• 基于比较的排序算法
• 合并排序优化
• 快速排序
• 快速排序复杂度和优化
• 计数排序
• 基数排序
• 桶排序
• 外部排序

递归

• 递归的基本概念
• 递归图形的绘制
• 递归和穷举问题
• 组合问题
• 递归空间优化
• 回溯算法
• 重复子问题优化
• 尾递归
• 搜索问题(8 皇后)
• 深度优先搜索和广度优先搜索

数据结构

• 数组
• 双向链表
• 反转单向链表
• 堆
• 栈
• 队列

进阶算法

• 反转单向链表
• LCS 问题的子结构
• 填表法
• 构造结果

BAT 面试真题

• 反转二叉树
• 解析 Query 字符串
• 取 N 个数字为 M
• 火车排序问题和队列
• 网格走法动态规划
• 两个栈实现一个队列

训练营

Vue3+TS中台管理系统

• 面包屑
• 标签导航
• 侧边栏(权限菜单)
• 自定义icon（Svg Sprite 图标）
• 拖拽看板
• 路由检索
• 主题切换 (基于element-plus)
• Screenfull全屏
• 图片上传
• 登陆注册(jwt)
• 权限控制(系统管理：用户管理、角色管理、菜单管理)
• 权限验证(页面权限、指令权限)

nest-serverless-graphql实战

• 脚手架安装使用
• WebIDE创建云函数
• Serverless Framework
• Serverless布署Egg项目
• Serverless布署静态项目
• Serverless布署Nest.js项目
• Nest.js项目对接MySQL
• GraphQL核心应用
• 全栈项目实战

持续集成CI/CD

• 掌握Docker的安装与镜像容器基础操作
• 掌握如何使用docker安装Gitlab/Jenkins
• 掌握使用Jenkins + Gitlab实现自动化构建
• 搭配镜像仓库实现制品版本管理
• 使用Ansible批量将制品部署到服务器

Kubernetes核心和项目实战

• Kubernetes安装与配置
• 集群的方式配置Master
• 集群的方式配置节点
• 直接布署nginx
• 通过yaml布署mysql
• 布署Pod、service以及ingress
• 实现灰度发布
• 实现滚动发布
• 实现服务可用性探针
• 机密信息的存储
• 服务发现
• 统一管理服务环境变量
• 污点与容忍
• 布署MYSQL数据库
• 布署后端服务
• 布署前端应用
• 集成jenkins集成
• 通过WebHooks推送触发持续构建

Egg.js源码和实战训练营

• 路由和中间件
• 控制器和服务
• 模板渲染和插件系统
• 定时任务和错误处理
• 源码分析并手写Egg.js
• Egg.js实战

Vue专业级后台管理系统

• 建立Vue CLI4版本的环境搭建
• 路由配置的模块化管理
• element-ui的应用和组件模块化管理
• axios的二次封装
• 获取后台数据应用
• 轮播图实战
• 用户注册和登录权限的应用
• 路由和菜单权限的渲染和处理
• 对webSocket的封装和使用

typescript+ReactHooks实现珠峰课堂

• 用webpack搭建React+ts环境
• 路由配置和使用antd4搭建布局
• 移动端使用rem和flex进行布局
• 实现首页头部导航效果
• express+ts实现后端项目
• 实现个人中心和用户注册登录的功能
• 实现首页加载，防抖节流，虚拟化列表的功能
• 实现购物车效果
• 实现服务器部署功能

微信小程序实战

• 用express实现后台
• 全局配置每个页面
• 实现防抖节流，列表优化功能
• 实现购物车功能
• 获取微信头像等相关权限

Antv/G6实现思维导图实战

• 用G6绘制实现鼠标、键盘事件监听伪代码功能
• 实现图标展开和收缩功能
• 实现自定义边框，添加和编辑文案功能
• 控制开口方向布局，实现控制按钮样式
• 对节点事件的监听和实现修改文案和添加子节点功能

从零实现脚手架cli实战

• 脚手架项目创建
• 解析命令行参数
• 实现create命令
• 实现config命令
• 项目发布和部署到npm

nestjs基础到实战项目实战

• 了解nestjs的脚手架及其常见命令
• 了解nestjs中依赖注入、模块、生命周期等知识
• 熟练对ejs模板、cookie和session的使用
• 熟练掌握数据库中表、外键和事务等知识
• 熟练掌握实现增删改查功能
• 熟练掌握TypeORM在nestjs的应用
• 熟练掌握nestjs的守卫拦截和过滤器的使用
• 守卫做用户鉴权，进行权限处理功能
• RBAC权限系统项目，完整的前后台一体化项目

Typescript+React组件库实战

• 搭建环境，制作颜色和排版
• 完成发包流程
• 实现Button、Icon、Avatar、Radio等组件
• 实现轮播图、进度条、拖拽树组件等功能
• 实现message、upload、分页和表格的组件
• 使用hooks和ts技术栈完成本次项目

Vue3+ts组件库实战

• 打包部署gitee的page服务
• 手动实现vue3工程化和路由配置
• 手动实现Button、Input、Radio、Icon等组件
• 手动实现表格、表单、数据视图、导航等功能组件
• 基于TS开发，按需加载，自定义主题
• 组件性能优化，支持树组件和表格组件虚拟滚动
• 可以专注开发，无需关心页面传参以及前进后退逻辑控制

前端全链路监控实战

• 前端监控概述、sentry、前端监控系统架构、fee仓库
• 配置打点服务
• SDK的使用
• 配置kafka和filebeat
• 部署mysql和redis，修改fee，并部署server部分
• 部署client部分，完成整体流程

就业面试与指导

• 阿里面试官就业面试指导
• 头条面试流程分享
• 头条四轮面试真题演练

软技能

• 大厂职级系统
• 大厂能力模型
• 大厂晋升流程
• 时间管理和精力管理

课程截图

点击展开