这是一门专门培养前端架构师的高端课程
初级前端VS中高级前端VS前端架构师
7大维度 完成前端工程师到架构师的蜕变
吸收掌握本课程内容，你具备的能力可以达到互联网公司前端P7级别岗位标准
价值百万的全业务真实产品架构 支撑公司日常经营管理需求
数据埋点/运营管理/作品管理后台等业务需求+组件库/组件平台/脚手架等开发需求
产品展示与体验
全程遵循顶级大厂内部标准的产品开发规范
全过程对标大厂流程标准，能力向下兼容，中小厂同样适用
课程涵盖“Web前端架构师”所有的应会必会技术栈
下图中所示内容，100%覆盖，绝不掺水
除了出色的视频内容，这里有伴你整个技术生涯的“技术社区”
学习时你能在这里获取答案，工作后你能在这里解决难题”
三位大牛倾囊制作 打造Web架构集大成之作
这个讲师阵容意味着什么 慕课网的老朋友们都懂
课程大纲及学习周期安排
为保证课程内容紧跟市场变化，课程章节将逐步开放，直至课程完结
需求分析和架构设计：做什么，如何做？
开工之前，先来看看我们到底要做一个什么项目，有哪些功能。然后站在上帝视角，从整体的架构层面，该如何设计该项目。
课程安排：
- 1、需求分析，到底要做一个什么产品
- 2、项目设计，多个项目之间的关系
- 3、数据模型设计，各项目之间的数据流转过程
- 4、后台管理需求，管理员要管控什么内容
- 5、统计需求，知道被访问了多少次
脚手架架构设计和框架搭建
万丈高楼平地起，讲解大厂级别的脚手架是如何设计的，从头开始绘制架构设计图，并完成脚手架的框架搭建。
课程安排：
- 1、掌握脚手架的实现原理
- 2、掌握脚手架管理工具Lerna和常用操作
- 3、基于Lerna构建脚手架项目
- 4、图解脚手架架构设计
- 5、脚手架工程体系设计
- 6、深入阅读Lerna源码，剖析require.resolve原理
脚手架核心流程开发
本周将完成脚手架内核@imooc-cli/core子项目设计，并开发脚手架的执行准备阶段和命令注册阶段。
课程安排：
- 1、脚手架核心子项目core包架构设计
- 2、掌握脚手架node运行版本限制
- 3、掌握脚手架root自动降级
- 4、掌握npmlog实现自定义脚手架日志
- 5、掌握脚手架用户主目录检查
- 6、掌握脚手架入参解析和环境变量配置
- 7、运用npm API实现脚手架自动更新
- 8、掌握脚手架命令注册原理
- 9、运用commander简化脚手架命令注册
- 10、node支持ES模块化标准的两种方法
脚手架命令注册和执行过程开发
本周将完成脚手架内核@imooc-cli/core子项目的执行命令阶段，我们将采用分离式架构设计、缓存结构设计大幅提升脚手架的下载速度和执行性能。
课程安排：
- 1、掌握脚手架执行命令原理
- 2、掌握高性能脚手架架构思路和具体方法
- 3、封装通用的npm包管理类Package
- 4、掌握API方式完成npm包下载和自动更新
- 5、掌握脚手架缓存结构设计
- 6、掌握Node多进程的四种实现方案
- 7、深度解析Node多进程child_process库源码
脚手架创建项目流程设计和开发
本周将开发脚手架创建项目的@imooc-cli/init子项目，完成init包的准备阶段和下载模板阶段开发。
课程安排：
- 1、脚手架项目创建能力架构设计
- 2、深入理解命令行交互原理和inquirer的应用
- 3、掌握服务端框架egg.js的开发方法
- 4、掌握云mongodb和egg接入mongodb方法
- 5、运用egg.js+mongodb构建项目模板API
- 6、掌握正则表达式并完成项目名称自动格式化
- 7、掌握spinner实现命令行loading效果
- 8、完成标准项目模板开发
- 9、完成项目模板的缓存和下载功能
脚手架项目和组件初始化开发
init包将完成项目和组件的初始化过程，本周将完成init包的安装模板阶段。
课程安排：
- 1、掌握脚手架标准安装模式和自定义安装模式实现原理
- 2、掌握ejs模板的实现原理和开发方法
- 3、基于ejs模板完成项目模板动态化
- 4、完成标准组件模板开发
- 5、完成项目或组件项目标准安装流程开发
- 6、完成自定义项目模板初始化流程开发
- 7、ejs源码解析——彻底搞懂ejs模板编译和渲染原理
- 8、require源码解析——彻底搞懂Node.js模块加载原理
B端项目需求分析 和 架构设计
对于一个复杂前端项目，在编码之前，分析过程可谓是“磨刀不误砍柴工”，本周我们来给大家讲解怎样一步步抽丝剥茧，从需求到难点，再到系统整体设计。
课程安排：
- 1、整体需求分析初步 和 细化：编辑器需求分析
- 2、编辑器开发的难点分析 和 难点可能使用解决方案
- 3、整体架构设计
前端基础技术回顾和巡礼
在课程正式开始之前，扎实的基础知识是本课程的必备条件。这一周，让我们一起来温习 - typescript，vue3，ant-desing-vue 以及 webpack 和 rollup 的基础知识。
课程安排：
- 1、Typescript - 进入类型的世界
- 2、vue3 以及 新版全家桶 vuex，vue-router
- 3、ant-design-vue - 完美支持 vue3 的组件库
- 4、webpack 和 rollup - 现代打包工具双雄
项目整体搭建
万事开头难，本周我们使用技术储备中简介的知识，来搭建项目的大体结构和框架，包括 项目创建，代码结构，基础路由，基本布局和 基本的全局数据结构。
课程安排：
- 1、使用 imooc-cli 创建项目
- 2、规定代码规范和项目结构 ，安装编辑器辅助插件
- 3、使用 vue-router 添加基础路由结构
- 4、使用 ant-design-vue 搭建基础布局
- 5、使用 vuex 创建项目的基本数据结构
编辑器基本布局，及业务组件库初步开发
本周从编辑器开始开发，完成编辑器的基本布局，并且分析组件属性和修改组件属性的对应关系，创建业务组件库的第一个组件，并且完成最简单的编辑器交互，最后提出了业务组件实时实现编辑更新的解决方案。
课程安排：
- 1、创建编辑器的基本布局
- 2、分析画布组成元素的组件属性
- 3、创建第一个组件 LText
- 4、属性和编辑组件的实现方案
掌握测试基本工具，给组件库添加单元测试
本周从什么是测试入手，简介了测试的基本概念，介绍通用测试工具 Jest 和 Vue 测试框架 vue-test-utils，然后使用这两种工具完成LText组件的单元测试。
课程安排：
- 1、Jest 简介和基本用法
- 2、vue-test-utils 的基本用法
- 3、为 Ltext 添加测试用例
通用上传组件开发以及使用
本周主要从业务组件 LImage 入手，从易到难使用 TDD 开发一个复杂的通用上传组件，之后将组件用于左侧组件列表中，完成图片组件的功能。
课程安排：
- 1、为通用上传组件写需求。
- 2、从易到难渐进式使用 TDD 的混合方式开发一个复杂的上传组件。
- 3、将组件用于左侧组件列表用于创建 LImage 组件。
- 4、衍生出来的一系列扩展知识：比如 Vue3 组件的类型，Vue3 通信的几种方法，以及 Element Plus Upload 组件的源码分析等。
业务组件库打包、发布，添加 CI/CD
本周继续丰富业务组件库的功能，将组件库剥离成单独的代码库，使用 rollup 打包成多种 JS 模块形式，发布到 NPM，最后还使用 travis 完成了 CI/CD 流程。
课程安排：
- 1、创建单独的组件库代码库
- 2、添加剩余的业务组件
- 3、使用 rollup 打包生成多种 JS 模块
- 4、发布至 npm 和 使用 husky 完成发布前测试
- 5、使用 travis 完成组件库 CI/CD 功能
服务端技术选型：磨刀不误砍柴工
本周介绍做服务端必备的技能、框架、工具和服务，以及为何选择他们。 这些都是做服务端开发的基础知识，必须全部掌握，否则接下来开发会遇到很大障碍。
课程安排：
- 1、为何选择 koa2 框架，而不是 express egg nest.js
- 2、三大常用数据库 Mysql Mongodb Redis
- 3、使用 JWT 做登录验证，放弃 Session
- 4、用 jest 做单元测试和接口测试
- 5、pm2 和 nginx 能保证服务端高效稳定运行
服务端 CI/CD ：github自动化
CI/CD 是软件开发的必备流程，它可以实现自动发布到测试机，自动部署测试环境。本周我们使用 github actions 和 docker 这两大利器，从 0 实现 CI/CD 流程。
课程安排：
- 1、github actions 一颗的 CI/CD 新星
- 2、docker 让你一键拥有各种软件环境，如 Mysql
- 3、docker-compose 快速搭建测试环境
- 4、提交代码，自动发布到测试机
- 5、提交代码，自动触发单元测试
编辑器服务端基础 API 开发
本周正式开发业务开发。开发之前要做技术方案设计（接口设计，数据库设计），初始化项目环境和 CI/CD 流程。然后完成所有业务功能开发，同时进行单元测试和接口测试。
课程安排：
- 1、接口设计，捋一捋需要提供哪些 API
- 2、数据库设计，如何存储更加合理
- 3、初始化项目环境，连接数据库，跑通 CI/CD 流程
- 4、各个模块的代码介绍，不会一行一行带着写代码的
- 5、单元测试和接口测试，边开发边测试，才能保证稳定性
编辑器服务端调用第三方服务
真正线上项目才需要这些功能，还要花钱购买第三方服务，一般课程不常见到。这些功能很实用，很大众，学完即可照搬到实际项目中。
课程安排：
- 1、用短信验证码实现登录
- 2、内容安全检查，屏蔽所有黄色、血腥、政治敏感内容
- 3、上传图片到阿里云 OSS
编辑器组件图层面板功能开发
本周继续进行属性编辑面板的功能，完成属性的分组功能，完成图层面板的显示 隐藏 锁定 排序等功能。最后完成背景设置面板的功能，在这个过程中，学习一系列第三方库的使用。
课程安排：
- 1、使用 cropper.js 开发 image processer 组件
- 2、同属性分组并且开发 EditGroup 组件
- 3、开发图层面板 并且 使用 vue-draggable-next 完成排序功能
- 4、背景设置面板开发
让元素动起来 - 编辑器画布交互功能开发
本周是集中火力在编辑器交互功能上，完成元素的拖动定位，拖动改变大小，快捷键支持，重做，回滚，右键菜单等一系列功能的开发。
课程安排：
- 1、拖动定位功能开发
- 2、拖动改变大小功能开发
- 3、使用 hotkeys js 开发快捷键功能
- 4、实现 Undo Redo 功能
- 5、添加右键菜单功能
前后端结合 - 编辑器整合后端接口
本周开始接入后端开发，实现作品的预览，保存，自动保存，发布和渠道编辑等一系列功能。
课程安排：
- 1、预览功能开发
- 2、保存和自动保存功能
- 3、使用 html2canvas 生成截图并发布作品
- 4、使用 qrcodejs2 生成二维码并实现渠道编辑功能
整合开发B端其他页面的各种功能
完成了重头戏编辑器，这周来完成其他页面的分析和编码工作，从分析后端接口开始，完成一系列 Vue 应用的通用难点，包括鉴权，全局状态，业务开发 和 使用 Echarts 生成统计图表。
课程安排：
- 1、各页面功能分析
- 2、使用 Postman 分析 Restful 接口
- 3、登录页面和单页面应用鉴权的通用处理
- 4、全局状态（异步Loading，成功，失败）的通用处理
- 5、首页和我的作品页面开发
- 6、使用 echarts 生成统计图表
优化大型项目的各项性能问题
本周来到了大型项目必不可少的环节 - 性能优化。包括 vue 性能的常见优化方案，数据结构的优化以及 webpack 打包分析和优化实施方案的整个过程。
课程安排：
- 1、vue 应用性能优化的常见方案
- 2、全局状态数据结构的优化
- 3、webpack 打包分析和优化
基于Vue3 SSR渲染作品H5页。
编辑器可以创建、保存和发布作品，但发布后的作品如何查看？本周就来搞定。我们不仅要把 H5 页渲染出来，考虑 H5 前端的各项工作，还要打包、发布静态文件到 OSS 。
课程安排：
- 1、技术方案设计，如何才能渲染出页面
- 2、初始化项目，跑通 CI/CD 流程
- 3、Vue3 SSR 渲染页面，基于 lego-components 组件库
- 4、webpack 打包文件，发布到 OSS
- 5、h5 前端功能，如事件跳转、url 参数处理
- 6、h5 响应式，让页面适配所有手机屏幕
- 7、微信分享，前后端配合使用微信 jssdk
自研统计服务，使作品能实现分渠道统计
自定义事件统计，是一个线上产品必备的统计功能。目前市面上没有合适的第三方服务，干脆我们就自研一个。包括收集日志、分析日志、Open API 功能。
课程安排：
- 1、技术方案设计，看如何实现一个统计服务
- 2、nginx 服务收集统计日志
- 3、定时拆分日志文件，按天拆分
- 4、定时分析日志，离线计算统计结果，存入数据库
- 5、提供 Open API ，获取统计结果
- 6、定时清理过期日志文件，让硬盘无压力
后台管理：让所有数据都在我们的掌控之中
一个完善的线上产品，后台管理是必备的模块。我们可以查看网站内容数据，管理用户、作品和模板，推荐优质内容，屏蔽垃圾数据。
课程安排：
- 1、需求分析，到底需要查看和管理哪些数据？
- 2、技术方案设计，如何实现这些功能
- 3、umijs 脚手架，创建 React 前端项目，跑通 CI/CD
- 4、使用 React Hooks 开发前端页面
- 5、开发服务端接口，跑通 CI/CD
- 6、作业：写各个系统的单元测试和接口测试
发布到阿里云服务器，支持快速回滚
既然是真实的线上产品，就需要购买各种云服务，配置服务器和数据库，然后正式发布到线上环境，一旦遇到问题还要能快速回滚。
课程安排：
- 1、配置云服务器，安装必备软件
- 2、配置云数据库，创建账户，开通 IP 白名单
- 3、流程设计，基于 git tag 和 github actions 实现发布和回滚
- 4、nginx 配置和二级域名转发
- 5、线上日志拆分，nginx 日志和 pm2 日志
运维监控和报警
一个完善的线上产品，必须有完善的运维体系，才能保证稳定运行。包括服务器监控，报警，以及网络安全预防。
课程安排：
- 1、服务器监控，实时检测 CPU 内存 硬盘的健康状况
- 2、心跳检测，对接口自动定时“体检”
- 3、统一异常处理，出问题 catch 住，不崩溃
- 4、报警，有问题第一时间发送邮件和短信
- 5、万一出问题或内存泄露，自动重启服务
- 6、安全预防，防刷、防爬、防网络攻击
脚手架发布模块架构设计和核心流程开发
完成项目开发后，需要进行前端发布，脚手架的@imooc-cli/publish子项目将完成项目和组件的标准发布流程，本周将完成publish包的架构设计和核心流程开发
课程安排：
- 1、掌握项目/组件标准发布流程架构设计和流程图绘制
- 2、掌握自动化git流程架构设计和实现细节
- 3、掌握云构建实现原理和实现细节
- 4、掌握项目/组件发布原理和实现细节
- 5、完成public子项目创建和主流程开发
脚手架发布模块git自动化流程开发
本周将完成项目发布过程中的git flow流程开发，遵循标准的git flow流程，学会可快速改造和优化日常开发中的git处理流程，巩固git的各种使用技巧和方法。
课程安排：
- 1、掌握git操作方法和git flow流程
- 2、封装通用的git处理类Git
- 3、掌握git处理过程中的缓存结构设计
- 4、掌握git处理过程中的各种异常流程
- 5、完成Github & Gitee Open API接入
- 6、Git类准备阶段开发，完成各种git配置初始化
- 7、Git类初始化阶段开发，完成git仓库初始化、remote自动关联、强制合8、并远程代码等功能
- 9、Git类分支自动比对功能开发，完成代码冲突检查、stash区自动检查、10、自动同步master分支等功能
- 11、完成Git类代码自动提交功能开发
脚手架发布模块云构建系统开发
git flow流程完成后，我们将进入脚手架中最重要也是难度最高的一个环节，即云构建系统开发，本周我们通过egg.js+WebSocket+Redis最终实现完成云构建模块开发。
课程安排：
- 1、封装通用的云构建类CloudBuild
- 2、掌握WebSocket通信协议和开发方法
- 3、应用egg-socket.io插件快速接入WebSocket服务
- 4、掌握Redis缓存数据库的应用
- 5、应用egg-redis插件快速接入Redis服务
- 6、完成CloudBuild准备和预发布阶段开发，完成发布前配置和各类检查
- 7、掌握服务端CloudBuild处理流程和实现逻辑
- 8、服务端CloudBuildTask类封装，完成预处理、源码下载、云构建等流程开发
- 9、大作业：CloudBuild构建和依赖安装指令动态化功能设计和实现
脚手架发布模块云发布功能开发
脚手架云构建模块开发完成后，本周将继续完成项目的云发布流程开发。
课程安排：
- 1、掌握前端云发布逻辑实现
- 2、掌握oss入门使用方法
- 3、完成服务端oss API接入
- 4、掌握oss域名绑定+cdn接入
- 5、掌握项目预发布和正式发布流程
- 6、掌握项目回滚等异常流程处理
- 7、完成发布后自动打tag和开发分支删除功能
- 8、完成发布流程整体开发和联调
- 9、大作业：项目回滚+多版本发布功能架构设计和具体实现
脚手架组件发布功能开发
项目发布流程已经调通，本周将完成组件发布流程开发，组件发布流程和项目不同，主要差异在于：组件需要发布到npm和组件信息需要落库，所以需要不同的处理方式。
课程安排：
- 1、完成组件git flow流程开发
- 2、掌握组件构建和发布流程设计
- 3、掌握组件预览功能设计
- 4、完成组件构建和发布流程开发
- 5、完成组件预览功能开发
- 6、掌握RDS开通和使用方法
- 7、掌握egg.js+mysql的开发方法
- 8、完成组件相关API的开发方法
- 9、完成组件发布全流程联调
- 10、完成脚手架整体发布和上线
组件平台开发
本周将基于umi完成组件库前端部分创建，同时结合react hook开发组件库的前端页面，并将组件库发布上线。
课程安排：
- 1、掌握umi项目的开发方法
- 2、掌握react hook的开发方法
- 3、完成antd组件库集成
- 4、完成组件列表页开发
- 5、完成组件详情页开发
- 6、完成组件平台上线
项目单元测试用例设计和开发
讲解如何开发单元测试用例，并开发测试代码。
课程安排：
- 1、掌握脚手架单元测试库mocha
- 2、掌握测试用例设计技巧
- 3、完成脚手架单元测试用例设计
- 4、完成init库测试用例开发和调试
- 5、完成publish库测试用例开发和调试
大厂如何管理多人协作的研发项目
本周带领大家进入大厂文化 ，了解大厂如何做项目管理，多人协作的管理，以及团队人员的管理，课程内容复盘，未来技术的发展分析。
课程安排：
- 1、软件研发流程概述，先有一个整体的认识
- 2、敏感项目研发流程，以及常用工具
- 3、制定项目计划，包括范围 WBS，时间，质量，风险，沟通
- 4、计划监控，保证计划顺利执行
- 5、项目功能迭代和 bug 修复
- 6、多人协作、工作分配和跟踪
- 7、大厂绩效考核标准
- 8、大厂人员面试标准
- 9、大厂数值汇报方法和技巧
- 10、大厂标准的工作交流方式
- 11、整个课程内容复盘
- 12、未来的技术展望
- 加载中...