Compose 跨平台的现状

简介: Compose 跨平台的现状

Compose 能应用于跨平台,主要是基于 KMM 架构,KMM 的介绍可以查看官方文档《Get started with Kotlin Multiplatform Mobile》,我们来看下 KMM 的简单架构:


image.png


commonMain 为通用层模块,也可以被称为平台无关层,如果 commonMain 涉及到平台相关操作的话,则需要定义 expect 方法,让 xxxMain 模块去 actual 实现这个方法,这样,在不同的平台集成 KMM 时就可以实现各自平台的效果。


从 KMM 架构可以看出,一些通用的逻辑计算完全可以丢进 commonMain 来实现,以此来达到各端只维护一份代码的目的,也算是提效了。


KMM 架构可以实现各端的通用逻辑,那基于 KMM 的 Compose 主要目的是为了实现各平台的 ui 统一。从 compose-jb 仓库来看,目前能复用的只有 Android 和 Desktop,想支持全跨平台的话,任务依然很艰巨,我们来看下简单的架构图:


image.png


  • Android 与 Desktop 使用 jb-compose 来实现 ui 复用
  • web 是自己实现了一套 Compose UI 逻辑,ui 组件依赖的是 web-core-js,所以,无法与其他端复用
  • iOS 暂时没有实现 Compose UI

Android 与 Desktop 能使用一份代码来做到 ui 复用的主要原因是 jb 拷贝了一份 jetpack compose 代码,然后实现了 jb-compose 和 compose-desktop,jb-compose 为 commonMain 层使用的通用模块,jetpack-compose 为 Android 所集成的平台模块,compose-desktop 为 desktop 所集成的平台模块,:

image.png

既然是拷贝 jetpack compose 来实现一份代码达到 ui 复用,所以,在编写 desktop 代码时,会发现各个 import 的组件包名都是 androidx,确实会有点奇奇怪怪,即使以后复用到了 iOS ,这块 androidx 包名也无法被摆脱。

这里面还有一个小细节,commonMain 明明依赖的是 jb-compose,Android 依赖的是 jetpack-compose,这两个库参与打包的话,难道不会发生 duplicate class 错误嘛?这里可以看下 ComposePlugin 插件的 RedirectAndroidVariants 类,在 Android 项目编译的时候,会将 jb-compose 依赖替换成 jetpack-compose。


这里面有个小插曲,在我看 compose-jb 项目的 sample 时,看到 todoapp 有 iOS 项目,难道 jb 开始支持 iOS 了?当我打开 README 时发现,咋被耍猴了:


image.png

开发跨平台应用还需要注意哪些?


既然目前可以支持 Android 和 Desktop,那么,我们在开发界面时需要注意哪些呢?我大致列了一下:


  • 路由、状态、生命周期统一
  • 图片资源统一
  • 多语言统一

1、路由、状态、生命周期统一


在 Android 平台,可以使用 androidx.navigation:navigation-compose 来实现组件路由,但该组件 jb 并没有移植到 jb-compose 中,所以,无法在两个平台上实现复用,好在浏览 jb-compose 项目的 issue 时找到了一个可替代的方案 Decompose

Decompose 支持的能力有:


  • 路由
  • 生命周期
  • 状态

Decompose 支持的平台有:

  • android,
  • jvm
  • js (both IR and Legacy modes)
  • iosX64, iosArm64
  • tvosArm64, tvosX64
  • watchosArm32, watchosArm64, watchosX64
  • macosX64

试着跑了下 sample,效果如下:


image.png

在 jb-compose 里的  todoapp sample 中,也用到了该库:


image.png

2、图片资源统一


image.png


为了统一两端获取 Drawable 资源的差异,可以将 Android 中 R.drawable 获取资源的方式改成 resources.getIdentifier ,但如果 Android 项目有用到如 AndResGuard 等资源混淆的话,则这块代码将会报错,需要做 keep 处理。


如果项目有资源混淆需求的话, 建议直接定义获取图片的方法,如:


image.png

3、多语言统一


多语言的实现与图片资源设置类似:


image.png


在运行 desktop 项目时遇到中文多语言乱码问题,解决办法是将项目编码改成 UTF-8 即可:


image.png

总结


在整个调研和使用下来,感觉 Compose 跨平台还有很长的路要走,google 一直在埋头发展自己的 jetpack compose,如果 jb 与 google 能双向奔赴的话,那该有多好。

我觉得,如果有一款能直接让客户端的编程语言(kotlin、swift)直接实现跨端,而不是再学习一款新的语言(dart) 来实现多平台开发,那真是一件美好的事情。

目录
打赏
0
0
0
0
5
分享
相关文章
[docker] DevContainer高效开发(第二篇):前端开发体验
上面的配置只是最基本的配置,大部分情况我们是需要自定义配置,让容器更符合我们的需求。自定义配置就需要用到 Dockerfile,这个文件是 docker 的配置文件,可以在里面安装软件,配置环境等等。Dockerfile 的语法可以参考 官方文档。然后根据自己的需求编写 Dockerfile# 设置变量,由 .devcontainer.json 中的 args 传入# 指定 node 版本# 设置编码# 设置工作目录# 挂载 volume# 设置 bash 为默认 shell。
228 0
《 Docker 的基本概念和优势,以及在应用程序开发中的实际应用》
Docker是开源容器化平台,使开发者能将应用及其依赖打包成容器,在任何支持Docker的环境中部署。其核心包括:Docker镜像(含应用及依赖)、Docker容器(运行实例)和Docker仓库(存储共享镜像)。Docker的优势在于快速部署、资源隔离、灵活性及可移植性,广泛应用于开发测试、跨平台部署、弹性扩展及持续集成等领域。
掌握Docker容器化技术:提升开发效率的利器
在现代软件开发中,Docker容器化技术成为提升开发效率和应用部署灵活性的重要工具。本文介绍Docker的基本概念,并分享Dockerfile最佳实践、容器网络配置、环境变量和秘密管理、容器监控与日志管理、Docker Compose以及CI/CD集成等技巧,帮助开发者更高效地利用Docker。
深入理解Docker容器化技术,打造高效开发环境
深入理解Docker容器化技术,打造高效开发环境
深入浅出Python装饰器《Docker容器化技术在运维中的应用与实践》
【8月更文挑战第29天】装饰器在Python中是一个强大而神秘的存在,它能够轻松地改变一个函数的行为而不修改其源代码。本文将通过浅显易懂的语言和生动的比喻,带你一步步揭开装饰器的神秘面纱,从基本概念到实际应用,让你轻松掌握这一魔法般的工具。
容器化技术,特别是Docker,已经成为现代软件开发和部署的重要工具。
容器化技术,特别是Docker,已经成为现代软件开发和部署的重要工具。
利用容器化技术实现跨平台部署的Web应用开发
本文将介绍如何利用容器化技术,例如Docker和Kubernetes,实现跨平台部署的Web应用开发。我们将探讨容器化的优势以及如何使用Docker容器打包应用程序,然后利用Kubernetes进行管理和部署。通过容器化技术,开发者可以更加便捷地进行Web应用的开发、测试和部署,提高开发效率和应用的可靠性。
介绍 Docker 的基本概念和优势,以及在应用程序开发中的实际应用。
介绍 Docker 的基本概念和优势,以及在应用程序开发中的实际应用。
80 0
Docker 的基本概念和优势,以及在应用程序开发中的实际应用。
Docker是容器化技术,基于镜像(只读模板)创建可移植的容器,确保应用及其服务在隔离环境中运行。其优势包括快速部署(整个应用打包一次部署)、跨平台兼容、统一运行环境、资源隔离和简化依赖管理。Docker在开发和运维中都发挥作用,助力高效测试、部署和提升生产稳定性。
194 3
深入浅出:利用Docker容器化技术提升Web开发效率
在快速变化的软件开发领域,开发者面临着环境一致性和项目部署效率的双重挑战。Docker作为一种先进的容器化技术,为解决这些问题提供了优雅的解决方案。本文将探讨Docker的核心概念、优势以及如何在Web开发中应用Docker来提升开发和部署的效率。通过实际案例分析,读者将了解到如何构建、分享和运行Docker容器,以确保开发环境的一致性,并加速Web应用的交付过程。