【从开公司到开发全平台产品】5.前端开发的思考、实践-UPUPMO

• 欢迎观看《从开公司到开发全平台产品》系列。
• 希望通过该系列可以帮助新手，快速了解全栈软件产品的一些思路、应用。
• 本期我们讲解第五章：《前端开发的思考、实践》
• 我们将会从以下4个小节进行探讨：

1. 前端企业级架构标准
2. 主流前端框架对比
3. 正在发展的云开发介绍
4. 我常用的前端框架介绍

• 本期文字版已发布到 GitHub，欢迎观看：
• https://github.com/cdk8s/cdk8s-team-style/blob/master/full-stack/5-frontend.md

---

1. 前端企业级架构标准

• 主要分为：框架标准，组件标准。
• 其中建议预留开发者后门，比如代理配置、全局参数修改等，方便遇到问题的时候好调试

1.1 框架标准

支持主流 UI 库，比如 Vue 类的需要支持 TailwindCSS、Vant、Element Plus 等
不同环境编译、打包
请求框架
请求拦截器
权限管理
路由统一管理
调试工具
性能分析工具
WebSocket
统一异常处理
请求参数校验
登录、注册、忘记密码、退出流程
全局变量
状态管理
全局拦截器（路由守卫）
图片懒加载
异常日志统一输出方案
全局静态资源
不同路由实现不同的布局结构
路由统一配置
多屏分辨率兼容
埋点设计
生产部署流程，生产环境 HTTPS 测试
配置 CDN 流程
国际化、多语言
微信登录、微信支付
基准性能测试流程
开发者后门
百度统计等统计类插件
版本更新提示
包大小优化
首屏优化
加载速度优化
工具包（字符串、日期、加解密、JSON 等）

1.2 组件标准

• 组件标准中大部分组件都是 UI 框架中自带了，少部分需要自己找第三方或者自己封装

页头、页尾
导航菜单
账号登录、注册页面
手机号登录、发送短信
统一异常页面
全局样式修改
文件、图片上传组件
文件导出组件
图表库
分页组件
轮播图
卡片
单选框、多选框

头像
徽标数
表格组件
折叠面板
树组件
分割线
滑块
抽屉
选择器
级联选择
日期组件
空状态
标签

标签页
警告提示、全局提示
富文本
遮罩层
加载中
骨架屏
省市区组件
对话框、提醒框
表单校验
用户头像上传、剪切
地图
音频、视频

---

2. 主流前端框架对比

[图片上传失败...(image-81f9c3-1655207786669)]

前端这些年的发展很快，各种框架层出不穷，但是对我而言来讲其实没那么复杂，
因为我对框架技术本身不感兴趣，我只感兴趣框架技术能做什么，能解决什么业务场景，能不能快速复制，我一直盯着的是框架的生态。
基于这个理论，排除法其实很好做。很多人在乎的框架快不快、牛不牛，我是不在乎.

当然，这不等同于你不需要学习框架底层，或者不做压测、不做优化。
我如果学习某个框架底层、做压测、做优化，那只有一种目的，我需要了解它，我需要度量指标，不然后续框架升级我无法知道是进步了，还是退步了。
在我过去的工作中发现有些人跟我的思考方式是不太一样，他们喜欢探究 0 和 1 的感觉，它们不 care 产品，不 care 项目管理，他们只想写他们爽的代码。
这里我们也可以做个小调研，大家可以在弹幕中说说自己是属于什么类型的开发者!
1 技术型开发者，2 产品型开发者，3 我全都要


回到框架的选择，基于我前面理论，在国内我们选择什么框架其实没那么复杂，就只有 React、Vue 两种。

Svelte 目前生态还不够，优点就是简单、轻、快。
Angular 是后端思维的前端，学习坡度较高，以 Google 主导生态，国内社区生态不够。

React、Vue 在社区生态中都是比较完善，但是它们的编码风格还是有点不一样，选你自己喜欢就行。
如果你没办法上大厂，那 Vue 比较傻瓜、简单，中小企业普遍用得较多，可以优先学。
我比较认可 Vue 的尤雨溪，认为他是具备产品、技术多个思维的开发者。

---

3. 正在发展的云开发介绍（无服务器）

[图片上传失败...(image-743bb1-1655207786669)]

国内目前云开发最有名的就是：微信小程序云开发。因为小程序本身界面、业务都是比较简单，确实挺合适的这种模式的。

市面上的 Serverless 主要产品命名都是带有：Lambda 或 Function 的关键字，可以看出来特点都倾向于函数计算，或者它们叫做函数即服务。
它们本质也是干解耦计算和存储的事情。虽然现在也有一些项目在做数据库的 Serverless 比如 Neon，只是看起来还太早了。

目前行业的大问题主要在于存储，而不是计算。存储场景不一样，需要用到的数据库不一样。
目前存储环境很割裂，比如我常用的就有 MySQL、MongoDB、Redis、Elasticsearch、ClickHouse、Prometheus、Neo4j、Hadoop 等等。

存储真的是后端最痛苦的地方。
如果你后端要复杂起来，那就需要考虑各种场景的安全引擎、规则引擎、报表引擎、流程引擎、批处理引擎、事件引擎、搜索引擎等等

如果你只是使用传统数据库、文件存储，那这种云开发方案是很方便的。但是如果要考虑微服务，大数据，智能推荐等大方向，那就很难办，至少现在 Serverless 行业还没结果。
对于我一直说的用户画像、智能推荐它们不是大系统的专利，小系统也很需要，只是现阶段成本对他们来讲太贵了。

总结：Serverless 这类云开发，它们现阶段只保下限，无法争上限。并且每家各不兼容，如果对于数据安全、迁移成本等考虑的话，目前还是需要慎重。

---

4. 我常用的前端框架介绍

4.1 Vue3-Admin

[图片上传失败...(image-4c8aad-1655207786669)]

• Vue 的后台管理模板，在 Vue2 的时候我用 Ant-Design-Vue。现在 Vue3 我用 Element-Plus，
• 主要是因为 Element-Plus 社区参与人员更多，细节更完善，并且不会跟 TailwindCSS 冲突，也方便我写 PC Web 场景。

4.2 Vu3-SSR

[图片上传失败...(image-27bc2c-1655207786669)]

• PC Web 用 SSR 框架除了 SEO 需要，那些以阅读为主的前端也可以用来提速加载速度
• Vue 的 SSR 目前主推 Nuxt.js 没得选，当然它做得也不错

4.3 Chrome 扩展开发

[图片上传失败...(image-cb0c0f-1655207786669)]

• Chrome 扩展开发我们可以用原生 JS 开发
• 也可以用 Vue 框架编译，一般 Chrome 扩展都不是很复杂，可以直接考虑用 Vue

4.4 Electron 桌面跨平台开发

[图片上传失败...(image-888a06-1655207786669)]

• 考虑到桌面端类似于 PC Web 端，所以用 Electron-Vue 框架开发效率会更高。

4.5 Flutter 移动端跨平台开发

[图片上传失败...(image-1c2ada-1655207786669)]

• APP 能用原生开发是最好的，Flutter 也只是一种折中，目前普通业务还是能支持的。
• Flutter 在移动端上已经基本完善了，并且 pub.dev 也有大量的包，生态也起来了。
• React Native 每次升个级都让自己很苦逼，配置环境，调试啥的也真的难用，不推荐。

4.6 微信小程序开发

[图片上传失败...(image-a7b1a4-1655207786669)]

• 如果你是一次性的小程序项目，或只是简单展示项目可以考虑 uni-app、Taro 这类多端的框架。
• 但是，如果你打算长期维护，并且可能有复杂需求需要扩展，我建议还是用原生的，不然很容易出现无力感。
• 因为如果你某个需求用原生做不了，那就可以把责任推给腾讯。但是如果你用框架造成了原生可以支持，框架不支持，那有你老板可不是这么想。
• 虽然 uni-app 支持混合开发，但是还是那句话，遇到问题责任算谁的。

---

下期预告

• 下期我们将介绍《基于 YApi 的前后端对接实践》，分别从以下 4 个方面进行讲解：

1. 前后端的对接标准
2. YApi 介绍
3. YApi 相关生成器场景介绍
4. 我的 YApi 开源生成器介绍

最后

• 如果你心中有创意，想自己开发产品，可以微信联系我。
• 如果你觉得视频、文章对你有帮助，欢迎点赞、收藏、转发。我们下期见。