【從開公司到開發(fā)全平臺(tái)產(chǎn)品】5.前端開發(fā)的思考、實(shí)踐-UPUPMO

  • 歡迎觀看《從開公司到開發(fā)全平臺(tái)產(chǎn)品》系列。
  • 希望通過(guò)該系列可以幫助新手，快速了解全棧軟件產(chǎn)品的一些思路、應(yīng)用。
  • 本期我們講解第五章：《前端開發(fā)的思考、實(shí)踐》
  • 我們將會(huì)從以下4個(gè)小節(jié)進(jìn)行探討：
1. 前端企業(yè)級(jí)架構(gòu)標(biāo)準(zhǔn)
2. 主流前端框架對(duì)比
3. 正在發(fā)展的云開發(fā)介紹
4. 我常用的前端框架介紹

1. 前端企業(yè)級(jí)架構(gòu)標(biāo)準(zhǔn)

  • 主要分為：框架標(biāo)準(zhǔn)，組件標(biāo)準(zhǔn)。
  • 其中建議預(yù)留開發(fā)者后門，比如代理配置、全局參數(shù)修改等，方便遇到問題的時(shí)候好調(diào)試

1.1 框架標(biāo)準(zhǔn)

支持主流 UI 庫(kù)，比如 Vue 類的需要支持 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è)試流程
開發(fā)者后門
百度統(tǒng)計(jì)等統(tǒng)計(jì)類插件
版本更新提示
包大小優(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ù)
表格組件
折疊面板
樹組件
分割線
滑塊
抽屜
選擇器
級(jí)聯(lián)選擇
日期組件
空狀態(tài)
標(biāo)簽

標(biāo)簽頁(yè)
警告提示、全局提示
富文本
遮罩層
加載中
骨架屏
省市區(qū)組件
對(duì)話框、提醒框
表單校驗(yàn)
用戶頭像上傳、剪切
地圖
音頻、視頻

2. 主流前端框架對(duì)比

[圖片上傳失敗...(image-81f9c3-1655207786669)]

前端這些年的發(fā)展很快，各種框架層出不窮，但是對(duì)我而言來(lái)講其實(shí)沒那么復(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 的感覺，它們不 care 產(chǎn)品，不 care 項(xiàng)目管理，他們只想寫他們爽的代碼。
這里我們也可以做個(gè)小調(diào)研，大家可以在彈幕中說(shuō)說(shuō)自己是屬于什么類型的開發(fā)者!
1 技術(shù)型開發(fā)者，2 產(chǎn)品型開發(fā)者，3 我全都要


回到框架的選擇，基于我前面理論，在國(guó)內(nèi)我們選擇什么框架其實(shí)沒那么復(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)不一樣，選你自己喜歡就行。
如果你沒辦法上大廠，那 Vue 比較傻瓜、簡(jiǎn)單，中小企業(yè)普遍用得較多，可以優(yōu)先學(xué)。
我比較認(rèn)可 Vue 的尤雨溪，認(rèn)為他是具備產(chǎn)品、技術(shù)多個(gè)思維的開發(fā)者。

3. 正在發(fā)展的云開發(fā)介紹（無(wú)服務(wù)器）

[圖片上傳失敗...(image-743bb1-1655207786669)]

國(guó)內(nèi)目前云開發(fā)最有名的就是：微信小程序云開發(fā)。因?yàn)樾〕绦虮旧斫缑?、業(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è)的大問題主要在于存儲(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ǔ)，那這種云開發(fā)方案是很方便的。但是如果要考慮微服務(wù)，大數(shù)據(jù)，智能推薦等大方向，那就很難辦，至少現(xiàn)在 Serverless 行業(yè)還沒結(jié)果。
對(duì)于我一直說(shuō)的用戶畫像、智能推薦它們不是大系統(tǒng)的專利，小系統(tǒng)也很需要，只是現(xiàn)階段成本對(duì)他們來(lái)講太貴了。

總結(jié)：Serverless 這類云開發(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?，F(xiàn)在 Vue3 我用 Element-Plus，
  • 主要是因?yàn)?Element-Plus 社區(qū)參與人員更多，細(xì)節(jié)更完善，并且不會(huì)跟 TailwindCSS 沖突，也方便我寫 PC Web 場(chǎng)景。

4.2 Vu3-SSR

[圖片上傳失敗...(image-27bc2c-1655207786669)]

  • PC Web 用 SSR 框架除了 SEO 需要，那些以閱讀為主的前端也可以用來(lái)提速加載速度
  • Vue 的 SSR 目前主推 Nuxt.js 沒得選，當(dāng)然它做得也不錯(cuò)

4.3 Chrome 擴(kuò)展開發(fā)

[圖片上傳失敗...(image-cb0c0f-1655207786669)]

  • Chrome 擴(kuò)展開發(fā)我們可以用原生 JS 開發(fā)
  • 也可以用 Vue 框架編譯，一般 Chrome 擴(kuò)展都不是很復(fù)雜，可以直接考慮用 Vue

4.4 Electron 桌面跨平臺(tái)開發(fā)

[圖片上傳失敗...(image-888a06-1655207786669)]

  • 考慮到桌面端類似于 PC Web 端，所以用 Electron-Vue 框架開發(fā)效率會(huì)更高。

4.5 Flutter 移動(dòng)端跨平臺(tái)開發(fā)

[圖片上傳失敗...(image-1c2ada-1655207786669)]

  • APP 能用原生開發(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 微信小程序開發(fā)

[圖片上傳失敗...(image-a7b1a4-1655207786669)]

  • 如果你是一次性的小程序項(xiàng)目，或只是簡(jiǎn)單展示項(xiàng)目可以考慮 uni-app、Taro 這類多端的框架。
  • 但是，如果你打算長(zhǎng)期維護(hù)，并且可能有復(fù)雜需求需要擴(kuò)展，我建議還是用原生的，不然很容易出現(xiàn)無(wú)力感。
  • 因?yàn)槿绻隳硞€(gè)需求用原生做不了，那就可以把責(zé)任推給騰訊。但是如果你用框架造成了原生可以支持，框架不支持，那有你老板可不是這么想。
  • 雖然 uni-app 支持混合開發(fā)，但是還是那句話，遇到問題責(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 開源生成器介紹

最后

  • 如果你心中有創(chuàng)意，想自己開發(fā)產(chǎn)品，可以微信聯(lián)系我。
  • 如果你覺得視頻、文章對(duì)你有幫助，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)。我們下期見。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容