携程机票Skip原生跨端框架探究

摘要：Derek Yang，携程机票资深研发经理，专注于iOS开发&跨端技术研究，热衷于新技术探索。

作者简介

Derek Yang，携程机票资深研发经理，专注于iOS开发&跨端技术研究，热衷于新技术探索。

本文介绍Skip这一款新兴的高性能原生跨端开发框架，其通过将Swift和SwiftUI代码智能转换为Kotlin和Jetpack Compose代码，实现Android与iOS双端的高效开发。文章详细解析Skip的架构设计、工具链支持及代码转换策略，并通过实际案例展示其开发流程与技术优势。同时对比Skip与Flutter、React Native等主流框架，突出其在性能、代码共享和开发体验上的卓越表现。

一、Skip工具原理

二、Skip的使用方法

三、与其他跨端技术的对比

四、Skip Demo工程结构分析

五、Skip内部模块

六、使用Skip的注意事项

七、总结

在移动应用开发领域，跨端开发框架一直备受关注。随着Flutter、React Native和Kotlin Multiplatform等方案的普及，开发者能够在不同平台上共享代码，从而提升迭代效率。然而，每种跨端框架都有其优缺点，在开发体验、动态更新、渲染性能和社区生态等方面表现各异。

Skip是由Glimpse I/O, Inc.于2023年推出的一款支持Swift和Kotlin的高性能原生跨端开发框架。该框架旨在显著缩短Android和iOS双端的开发时间，同时降低维护成本。凭借其卓越的技术特性，Skip在跨端开发领域展现了显著优势，包括：

高性能原生体验：通过直接编译为各平台的原生代码，最大限度地减少性能损耗，确保应用运行流畅。

统一的开发体验：支持开发者使用单一代码库构建多端应用，大幅提升开发效率并降低复杂性。

模块化架构：采用灵活的模块化设计，允许开发者按需引入功能模块，优化资源占用和项目结构。

尽管Skip技术理念优势显著，但目前仍无法完全实现将Swift和SwiftUI的功能无缝复刻到Kotlin和Jetpack Compose中。期待后续迭代更新，最终实现跨平台等价转换能力。

本文将介绍Skip这一跨端框架，深入探讨其原理、核心库，并与现有的原生跨端技术（如Kotlin Multiplatform和Compose Multiplatform）进行详细对比。

一、Skip工具原理

Skip的架构图展示了其工作流程：

Skip的核心设计理念是“原生优先”，能够直接利用原生平台的UI组件和系统能力。

与Flutter和React Native不同，Skip不依赖于自绘引擎或JavaScript桥接，也不同于Kotlin Multiplatform将Kotlin代码编译成各个平台的目标代码。Skip的工作原理基于现代编程语言的相似性，通过将Swift和SwiftUI的代码转换为Kotlin和Jetpack Compose的代码，实现跨平台代码共享。

主要特点包括：

代码共享：Skip允许开发者使用Kotlin（针对Android）和Swift（针对iOS）编写共享的业务逻辑代码。通过一种轻量级的抽象层，Skip将这些代码转换为原生平台的实现，从而避免了跨平台框架常见的性能损耗。

原生UI组件：Skip不引入额外的UI框架，而是直接使用Android的Jetpack Compose和iOS的SwiftUI。这意味着开发者可以享受到原生UI的高性能和流畅体验，同时减少学习成本。

状态管理：Skip提供了一套轻量级的状态管理机制，支持在共享代码中定义和管理应用的状态，并通过高效的同步机制确保状态变化能够实时反映到原生UI层。

工具链支持：Skip提供了完整的工具链支持，包括代码生成、调试工具和构建脚本，帮助开发者快速上手并优化开发流程。

实际运行效果：不仅逻辑部分可共享，UI部分也可以做到一码双端。

二、Skip的使用方法

2.1 环境搭建

Skip的环境初始化配置非常简单：

1）安装Kotlin和Swift开发环境

2）通过Homebrew安装Skip CLI工具：

brew install skip-dev/tap/skip

3）初始化一个新的Skip项目：

skip init MyApp

2.2 编写共享代码

在Skip项目中，共享代码位于shared目录下。开发者可以使用Kotlin或Swift编写业务逻辑，例如网络请求、数据存储等。

class MyApp { fun greet: String { return "Hello, Skip!" }}

2.3 实现原生UI

在Android和iOS项目中，分别使用Jetpack Compose和SwiftUI实现UI层，并调用共享逻辑代码。

Swift编写共享代码

public struct RootView: View { public init {} public var body: some View { ContentView .task { logger.log("Welcome to Skip on \(androidSDK != nil ? "Android" : "Darwin")!") logger.warning("Skip app logs are viewable in the Xcode console for iOS; Android logs can be viewed in Studio or using adb logcat") } }}public struct ContentView: View { @AppStorage("tab") var tab = ContentTab.welcome11 @State var viewModel = ViewModel @State var appearance = "" public init {} public var body: some View { TabView(selection: $tab) { NavigationStack { WelcomeView } .tabItem { Label("Welcome1234885z211", systemImage: "heart.fill") } .tag(ContentTab.welcome11) NavigationStack { ItemListView .navigationTitle(Text("\(viewModel.items.count) Items")) } .tabItem { Label("Home2", systemImage: "house.fill") } .tag(ContentTab.home22) NavigationStack { SettingsView(appearance: $appearance) .navigationTitle("Settings") } .tabItem { Label("Settings3", systemImage: "gearshape.fill") } .tag(ContentTab.settings33) } .environment(viewModel) .preferredColorScheme(appearance == "dark" ? .dark : appearance == "light" ? .light : nil) }}

iOS接入

#if !SKIPpublic protocol SwiftToAndroidApp: App {}public extension SwiftToAndroidApp { var body: some Scene { WindowGroup { RootView } }}#endif

Android接入

open class MainActivity: AppCompatActivity { constructor {} override fun onCreate(savedInstanceState: android.os.Bundle?) { super.onCreate(savedInstanceState) logger.info("starting Activity") UIApplication.launch(this) enableEdgeToEdge setContent { val saveableStateHolder = rememberSaveableStateHolder saveableStateHolder.SaveableStateProvider(true) { PresentationRootView(ComposeContext) SideEffect { saveableStateHolder.removeState(true) } } } }}@Composableinternal fun PresentationRootView(context: ComposeContext) { val colorScheme = if (isSystemInDarkTheme) ColorScheme.dark else ColorScheme.light PresentationRoot(defaultColorScheme = colorScheme, context = context) { ctx -> val contentContext = ctx.content Box(modifier = ctx.modifier.fillMaxSize, contentAlignment = Alignment.Center) { RootView.Compose(context = contentContext) } }}

2.4 构建和运行

使用Skip CLI工具构建并运行项目：

skip buildskip run

2.5 调试工具

Skip基于Swift语言生成Kotlin和Jetpack Compose的代码产物，因此调试沿用iOS和Android的开发工具，即Xcode和Android Studio。这相较于其他跨端框架对移动端原生开发者非常友好，尤其对于KMP的开发者。

三、与其他跨端技术的对比

3.1 技术对比

Skip与Flutter、React Native、Kotlin Multiplatform和Compose Multiplatform的详细对比：

3.2 Binary Size对比

以Release版本验证数据对比，Skip的生成产物体积最小，非常适合对安装包大小敏感的应用场景。

3.3 运行性能Benchmark对比

Skip在UI渲染性能、启动时间和内存占用方面表现出色，相较于其他跨端框架具有显著优势。

官方对比数据，对使用Skip进行iOS和Android双平台开发与其他一些主流跨平台应用程序构建方案进行比较。

各种主流跨平台开发框架的底层技术方案：

四、Skip Demo工程结构分析

Skip的工程大致可分为以下四大模块：

Shared Module：包含共享的业务逻辑代码，使用Kotlin或Swift编写。

Android Module：使用Jetpack Compose实现UI层，并调用共享代码。

iOS Module：使用SwiftUI实现UI层，并调用共享代码。

Skip Toolchain：提供代码生成、构建和调试支持。

SkipDemo实际工程结构如图：

Xcode对SkipDemo工程编译生成的Android源码和依赖都在skipstone文件夹下，开发人员编写的代码转译产物在SkipDemo中，其依赖项和其同级，此代码可以单独用AS直接打开运行。具体如下：

针对SkipDemo，也可直接通过Xcode来运行，这是因为在初始化SkipDemo项目时，工程配置中已经包含了构建和运行Android的脚本。

生成的Android工程分析

Android入口外壳app工程，在Activity的onCreate中，通过Compose的标准方式setContent来构建视图。关键点在于，SwiftUI使用对象作为界面元素，而Jetpack Compose需要将界面元素转换为@Composable函数。

实现策略详见：Skip UI Implementation Strategy

在转换代码中，SwiftUI的每个View都有一个body，这里返回的是SwiftUI的页面元素，转换之后需要提供的是可以调用的@Composable函数，这里包装了一层ComposeBuilder用于执行Compose方法返回@Composable函数的结果用于展示。

SwiftUI转Compose的示例：

SwiftUI

var body: some View { if isHello { Text("Hello!") } else { Text("Goodbye!") } }}

Compose

internal class V: View { internal val isHello: Boolean override fun body: View { return ComposeBuilder { composectx: ComposeContext -> if (isHello) { Text(LocalizedStringKey(stringLiteral = "Hello!")).Compose(composectx) } else { Text(LocalizedStringKey(stringLiteral = "Goodbye!")).Compose(composectx) } ComposeResult.ok } } constructor(isHello: Boolean) { this.isHello = isHello }}

SkipUI的工作原理：