《【范圣佑】以 Kotlin Multiplatform 打造多平台应用.pdf》由会员分享,可在线阅读,更多相关《【范圣佑】以 Kotlin Multiplatform 打造多平台应用.pdf(50页珍藏版)》请在三个皮匠报告上搜索。
1、以 otlin Multiplatform范圣佑JetBrains 技术布道师打造多平台应用JetBrains 技术布道师 负责 IDE 产品及 Kotlin 语言推广 协助 Kotlin 社区生态范圣佑多平台开发痛点 各种型式的前端多平台开发痛点 各种型式的前端 需要适应多种开发語多平台开发痛点 各种型式的前端 需要适应多种开发語 重复的实现DTOValidationServiceHTTP01Kotlin 多平台Kotlin 发展史2016Kotlin 1.0 正式发布2019Google I/O 宣布 Android 开发 优先支持 Kotlin2022发布 Kotlin 1.72023发
2、布 Kotlin 1.8一眼看透 10 年历程General-purpose Static typing OOP+FP Open Source(Apache 2.0)2011JetBrains 正式公布 Kotlin 编程语言2017Google I/O 宣布 支持以 Kotlin 开发 Android AKotlin 编译器Kotlin 多平台ServerKotlin/JVMWebKotlin/JSDesktopKotlin/JVMAndroidKotlin/JVMiOSKotlin/N共享业务代码Compose 发展史2020JetBrains 开始将 Compose 转成 Multipl
3、atform从 Android 到 多平台2017Google I/O 宣布 支持以 Kotlin 开发 Android App2017Google 开始研发 Jetpack Compose 2019Google I/O 宣布 Android 开发 优先支持 Kotlin2021发布 Jetpack Compose 1.0 版2021发布 Compose Multiplatform 1.0 版多平台共享02以 实现多平台开发环境kdoctor可通过 Homebrew 安装的命令行,用于检查开发环境是否符合 Kotlin Multiplatform Mobile 的要求。Compose Mult
4、iplatform 项目模板项目结构 androidApp iosApp desktopApp shared-commonMain-androidMain-iosMain-desktopMain 先从 Mobile UI 开始Shared UI共用 UI 代码Composablefun App()PreviewComposablefun PrevewApp()App()图片Compose 组件Composable fun App()Image(painterResource(.),.)文本框Compose 组件Composable fun App()val username=remember
5、mutableStateOf(.)val password=remember mutableStateOf(.)TextField(label=Text(text=Username),value=username.value,onValueChange=username.value=it)TextField(label=Text(text=Password),value=password.value,visualTransformation=PasswordVisualTransformation(),keyboardOptions=KeyboardOptions(keyboardType=K
6、eyboardType.Password ),onValueChange=password.value=it)按钮Compose 组件Composable fun App()Button(onClick=/.,shape=RoundedCornerShape(50.dp),modifier=Modifier.fillMaxWidth().height(50.dp)Text(text=Login)布局Compose 组件Composable fun App()Column(modifier=Modifier.padding(20.dp),verticalArrangement=Arrangeme
7、nt.Center,horizontalAlignment=Alignment.CenterHorizontally )Spacer(modifier=Modifier.height(20.dp)Box(modifier=Modifier.padding(40.dp,0.dp,40.dp,0.dp)/实现 Dekstop UIDesktop UIUI 代码进入点fun main()=application Window(onCloseRequest=:exitApplication,title=.,state=WindowState(size=DpSize(.,.),position=Wind
8、owPosition.Aligned(.),)/共享部份代码依不同平台实现合适的 UIfun main()=application Window(/.)Row Column /.Column /多平台共享Ktor 框架ServerClient语法简单 轻量 适合微服务开发HTTP Client 持多平台 可搭配 kotlinx.serialization 做序列化安装依赖Kotlin 多平台库kotlin sourceSets val commonMain by getting dependencies implementation(io.ktor:ktor-client-core:2.3.1
9、)implementation(org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.1)implementation(io.ktor:ktor-client-content-negotiation:2.3.1)implementation(io.ktor:ktor-serialization-kotlinx-json:2.3.1)val androidMain by getting dependencies implementation(io.ktor:ktor-client-okhttp:2.3.1)val iosMain by creatin
10、g dependencies implementation(io.ktor:ktor-client-darwin:2.3.1)val desktopMain by getting dependencies implementation(io.ktor:ktor-client-java:2.3.1)implementation(org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.7.1)实现 HTTP Client以 Ktor Client 实现class AuthClient private val urlString:String=.privat
11、e val httpClient=HttpClient install(ContentNegotiation)json()defaultRequest url(urlString)expectSuccess=true suspend fun login(request:LoginReq):LoginRes=httpClient.post(.)setBody(loginReq)contentType(ContentType.Application.Json).body()发送 HTTP Request与后端交换数据Composable fun App()val appViewModel=AppV
12、iewModel()val client=AuthClient()MaterialTheme /.appViewModel.viewModelScope.launch val response=client.login(.)/./实现后端 API共用数据结构前后端共享代码Serializable data class LoginReq(val username:String,val password:String,)Serializable data class LoginRes(val result:Boolean,val message:String,)Ktor Server后端代码进入点
13、fun main()embeddedServer(Netty,port=8080,host=0.0.0.0)install(ContentNegotiation)json()/Ktor plugins configureLogin().start(wait=true)实现后端 API以 Ktor Server 实现fun Application.configureLogin()routing post(.)/接收 HTTP Request /反序列成 Data Class val req=call.receive()/登录验证代码 /返回 HTTP Response call.respond(
14、LoginRes(result=.,message=.)优势与对比Kotlin Multiplatform 优势 个语跨多平台Kotlin Multiplatform 优势 个语跨多平台 原的性能Kotlin Multiplatform 优势 个语跨多平台 原的性能 平台间可共享部份或全部代码Kotlin Multiplatform 优势 个语跨多平台 原的性能 平台间可共享部份或全部代码 逐渐完善的多平台态方案对比成功故事#5 手機開發編年史(携程)來自阿里巴巴及美团的 Kotlin Multiplatform 應用案例#8Kotlin 炉边漫谈播客https:/podcast.kotlin
15、.tips/Compose for Web?用 Compose 写网页以 Compose for Web 实现fun main()var count:Int by mutableStateOf(0)renderComposable(rootElementId=root)Div(style padding(25.px)Button(attrs=onClick count-=1 )Text(-)Span(style padding(15.px)Text($count)Button(attrs=onClick count+=1 )Text(+)04学习资源延伸学习材料Kotlin Multiplatform 官方页面Compose Multiplatform 官方页面Compose Multiplatform 官方示例KotlinConf23 视频合集Kotlin 开发者 微信公众号THANKS范圣佑JetBrains 技术布道师