Web前端架构师

Web前端架构师

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