Web前端架构师

课程门数 35
学习人数 1069
好评度 100%
查看评价

资深BAT前端架构师联袂出品,突破技术瓶颈,挑战前端P7。

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

本阶段我们将深入讲解脚手架的实现原理和开发流程,并带同学们一起开发大厂级别imooc-cli脚手架,完成项目创建和组件创建的两种功能。通过这阶段的学习大家将深入了解脚手架的实现原理,获得大量脚手架开发过程中的最佳实践。

第1周

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

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

第2周

脚手架架构设计和框架搭建

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

第3周

脚手架核心流程开发

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

第4周

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

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

第5周

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

本周将开发脚手架创建项目的@imooc-cli/init子项目,完成init包的准备阶段和下载模板阶段开发。

第6周

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

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

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

本阶段按照大厂标准流程完成开发,从最开始的项目需求分析,技术文档撰写,到基础知识的串讲和深入,到编辑器的第一部分的编码,最后到业务组件库的编码,打包以及发布,站在架构师的视角,完成一个完整的研发过程。

第7周

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

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

第8周

前端基础技术回顾和巡礼

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

第9周

项目整体搭建

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

第10周

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

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

第11周

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

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

第12周

通用上传组件开发以及使用

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

第13周

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

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

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

本阶段主要有两大任务:第一,搭建开发环境;第二,开发 B 端和编辑器的 server 端。包括:技术选型,搭建 CI/CD 流程,设计和开发基本的 API ,对接需要的第三方云服务器。

第14周

后端技术选型以及基础知识巩固

在项目开始之前,我们需要根据需求分析完成技术选型,以及基础的夯实。本周深入浅出的介绍了后端框架以及数据库从选型,基础再到深入,最后得出最佳实践的过程。

第15周

用户系统设计与实现

正式开始项目,本周我们从实现三种用户登录的实现方式入手,在学习的过程中,引出并学习 Redis,鉴权,Cookie-Session 以及 JWT 和 Oauth2 前后端分离开发的实现方式。

第16周

文件上传(本地 + OSS 云服务)

继续深入项目,这周着重三大块内容,Stream 的学习,HTTP 中文件处理(本地以及云服务),SSR 实现 H5 作品展示,最后使用 Casl 完成 RBAC 用户权限控制。

第17周

部署 以及 CI/CD

项目开发结束,进入部署环境,从传统的部署到 Docker 容器化部署,Nginx 转发配置,以及使用 Github Actions 完成 CI/CD 自动部署。

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

本阶段通过一系列自定义组件和第三方库的使用,完成编辑器的交互,之后引入后端接口完成前后端的整体功能。最后对项目进行必不可少的深度性能优化。真正掌握前端复杂项目的编码和抽象能力,进一步丰富自己的前端架构能力。

第18周

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

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

第19周

让元素动起来 - 编辑器画布交互功能开发

本周是集中火力在编辑器交互功能上,完成元素的拖动定位,拖动改变大小,快捷键支持,重做,回滚,右键菜单等一系列功能的开发。

第20周

前后端结合 - 编辑器整合后端接口

本周开始接入后端开发,实现作品的预览,保存,自动保存,发布和渠道编辑等一系列功能。

第21周

整合开发 B 端其他页面的各种功能

这周来完成其他页面的分析和编码工作,在这个过程中我们最重要的是掌握几个重要的第三方库以的用法及它们的原理,以及通过一个比较复杂的钩子函数加强 vue3 composition API 的应用。

第22周

大型项目的编译,部署以及性能优化

这一周我们来完成一个大型项目开发完毕以后的过程,那就是将在本地运行的项目编译成符合线上要求的版本,将它部署上线,并且尽可能的完成性能优化。

阶段五:完善服务端,发布上线

本阶段有两个任务。第一,开发除了 B 端和编辑器服务端之外的其他服务端项目,例如 H5 端,统计服务,后台管理;第二,将服务端发布上线,然后进行线上运维监控。经过这个阶段,服务端就可以在线上稳定安全的运行了。

第23周

脚手架功能升级-上手大厂开发模式

本周讲解如何通过脚手架+页面模板实现代码的快速复用。

第24周

脚手架功能升级-代码复用能力开发

讲解如何通过脚手架+代码片段实现更复杂的代码复用功能。

第25周

前端监控平台之JS 库开发

本周讲解如何通过JS库开发实现前端监控埋点处理

第26周

前端监控平台之大数据开发

本周讲解监控埋点的存储方法,如何通过大数据获得埋点数据,并进行数据可视化展示。

第27周

前端监控平台之数据可视化开发

本周讲解监控平台常见流量指标和统计方法,完整实现埋点数据可视化流程。

阶段六:前端发布脚手架开发

本阶段完成脚手架的发布模块,包括 git flow 自动化、基于 WebSocket 开发的云构建模块、基于阿里云 OSS+CDN 开发的自动化发布服务、前端组件平台等等。大家将真正达到 P7 级别的架构能力和开发能力。

第28周

脚手架发布模块架构设计和核心流程开发

完成项目开发后,需要进行前端发布,脚手架的@imooc-cli/publish子项目将完成项目和组件的标准发布流程,本周将完成publish包的架构设计和核心流程开发

第29周

脚手架发布模块git自动化流程开发

本周将完成项目发布过程中的 git flow 流程开发,遵循标准的 git flow 流程,学会可快速改造和优化日常开发中的 git 处理流程,巩固 git 的各种使用技巧和方法。

第30周

脚手架发布模块云构建系统开发

git flow流程完成后,我们将进入脚手架中最重要也是难度最高的一个环节,即云构建系统开发,本周我们通过egg.js+WebSocket+Redis最终实现完成云构建模块开发。

第31周

脚手架发布模块云发布功能开发

脚手架云构建模块开发完成后,本周将继续完成项目的云发布流程开发。

第32周

脚手架组件发布功能开发

项目发布流程已经调通,本周将完成组件发布流程开发,组件发布流程和项目不同,主要差异在于:组件需要发布到npm和组件信息需要落库,所以需要不同的处理方式。

第33周

组件平台开发

本周将基于umi完成组件库前端部分创建,同时结合react hook开发组件库的前端页面,并将组件库发布上线。

第34周

项目单元测试用例设计和开发

讲解如何开发单元测试用例,并开发测试代码。

阶段七:架构师领导力培养

本阶段主要介绍架构师必备的一些软技能,包括项目管理,研发流程规范,多人协作开发,团队管理,有效沟通等。让学员在开发、架构技术增长的同时,也有相应的软技能匹配,增强整体竞争力,达到企业对架构师要求的各方面能力。

第35周

大厂如何管理多人协作的研发项目

本周带领大家进入大厂文化 ,了解大厂如何做项目管理,多人协作的管理,以及团队人员的管理,课程内容复盘,未来技术的发展分析。

学习进度 -

完成赢大礼

学习进度达到80%,赢慕课助学礼包

购买课程后可更新学习进度

教学服务剩余 - 天

到期可续费

购买课程后可享受教学服务

什么是教学服务?

课表计划

制定学习专属课表 查看课表

自定义学习课表,提升你的学习效率

购买课程后可制定专属课表

特惠价 ¥3299.00

支持花呗 7天可退款 ¥6680

立即购买
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师