体系课-Web前端架构师

阶段一:课程设计及前端创建脚手架开发

第1周 需求分析和架构设计:做什么,如何做?

开工之前,先来看看我们到底要做一个什么项目,有哪些功能。然后站在上帝视角,从整体的架构层面,该如何设计该项目。

课程安排:

1、需求分析,到底要做一个什么产品

2、项目设计,多个项目之间的关系

3、数据模型设计,各项目之间的数据流转过程

4、后台管理需求,管理员要管控什么内容

5、统计需求,知道被访问了多少次

第2周 脚手架架构设计和框架搭建

万丈高楼平地起,讲解大厂级别的脚手架是如何设计的,从头开始绘制架构设计图,并完成脚手架的框架搭建。

课程安排:

1、掌握脚手架的实现原理

2、掌握脚手架管理工具Lerna和常用操作

3、基于Lerna构建脚手架项目

4、图解脚手架架构设计

5、脚手架工程体系设计

6、深入阅读Lerna源码,剖析require.resolve原理

第3周 脚手架核心流程开发

本周将完成脚手架内核@imooc-cli/core子项目设计,并开发脚手架的执行准备阶段和命令注册阶段。

课程安排:

1、脚手架核心子项目core包架构设计

2、掌握脚手架node运行版本限制

3、掌握脚手架root自动降级

4、掌握npmlog实现自定义脚手架日志

5、掌握脚手架用户主目录检查

6、掌握脚手架入参解析和环境变量配置

7、运用npm API实现脚手架自动更新

8、掌握脚手架命令注册原理

9、运用commander简化脚手架命令注册

10、node支持ES模块化标准的两种方法

第4周 脚手架命令注册和执行过程开发

本周将完成脚手架内核@imooc-cli/core子项目的执行命令阶段,我们将采用分离式架构设计、缓存结构设计大幅提升脚手架的下载速度和执行性能。

课程安排:

1、掌握脚手架执行命令原理

2、掌握高性能脚手架架构思路和具体方法

3、封装通用的npm包管理类Package

4、掌握API方式完成npm包下载和自动更新

5、掌握脚手架缓存结构设计

6、掌握Node多进程的四种实现方案

7、深度解析Node多进程child_process库源码

第5周 脚手架创建项目流程设计和开发

本周将开发脚手架创建项目的@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、完成项目模板的缓存和下载功能

第6周 脚手架项目和组件初始化开发

init包将完成项目和组件的初始化过程,本周将完成init包的安装模板阶段。

课程安排:

1、掌握脚手架标准安装模式和自定义安装模式实现原理

2、掌握ejs模板的实现原理和开发方法

3、基于ejs模板完成项目模板动态化

4、完成标准组件模板开发

5、完成项目或组件项目标准安装流程开发

6、完成自定义项目模板初始化流程开发

7、ejs源码解析——彻底搞懂ejs模板编译和渲染原理

8、require源码解析——彻底搞懂Node.js模块加载原理

阶段二:B端项目分析和设计,编辑器初步编码,业务组件库的搭建

第7周 B端项目需求分析 和 架构设计

对于一个复杂前端项目,在编码之前,分析过程可谓是“磨刀不误砍柴工”,本周我们来给大家讲解怎样一步步抽丝剥茧,从需求到难点,再到系统整体设计。

课程安排:

1、整体需求分析初步 和 细化:编辑器需求分析

2、编辑器开发的难点分析 和 难点可能使用解决方案

3、整体架构设计

第8周 前端基础技术回顾和巡礼

在课程正式开始之前,扎实的基础知识是本课程的必备条件。这一周,让我们一起来温习 – typescript,vue3,ant-desing-vue 以及 webpack 和 rollup 的基础知识。

课程安排:

1、Typescript – 进入类型的世界

2、vue3 以及 新版全家桶 vuex,vue-router

3、ant-design-vue – 完美支持 vue3 的组件库

4、webpack 和 rollup – 现代打包工具双雄

第9周 项目整体搭建

万事开头难,本周我们使用技术储备中简介的知识,来搭建项目的大体结构和框架,包括 项目创建,代码结构,基础路由,基本布局和 基本的全局数据结构。

课程安排:

1、使用 imooc-cli 创建项目

2、规定代码规范和项目结构 ,安装编辑器辅助插件

3、使用 vue-router 添加基础路由结构

4、使用 ant-design-vue 搭建基础布局

5、使用 vuex 创建项目的基本数据结构

第10周 编辑器基本布局,及业务组件库初步开发

本周从编辑器开始开发,完成编辑器的基本布局,并且分析组件属性和修改组件属性的对应关系,创建业务组件库的第一个组件,并且完成最简单的编辑器交互,最后提出了业务组件实时实现编辑更新的解决方案。

课程安排:

1、创建编辑器的基本布局

2、分析画布组成元素的组件属性

3、创建第一个组件 LText

4、属性和编辑组件的实现方案

第11周 掌握测试基本工具,给组件库添加单元测试

本周从什么是测试入手,简介了测试的基本概念,介绍通用测试工具 Jest 和 Vue 测试框架 vue-test-utils,然后使用这两种工具完成LText组件的单元测试。

课程安排:

1、Jest 简介和基本用法

2、vue-test-utils 的基本用法

3、为 Ltext 添加测试用例

第12周 通用上传组件开发以及使用

本周主要从业务组件 LImage 入手,从易到难使用 TDD 开发一个复杂的通用上传组件,之后将组件用于左侧组件列表中,完成图片组件的功能。

课程安排:

1、为通用上传组件写需求。

2、从易到难渐进式使用 TDD 的混合方式开发一个复杂的上传组件。

3、将组件用于左侧组件列表用于创建 LImage 组件。

4、衍生出来的一系列扩展知识:比如 Vue3 组件的类型,Vue3 通信的几种方法,以及 Element Plus Upload 组件的源码分析等。

第13周 业务组件库打包、发布,添加 CI/CD

本周继续丰富业务组件库的功能,将组件库剥离成单独的代码库,使用 rollup 打包成多种 JS 模块形式,发布到 NPM,最后还使用 travis 完成了 CI/CD 流程。

课程安排:

1、创建单独的组件库代码库

2、添加剩余的业务组件

3、使用 rollup 打包生成多种 JS 模块

4、发布至 npm 和 使用 husky 完成发布前测试

5、使用 travis 完成组件库 CI/CD 功能

阶段三:从 0 搭建编辑器服务端

第14周 服务端技术选型:磨刀不误砍柴工

本周介绍做服务端必备的技能、框架、工具和服务,以及为何选择他们。 这些都是做服务端开发的基础知识,必须全部掌握,否则接下来开发会遇到很大障碍。

课程安排:

1、为何选择 koa2 框架,而不是 express egg nest.js

2、三大常用数据库 Mysql Mongodb Redis

3、使用 JWT 做登录验证,放弃 Session

4、用 jest 做单元测试和接口测试

5、pm2 和 nginx 能保证服务端高效稳定运行

第15周 服务端 CI/CD :github自动化

CI/CD 是软件开发的必备流程,它可以实现自动发布到测试机,自动部署测试环境。本周我们使用 github actions 和 docker 这两大利器,从 0 实现 CI/CD 流程。

课程安排:

1、github actions 一颗的 CI/CD 新星

2、docker 让你一键拥有各种软件环境,如 Mysql

3、docker-compose 快速搭建测试环境

4、提交代码,自动发布到测试机

5、提交代码,自动触发单元测试

第16周 编辑器服务端基础 API 开发

本周正式开发业务开发。开发之前要做技术方案设计(接口设计,数据库设计),初始化项目环境和 CI/CD 流程。然后完成所有业务功能开发,同时进行单元测试和接口测试。

课程安排:

1、接口设计,捋一捋需要提供哪些 API

2、数据库设计,如何存储更加合理

3、初始化项目环境,连接数据库,跑通 CI/CD 流程

4、各个模块的代码介绍,不会一行一行带着写代码的

5、单元测试和接口测试,边开发边测试,才能保证稳定性

第17周 编辑器服务端调用第三方服务

真正线上项目才需要这些功能,还要花钱购买第三方服务,一般课程不常见到。这些功能很实用,很大众,学完即可照搬到实际项目中。

课程安排:

1、用短信验证码实现登录

2、内容安全检查,屏蔽所有黄色、血腥、政治敏感内容

3、上传图片到阿里云 OSS

阶段四:完善B端所有功能,前后端结合和性能优化

第18周 编辑器组件图层面板功能开发

本周继续进行属性编辑面板的功能,完成属性的分组功能,完成图层面板的显示 隐藏 锁定 排序等功能。最后完成背景设置面板的功能,在这个过程中,学习一系列第三方库的使用。

课程安排:

1、使用 cropper.js 开发 image processer 组件

2、同属性分组并且开发 EditGroup 组件

3、开发图层面板 并且 使用 vue-draggable-next 完成排序功能

4、背景设置面板开发

1、本站所有文档、视频、书籍等资料均由网友分享,本站只负责收集不承担任何技术及版权问题。
2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除下载链接并致以最深的歉意。
3、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
4、一经注册为本站会员,一律视为同意网站规定,本站管理员及版主有权禁止违规用户。
5、蚂蚁编程管理员有权不事先通知发贴者而删除本文。

课程网 » 体系课-Web前端架构师