前端系统设计

获取详细信息

userAgent

前端系统将会被用到哪里?电脑、手机、平板?如果大部分用户的browser版本老旧,例如IE11,对开发产生什么样的影响?

user & scale

用户群体是什么样的?年龄?性别?需求?将来有无大幅扩大规模的可能性?mvp的上线最重要的是抓住主要需求,以QQ的MVP举例: 如果用户有很多特殊群体,也需要考虑产品的Accessbility(a11y)

i18n

如果用户分布在相当广的情况下,考虑使用CDN来分发静态资源,加快访问速度。

MVP需求分析

功能性需求

以朋友圈为例,发布一条朋友圈,好友点赞,按照时间顺序浏览朋友圈等等,这些都是功能性需求。

非功能性需求

非功能性需求更多集中在用户不可见的部分。例如:响应式、无网络状态下的访问、是否实时推送等等。

组件功能设计

设计一些小的compenents时候,需要考虑到一些功能,例如,删除操作、拒绝等不可逆操作需要二次弹窗确认,

状态管理

使用pinia、redux或是props在组件当中通信。

接口设计

对于发明机会数据类型,endpoint地址,要和后端有详细的约定

网络请求

实现类似chatGPT的流式输出,使用fetchEventSource这一个微软提供的库,基于SSE

性能

提升前端性能核心指标:LCP, CLS, FID等

  1. 打包工具
  2. 异步请求
  3. 使用支持treeshaking的库、手写方法
  4. CDN、懒加载
  5. 图片按照大小base64或者异步加载
  6. 合并小数据量接口
  7. 骨架屏、loading

A11y

使用更加语义化的HTML标签,例如:使用button而非div、使用img的alt属性

reference: medhat.dev/blog/cracki... open.alipay.com/portal/foru...

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax