如何“渐进”地使用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) → 后端服务
目录
相关文章
|
23天前
|
开发框架 前端开发 JavaScript
什么是渐进式框架
什么是渐进式框架
11 0
|
1月前
|
移动开发 前端开发 C#
MVVM风格架构
MVVM风格架构
28 2
|
8月前
|
前端开发
MVVM框架原理
MVVM框架(Model-View-ViewModel)是一种基于数据绑定的前端架构模式。它将视图逻辑与业务逻辑分离,提供了一种简单而清晰的方式来管理和组织代码。
216 0
|
10月前
|
前端开发 数据库
MVVM框架代码逻辑整合
MVVM框架代码逻辑整合
78 0
|
10月前
|
存储 SQL 前端开发
借一个项目谈Android应用软件架构,你还在套用MVP 或MVVM吗
借一个项目谈Android应用软件架构,你还在套用MVP 或MVVM吗
|
前端开发 JavaScript
MVVM模型
MVVM模型
43 0
|
XML 存储 ARouter
MVVM框架初探
MVVM框架初探
251 0
MVVM框架初探
|
ARouter Java API
组件化框架设计之手写组件化架构(五)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680本篇文章将通过手写组件化架构;路由框架原理与实现来阐述组件化框架设计 此次手写架构,解决的问题是: 1、让 App内 各个功能模块能够独立开发单元测试,也可以 所有模块集成打包,统一测试 独立开发更改gradle.properties的配置,使得每个功能模块都成为application, 可以独立打包成apk,单独运行。
|
图形学
如何理解Unity组件化开发模式
Unity的开发模式核心:节点和组件,组件可以加载到任何节点上,每个组件都有 gameobject 属性,可以通过这个属性获取到该节点,即游戏物体。 也就是说游戏物体由节点和组件构成,每个组件表示物体的一种特性(能力)。
2409 0
|
前端开发 Android开发 Windows