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 修復
六、多人協做、工做分配和跟蹤
七、大廠績效考覈規範
八、大廠人員面試規範
九、大廠數值彙報辦法和技巧
十、大廠規範的工做交流方式
十一、整個課程內容覆盤
十二、未來的技術瞻望