登录
登录 注册新账号
注册
已有账号登录
Web前端架构师
qiusuo 阅读 163 次
6月10日发布

Web前端架构师

超清原画 完整无密 网盘下载
点击下载:Web前端架构师
超大复杂项目+高端技术+大厂规范+全局架构思维
系统培养大厂P7技术专家/中小厂前端Leader
6~8个月,让3年+前端完成质的飞跃
章節目錄:
階段一:课程設計及前端創建脚手架開發
第1周 需求分析和架構設計:做什麼,如何做?
開工之前,先來看看我們到底要做一個什麼項目,有哪些功能。然後站在上帝視角,從整體的架構層面,該如何設計該項目。
课程安排:
1、需求分析,到底要做一個什麼產品
2、項目設計,多個項目之間的關係
3、數據模型設計,各項目之間的數據流轉過程
4、後台管理需求,管理員要管控什麼内容
5、統計需求,知道被訪問了多少次
第2周 脚手架架構設計和框架搭建
萬丈高樓平地起,講解大廠級別的脚手架是如何設計的,從頭開始绘製架構設計圖,並完成脚手架的框架搭建。
课程安排:
1、掌握脚手架的實現原理
2、掌握脚手架管理工具Lerna和常用操作
3、基於Lerna構建脚手架項目
4、圖解脚手架架構設計
5、脚手架工程體係設計a
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、背景設置面板開發
第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 ***渲染作品H5頁。
編輯器可以創建、保存和發佈作品,但發佈後的作品如何查看?本周就來搞定。我們不僅要把 H5 頁渲染出來,考慮 H5 前端的各項工作,還要打包、發佈静態文件到 OSS 。
课程安排:
1、技術方案設計,如何才能渲染出頁面
2、初始化項目,跑通 CI/CD 流程
3、Vue3 *** 渲染頁面,基於 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、未來的技術展望