跨平台与 Web 开发

第112篇

极客时间《许式伟的架构课》课程笔记。

跨平台桌面程序开发

会导致桌面开发产生巨大差异性的两个关键因素

1、操作系统

• 不同的操作系统抽象的界面程序框架并不一致，不一致必然导致开发工作量的增加
• 放弃某个操作系统，就意味着放弃某个流量入口，也就意味着放弃这些用户

2、屏幕尺寸

• 相同操作系统在不同尺寸屏幕上的交互范式也会存在很大差异性

操作系统
PC 本地：Windows，macOS，Linux 等等；
PC Web：Chrome，Safari，FireFox 等等；
Mobile 本地：Android，iOS 等等；
Mobile Web：小程序，PWA 等等

屏幕尺寸
大屏：PC、笔记本，Pad 等等；
中屏：手机；
小屏：手表。

跨平台解决方案

跨平台解决方案

Web开发

B/S 架构的复杂性

• 多用户：用户数据不再保存在client（Browser）端，而是存在server端
• 更高的数据可靠性要求：数据在server端之后，数据的可靠性由软件厂商负责
• 更多可能的分工安排：web应用两大流派，胖前端和胖后端

客户端和服务端

• 客户端也就是浏览器端，浏览器界面框架没有窗口系统，通过HTML+CSS描述界面
• HTML+CSS可以理解为viewmodel层，因为 HTML DOM 从数据角度完整描述了界面的样子， View 层已经被浏览器自己实现了
• MVC框架在浏览器下变成了MVMP模式，全称为 “Model-ViewModel-Presenter”
• 事件响应过程：浏览器的 View 收到交互事件，事件委托（delegate）给 ViewModel 层，并且通过 HTML DOM 暴露出来。通过修改 HTML 元素的事件响应属性，一般名字叫 onXXX（比如 onclick），可以获得事件的响应机会
• Model 层的数据变化（DataChanged）事件：在标准的 MVC 模式中，Model 层的数据变化是通知到 View 层，但在浏览器下 DataChanged 事件由 Presenter 层更新界面（Update View），操作的是 ViewModel

MVMP模式

• Server 端最底层的是一个多租户的 Model 层（Multi-User Model），它实现自动化（Automation）所需的 API
• Multi-User Model 层之上是 Web 层。Web 层基于会话（Session-based），因为它负责用户的接入，每个用户登录后，会形成一个个会话（Session）
• Web 层又分为 Model 层和 ViewModel 层。 也叫Session-based Model和 Session-based ViewModel
• 在服务端，Session-based Model 和 Session-based ViewModel 并不发生直接关联，它们通过自己网络遥控浏览器这一侧的 Model 和 ViewModel，从而响应用户的交互
• Session-based Model 是 Multi-User Model 层的转译。把多租户的 API 转译成单租户的场景
• Session-based ViewModel 是一些 HTML+JavaScript+CSS 文件，是真正的 Web 业务入口

Server端架构