Do you want to optimize your app
development with a single code base? While maintaining the native feel? Discover Kotlin Multiplatform and Compose
Multiplatform with me and learn how to develop an Android
and iOS app from one code base. Hey guys, my name is Yanneck Reiß, I hope you're doing well
and I welcome you to a new video. If you're familiar with mobile
app development or also cross-platform frameworks, you probably already
heard about frameworks like Flutter, React Native, or Xamarin. When it comes to developing
mobile apps and react native, for example, you have the option of using either
JavaScript or TypeScript having this option is particularly
beneficial for web developers as they can easily transition to mobile app
development without the hassle of learning to entire native frameworks,
as well as two distinct program languages. At the end, all cross-platform frameworks from React Native to Flutter
share a common approach. Rather than relying on native toolkits
from Google and Apple, they enable us to build Android and iOS apps from a single code base. However, in the recent years,
a new star has emerged in the world of cross-platform frameworks. I'm talking about Kotlin Multiplatform. While the framework has gained popularity
in the past two years, its initial release
for sharing between the JVM and JavaScript dates back to 2017. Since then, the platform
which was developed by JetBrains, has entered beta status and is on the
cusp of first stable release. Just as a small correction from the off. Meanwhile, after the recording Kotlin
Multiplatform went stable. When it comes to mobile app development
Kotlin Multiplatform allows us
to write our business logic in Kotlin and distribute it as auto generated
platform code to Android or iOS modules. This approach sets it apart from other cross-platform
frameworks we mentioned earlier. Instead of sharing all the code, we're not
confined to a cross-platform UI toolkit. With this approach, we can utilize native
UI toolkits and native platform APIs as if we were developing a native
mobile app. Sounds good, right? But is it really worth the extra effort
when we can achieve everything in one single corpus
using Flutter, for example? The answer, as you might expected,
depends on the use case. But don't click away just yet. There is another approach that can enhance
the power of Kotlin Multiplatform. Let me introduce you
to Compose Multiplatform. It builds up on Kotlin Multiplatform and expands
the hybrid approach we discussed earlier into a fully functional cross-platform
framework. Compose Multiplatform enables us
not only to share the business logic of applications
like within a barebones KMP project, but also to share the user interface
in one code base. And if you're already familiar
with Android's Jetpack Compose, you’ll feel right at home,
because the API remains the same. Therefore Compose Multiplatform might
also is interesting for you if you haven't touched iOS development yet,
but always wanted to bring an app to not only the Android ecosystem
but also to iOS. To start,
let's take a look at a practical example. And to do so we can go to the Compose
Multiplatform website here and then we click on Get Started
and we will be redirected to the GitHub page or the GitHub
repository of Compose Multiplatform. And now,
because we want to build an iOS app, of course there are also other options. So you can also develop a desktop app
or even a web app. If you use Kotlin Multiplatform, just as I said, we want to choose here iOS
and then you can see that you will land
on a template repository here. So it says compose multiplatform
iOS Android template. And to start a new project, we can just
make use of this template here. So a lot of stuff
will be already set up for us. So just click on use this template, then create a new repository. And here we can say, um. Simple project. Hmm. Compose
multiple shot form, for example. And then I will just use
a private repository here and that's can see
the repository gets generated for us. And now I have here my new private repository. And the next step,
of course, is to check out the repository in Android Studio. When you have successfully launched
your project to your operating system and open it up in Android studio,
you should see this structure here. And the first thing we want to do
is to switch from the Android view
here to the project view. So let's have a deeper
look at this project structure because it's a good thing to know
what you're working with at the end. So we have three important modules here. One is the Android app,
and here you can see you have a non structure
for an Android app. Then you also have an iOS app
which for example, contains here and Xcode project
and the regular configurations. So you could just open this up in Xcode and then you also have this shared module
and this shared module, on the other hand, once again
contains a folder or module for Android one files
and one common module. So an if you're implementing business
logic in this hybrid approach we talked about,
you would implement all your code here in this common main
and then you could exit in. Yeah, imagine it like a library inside the iOS app and also the Android app. So you would access it in your regular
native platform called in the Android app, of course you would have Kotlin Corp
and in the iOS app. On the other hand,
you would have Objective-C called, which compiles from this chat called So
but what if we have called that doesn't act
the same on both platforms. What do we do in this case? For this case, we can make use of the expected actual pattern, and this pattern works
like essentially like an interface. So you would define here, for example, get platform
from them saw on Android that should be Android
and on is that should be iOS. And then in our Android main module here we just say the actual implementation is Android and on the inside of course we have you is inside those modules here you can access also native platform code So if you want to implement, for example, receiving the location of the app
or something like that, you could access those native code here
in both of these modules, however, you will make a lot of use of this
if you're using this hybrid approach and implement
your UI in these native modules. So if you native platform tooling,
in our case, we want to implement a fully cross
functional mobile app. So we want to use Kotlin Multiplatform. And how can we do that? Now, because we checked out the Compose
Multiplatform template. This project is already set up for that
and you might already got a sneak peek
here and let's go into this `app.kt`. And if we take a look at this code here and somewhere in your last year or month of mobile app development,
you stumbled about Jetpack Compose. This should be familiar to you because you have here a Material Theme. You have this. Remember mutable state of and also
the column layout modifiers and so on. So it's essentially really the same
like in Android Jetpack compose, which is cool
because you could, for example copy layouts from your Android app
right into this compose might go from cut. Of course not all of it would work,
but at least most of the parts. And let's have a quick
look how this actually gets invoked. So because this is just the regular yeah Composable here let's see where this composable gets invoked and hmm as we see one invocation lies here
in the Android platform code and. Mm hmm. The other one in the iOS model here and this main view controller. Hmm. Where could it be invoked? So let's see, huh? Main iOS content view. Swift
Ah, it gets invoked in our Swift code So when the iOS app, for example, starts,
it creates the UI based on this menu controller
and that is how our compose multiplatform code
gets visible on our iOS app. And if we quickly go here into the main
activity of our Android code, we can see that we also use here
the main view, which refers to the composable of
or Compose Multiplatform code. So once again here also it gets invoked
by a regular platform function. So under the hood it's still this hybrid
approach that you still have in Native and what app and also native is app. And then we invoke this Compose
Multiplatform code, which gets written once in this common
main module. So let's see if this actually works. So I start here, a new Android
emulator instance, and then if I go here on the all
configurations, you can already see that this also an iOS app
and I would try to stop that from here. Also from a note studio. No, after successfully building our app
for iOS and Android, we can see here
two emulators. One is the iOS emulator and iPhone 11 Pro and also a foldable device,
which is Android 11 later. So now I can just
click on the button here. And as you can see, we see a yeah, jetpack
compose or compose multi-platform logo and the same also goes
for the Android simulator. So we achieve the exact same behavior
with solely Kotlin and the same platform, specifically,
but it's essentially a fully cross-platform app
just developed with Kotlin. And the cool thing here
is really that we can use Jetpack Compose for all of that. A quick disclaimer At this point,
you cannot build an iOS app without owning an MacOS device. Currently here I'm running this
on the MacBook, so I have here MacOS and that's why I'm also able
to build this app on my device. But if you owning, for example, Windows,
unfortunately you can only boot an Android app. So in this video
we talked about the foundation of Kotlin Multiplatform and Compose Multiplatform
by the example of template project. This video lays the foundation
for my first series of videos on cross-platform development
with KMP and compose multiplatform. In this series, I will guide you through
the everyday tasks you will face when developing a mobile app
from state management with a KMP library called Voyager to, introducing a database with SQLDelight
to network requests with Ktor
and also dependency injection with Koin. And finally how to write unit tests for
our cross-platform calls with unit tests. So if you are interested in this topic,
make sure to like and subscribe and don't forget to activate
the notification bell so you don't miss the next parts of this video series. I hope you had some takeaway
and I hope to see you soon.
