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

简介: 如何“渐进”地使用MVVM框架 1. 现状 产品形态:美篇文章页 APP/H5/PC多端复用 文字/图片/音乐/视频多元内容 一篇文章多种模板 音乐/投票/赞赏等多种功能 产品特点1:16个独立组件 下载 文章元数据 正文 音乐 投票 赞赏 点赞 举报 分享 专栏入口 评论 推荐文章 二维码 商业.

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

1. 现状

产品形态:美篇文章页

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

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

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

产品特点2:100+ 模板

tpl

产品特点3:高并发

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

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

be

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

mvvm

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

5. 落地方案:结合,取长补短

  1. 文章元数据

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

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

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

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

核心流程图

6. 未来迭代方向

  • 拆分vendor.js,更好地利用浏览器缓存
  • 后端服务化,逐步拆分出业务接口,进一步解耦不同模块
  • 浏览器 → Node中间层(SSR) → 后端服务
目录
相关文章
|
3月前
|
设计模式 前端开发 JavaScript
深入探索研究MVVM架构设计
【10月更文挑战第7天】
49 0
|
7月前
|
JavaScript 前端开发 开发者
什么是渐进式框架
什么是渐进式框架
|
前端开发
MVVM框架原理
MVVM框架(Model-View-ViewModel)是一种基于数据绑定的前端架构模式。它将视图逻辑与业务逻辑分离,提供了一种简单而清晰的方式来管理和组织代码。
522 0
|
8月前
|
移动开发 前端开发 C#
MVVM风格架构
MVVM风格架构
84 2
|
存储 SQL 前端开发
借一个项目谈Android应用软件架构,你还在套用MVP 或MVVM吗
借一个项目谈Android应用软件架构,你还在套用MVP 或MVVM吗
|
SQL Cloud Native 数据可视化
模块化思想在实践中的应用
各种编程语言中的函数,数据仓库的标签体系,甚至于数据中台的核心理念,都是把模块化的思想发挥到了极致,避免了我们重复造轮子,消除了数据烟囱,用最小的投入获得了最大的产出。
模块化思想在实践中的应用
|
前端开发 JavaScript
MVVM模型
MVVM模型
64 0
|
XML 存储 ARouter
MVVM框架初探
MVVM框架初探
324 0
MVVM框架初探
|
前端开发 JavaScript Android开发
|
前端开发 JavaScript Android开发