原文：https://mp.weixin.qq.com/s/G6o6xSAWroz0fJK7oShYLA，点击链接查看更多技术内容。
利用框架，是操作系统连贯开发者生态，实现用户体验的要害基础设施。其中，开发效率和运行体验是永恒的诉求，业界也在继续一直的倒退和演进。
本文重点围绕挪动利用框架，梳理其要害倒退脉络，并剖析其背地的技术演进思路以及目前的局限；同时，进一步联合万物智联的新场景和新生态，围绕相应的利用框架的设计和演进，分享集体在这个畛域的思考，实际，以及下一步摸索。
“但凡过往，皆为序章”- 威廉 · 莎士比亚
1、利用框架概览
1.1利用，以及利用框架的根本组成
利用是用户应用操作系统/设施的入口，利用框架则是利用开发和运行的基础设施。用户通过各种各样的利用来和操作系统/设施交互，来满足相应的需要。以挪动平台为例，一个典型的利用以及绝对应的利用框架的根底组成大抵如下所示：
Figure 1 典型的利用构造以及相应的零碎运行环境
一个典型的利用构造次要包含以下几个局部:
1）用户界面以及相应的业务解决逻辑。这里次要包含构建用户界面所需的UI（User Interface）组件，布局，动效，事件交互响应解决，所需的资源（图片/字体等），以及联合UI出现的业务逻辑解决等。从运行时的维度来看，它次要对应了零碎运行环境中的UI框架（含语言运行时），以及局部的零碎能力API (Application Programming Interface)；
2）共享库。这里次要包含开发者封装好的SDK（Software Development Kit），以及应用的三方库等。从运行时维度来看，它次要对应了零碎能力API以及语言运行时，如果共享库波及UI的话，还对应了UI框架；
3）包清单文件。这里次要包含利用包的构造形容，权限申明等，它次要对应了零碎运行环境中的包治理，利用生命周期/权限治理/过程治理等。其中， UI框架的次要组成如下图所示：
Figure 2 UI框架的次要组成
开发模型：对开发者提供的开发范式、UI组件/API能力、编程语言等，重点体现的是开发效率与难易水平；
运行框架：UI界面渲染及交互的根底能力框架，将开发者的程序运行在具体零碎平台上，包含利用整体渲染解决流程，语言逻辑执行流程，以及平台能力扩大机制，重点体现的是利用运行的性能体验；
平台适配：承载框架的具体操作系统或平台的适配层。
一般而言，利用框架中的包治理、生命周期/权限治理，和具体的操作系统关联较紧，并绝对稳固；能力API则是操作系统对设施能力的封装，次要影响利用应用设施的能力。UI框架以及相应的编程语言则是影响用户体验（包含开发和运行体验）的要害因素，尤其随着挪动平台的一直遍及以及挪动设施的差别，挪动平台上的UI框架（含编程语言）是业界一直演进的重点畛域。
1.2挪动平台上利用框架的演进
纵观十年来的倒退，总体而言，挪动平台上利用框架围绕着原生框架，三方跨平台框架交错倒退，并联合相应语言、工具的配套演进。下图形容了其中的要害框架/语言的演进概览。
Figure 3 挪动平台上要害语言/开发框架/工具演进概览
图中有几个要害节点：
1） 2013年，Facebook公布的React.js第一次综合的将数据绑定，虚构DOM（Document Object Model）等机制引入前端开发框架设计中。开发者只需申明好相应的数据和UI的绑定，之后由框架来跟踪数据的变动，并通过虚构DOM树的比照找出变动点，从而实现界面的自动更新，而无需开发者手动基于DOM 编程。
2）2018年，Google公布的Flutter则是个重要的分界点。Flutter交融了Dart语言，是第一个深度交融了语言的较为残缺的申明式开发框架，实现了齐全通过数据驱动的UI变更。另外，Flutter通过基于Skia的自绘制引擎实现了高性能的跨平台的平台一致性的渲染能力，并提供了Hot Reload机制晋升开发测试体验。不过，Flutter的整体设计哲学偏差底层的灵活性 – 次要通过底层的细粒度的能力供开发者自由组合，另外，Google对Dart语言的简洁度的改良较少，整体上开发的简洁度以及对用户的友好度绝对有余。
3）2019年，Apple SwiftUI的推出，意味着支流OS的原生利用框架开始逐渐往申明式开发方式迁徙。SwiftUI推动了Swift语言个性扩大实现了更加简洁天然的UI形容，并通过XCode开发工具的所见即所得的高效预览能力进一步晋升开发效率。同时，SwiftUI也是真正意义上开始通过一套框架，逐渐对立Apple生态中的不同的设施/OS上的利用开发。
另外，2019年Google将更简洁的Kotlin语言降级为Android首选的编程语言，并在2021年推出基于Kotlin的UI框架Jetpack Compose, 同时联合开发工具Android Studio逐渐往多设施以及跨平台演进。
总体而言，挪动端利用框架的演进蕴含以下几个要害特色：
1）从命令式UI开发逐渐演进到申明式UI开发
2）UI和编程语言的交融从绝对涣散演进到逐渐严密
3）开发范畴从单设施演进到多设施，从单平台演进到多平台
接下来的章节会别离围绕跨平台框架，以及原生利用框架逐渐开展，梳理其具体的演进脉络。
1.2.1 跨平台框架
因为W3C（ World Wide Web Consortium）规范的遍及以及Web人造的跨平台能力， 跨平台框架次要是基于Web或Web的衍生技术。
最早试图补齐Web跨平台能力是一家叫做PhoneGap的公司，前面被Adobe收买，2012年以Cordova的我的项目名开源公布。过后的W3C规范更多涵盖的是页面渲染，而设施相干能力的规范十分缺失，PhoneGap的指标则是围绕着“Phone”补齐这方面能力“Gap” – 它定义了一套挪动平台上罕用的设施能力的JS API，并基于JS引擎设计了一套扩大形式来实现不同平台上的API，同时联合零碎的Webview，配套相干零碎整合以及打包工具，部署成相应平台上的利用格局在指标操作系统平台上运行。PhoneGap肯定水平上促成了Web在挪动设施上的倒退，然而它没有解决Web引擎自身的体验问题。过后的Web引擎(零碎自带的Webview），尤其是Android平台上，能力较弱，并缺失硬件加速，略微简单的利用体验较差。针对这些问题，2014年 Intel开源技术核心推出了Crosswalk我的项目，在Chromium内核根底上，针对挪动平台上Web利用，做了进一步解耦和性能优化（包含硬件加速，包体积优化，以及针对游戏专门设计一套渲染门路等），并联合了Cordova补齐相干API能力，构建了可独立打包演进的Web引擎，性能体验失去了较大的晋升。而且，通过独立打包，也解决了因为Android零碎的碎片化，Webview的版本不一，从而引起的利用体验（包含渲染能力和性能）不统一的问题。
Crosswalk公布一年左右就吸引了近千款利用基于Crosswalk构建，其中无数款利用都达到了超过百万级的下载量。不过后续因为Intel在挪动平台上的策略调整，没有进一步演进。但这块的要害思路，后续或多或少在业界看到了相干的影子，比方Google后续推出的可独立降级的ChromeWebview，以及国内各互联网公司各自构建的WebView(腾讯的X5内核，阿里巴巴的UC内核等)。
Cordova+Crosswalk，肯定水平上晋升了基于Web的跨平台框架所需的API能力以及渲染性能，不过还有几个方面，还须要继续晋升：
Ⅰ、开发范式/前端框架
规范的Web还是一种“半申明式”的开发方式，即通过HTML（Hyper Text Markup Langua-ge）, CSS（Cascading Style Sheets）来形容整体页面构造和款式，但当要扭转其中的界面元素时，开发者须要基于W3C DOM API，通过具体编程，来实现其中相干节点的定位以及增删改。当所面对的界面交互越简单，所关联的数据越多，开发者累赘就越重，也越容易出错。
2013年Facebook公布的React.js，引入了数据和UI主动绑定，以及组件化机制，将申明式的能力较好的交融到前端框架中。这是开发理念的一次比拟大的提高。这样形式下，开发者无需去手动更改UI的构造，只须要形容好UI构造自身，以及数据和UI的绑定关系，框架层会主动跟踪数据的变动并更新相应的UI，这样进一步晋升了UI框架开发效率。后续集体开发者尤雨溪推出的Vue.js框架实质上也是采纳了相似的思路，只不过在表达方式以及具体实现上有所不同。另外，通过前端框架层提供的组件能力，实质上是对W3C HTML/CSS规范的进行了进一步封装，提供了更加高层的能力，这样有利于聚焦于绝对罕用的W3C规范能力，同时通过相似Virtual DOM的机制，对底层的Web引擎做了进一步的解耦，从而为后续的进一步演进建设了肯定的根底。
Ⅱ、性能体验
因为W3C规范自身庞杂的历史积攒和复杂性，绝对应的Web引擎复杂度也十分高。简单的渲染管线，千万量级的代码，百兆级的二进制大小，以及大几十兆甚至百兆级的根底内存占用，让基于Web引擎的利用在整体性能体验，资源占用等相干方面，尤其在挪动平台上，和原生利用都有较大的差距，并难以较好解决。
2015年Facebook在React.js根底上推出的RN(React Native)，是Web+Native的一个典型代表。RN的基本思路是开发范式上基于React.js，而具体渲染门路上，则齐全绕过Web引擎，间接桥接到了操作系统原生的UI框架。2016年阿里巴巴推出的Weex也是采纳了和RN相似的思路。
另外，针对RN的要害架构，Facebook继续做了不少演进：
1）布局引擎（Yoga）。2016年推出。通过实现CSS子集的模式实现高效的统一的跨平台布局体验；
2）JS引擎（Hermes）。2019年推出。针对挪动平台上体验问题做相应改良，比方通过引入肯定的AOT（Ahead Of Time）机制，次要是两头码预编译，来晋升启动速度；
3）高效交互/按需加载等新架构。2022 年推出。反对高效的跨语言交互、数据共享，组件按需加载等相干机制。
通过这些相干的改良， RN实现了肯定的均衡，基于Web的开发范式实现了较好的性能体验。不过，因为原生UI框架自身的差别，RN难以达成较好的跨平台一致性；另外因为须要额定一层Web到Native的桥接转换，和原生相比，RN在性能体验上人造就有肯定差距，难以逾越。
Google在2018年推出的Flutter，则是借鉴了React的思维，走了另外一条较为翻新的路。次要特色如下：
1）基于Dart语言的全新申明式范式设计，所有皆为Widget，可灵便组合，并通过数据驱动UI渲染
2）基于底层画布的高效自绘制能力
3）Dart运行时优化，比方高效的小对象调配开释能力，AOT机制等
再配合绝对残缺的跨平台能力，以及相应的工具链，Flutter具备了较好的综合竞争力。和类RN的计划相比，Flutter在以下几个方面具备肯定劣势：
1）跨平台一致性。通过自绘制机制，具备更好的跨平台一致性的高效的渲染能力。
2）语言执行性能。通过强类型语言Dart的引入以及相应的运行时优化（AOT等），具备更好的语言执行性能，实践上可对标iOS/Android原生语言。
不过，Flutter也有本身的有余：
1）语言生态。Dart语言生态和JS相比，有比拟大的差距。而且生态培养过程个别都比拟漫长。
2）动态化能力。Flutter尚不具备可对标JS相干框架的动态化部署机制，实现利用界面/业务的动静刷新，而这块又是大多数挪动利用的强诉求。当然，这里有技术的因素，也有非技术的因素综合引起的。
另外一个层面，Flutter申明式UI的设计原则上更偏重灵便组合，裸露了较多的细粒度底层的机制（包含各种细粒度的Widget, 以及需进一步辨别Widget的有状态和无状态等等），而在整体利用开发的简洁天然度方面，则思考的绝对较少。
受到Flutter的启发，业界又衍生出了一些新的计划。比方桥接规范的Web前端框架到Flutter，其目标是复用Web的生态劣势，以及Flutter的高性能跨平台渲染能力。这块的典型代表是阿里巴巴2021年开源的Kraken，以及2022年进一步在此基础上演进的KUN。这种计划有肯定水平的劣势，不过因为它实质上还是桥接转换，另外引入了两种虚拟机（JS和Dart），架构上就决定了这种计划在性能和内存体验存在难以解决的缺点。还有JS前端框架+ C/C++自绘制的计划，比方Weex2.0，它在肯定水平上较好综合了JS层的生态和底层自绘制的劣势，不过在语言运行时，开发的便捷度等方面，还短少实质的改良。
总体而言，基于Web或通过Web衍生进去的跨平台框架，业界始终在继续的演进，包含Web API扩大，对立的继续优化的Web引擎，申明式前端框架，Web+Native的交融，自绘制机制，语言和框架深度交融的架构等等。但这些跨平台框架，离真正意义上的极简开发，极致性能，并可对标原生利用体验的设计方面，还短少系统性的变革和逾越。
**1.2.2 原生利用框架
1.2.2.1 iOS平台**
iOS的原生利用框架是Cocoa Touch，其中的UI框架和语言最早别离是UIKit和OC(Objective-C)，提供了传统的命令式（imperative）编程形式。2014年Apple推出了Swift语言，在简洁性，安全性，性能等方面都有进一步的晋升。2019年，在Swift语言公布了5年之后，Apple推出了新一代的UI框架 – SwiftUI，在开发理念上做了一次全面降级：从命令式编程演进到了简洁天然的申明式（declarative）编程，并通过一套UI框架可开发Apple生态中的不同OS上的利用（iOS/iPadOS/watchOS/macOS等）。以下是几个比拟重要的演进点：
a.全面采纳申明式来形容UI，并且后续的UI变更都是通过数据驱动来实现。具体而言，Apple从新定义了一整套开发范式，涵盖了UI的要害组成，UI和数据的关联等信息。整个UI就是一段形容，实质上就是形容界面的一个值，而不是任何实例；另外UI变动通过繁多数据源来驱动（Apple称之为“Single Source of Truth”），而不是像之前命令式编程那样，开发者能够任意获取某个实例，定位到某个节点来进行更改。这跟传统的开发方式，有实质的不同。
b.简洁天然的开发范式。只管在SwiftUI之前也有各种申明式编程框架，但SwiftUI在简洁性以及类自然语言的易了解性实现了极大的晋升。具体而言，Apple通过语言和框架的深度联合，达成了简洁天然的开发体验。Swift的一些语言个性根本就是为SwiftUI服务，比方
1）Property Delegates（属性代理）
属性代理实质上一种语法糖机制，当拜访指定的数据时，包含Get或Set，能够附加插入额定的解决逻辑。这个机制用来实现@State这类的装璜器，实现数据和UI之间的主动绑定，简化利用开发逻辑。
2）Trailing closure （尾随闭包）
尾随闭包次要用来加强可读性。当一个很长的闭包表达式作为最初一个参数传递给函数时，能够把它放在在函数括号之后。函数反对将其作为最初一个参数来调用。
3）Function Builders（函数结构器）
函数结构器也用来加强可读性，它能够用语句块作为承受参数列表，每行代码返回一个参数。
还有其余一些语法比方链式调用等等，这些独特组成了简洁天然的开发范式。
另外，SwiftUI中自定义组件的内容，其实是通过Function Builders返回的恪守View协定的类型组成，这就意味着框架运行时有机会联合编译时的UI类型信息做相应优化来实现视图变动的疾速更新。
c.配套工具反对。在工具层面，除了传统的调试调测等能力，Apple的Xcode围绕SwiftUI预览做了比拟重要的加强，简要阐明如下：
1）实时双向预览。UI代码刷新可实时看到相应的界面成果，同时可实现代码-界面的双向预览 – 点击代码可看到的相应的UI界面，抉择UI界面也可同步显示相应的代码。另外预览能够指定到组件级 – 通过加@Preview标签来指定相应组件进行预览
2）自定义预览。预览时可反对参数配置来定义预览的设施型号，暗黑模式，语言地区等上下文，并能够设置页面所依赖的入参等。
3）预览时动静交互，并可反对在预览器上调测。预览时能够实现罕用的动静交互，比方手势、键盘等输出，音量、Home键、电源键等按键操作，以及网络、文件、多媒体能力反对等
这些预览相干的性能极大晋升了利用的开发效率。实质上，高效的成果统一的预览是须要SwiftUI以及相应能力可能间接运行在PC（Personal Computer）平台上，能力达成较好的成果。
另外，从2022年SwiftUI 4.0的要害个性来看，Apple一直加强高级组件，以及自定义等相干能力，继续晋升开发效率。比方更多的高级组件（各类图表，分享组件等），布局类型以及自定义布局能力加强（增加Grid网格布局，另外加强了自定义布局的能力，以及布局变动相干的动画）等等。
1.2.2.2 Android平台
Android的原生利用框架（Application Framework）次要包含利用治理，View 零碎，后盾服务（Service），内容提供者(Content Provider)，播送承受机制(Broadcast Receiver)等。其中UI框架和语言最早别离是Android View零碎以及Java，次要也是采纳了命令式的开发模式（其中界面的初始申明能够通过XML(eXtensible Markup Language)形式来定义，后续的操作则都是通过相应的命令式API来实现）。2016年JetBrains公司正式公布Kotlin 1.0版本, 它是一种动态类型语言，提供了更加简洁，平安的语法个性（比如说解决Java的语法简短以及空指针等问题）。同时，Kotlin在字节码级别和Java兼容。随着Kotlin的不断完善，再加上Java语言的版权问题等背地的起因，很快， 2019年Google发表Kotlin为Android挪动开发的首选语言。2021年，Google公布了基于Kotlin的申明式UI框架 – Jetpack Compose 1.0版本。实质上，Jetpack Compose和SwiftUI相似，都是申明式编程，都是繁多可信数据源驱动UI变更。不过，也有几点不同：
1）Jetpack Compose中的界面示意为所有皆为可组合的函数。这些函数通常倡议设计为无附带效应（即不会产生在可组合函数作用域之外的利用状态的变动）。从运行时维度，这些无附带效应的组合函数可并行执行。
2） Jetpack Compose整体开源，架构上则是提供了多层次的API，从底往上，提供了运行时， 界面，根底，Material设计零碎的实现，每一层都是基于较低层的公共API构建。
3）跨平台能力。在Google公布 Jebpack Compose 1.0版本后，Jetbrains公司紧接着推出Compose Multiplatform我的项目，将Compose延长到桌面平台(Windows, macOS, Linux)，同时，配合Kotlin Multiplatform我的项目中的跨平台类库（网络、存储等），进一步简化基于Jetpack Compose的跨平台利用的开发。
在开发工具层面，Android Studio反对Jetpack Compose实时预览等个性，但目前成熟度绝对弱一些，截至2022年，还未反对多设施预览，代码界面的双向预览，预览时调试，以及根底零碎能力（比方网络/存储）的模仿等。
Google在2022/10/24给出的Jetpack Compose路线图中，Jetpack Compose接下来重点会围绕性能体验，高级组件，开发工具改良（包含预览和实时编辑），多平台反对（WearOS，大屏设施，主屏幕Widget）等方面开展。
总体而言，不论是原生框架，还是三方框架，除了性能体验，要害演进方向次要包含以下几点：
1）开发方式从命令式转为申明式；
2）语言和框架和工具联合更加严密；
3）逐渐减少多设施以及跨平台反对。