Kotlin/Native + Flutter for mobile application development

Use Kotlin/Native and Flutter to develop iOS/Android applications.
Kotlin/Native used for multiplatform business logic and data layers.
Flutter used for multiplatform UI.

Transcript

1. Kotlin/Native + Flutter (Weird mobile application development) Kotlin Lviv User Group 27/08/2019 Senior Android SE at Vakoms, Taras Teslyuk
2. Who am I? • Android Maintainer at PLLUG Community • Ph.D. in Computer Science • Assistant at Lviv Polytechnic National University • Business manager at TetaLab • Senior Android SE at Vakoms • 6 years experience in Android development Interested in Music, Travelling, Science fiction.
3. Agenda • Kotlin/Native • Flutter • Kotter? Flutlin? • Project setup • K/N Flutter communication • Additional dependencies • Data and Business logic layer • Multiplatform UI • Conclusions
4. Kotlin/Native Kotlin/Native is a part of Kotlin Multi Platform project. Kotlin/Native supports the following platforms: • iOS (arm32, arm64, simulator x86_64) • MacOS (x86_64) • Android (arm32, arm64) • Windows (mingw x86_64, x86) • Linux (x86_64, arm32, MIPS, MIPS little endian, Raspberry Pi) • WebAssembly (wasm32) https://kotlinlang.org/docs/reference/native-overview.html
5. Flutter • Flutter is an open-source mobile application development framework created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia. • Flutter apps are written in the Dart language and make use of many of the language's more advanced features. • The major components of Flutter include: • Dart platform • Flutter engine • Foundation library • Design-specific widgets https://en.wikipedia.org/wiki/Flutter_(software)
6. Flutter https://buildflutter.com/how-flutter-works/
7. Flutter https://buildflutter.com/how-flutter-works/
8. Kotlin/Native vs Flutter Kotlin/Native Flutter Known Language + (Kotlin) ~ (Dart) Null Safety/ Synthetic Sugar + ~ Multiplatform code + + Multiplatform UI ~ + Released ~ +
9. Kotlin/Native + Flutter • What if we will try to Collect all benefits from both platforms Kotlin/Native + Flutter Result Known Language + (Kotlin)/ ~ (Dart) + Null Safety/ Synthetic Sugar +/~ + Multiplatform code +/+ + Multiplatform UI ~/+ + Released ~/+ +
10. How to name it?
11. Lets call it Kotter
12. Step1: Project setup 1. Setup Flutter SDK 2. Install Flutter & Dart plugins for Android Studio 3. Create new Flutter project in Android Studio (Create new Flutter project) 4. Open project in Android Studio 5. Add Android dependencies for Kotlin/Native 6. Add iOS dependencies for Kotlin/Native
13. Create new Flutter project
14. Create new Flutter project
15. Create new Flutter project
16. Create new Flutter project
17. Flutter Project structure
18. Kotlin/Native Project structure
19. Integrate Kotlin/Native Android part 1. Create new Library Module (common) 2. Modify files: a. /android/settings.gradle b. /android/build.gradle c. /android/app/build.gradle d. common/build.gradle
20. Integrate Kotlin/Native iOS part 1. cd android 2. ./gradlew :common:build 3. cd \"$SRCROOT/../build/common/xcode-frameworks\" 4. ./gradlew :common:packForXCode -PXCODE_CONFIGURATION=${CONFIGURATION}
21. Integrate Kotlin/Native iOS part
22. Integrate Kotlin/Native iOS part
23. Step2: It is time to talk
24. Flutter Method Channels https://flutter.dev/docs/development/platform-integration/platform-channels
25. Step 2a: Invoke Native Methods from Flutter • Register MethodChannel at: ◦ Flutter - use it to call events and receive response ◦ Android native - use it to receive calls ◦ iOS native - use it to receive calls ◦ Common - process method calls and prepare response
26. First results
27. Step 2b: Invoke Flutter Methods from K/N • Use MethodChannel for: ◦ Flutter - use it to receive events and process response ◦ Android native - use it to forward calls ◦ iOS native - use it to forward calls ◦ Common - generate method calls and prepare input parameters
28. Second results
29. Step 3: Add dependencies
30. Everything!
31. Add Kotlin/Native dependencies • KTor ◦ Http ◦ Json ◦ serialization • Kotlin Coroutines
32. Common module dependencies
33. iOS module framework compilation Use next script to be able to compile iOS Framework project • ./gradlew :common:build
34. Third result
35. Step 4: It is time for a final move
36. Kotlin/Native + Flutter • Lets use MVP architecture pattern. In that case: • Kotlin/Native will be responsible for: ◦ business logic ◦ data layer • Android platform specific: ◦ Communication bridge • iOS platform specific: ◦ Communication bridge • Flutter will be responsible for: ◦ multiplatform UI ◦ Communication bridge
37. System architecture
38. Serializing/Deserializing Data types Dart Android iOS null null nil (NSNull when nested) bool java.lang.Boolean NSNumber numberWithBool: int java.lang.Integer NSNumber numberWithInt: int, if 32 bits not enough java.lang.Long NSNumber numberWithLong: double java.lang.Double NSNumber numberWithDouble: String java.lang.String NSString Uint8List byte[] FlutterStandardTypedData typedDataWithBytes: Int32List int[] FlutterStandardTypedData typedDataWithInt32: Int64List long[] FlutterStandardTypedData typedDataWithInt64: Float64List double[] FlutterStandardTypedData typedDataWithFloat64: List java.util.ArrayList NSArray Map java.util.HashMap NSDictionary https://flutter.dev/docs/development/platform-integration/platform-channels
39. Serializing/Deserializing Complex Data One of the possible solutions is use JSON String. • Kotlin/Native part - pack Object to JSON String: val weatherJson = JSON.stringify(WeatherUI.serializer(), weather) • Flutter part- unpack JSON into required model: Map<String, dynamic> weatherJson = jsonDecode(call.arguments); Weather weather = Weather.fromJson(weatherJson); Same approach can be used for sending complex data from Flutter to K/N.
40. Final result
41. Conclusions • It’s alive! ◦ Difficult to configure ◦ Lack of support ◦ Extra communication/connection logic required ◦ Multiplatform project with shared UI/logic/data • Try Kotlin Native ◦ Don’t use Kotlin native at production for now • Try Flutter ◦ Standalone Flutter is production ready
42. Credits • Flutter ◦ https://flutter.dev/docs/get-started/install/macos • Kotlin Native ◦ https://kotlinlang.org/docs/reference/native-overview.html • jblorenzo: Flutter + Kotlin native template ◦ https://github.com/jblorenzo/flutter-kotlin-native-example ◦ https://appdevcon.nl/session/multiplatform-prototypes-with-flutt er-kotlin-native/ • Florent37: Kotlin native sample ◦ https://github.com/florent37/KotlinNativeSample ◦ https://medium.com/@champigny.florent/my-first-experience-wit h-kotlin-native-988e96f26657
43. Thank you for attention! Any Questions? • Kotlin/Native + Flutter sample: https://github.com/TeslyukTaras/KotlinNative_Flutter_sample • Email: taras.teslyuk@gmail.com