【译】未来的APP：声明式UI+Kotlin跨平台（D-KMP）（上）
The future of apps:Declarative UIs with Kotlin MultiPlatform (D-KMP) — Part 1/3 作者：Sahil Sharma 译者：不想翻身的鱼
基于声明式UI，Kotlin跨平台和MVI模式，分三篇文章来讲述新的D-KMP架构。
第一篇： D-KMP架构和声明式UI第二篇： Kotlin跨平台和MVI模式第三篇： D-KMP的分层和团队组织
最近更新：2021年4月8日
2020年不仅是疫情肆虐的一年，也是APP开发的过去和未来的分水岭。
2021 APP的未来已经开始，那就是声明式UI和跨平台，它们将永远改变APP的架构模式和实现。去创建一个多平台的有85%的共享代码的原生的UI的APP将会变得很正常。开发的生产力将大幅度提高，同时也能提高APP的质量。
本文将介绍主要的概念，以及它们是怎么优雅的组合到一起的。
过去
这里的过去说的是APP一直以来的开发方式：大部分公司都是各自平台开发应用（Android，iOS，Web），在客户端侧没有做代码共享。
为了控制在每个平台侧编写重复的带，大部分应用倾向于“轻客户端”，将大部分的业务逻辑和数据处理放在唯一可以共享的服务端。
这种方式，服务端会变得“面向UI”。架构会被设计成这样：大部分点击都会触发一个API的调用，接口会返回下一个页面要展示的详细信息，这样一个非常有限的客户端逻辑。
其他的客户端逻辑都需要在每个平台维护一套相同的代码，通常会避免这种情况，除非这些逻辑能带来比较有意义的客户体验。
对于客户端侧的共享代码，这些年已经有一些公司在尝试一些方法，但是对于大部分来说都是一次失败的历史，最终还是会把代码还原到只有原生或者平台特性的开发。被大家熟知的案例比如DropBox（通过共享C++代码），AirBnB（通过RN共享）。换句话说，还没有一个合适的技术可以让这些公司可以实现一个长期安全的投入到共享代码。
未来
2020年，我们经历了两个重要范例增长，两个几乎是并行的：声明式UI和Kotlin跨平台。这会带来前所未有的机会，会让跨平台和客户端侧的代码共享变成APP开发的更倾向的选择。
声明式UI非常适合跨平台的架构，因为它们是无状态的而且可以做到跟业务逻辑完全解耦。通过把声明式UI和Kotlin跨平台组合到一起，我们可以安全的搭建一个有大量客户端侧共享代码的APP（高达85%），并且在各自原生平台有很高的性能。同时我们还能拥有各自平台原生的UI。
应用现在可以做到“富客户端”，因为客户端侧的逻辑成本不像以前那么高了，因为不再需要每个平台维护同一套逻辑了。应用会变得非常的灵活并且带来很多会给用户体验带来改善，减少用户在点完一个东西需要等待场景。
服务端可以变得完全是“UI无关的”并且集中精力在提供通用数据，删除所有的冗余逻辑，因为数据处理和格式化在客户端层就可以完成。这个同时也能很大程度提高数据吞吐量。
让我们一个个来看一下。首先让我们定义一下这个即将到来的APP开发新纪元的几个核心概念。
未来应用的3个核心概念
声明式UI（Android的Jetpack Compose，iOS的Swift UI）KMP（Kotlin 跨平台）MVI模式（Model-View-Intent）
我们称其为D-KMP架构，表示声明式UI和Kotlin跨平台。MVI模式是为了让两者配合起来更完美。
D-KMP架构
有一点很重套必需要说明下，现在展示的D-KMP架构是针对全新的项目。
我们讨论的不是往一个现有项目里面逐渐的引入声明式UI和Kotlin 跨平台。
我们的目标是简洁的，健壮的，不会过时的架构，而不会向过去妥协并且是基于创新的技术和范例来构建的。
还有一点需要强调的是D-KMP不是一个lib库，而是一个架构，完全依赖官方的framework。
让我们详细的了解下这个架构三个核心的细节，首先看下声明式UI。
声明式UI已经开始在Android和iOS上发展了
差不多经过10多年，我们开始经历移动框架的非常重要的革命。Android和iOS都开始了各自新的UI工具集，并且都是声明式的，受到React和Flutter它俩的影响。它们将完全取代现有的各自系统定义视图的方式。
Google在2019年的Google I/O 大会上发布了Jetpack Compose。2020年8月进入Alpha阶段，2021年春季进入beta阶段，预计2021年底能发布1.0版本。
Jetpack Compose会支持Android 5以及以上的版本（target API 21）。这就意味着所有新的Jetpack Compose的API都是向后兼容的，而且不需要新的Android版本。这是因为在低版本上Jetpack Compose是直接在画布上进行绘制额。
Apple在2019年的WWDC上个发布了Swift UI，随着iOS 13一起发布。今年随着iOS 14的发布已经做了很多改进。
跟Jetpack Compose不同的是，Swift UI的更新是跟iOS系统绑定在一起的。新的Swift UIAPI不会向后兼容。但是考虑到所有支持iOS 13的设备现在也支持iOS 14（与往常不同，苹果今年没有弃用任何设备），可以很安全的在target 是iOS14的应用使用Swift UI。
为什么是声明式UI
Jetpack Compose和Swift UI都是声明式UI的框架，它们只是用来表示不同状态下UI应该怎么样展示，而不是直接的管理状态。声明式UI变得越来越流行，也正是因为React.js和Flutter这来你给个框架，它俩让人们看到了跟无状态的组件交互是一件多么简单的事情。也正是它俩的成功，让Android和iOS加入到了声明式UI的世界。使用Jetpack Compose你可以忘记Android笨重的视图系统和可怕的Fragments。使用Swift UI你可以忘记VC这个UI Kit和不怎么灵活的StoryBoard。这是一个全新的开始。这就是未来!
声明式UI可以让UI布局和ViewModel进行一个彻底的分离，因为不再需要其他层额外的代码（使用findViewById和@IBOutlet）去把两者联系起来。关于这个主题，Google的Leland Richardson写了一篇非常有意思的文章（这篇文章我正好翻译过，这里贴上我翻译文章Jetpack Compose底层实现原理）。
Jetpack Compose和Swift UI非常的相似。有一些琐碎的语法的（Jetpack Compose用的是Kotlin，Swift UI用的是Swift）以及导航模式不同，但是背后带理念都是一样的。尤其是数据是传递到这些无状态UI框架的方式完全是一样的。也正是因为这一点，ViewModel跟平台无关才显得有意义。后面我们会进一步聊下这方面具体的细节。
Web端的声明式UI
Web端最有名的声明式UI就是React.js（by Facebook），也是真正把声明式UI带向成功的框架。这是一个工业级改变的框架，如果没有React.js的成功，我们现在也可能在Android和iOS上用不了声明式UI。
Kotlin提供了对React.js非常方便的封装，我们可以使用Kotlin/React作为Web的声明式UI。它可以以插件的形式引入到我们的D-KMP架构，就跟Android上的Jetpack Compose和iOS上的Swift UI一样。
在Kotlin/React里面你可以引用所有已有的React.js的组件，可以用到Kotlin语言的相对于JS的有点。你也可以完全用Kotlin创建自定义的组件。可以到Kotlin/React文档了解详细的信息。
除了Kotlin/React以外，更有意思的可能就是Compose for Web，也就是Jetpack Compose的Web版本，目前JetBrains（Kotlin的创建者）正在开发。如果说用Kotlin/React 来实现UI还需要额外15%的工作量（相对于85%的KMP的共享代码），Compose for Web会使这块工作量少很多，因为它跟Android的Jetpack Compose非常像。因此我们非常期待它发布的那一天。
桌面端的声明式UI
在我们等待web版本的同时，JetBrains已经发布了桌面版的Compose，可以用来开发Windows，macOS和Linux的桌面应用。
关于桌面端，值的注意的是Swift UI已经支持macOS了。用Swift UI编写的UI在iOS，macOS，tvOS和watchOS 6之间是无缝适配的。我们也期望Jetpack Compose早日实现多平台的无缝适配（Android，桌面和Web）。
可以想象一下，在不久的将来只要你会Jetpack Compose和Swift UI就能开发处各个平台非常优秀的应用。
为什么不是一套UI框架可以适配所有平台呢？
你可能在想会不会只有这么一套声明式UI框架可以适配所有的平台。
换句话说，Jetpack Compose会不会最终适配所有苹果的系统（iOS，macOS，tvOS，watchOS），或者说Swift UI最终会不会适配非苹果的设备？就目前而言，如果这个会发生的话，那也不会是苹果或者谷歌来做，可能是社区或者第三方来做的。我们已经看到Jetpack Compose已经被引入到桌面端和Web端，不是谷歌而是JetBrains。
谷歌和苹果还是会集中精力到各自的系统上面。其实这样对UI的未来是非常健康的。这样就一直有两套独立强大的工具集相互竞争，不断创新。
原文链接：
https://danielebaroncelli.medium.com/the-future-of-apps-declarative-uis-with-kotlin-multiplatform-d-kmp-part-1-3-c0e1530a5343
---END---
推荐阅读：
Jetpack Compose系列-Text的花式使用！
Jetpack Compose 系列-环境搭建和工具介绍！
Google将在Android 12中弃用RenderScript API，改用Vulkan
安利篇：Kotlin高阶函数与特性，让代码飞起!
Android自定义支付密码输入框，光标问题总结！
更文不易，点个“在看”支持一下👇