Fast Prototypes using Kotlin_Native (and Flutter)

Presented at Informal get-together of Kotlin developers in Berlin

https://www.meetup.com/kotlin-berlin/events/tvhffpyzcbwb/

Transcript

1. Fast Prototypes using Kotlin/Native (and Flutter) Ayelen Chavez, JB Lorenzo Jan 17, 2019
2. Agenda • Who are we • Our story: what problem do I want to solve • Tools we used • The code! • Recap • Q&A
3. Who we are...
4. We fuel local economies by making it super easy for anyone to buy or sell almost anything through our platforms
5. We operate a network of market-leading trading platforms in over 40 countries that are used by more than 350 million people every month
7. Mana ger Mobi Mobi Mobi Ayelen Chavez Rem Cruz Cristiano Madeira JB Lorenzo
8. Once upon a time...
9. Once upon a time… This is a story about how we made the OLX Group Product & Tech Conference app in record time.
10. • We were only 4 engineers (or 3 and a half) • We had our ambitious priorities for the quarter • We didn't have much spare time • The VP of Engineer asked us to help with a new app
11. • We were only 4 engineers (or 3 and a half) • We had our ambitious priorities for the quarter • We didn't have much spare time • The VP of Engineer asked us to help with a new app
12. • We were only 4 engineers (or 3 and a half) • We had our ambitious priorities for the quarter • We didn't have much spare time • The VP of Engineer asked us to help with a new app
13. • We were only 4 engineers (or 3 and a half) • We had our ambitious priorities for the quarter • We didn't have much spare time • The VP of Engineer asked us to help with a new app
14. Spoiler Alert! We built an app in 10 days
16. Before we start...
17. We needed a backend
18. We needed a backend
22. We needed a UI/UX
23. We needed a UI/UX Super hero Karen Banzon
24. We needed a UI/UX Super hero Karen Banzon Material Theme Editor in Sketch
26. Shared UI and Model
27. Flutter & Kotlin/Native Shared UI/UX
28. Flutter & Kotlin/Native Shared UI/UX Shared Model
32. // GetSchedulesUseCase.kt class GetSchedulesUseCase(val repository: ConferenceRepository): UseCase<T, Input> { private val noFavoriteKeywords = listOf("coffee break", "lunch") override var disposeBag: Disposal = emptyArray<CancellableType>().toMutableList() override fun buildUseCaseObservable(params: Input): Observable<T> { return create { o -> FetchConferenceUseCase(repository).execute(Observer(onNext = { var schedules = emptyList<Map<String, String>>().toMutableList() it.talks.forEach { schedules.add(mapOf(...)) } o.onNext(schedules) }, onError = { o.onError(it) }), Unit)
33. // GetSchedulesUseCase.kt class GetSchedulesUseCase(val repository: ConferenceRepository): UseCase<T, Input> { private val noFavoriteKeywords = listOf("coffee break", "lunch") override var disposeBag: Disposal = emptyArray<CancellableType>().toMutableList() override fun buildUseCaseObservable(params: Input): Observable<T> { return create { o -> FetchConferenceUseCase(repository).execute(Observer(onNext = { var schedules = emptyList<Map<String, String>>().toMutableList() it.talks.forEach { schedules.add(mapOf(...)) } o.onNext(schedules) }, onError = { o.onError(it) }), Unit)
34. // GetSchedulesUseCase.kt class GetSchedulesUseCase(val repository: ConferenceRepository): UseCase<T, Input> { private val noFavoriteKeywords = listOf("coffee break", "lunch") override var disposeBag: Disposal = emptyArray<CancellableType>().toMutableList() override fun buildUseCaseObservable(params: Input): Observable<T> { return create { o -> FetchConferenceUseCase(repository).execute(Observer(onNext = { var schedules = emptyList<Map<String, String>>().toMutableList() it.talks.forEach { schedules.add(mapOf(...)) } o.onNext(schedules) }, onError = { o.onError(it) }), Unit)
35. // GetSchedulesUseCase.kt class GetSchedulesUseCase(val repository: ConferenceRepository): UseCase<T, Input> { private val noFavoriteKeywords = listOf("coffee break", "lunch") override var disposeBag: Disposal = emptyArray<CancellableType>().toMutableList() override fun buildUseCaseObservable(params: Input): Observable<T> { return create { o -> FetchConferenceUseCase(repository).execute(Observer(onNext = { var schedules = emptyList<Map<String, String>>().toMutableList() it.talks.forEach { schedules.add(mapOf(...)) } o.onNext(schedules) }, onError = { o.onError(it) }), Unit)
38. // MainActivity.kt import com.olxgroup.olxconf.domain.GetSchedulesUseCase val schedulesUseCase = GetSchedulesUseCase(repository) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> when (call.method) { "getSchedules" -> getSchedules(result) "getSpeakers" -> getSpeakers(result) "getInfo" -> getInfo(result) "launchMap" -> launchMap(result, call) } }
39. // MainActivity.kt import com.olxgroup.olxconf.domain.GetSchedulesUseCase val schedulesUseCase = GetSchedulesUseCase(repository) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> when (call.method) { "getSchedules" -> getSchedules(result) "getSpeakers" -> getSpeakers(result) "getInfo" -> getInfo(result) "launchMap" -> launchMap(result, call) } }
40. // MainActivity.kt import com.olxgroup.olxconf.domain.GetSchedulesUseCase val schedulesUseCase = GetSchedulesUseCase(repository) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> when (call.method) { "getSchedules" -> getSchedules(result) "getSpeakers" -> getSpeakers(result) "getInfo" -> getInfo(result) "launchMap" -> launchMap(result, call) } }
41. // MainActivity.kt import com.olxgroup.olxconf.domain.GetSchedulesUseCase val schedulesUseCase = GetSchedulesUseCase(repository) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> when (call.method) { "getSchedules" -> getSchedules(result) "getSpeakers" -> getSpeakers(result) "getInfo" -> getInfo(result) "launchMap" -> launchMap(result, call) } }
44. // AppDelegate.swift import OLXConfFramework let channel = FlutterMethodChannel.init(name: "/api", binaryMessenger: controller) channel.setMethodCallHandler({ (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in if call.method == "getSchedules" { self.getSchedules(result) } else if call.method == "getSpeakers" { self.getSpeakers(result) } else if call.method == "getInfo" { self.getInfo(result) } else if call.method == "launchMap" { self.launchMap(call, result) } });
45. // AppDelegate.swift import OLXConfFramework let channel = FlutterMethodChannel.init(name: "/api", binaryMessenger: controller) channel.setMethodCallHandler({ (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in if call.method == "getSchedules" { self.getSchedules(result) } else if call.method == "getSpeakers" { self.getSpeakers(result) } else if call.method == "getInfo" { self.getInfo(result) } else if call.method == "launchMap" { self.launchMap(call, result) } });
46. // AppDelegate.swift import OLXConfFramework let channel = FlutterMethodChannel.init(name: "/api", binaryMessenger: controller) channel.setMethodCallHandler({ (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in if call.method == "getSchedules" { self.getSchedules(result) } else if call.method == "getSpeakers" { self.getSpeakers(result) } else if call.method == "getInfo" { self.getInfo(result) } else if call.method == "launchMap" { self.launchMap(call, result) } });
47. // AppDelegate.swift import OLXConfFramework let channel = FlutterMethodChannel.init(name: "/api", binaryMessenger: controller) channel.setMethodCallHandler({ (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in if call.method == "getSchedules" { self.getSchedules(result) } else if call.method == "getSpeakers" { self.getSpeakers(result) } else if call.method == "getInfo" { self.getInfo(result) } else if call.method == "launchMap" { self.launchMap(call, result) } });
50. // data_schedule.dart static const platform = const MethodChannel('/api'); final List<dynamic> result = await platform.invokeMethod('getSchedules');
51. // data_schedule.dart static const platform = const MethodChannel('/api'); final List<dynamic> result = await platform.invokeMethod('getSchedules');
52. // data_schedule.dart static const platform = const MethodChannel('/api'); final List<dynamic> result = await platform.invokeMethod('getSchedules');
53. Connecting Flutter with the external world
55. Common Model
56. Common Model Android Module iOS Module
57. Common Model Android Module iOS Module Common UI/UX
58. Recap...
59. Pitfalls
60. • Packing and Unpacking • Companion in Swift • arm32 • JVM libraries
61. • Packing and Unpacking • Companion in Swift • arm32 • JVM libraries
62. • Packing and Unpacking • Companion in Swift • arm32 • JVM libraries
63. • Packing and Unpacking • Companion in Swift • arm32 • JVM libraries
64. Takeaways
65. • Flutter is awesome for fast prototypes • Flutter and Kotlin/Native are still in beta but is usable already though with some limitations • Kotlin/Native works well to reduce the amount of platform specific code • Some glue code needs to be written to pass around/serialize objects • Don’t be afraid to try out new technologies (but …)
66. • Flutter is awesome for fast prototypes • Flutter and Kotlin/Native are still in beta but is usable already though with some limitations • Kotlin/Native works well to reduce the amount of platform specific code • Some glue code needs to be written to pass around/serialize objects • Don’t be afraid to try out new technologies (but …)
67. • Flutter is awesome for fast prototypes • Flutter and Kotlin/Native are still in beta but is usable already though with some limitations • Kotlin/Native works well to reduce the amount of platform specific code • Some glue code needs to be written to pass around/serialize objects • Don’t be afraid to try out new technologies (but …)
68. • Flutter is awesome for fast prototypes • Flutter and Kotlin/Native are still in beta but is usable already though with some limitations • Kotlin/Native works well to reduce the amount of platform specific code • Some glue code needs to be written to pass around/serialize objects • Don’t be afraid to try out new technologies (but …)
69. • Flutter is awesome for fast prototypes • Flutter and Kotlin/Native are still in beta but is usable already though with some limitations • Kotlin/Native works well to reduce the amount of platform specific code • Some glue code needs to be written to pass around/serialize objects • Don’t be afraid to try out new technologies (but …)
70. Questions Email: jb.lorenzo@olx.com and ayelen.chavez@olx.com We are hiring: joinolx.com Medium post: http://bit.ly/kotlin_flutter