【深入解析】跨端框架的核心技术到底是什么？

本文是我在学习多个平台 UI 框架后的一些感触，受精力和技术水平所限，文中定有不足之处，请各位大佬多多指教

如果你觉得我的文章对你有帮助，在收藏的过程中，一定要记得点赞和点在看哦，谢谢你，这对我真的很重要🌟！

一、前端三板斧

正式讨论「跨端开发」这个概念前，我们可以先思考一个问题：对大部分前端工作来说，前端主要干些啥？

我个人认为，无论环境怎么变，前端基本上就是做三件事情：

• fetch data（数据获取）
• manage state（状态管理）
• render page（页面渲染）

没了。

也许有人觉得我说的太片面，其实我们可以理一理。往近了说，现在知识付费搞的如火如荼，动不动就搞个「XXX 源码解析」，分析一下这些课程的主题和目录，你就会发现基本都是围绕着这三个方向展开讲的；往远了说，我们可以分析一下 Web 前端的发展历程：

• 1995 年左右，用 HTTP/1.0 拉取数据，用第一版的 JavaScript 管理几个前端状态，用裸露的 HTML 标签展示页面

• 2005 年左右，用 HTTP/1.1 和 AJAX 拉取数据，用 JavaScript 做做表单画画特效，用 CSS 美化页面

• 2010 年左右，用 HTTP/1.1 和 AJAX 拉取数据，用 jQuery 操作 DOM 处理前端逻辑，用 CSS 美化页面

• 2015 年左右，随着 HTML5 标准的推广和浏览器性能的提升，前端开始进入「学不动了」的时代：

  • 在 fetch data 层面，除了 HTTP/1.1 和 AJAX，HTTPS 来了，HTTP/2 来了，WebSocket 也来了
  • 在 manage state 层面，Angular、React 和 Vue 先后出现，从现在看，React 的状态驱动视图的理念直接影响了 Flutter 和 SwiftUI 的设计
  • 在 render page 层面，除了传统的 HTML + CSS，还加入了 CSS3、Canvas 等概念，音视频功能也得到加强

• 最近几年，网络协议趋于稳定，几年内也不会有啥大的变动；国内 React 和 Vue 的地位基本稳固，一堆前端盯着 GitHub 进度条等版本更新；render 层出了不少幺蛾子，好不容易摆脱了 IE6，又来了各种小程序，同一套业务逻辑写好几遍不经济也不现实，这时候各种跨端方案就整出来了

经过一番分析，这个三板斧理论看上去已经有些道理了，我们顺着这个方向再向底层思考：这三大功能是怎么实现的？

• fetch data 方向，最后要靠网络协议栈把数据发出去，但是让一个前端直接搞套接字编程是非常不现实的，所以我们需要把网络操作封装为库，让应用层调用
• render page 方向，最后是把相关图元信息通过各种图形 API（OpenGL/Metal/Vulkan/DirectX）发给 GPU 进行渲染，很多前端的图形学路程最终都止于一个三角形，用这套技术栈去画 UI 也极其不现实，更不要说排版系统这种工程量浩大的工作，所以这些活儿都让相关的渲染引擎做了
• manage state 方向，你可以用全局变量管理状态，最后的结局一定被同事打爆，现在主流方案都是采用各种框架和 runtime 进行状态管理，而这个 runtime 的宿主环境，往往就是某个语言的虚拟机