Kotlin vs NativeScript vs Flutter - Building the same app in all platforms

Slide 1

Slide 1 text

WHAT DID I LEARN? I BUILT THE EXACT SAME APP IN KOTLIN, NATIVESCRIPT AND FLUTTER

Slide 2

Slide 2 text

SO WHAT APP IS THIS ? ▸ “realworld.io" - a project by thinkster (github.com/gothinkster) ▸ A simpliﬁed clone of Medium ▸ Standardised API ▸ We can make backend or frontend using any technology as per the API

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

MY EXPERIENCES WITH THE PLATFORMS FOR CONTEXT - PRIOR EXPERIENCE ▸ Native Android developer since 2011, using Kotlin for > 2 years, multiple popular libraries written ▸ NativeScript - 8-10 months, Vue.js - almost 2 years, author of popular vue libraries ▸ Flutter - Explored once 6 months back, but this is my ﬁrst app in Flutter

Slide 6

Slide 6 text

MY EXPERIENCES WITH THE PLATFORMS WHAT THIS IS NOT . . . ▸ Promotion of any platform. I have tried to be unbiased. ▸ Bashing any platform. Objective facts and numbers here. None of the platforms are ‘bad’. ▸ A deﬁnitive guide to choose. Here lay a few benchmarks. Might help in your choice. Your decision, still, should be driven by use case.

Slide 7

Slide 7 text

DEVELOPER EXPERIENCE

Slide 8

Slide 8 text

I WILL TRADE A FEW CPU CYCLES FOR DEVELOPER CYCLES ANY DAY DHH (Basecamp & Ruby on Rails founder)

Slide 9

Slide 9 text

Available IDEs

Slide 10

Slide 10 text

Available IDEs

Slide 11

Slide 11 text

Available IDEs

Slide 12

Slide 12 text

GETTING STARTED THIS SHOULD BE EXTREMELY EASY

Slide 13

Slide 13 text

GETTING STARTED ▸ Android Studio installation takes care of all required dependencies ▸ Create new project in GUI ▸ Created project works out of the box ▸ Most problems in starting a project have multiple StackOverﬂow answers 13

Slide 14

Slide 14 text

GETTING STARTED ▸ Installing Flutter SDK has command-line steps ▸ ﬂutter doctor command to check installation success (not 100% reliable) ▸ GUI-based steps to create project in Android Studio ▸ Created project works out of the box 14

Slide 15

Slide 15 text

GETTING STARTED ▸ Installing nativescript-cli has command-line steps ▸ tns doctor command to check installation success (not 100% reliable) ▸ CLI-based step to init starter template. Multiple starter templates - can be confusing ▸ Created project may not work out of the box. Circuitous dependency resolution in starter template too 15

Slide 16

Slide 16 text

LANGUAGES

Slide 17

Slide 17 text

LANGUAGES MORE SIMILAR THAN YOU THINK ▸ Differences in implementations, practices, common patterns, internal mechanisms ▸ On the surface, modern multi-platform languages have very similar syntax and features

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

VARIABLES

Slide 20

Slide 20 text

ARRAYS

Slide 21

Slide 21 text

MAPS

Slide 22

Slide 22 text

ARRAY - MAP - STREAM

Slide 23

Slide 23 text

CLASSES

Slide 24

Slide 24 text

INTERFACES

Slide 25

Slide 25 text

TUPLE RETURN

Slide 26

Slide 26 text

DOWNCASTING

Slide 27

Slide 27 text

DESIGN PATTERNS IT HELPS TO HAVE WELL-ESTABLISHED

Slide 28

Slide 28 text

DESIGN PATTERNS KOTLIN (NATIVE ANDROID) ▸ All 3 - MVP, MVC and MVVM well deﬁned and documented ▸ MVC: Conventional (and easy to get started) ▸ Modern Android Architecture Components - focus on MVVM ▸ ReactiveX available via RxJava, RxAndroid and RxKotlin 28

Slide 29

Slide 29 text

DESIGN PATTERNS NATIVESCRIPT (WITH ANGULAR OR VUE) ▸ Angular - Component based (sort of MVC) but can by Reactive is using RxJS ▸ Vue - MVVM, can be Reactive if using vuex- rxjs ▸ Flux-like state management via vuex available in Vue 29

Slide 30

Slide 30 text

DESIGN PATTERNS FLUTTER ▸ No ofﬁcially documented/endorsed design pattern ▸ Unofﬁcial MVC and MVVM-like examples available ▸ Business Logic Component (BLoC) pattern getting popular 30

Slide 31

Slide 31 text

COMMON TOOLS GOOD TO HAVE

Slide 32

Slide 32 text

DRAG/DROP GUI EDITOR Yes - fully featured No No - partial support via 3rd party tools

Slide 33

Slide 33 text

BREAKPOINT DEBUGGING Yes - fully integrated with Android Studio No - very limited support, socket connection breaks Yes - via Android studio but not 100% reliable

Slide 34

Slide 34 text

HOT RELOAD Partial - currently opened activity refreshes. Also slow Yes - Recently released, Webpack HMR based. Buggy sometimes Yes - rock solid

Slide 35

Slide 35 text

TESTING FRAMEWORKS Well Supported - JUnit for unit test and Espresso for UI test ??? - Can use Vue/ Angular usual mechanisms, but not well documented Well Supported - Separate unit and UI test methods not needed

Slide 36

Slide 36 text

DATA (DE)SERIALIZATION AT RUNTIME Yes - Gson, Jackson, FasterXML. Also data class generators available Yes - Not needed for JSON , XML libraries exist No - Not possible without reﬂection. Need data classes pre- generated.

Slide 37

Slide 37 text

2-WAY DATA BINDING Kind of - Using LiveData and DataBinding Yes - Vue supports proper 2-way binds with v-model No - Not in usual sense. There is widget-binding

Slide 38

Slide 38 text

FULLY FEATURED ORM Yes - multiple solutions for SQLite and also Realm for object-storage Yes - TypeORM for SQLite No - sqﬂite is kind of ORM but lot of hand- written SQL needed. Not possible because no runtime reﬂection

Slide 39

Slide 39 text

INTEGRATING WITH NATIVE WIDGETS Ofcourse Yes - Might need Kotlin/ Swift knowledge to glue together No - Preliminary support recently dropped, doesn’t work reliably yet Needed to embed Google Maps or WebViews

Slide 40

Slide 40 text

MAINTAINABILITY / UPGRADABILITY Easy (mostly), IDE suggests too except the recent androidx drama 7th circle of Dante’s hell - Not making it up - recreating the project and copying over sources is easier. Very Easy ! - Had surprisingly close to zero issues for such a nascent platform How much of a pain is it to upgrade libraries/runtimes

Slide 41

Slide 41 text

WALK THROUGH THE CODEBASE LET US TAKE A

Slide 42

Slide 42 text

KOTLIN CODEBASE WALKTHROUGH cb.lk/rwappkt

Slide 43

Slide 43 text

NATIVESCRIPT CODEBASE WALKTHROUGH cb.lk/rwappns

Slide 44

Slide 44 text

FLUTTER CODEBASE WALKTHROUGH cb.lk/rwappﬂ

Slide 45

Slide 45 text

BENCHMARKS Raw Numbers

Slide 46

Slide 46 text

App Size (debug) 3.6MB 42MB 16 MB 75MB 73MB

Slide 47

Slide 47 text

App Size (prod) 3.1 MB 5.8 MB 10 MB (per arch) 62MB (2 archs) 70MB (2 archs)

Slide 48

Slide 48 text

Peak CPU Usage 36% 26% 40% 17% 15% 12 threads 4 threads

Slide 49

Slide 49 text

Consistent CPU Usage 6% 14% 10% 4% 12 threads 4 threads 1%

Slide 50

Slide 50 text

Peak Memory Usage 127 MB 160 MB 145 MB 80 MB 35 MB

Slide 51

Slide 51 text

Average Memory Usage 50 MB 90 MB 75 MB 40 MB 30 MB

Slide 52

Slide 52 text

Lines of Code (excluding autogenerated files) 1140 : 640 kt + 500 xml 740 : 470 + 270 json 480 : 230 vue + 150 ts + 100 dts

Slide 53

Slide 53 text

Build Time (cold/clean) 32s 50s 30s 30s 40s

Slide 54

Slide 54 text

Build Time (warm/dirty) 8s 8s 7s 6s 9s

Slide 55

Slide 55 text

Time taken to develop (via wakatime.com stats) 10.5 hrs 8 hrs 8.5 hrs

Slide 56

Slide 56 text

CONCLUSIONS Summarising the facts

Slide 57

Slide 57 text

CONCLUSION ▸ If you need lots of background services, GPS/geofences, Bluetooth, hardware, telemetry access, you have to go native. ▸ If app size, CPU/RAM usage, energy efﬁciency are critical, close-to-metal is easier to optimise. ▸ Time/money/energy investment is high. Larger team needed. 57

Slide 58

Slide 58 text

DESIGN PATTERNS 58 ▸ If you/your team already is knee-deep in frontend frameworks, Nativescript or React Native makes sense. ▸ Time/energy saved in being able to share code across mobile and web is immense. ▸ App size, performance takes a hit. Cannot really avoid understanding native SDKs. Debugging, maintaining might be nightmare for newcomers to mobile.

Slide 59

Slide 59 text

CONCLUSION 59 ▸ UI/Animation heavy apps should try it out. High ﬁdelity reproduction, pixel-perfect matching across platforms. ▸ Good for CRUD frontends, freelance/small projects. Ridiculously low time taken to build, even for newcomers. ▸ Buttery smooth UI comes at the cost of CPU, RAM and energy usage. Lower end devices can choke. ▸ Integrating with native is still dodgy, nascent ecosystem = less support.

Slide 60

Slide 60 text

QUESTIONS? speakerdeck.com/championswimmer THANK YOU! @championswimmer : Twitter | Github