攜程機票Skip原生跨端框架探究
本文介紹Skip這一款新興的高性能原生跨端開發(fā)框架,其通過將Swift和SwiftUI代碼智能轉(zhuǎn)換為Kotlin和Jetpack Compose代碼,實現(xiàn)Android與iOS雙端的高效開發(fā)。文章詳細(xì)解析Skip的架構(gòu)設(shè)計、工具鏈支持及代碼轉(zhuǎn)換策略,并通過實際案例展示其開發(fā)流程與技術(shù)優(yōu)勢。同時對比Skip與Flutter、React Native等主流框架,突出其在性能、代碼共享和開發(fā)體驗上的卓越表現(xiàn)。
一、Skip工具原理
二、Skip的使用方法
三、與其他跨端技術(shù)的對比
四、Skip Demo工程結(jié)構(gòu)分析
五、Skip內(nèi)部模塊
六、使用Skip的注意事項
七、總結(jié)
在移動應(yīng)用開發(fā)領(lǐng)域,跨端開發(fā)框架一直備受關(guān)注。隨著Flutter、React Native和Kotlin Multiplatform等方案的普及,開發(fā)者能夠在不同平臺上共享代碼,從而提升迭代效率。然而,每種跨端框架都有其優(yōu)缺點,在開發(fā)體驗、動態(tài)更新、渲染性能和社區(qū)生態(tài)等方面表現(xiàn)各異。
Skip是由Glimpse I/O, Inc.于2023年推出的一款支持Swift和Kotlin的高性能原生跨端開發(fā)框架。該框架旨在顯著縮短Android和iOS雙端的開發(fā)時間,同時降低維護成本。憑借其卓越的技術(shù)特性,Skip在跨端開發(fā)領(lǐng)域展現(xiàn)了顯著優(yōu)勢,包括:
- 高性能原生體驗:通過直接編譯為各平臺的原生代碼,最大限度地減少性能損耗,確保應(yīng)用運行流暢。
- 統(tǒng)一的開發(fā)體驗:支持開發(fā)者使用單一代碼庫構(gòu)建多端應(yīng)用,大幅提升開發(fā)效率并降低復(fù)雜性。
- 模塊化架構(gòu):采用靈活的模塊化設(shè)計,允許開發(fā)者按需引入功能模塊,優(yōu)化資源占用和項目結(jié)構(gòu)。
盡管Skip技術(shù)理念優(yōu)勢顯著,但目前仍無法完全實現(xiàn)將Swift和SwiftUI的功能無縫復(fù)刻到Kotlin和Jetpack Compose中。期待后續(xù)迭代更新,最終實現(xiàn)跨平臺等價轉(zhuǎn)換能力。
本文將介紹Skip這一跨端框架,深入探討其原理、核心庫,并與現(xiàn)有的原生跨端技術(shù)(如Kotlin Multiplatform和Compose Multiplatform)進行詳細(xì)對比。
一、Skip工具原理
Skip的架構(gòu)圖展示了其工作流程:
Skip的核心設(shè)計理念是“原生優(yōu)先”,能夠直接利用原生平臺的UI組件和系統(tǒng)能力。
與Flutter和React Native不同,Skip不依賴于自繪引擎或JavaScript橋接,也不同于Kotlin Multiplatform將Kotlin代碼編譯成各個平臺的目標(biāo)代碼。Skip的工作原理基于現(xiàn)代編程語言的相似性,通過將Swift和SwiftUI的代碼轉(zhuǎn)換為Kotlin和Jetpack Compose的代碼,實現(xiàn)跨平臺代碼共享。
主要特點包括:
代碼共享:Skip允許開發(fā)者使用Kotlin(針對Android)和Swift(針對iOS)編寫共享的業(yè)務(wù)邏輯代碼。通過一種輕量級的抽象層,Skip將這些代碼轉(zhuǎn)換為原生平臺的實現(xiàn),從而避免了跨平臺框架常見的性能損耗。
原生UI組件:Skip不引入額外的UI框架,而是直接使用Android的Jetpack Compose和iOS的SwiftUI。這意味著開發(fā)者可以享受到原生UI的高性能和流暢體驗,同時減少學(xué)習(xí)成本。
狀態(tài)管理:Skip提供了一套輕量級的狀態(tài)管理機制,支持在共享代碼中定義和管理應(yīng)用的狀態(tài),并通過高效的同步機制確保狀態(tài)變化能夠?qū)崟r反映到原生UI層。
工具鏈支持:Skip提供了完整的工具鏈支持,包括代碼生成、調(diào)試工具和構(gòu)建腳本,幫助開發(fā)者快速上手并優(yōu)化開發(fā)流程。
實際運行效果:不僅邏輯部分可共享,UI部分也可以做到一碼雙端。
二、Skip的使用方法
2.1 環(huán)境搭建
Skip的環(huán)境初始化配置非常簡單:
1)安裝Kotlin和Swift開發(fā)環(huán)境
2)通過Homebrew安裝Skip CLI工具:
brew install skip-dev/tap/skip
3)初始化一個新的Skip項目:
skip init MyApp
2.2 編寫共享代碼
在Skip項目中,共享代碼位于shared目錄下。開發(fā)者可以使用Kotlin或Swift編寫業(yè)務(wù)邏輯,例如網(wǎng)絡(luò)請求、數(shù)據(jù)存儲等。
class MyApp {
fun greet(): String {
return "Hello, Skip!"
}
}
2.3 實現(xiàn)原生UI
在Android和iOS項目中,分別使用Jetpack Compose和SwiftUI實現(xiàn)UI層,并調(diào)用共享邏輯代碼。
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 !SKIP
public 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) }
}
}
}
}
@Composable
internal 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 構(gòu)建和運行
使用Skip CLI工具構(gòu)建并運行項目:
skip build
skip run
2.5 調(diào)試工具
Skip基于Swift語言生成Kotlin和Jetpack Compose的代碼產(chǎn)物,因此調(diào)試沿用iOS和Android的開發(fā)工具,即Xcode和Android Studio。這相較于其他跨端框架對移動端原生開發(fā)者非常友好,尤其對于KMP的開發(fā)者。
三、與其他跨端技術(shù)的對比
3.1 技術(shù)對比
Skip與Flutter、React Native、Kotlin Multiplatform和Compose Multiplatform的詳細(xì)對比:
3.2 Binary Size對比
以Release版本驗證數(shù)據(jù)對比,Skip的生成產(chǎn)物體積最小,非常適合對安裝包大小敏感的應(yīng)用場景。
3.3 運行性能Benchmark對比
Skip在UI渲染性能、啟動時間和內(nèi)存占用方面表現(xiàn)出色,相較于其他跨端框架具有顯著優(yōu)勢。
官方對比數(shù)據(jù),對使用Skip進行iOS和Android雙平臺開發(fā)與其他一些主流跨平臺應(yīng)用程序構(gòu)建方案進行比較。
各種主流跨平臺開發(fā)框架的底層技術(shù)方案:
四、Skip Demo工程結(jié)構(gòu)分析
Skip的工程大致可分為以下四大模塊:
- Shared Module:包含共享的業(yè)務(wù)邏輯代碼,使用Kotlin或Swift編寫。
- Android Module:使用Jetpack Compose實現(xiàn)UI層,并調(diào)用共享代碼。
- iOS Module:使用SwiftUI實現(xiàn)UI層,并調(diào)用共享代碼。
- Skip Toolchain:提供代碼生成、構(gòu)建和調(diào)試支持。
SkipDemo實際工程結(jié)構(gòu)如圖:
Xcode對SkipDemo工程編譯生成的Android源碼和依賴都在skipstone文件夾下,開發(fā)人員編寫的代碼轉(zhuǎn)譯產(chǎn)物在SkipDemo中,其依賴項和其同級,此代碼可以單獨用AS直接打開運行。具體如下:
針對SkipDemo,也可直接通過Xcode來運行,這是因為在初始化SkipDemo項目時,工程配置中已經(jīng)包含了構(gòu)建和運行Android的腳本。
生成的Android工程分析
Android入口外殼app工程,在Activity的onCreate中,通過Compose的標(biāo)準(zhǔn)方式setContent來構(gòu)建視圖。關(guān)鍵點在于,SwiftUI使用對象作為界面元素,而Jetpack Compose需要將界面元素轉(zhuǎn)換為@Composable函數(shù)。
實現(xiàn)策略詳見:Skip UI Implementation Strategy
在轉(zhuǎn)換代碼中,SwiftUI的每個View都有一個body,這里返回的是SwiftUI的頁面元素,轉(zhuǎn)換之后需要提供的是可以調(diào)用的@Composable函數(shù),這里包裝了一層ComposeBuilder用于執(zhí)行Compose方法返回@Composable函數(shù)的結(jié)果用于展示。
SwiftUI轉(zhuǎn)Compose的示例:
SwiftUI
struct V: View {
let isHello: Bool
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的工作原理:
以skip-ui中EmptyView的分析:
轉(zhuǎn)換器通過SKIP的宏定義,通過判斷此宏定義來分離Kotlin還是Swift。SKIP包圍的是Kotlin的代碼,非SKIP的就是專屬Swift的代碼,同時有些關(guān)鍵字的替換,如Swift的構(gòu)造方法init在轉(zhuǎn)換后的代碼中就是constructor等。具體如下:
五、Skip內(nèi)部模塊
Skip的核心框架涵蓋了從基礎(chǔ)功能(如狀態(tài)管理、UI渲染)到高級特性(如藍(lán)牙支持、Firebase集成)的多個模塊,為開發(fā)者提供了全面的跨平臺開發(fā)支持。
核心框架
- skip-unit
- skip-lib
- skip-foundation
- skip-model
- skip-ui
- skip-fuse
- skip-fuse-ui
額外框架
- skip-bluetooth
- skip-device
- skip-ffi
- skip-firebase
- skip-keychain
- skip-kit
- skip-motion
- skip-script
- skip-sql
- skip-web
- skip-zip
- skip-bridge
詳見Skip模塊
六、使用Skip的注意事項
平臺差異處理:由于Skip直接使用原生UI組件,開發(fā)者需要處理Android和iOS平臺的差異,例如導(dǎo)航欄、手勢等。
狀態(tài)管理:Skip的狀態(tài)管理機制較為簡潔,但在復(fù)雜場景下可能需要引入額外的狀態(tài)管理庫。
生態(tài)系統(tǒng):Skip目前仍處于初期階段,生態(tài)系統(tǒng)和社區(qū)支持相對較弱,開發(fā)者可能需要自行解決一些問題。
調(diào)試工具:Skip的調(diào)試工具目前主要依賴Android Studio和Xcode,開發(fā)者可以利用這些成熟的工具進行調(diào)試。
七、總結(jié)
Skip作為一款新興的跨端開發(fā)框架和工具,以其原生優(yōu)先的設(shè)計理念和簡潔的開發(fā)體驗,為開發(fā)者提供了一種全新的選擇。盡管其在生態(tài)系統(tǒng)和社區(qū)支持方面仍有待完善,但其在高性能和原生體驗方面的優(yōu)勢,已經(jīng)吸引了越來越多的開發(fā)者關(guān)注。
核心框架涵蓋了從基礎(chǔ)功能到高級特性的多個模塊,為開發(fā)者提供了全面的跨平臺開發(fā)支持。通過合理使用這些框架,開發(fā)者可以高效地實現(xiàn)跨平臺應(yīng)用的開發(fā),同時享受原生優(yōu)先的性能和體驗。希望本文能幫助你更好地理解和使用Skip工具。
最后展望一下,通過Skip的代碼轉(zhuǎn)換能力,適配HarmonyOS Next也具備較高的可行性。