- 歡迎觀看《從開(kāi)公司到開(kāi)發(fā)全平臺(tái)產(chǎn)品》系列冠蒋。
- 希望通過(guò)該系列可以幫助新手，快速了解全棧軟件產(chǎn)品的一些思路械馆、應(yīng)用。
- 本期我們講解第五章：《前端開(kāi)發(fā)的思考、實(shí)踐》
- 我們將會(huì)從以下4個(gè)小節(jié)進(jìn)行探討：
1. 前端企業(yè)級(jí)架構(gòu)標(biāo)準(zhǔn)
2. 主流前端框架對(duì)比
3. 正在發(fā)展的云開(kāi)發(fā)介紹
4. 我常用的前端框架介紹
- 本期文字版已發(fā)布到 GitHub低飒，歡迎觀看：
- https://github.com/cdk8s/cdk8s-team-style/blob/master/full-stack/5-frontend.md
1. 前端企業(yè)級(jí)架構(gòu)標(biāo)準(zhǔn)
- 主要分為：框架標(biāo)準(zhǔn)，組件標(biāo)準(zhǔn)懂盐。
- 其中建議預(yù)留開(kāi)發(fā)者后門(mén)褥赊，比如代理配置、全局參數(shù)修改等莉恼，方便遇到問(wèn)題的時(shí)候好調(diào)試
1.1 框架標(biāo)準(zhǔn)
支持主流 UI 庫(kù)拌喉，比如 Vue 類(lèi)的需要支持 TailwindCSS、Vant俐银、Element Plus 等
不同環(huán)境編譯尿背、打包
請(qǐng)求框架
請(qǐng)求攔截器
權(quán)限管理
路由統(tǒng)一管理
調(diào)試工具
性能分析工具
WebSocket
統(tǒng)一異常處理
請(qǐng)求參數(shù)校驗(yàn)
登錄、注冊(cè)捶惜、忘記密碼田藐、退出流程
全局變量
狀態(tài)管理
全局?jǐn)r截器（路由守衛(wèi)）
圖片懶加載
異常日志統(tǒng)一輸出方案
全局靜態(tài)資源
不同路由實(shí)現(xiàn)不同的布局結(jié)構(gòu)
路由統(tǒng)一配置
多屏分辨率兼容
埋點(diǎn)設(shè)計(jì)
生產(chǎn)部署流程，生產(chǎn)環(huán)境 HTTPS 測(cè)試
配置 CDN 流程
國(guó)際化吱七、多語(yǔ)言
微信登錄汽久、微信支付
基準(zhǔn)性能測(cè)試流程
開(kāi)發(fā)者后門(mén)
百度統(tǒng)計(jì)等統(tǒng)計(jì)類(lèi)插件
版本更新提示
包大小優(yōu)化
首屏優(yōu)化
加載速度優(yōu)化
工具包（字符串、日期踊餐、加解密回窘、JSON 等）
1.2 組件標(biāo)準(zhǔn)
- 組件標(biāo)準(zhǔn)中大部分組件都是 UI 框架中自帶了，少部分需要自己找第三方或者自己封裝
頁(yè)頭市袖、頁(yè)尾
導(dǎo)航菜單
賬號(hào)登錄啡直、注冊(cè)頁(yè)面
手機(jī)號(hào)登錄、發(fā)送短信
統(tǒng)一異常頁(yè)面
全局樣式修改
文件苍碟、圖片上傳組件
文件導(dǎo)出組件
圖表庫(kù)
分頁(yè)組件
輪播圖
卡片
單選框酒觅、多選框
頭像
徽標(biāo)數(shù)
表格組件
折疊面板
樹(shù)組件
分割線
滑塊
抽屜
選擇器
級(jí)聯(lián)選擇
日期組件
空狀態(tài)
標(biāo)簽
標(biāo)簽頁(yè)
警告提示、全局提示
富文本
遮罩層
加載中
骨架屏
省市區(qū)組件
對(duì)話框微峰、提醒框
表單校驗(yàn)
用戶頭像上傳舷丹、剪切
地圖
音頻、視頻
2. 主流前端框架對(duì)比
[圖片上傳失敗...(image-81f9c3-1655207786669)]
前端這些年的發(fā)展很快蜓肆，各種框架層出不窮颜凯，但是對(duì)我而言來(lái)講其實(shí)沒(méi)那么復(fù)雜谋币，
因?yàn)槲覍?duì)框架技術(shù)本身不感興趣，我只感興趣框架技術(shù)能做什么症概，能解決什么業(yè)務(wù)場(chǎng)景蕾额，能不能快速?gòu)?fù)制，我一直盯著的是框架的生態(tài)彼城。
基于這個(gè)理論诅蝶，排除法其實(shí)很好做。很多人在乎的框架快不快募壕、牛不牛调炬，我是不在乎.
當(dāng)然，這不等同于你不需要學(xué)習(xí)框架底層舱馅，或者不做壓測(cè)缰泡、不做優(yōu)化。
我如果學(xué)習(xí)某個(gè)框架底層代嗤、做壓測(cè)棘钞、做優(yōu)化，那只有一種目的资溃，我需要了解它武翎，我需要度量指標(biāo)烈炭，不然后續(xù)框架升級(jí)我無(wú)法知道是進(jìn)步了溶锭，還是退步了。
在我過(guò)去的工作中發(fā)現(xiàn)有些人跟我的思考方式是不太一樣符隙，他們喜歡探究 0 和 1 的感覺(jué)趴捅，它們不 care 產(chǎn)品，不 care 項(xiàng)目管理霹疫，他們只想寫(xiě)他們爽的代碼拱绑。
這里我們也可以做個(gè)小調(diào)研，大家可以在彈幕中說(shuō)說(shuō)自己是屬于什么類(lèi)型的開(kāi)發(fā)者!
1 技術(shù)型開(kāi)發(fā)者丽蝎，2 產(chǎn)品型開(kāi)發(fā)者猎拨，3 我全都要
回到框架的選擇，基于我前面理論屠阻，在國(guó)內(nèi)我們選擇什么框架其實(shí)沒(méi)那么復(fù)雜红省，就只有 React、Vue 兩種国觉。
Svelte 目前生態(tài)還不夠吧恃，優(yōu)點(diǎn)就是簡(jiǎn)單、輕麻诀、快痕寓。
Angular 是后端思維的前端傲醉，學(xué)習(xí)坡度較高，以 Google 主導(dǎo)生態(tài)呻率，國(guó)內(nèi)社區(qū)生態(tài)不夠硬毕。
React、Vue 在社區(qū)生態(tài)中都是比較完善筷凤，但是它們的編碼風(fēng)格還是有點(diǎn)不一樣昭殉，選你自己喜歡就行。
如果你沒(méi)辦法上大廠藐守，那 Vue 比較傻瓜挪丢、簡(jiǎn)單，中小企業(yè)普遍用得較多卢厂，可以優(yōu)先學(xué)乾蓬。
我比較認(rèn)可 Vue 的尤雨溪，認(rèn)為他是具備產(chǎn)品慎恒、技術(shù)多個(gè)思維的開(kāi)發(fā)者任内。
3. 正在發(fā)展的云開(kāi)發(fā)介紹（無(wú)服務(wù)器）
[圖片上傳失敗...(image-743bb1-1655207786669)]
國(guó)內(nèi)目前云開(kāi)發(fā)最有名的就是：微信小程序云開(kāi)發(fā)。因?yàn)樾〕绦虮旧斫缑嫒诩怼I(yè)務(wù)都是比較簡(jiǎn)單死嗦，確實(shí)挺合適的這種模式的。
市面上的 Serverless 主要產(chǎn)品命名都是帶有：Lambda 或 Function 的關(guān)鍵字粒氧，可以看出來(lái)特點(diǎn)都傾向于函數(shù)計(jì)算越除，或者它們叫做函數(shù)即服務(wù)。
它們本質(zhì)也是干解耦計(jì)算和存儲(chǔ)的事情外盯。雖然現(xiàn)在也有一些項(xiàng)目在做數(shù)據(jù)庫(kù)的 Serverless 比如 Neon摘盆，只是看起來(lái)還太早了。
目前行業(yè)的大問(wèn)題主要在于存儲(chǔ)饱苟，而不是計(jì)算孩擂。存儲(chǔ)場(chǎng)景不一樣，需要用到的數(shù)據(jù)庫(kù)不一樣箱熬。
目前存儲(chǔ)環(huán)境很割裂类垦，比如我常用的就有 MySQL、MongoDB城须、Redis蚤认、Elasticsearch、ClickHouse酿傍、Prometheus烙懦、Neo4j、Hadoop 等等。
存儲(chǔ)真的是后端最痛苦的地方氯析。
如果你后端要復(fù)雜起來(lái)亏较，那就需要考慮各種場(chǎng)景的安全引擎、規(guī)則引擎掩缓、報(bào)表引擎雪情、流程引擎、批處理引擎你辣、事件引擎巡通、搜索引擎等等
如果你只是使用傳統(tǒng)數(shù)據(jù)庫(kù)、文件存儲(chǔ)舍哄，那這種云開(kāi)發(fā)方案是很方便的宴凉。但是如果要考慮微服務(wù)，大數(shù)據(jù)表悬，智能推薦等大方向弥锄，那就很難辦，至少現(xiàn)在 Serverless 行業(yè)還沒(méi)結(jié)果蟆沫。
對(duì)于我一直說(shuō)的用戶畫(huà)像籽暇、智能推薦它們不是大系統(tǒng)的專(zhuān)利，小系統(tǒng)也很需要饭庞，只是現(xiàn)階段成本對(duì)他們來(lái)講太貴了戒悠。
總結(jié)：Serverless 這類(lèi)云開(kāi)發(fā)，它們現(xiàn)階段只保下限舟山，無(wú)法爭(zhēng)上限绸狐。并且每家各不兼容，如果對(duì)于數(shù)據(jù)安全捏顺、遷移成本等考慮的話六孵，目前還是需要慎重纬黎。
4. 我常用的前端框架介紹
4.1 Vue3-Admin
[圖片上傳失敗...(image-4c8aad-1655207786669)]
- Vue 的后臺(tái)管理模板幅骄，在 Vue2 的時(shí)候我用 Ant-Design-Vue。現(xiàn)在 Vue3 我用 Element-Plus本今，
- 主要是因?yàn)?Element-Plus 社區(qū)參與人員更多拆座，細(xì)節(jié)更完善，并且不會(huì)跟 TailwindCSS 沖突冠息，也方便我寫(xiě) PC Web 場(chǎng)景挪凑。
4.2 Vu3-SSR
[圖片上傳失敗...(image-27bc2c-1655207786669)]
- PC Web 用 SSR 框架除了 SEO 需要，那些以閱讀為主的前端也可以用來(lái)提速加載速度
- Vue 的 SSR 目前主推 Nuxt.js 沒(méi)得選逛艰，當(dāng)然它做得也不錯(cuò)
4.3 Chrome 擴(kuò)展開(kāi)發(fā)
[圖片上傳失敗...(image-cb0c0f-1655207786669)]
- Chrome 擴(kuò)展開(kāi)發(fā)我們可以用原生 JS 開(kāi)發(fā)
- 也可以用 Vue 框架編譯躏碳，一般 Chrome 擴(kuò)展都不是很復(fù)雜，可以直接考慮用 Vue
4.4 Electron 桌面跨平臺(tái)開(kāi)發(fā)
[圖片上傳失敗...(image-888a06-1655207786669)]
- 考慮到桌面端類(lèi)似于 PC Web 端散怖，所以用 Electron-Vue 框架開(kāi)發(fā)效率會(huì)更高菇绵。
4.5 Flutter 移動(dòng)端跨平臺(tái)開(kāi)發(fā)
[圖片上傳失敗...(image-1c2ada-1655207786669)]
- APP 能用原生開(kāi)發(fā)是最好的肄渗，F(xiàn)lutter 也只是一種折中，目前普通業(yè)務(wù)還是能支持的咬最。
- Flutter 在移動(dòng)端上已經(jīng)基本完善了翎嫡，并且 pub.dev 也有大量的包，生態(tài)也起來(lái)了永乌。
- React Native 每次升個(gè)級(jí)都讓自己很苦逼惑申，配置環(huán)境，調(diào)試啥的也真的難用翅雏，不推薦圈驼。
4.6 微信小程序開(kāi)發(fā)
[圖片上傳失敗...(image-a7b1a4-1655207786669)]
- 如果你是一次性的小程序項(xiàng)目，或只是簡(jiǎn)單展示項(xiàng)目可以考慮 uni-app望几、Taro 這類(lèi)多端的框架碗脊。
- 但是，如果你打算長(zhǎng)期維護(hù)橄妆，并且可能有復(fù)雜需求需要擴(kuò)展衙伶，我建議還是用原生的，不然很容易出現(xiàn)無(wú)力感害碾。
- 因?yàn)槿绻隳硞€(gè)需求用原生做不了矢劲，那就可以把責(zé)任推給騰訊。但是如果你用框架造成了原生可以支持慌随，框架不支持芬沉，那有你老板可不是這么想。
- 雖然 uni-app 支持混合開(kāi)發(fā)阁猜，但是還是那句話丸逸，遇到問(wèn)題責(zé)任算誰(shuí)的。
下期預(yù)告
- 下期我們將介紹《基于 YApi 的前后端對(duì)接實(shí)踐》剃袍，分別從以下 4 個(gè)方面進(jìn)行講解：
1. 前后端的對(duì)接標(biāo)準(zhǔn)
2. YApi 介紹
3. YApi 相關(guān)生成器場(chǎng)景介紹
4. 我的 YApi 開(kāi)源生成器介紹
最后
- 如果你心中有創(chuàng)意黄刚，想自己開(kāi)發(fā)產(chǎn)品，可以微信聯(lián)系我民效。
- 如果你覺(jué)得視頻憔维、文章對(duì)你有幫助，歡迎點(diǎn)贊畏邢、收藏业扒、轉(zhuǎn)發(fā)。我們下期見(jiàn)舒萎。
