dmz社区

 找回密码
 立即注册
查看: 13483|回复: 458

[@] Web前端架构师(更新至16周)

  [复制链接]
  • TA的每日心情
    慵懒
    2021-4-22 03:52
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    17

    主题

    24

    帖子

    102

    积分

    荣誉会员

    积分
    102

    发表于 2021-4-20 03:38:16 | 显示全部楼层 |阅读模式
    程序人生
    课程方向: 网页前端 
    课程类型: 架构师/高级工程师 

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    1.png
    第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模块加载原理

    第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 功能

    第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

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

    课程安排:
    1、使用 cropper.js 开发 image processer 组件
    2、同属性分组并且开发 EditGroup 组件
    3、开发图层面板 并且 使用 vue-draggable-next 完成排序功能
    4、背景设置面板开发

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

    课程安排:
    1、拖动定位功能开发
    2、拖动改变大小功能开发
    3、使用 hotkeys js 开发快捷键功能
    4、实现 Undo Redo 功能
    5、添加右键菜单功能

    第20周:
    前后端结合 - 编辑器整合后端接口
    本周开始接入后端开发,实现作品的预览,保存,自动保存,发布和渠道编辑等一系列功能。

    课程安排:
    1、预览功能开发
    2、保存和自动保存功能
    3、使用 html2canvas 生成截图并发布作品
    4、使用 qrcodejs2 生成二维码并实现渠道编辑功能

    第21周:
    整合开发B端其他页面的各种功能
    完成了重头戏编辑器,这周来完成其他页面的分析和编码工作,从分析后端接口开始,完成一系列 Vue 应用的通用难点,包括鉴权,全局状态,业务开发 和 使用 Echarts 生成统计图表。

    课程安排:
    1、各页面功能分析
    2、使用 Postman 分析 Restful 接口
    3、登录页面和单页面应用鉴权的通用处理
    4、全局状态(异步Loading,成功,失败)的通用处理
    5、首页和我的作品页面开发
    6、使用 echarts 生成统计图表

    第22周:
    优化大型项目的各项性能问题
    本周来到了大型项目必不可少的环节 - 性能优化。包括 vue 性能的常见优化方案,数据结构的优化以及 webpack 打包分析和优化实施方案的整个过程。

    课程安排:
    1、vue 应用性能优化的常见方案
    2、全局状态数据结构的优化
    3、webpack 打包分析和优化

    第23周:
    基于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

    第24周:
    自研统计服务,使作品能实现分渠道统计
    自定义事件统计,是一个线上产品必备的统计功能。目前市面上没有合适的第三方服务,干脆我们就自研一个。包括收集日志、分析日志、Open API 功能。

    课程安排:
    1、技术方案设计,看如何实现一个统计服务
    2、nginx 服务收集统计日志
    3、定时拆分日志文件,按天拆分
    4、定时分析日志,离线计算统计结果,存入数据库
    5、提供 Open API ,获取统计结果
    6、定时清理过期日志文件,让硬盘无压力

    第25周:
    后台管理:让所有数据都在我们的掌控之中
    一个完善的线上产品,后台管理是必备的模块。我们可以查看网站内容数据,管理用户、作品和模板,推荐优质内容,屏蔽垃圾数据。

    课程安排:
    1、需求分析,到底需要查看和管理哪些数据?
    2、技术方案设计,如何实现这些功能
    3、umijs 脚手架,创建 React 前端项目,跑通 CI/CD
    4、使用 React Hooks 开发前端页面
    5、开发服务端接口,跑通 CI/CD
    6、作业:写各个系统的单元测试和接口测试

    第26周:
    发布到阿里云服务器,支持快速回滚
    既然是真实的线上产品,就需要购买各种云服务,配置服务器和数据库,然后正式发布到线上环境,一旦遇到问题还要能快速回滚。

    课程安排:
    1、配置云服务器,安装必备软件
    2、配置云数据库,创建账户,开通 IP 白名单
    3、流程设计,基于 git tag 和 github actions 实现发布和回滚
    4、nginx 配置和二级域名转发
    5、线上日志拆分,nginx 日志和 pm2 日志

    第27周:
    运维监控和报警
    一个完善的线上产品,必须有完善的运维体系,才能保证稳定运行。包括服务器监控,报警,以及网络安全预防。

    课程安排:
    1、服务器监控,实时检测 CPU 内存 硬盘的健康状况
    2、心跳检测,对接口自动定时“体检”
    3、统一异常处理,出问题 catch 住,不崩溃
    4、报警,有问题第一时间发送邮件和短信
    5、万一出问题或内存泄露,自动重启服务
    6、安全预防,防刷、防爬、防网络攻击

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

    课程安排:
    1、掌握项目/组件标准发布流程架构设计和流程图绘制
    2、掌握自动化git流程架构设计和实现细节
    3、掌握云构建实现原理和实现细节
    4、掌握项目/组件发布原理和实现细节
    5、完成public子项目创建和主流程开发

    第29周:
    脚手架发布模块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类代码自动提交功能开发

    第30周:
    脚手架发布模块云构建系统开发
    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构建和依赖安装指令动态化功能设计和实现

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

    课程安排:
    1、掌握前端云发布逻辑实现
    2、掌握oss入门使用方法
    3、完成服务端oss API接入
    4、掌握oss域名绑定+cdn接入
    5、掌握项目预发布和正式发布流程
    6、掌握项目回滚等异常流程处理
    7、完成发布后自动打tag和开发分支删除功能
    8、完成发布流程整体开发和联调
    9、大作业:项目回滚+多版本发布功能架构设计和具体实现

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

    课程安排:
    1、完成组件git flow流程开发
    2、掌握组件构建和发布流程设计
    3、掌握组件预览功能设计
    4、完成组件构建和发布流程开发
    5、完成组件预览功能开发
    6、掌握RDS开通和使用方法
    7、掌握egg.js+mysql的开发方法
    8、完成组件相关API的开发方法
    9、完成组件发布全流程联调
    10、完成脚手架整体发布和上线

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

    课程安排:
    1、掌握umi项目的开发方法
    2、掌握react hook的开发方法
    3、完成antd组件库集成
    4、完成组件列表页开发
    5、完成组件详情页开发
    6、完成组件平台上线

    第34周:
    项目单元测试用例设计和开发
    讲解如何开发单元测试用例,并开发测试代码。

    课程安排:
    1、掌握脚手架单元测试库mocha
    2、掌握测试用例设计技巧
    3、完成脚手架单元测试用例设计
    4、完成init库测试用例开发和调试
    5、完成publish库测试用例开发和调试

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

    课程安排:
    1、软件研发流程概述,先有一个整体的认识
    2、敏感项目研发流程,以及常用工具
    3、制定项目计划,包括范围 WBS,时间,质量,风险,沟通
    4、计划监控,保证计划顺利执行
    5、项目功能迭代和 bug 修复
    6、多人协作、工作分配和跟踪
    7、大厂绩效考核标准
    8、大厂人员面试标准
    9、大厂数值汇报方法和技巧
    10、大厂标准的工作交流方式
    11、整个课程内容复盘
    12、未来的技术展望

    下载地址:
    游客,如果您要查看本帖隐藏内容请回复
    温馨提示:
    1、本站所有内容均为互联网收集或网友分享或网络购买,本站不破解、不翻录任何视频!
    2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意!
    3、本站资源仅供本站会员学习参考,不得传播及用于其他用途,学习完后请在24小时内自行删除.
    4、本站资源质量虽均经精心审查,但也难保万无一失,若发现资源有问题影响学习请一定及时点此进行问题反馈,我们会第一时间改正!
    5、若发现链接失效了请联系管理员,管理员会在2小时内修复
    6、如果有任何疑问,请加客服QQ:1300822626 2小时内回复你!
    回复

    使用道具 举报

  • TA的每日心情
    难过
    2021-6-6 03:26
  • 签到天数: 43 天

    [LV.5]常住居民I

    3

    主题

    159

    帖子

    410

    积分

    豁然贯通

    Rank: 4

    积分
    410

    发表于 2021-4-20 04:30:26 | 显示全部楼层
    Web前端架构师
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2021-11-29 21:27
  • 签到天数: 544 天

    [LV.9]以坛为家II

    4

    主题

    1423

    帖子

    3860

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3860

    发表于 2021-4-20 07:36:36 来自手机 | 显示全部楼层
    111111111111111111111111
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    15 小时前
  • 签到天数: 302 天

    [LV.8]以坛为家I

    48

    主题

    800

    帖子

    4060

    积分

    傲视群雄

    Rank: 8Rank: 8

    积分
    4060

    发表于 2021-4-20 07:49:20 | 显示全部楼层
    666666666666666666666666666.
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    昨天 17:19
  • 签到天数: 377 天

    [LV.9]以坛为家II

    1

    主题

    700

    帖子

    2498

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    2498

    发表于 2021-4-20 07:58:02 | 显示全部楼层
    4444444444444444444444444444444444444444
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    难过
    3 小时前
  • 签到天数: 153 天

    [LV.7]常住居民III

    0

    主题

    221

    帖子

    754

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    754

    发表于 2021-4-20 08:05:50 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    难过
    5 小时前
  • 签到天数: 658 天

    [LV.9]以坛为家II

    0

    主题

    801

    帖子

    3030

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3030

    发表于 2021-4-20 08:58:40 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    6 小时前
  • 签到天数: 361 天

    [LV.8]以坛为家I

    1

    主题

    539

    帖子

    1852

    积分

    一代宗师

    Rank: 7Rank: 7Rank: 7

    积分
    1852

    发表于 2021-4-20 08:59:47 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    4 小时前
  • 签到天数: 234 天

    [LV.7]常住居民III

    1

    主题

    316

    帖子

    1106

    积分

    技冠群雄

    Rank: 6Rank: 6

    积分
    1106

    发表于 2021-4-20 09:27:30 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    昨天 16:51
  • 签到天数: 176 天

    [LV.7]常住居民III

    0

    主题

    317

    帖子

    1010

    积分

    技冠群雄

    Rank: 6Rank: 6

    积分
    1010

    发表于 2021-4-20 09:30:29 | 显示全部楼层
    Web前端架构师
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2021-12-8 15:24 , Processed in 0.089359 second(s), 51 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表