如何“渐进”地使用MVVM框架

如何“渐进”地使用MVVM框架

1. 现状

产品形态：美篇文章页

• APP/H5/PC多端复用
• 文字/图片/音乐/视频多元内容
• 一篇文章多种模板
• 音乐/投票/赞赏等多种功能

产品特点1：16个独立组件

• 下载
• 文章元数据
• 正文
• 音乐
• 投票
• 赞赏
• 点赞
• 举报
• 分享
• 专栏入口
• 评论
• 推荐文章
• 二维码
• 商业广告
• 红包
• 微信配置

产品特点2：100+ 模板

产品特点3：高并发

• 23,083,724 pv/天
• 1.38亿 MUV

2. 目前采用的架构：后端渲染

3. 业界常用优化思路：MVVM 框架

4. 上述两种方式的优缺点

5. 落地方案：结合，取长补短

1. 文章元数据

   • 标题
   • 作者
   • 时间
   • 封面图
   • 阅读量
2. 文章正文

上述两种类型的数据使用后端渲染

• 下载
• 音乐
• 投票
• 赞赏
• 点赞
• 举报
• 分享
• 专栏入口
• 评论
• 推荐文章
• 二维码
• 商业广告
• 红包
• 微信配置

剩余类型的数据可以充分发挥MVVM框架的特点，抽象成组件，便于维护

核心流程图

6. 未来迭代方向

• 拆分vendor.js，更好地利用浏览器缓存
• 后端服务化，逐步拆分出业务接口，进一步解耦不同模块
• 浏览器 → Node中间层（SSR） → 后端服务