DEV Community: Alex Black

Getting Started With Kotlin Multiplatform Mobile

Alex Black — Fri, 18 Feb 2022 05:34:31 +0000

Let's start by talking briefly about what Kotlin Multiplatform (KMP for short) is and is not and why it might be worth your time to learn it. First-off, KMP is a system where you can share code between multiple platforms. KMP currently supports JVM, Android, Native, and JS targets currently with Web Assembly on the way. This gives you a huge amount of flexibility, because you can write your common business logic in Kotlin and share it to all your target platforms.

KMP is not like React Native or Flutter. It does not share UI between platforms. Though I think this is technically possible if you where really determined, it is not the intent. KMP is more for sharing your core logic between platforms and then writing your native UI in each platform thus keeping your apps truly native and independent.

I have been writing in Kotlin Multiplatform Mobile now for a few years, and I can say that a lot has changed in that time and so many things are better. It's still not for the faint of heart, but once you put in some time and effort the productivity gains are really worth it I think. In this post I hope to give some pointers and hopefully save you a lot of time and effort. This is the post I wish I had when first starting.

First I would say to anyone who has not started in KMM, I'd start by creating a simple example app in Android Studio or IntelliJ. what ever is your preferred IDE. Both IDE's have templates, but I think Android Studio by default has a better starter for building mobile apps

Start with iOS
I would start by writing some simple code and playing with it on the iOS side, because this is going to be by far the harder platform to get used to when sharing code, unless you are super comfortable with Objective C inter-op with Swift, because that's how the native library will be treated. Take a look at this documentation for type mappings.

Start Small
Don't try to write too much too fast. Build in layers with KMM.. it's easy to get into a lot of complexity pretty fast if you are just testing and working on the JVM side and not be aware of how the API works and looks on the iOS side.

Be Aware of Caching Issues On Native Builds
The JetBrains team is very quick to fix things, so who knows how long this will be an issue, but at the time I'm writing this (using kotlin 1.6.10) I have a pretty frequent issue when making changes on the Kotlin side with an iOS app, where I will get a app crash because the change I made probably did not get compiled (that's my assumption at least). The simple solution is to delete your build file and run the code again in Xcode.

Some Libraries That Work Really Well
SQLDelight as the name implies, this library is for dealing with SQL on all platforms that KMM supports. It's somewhat easy to use and works extremely reliable, plus has a very active community.

Unofficially Koin for Dependency injection. Reference their official docs as well for implementation guidance. this is a very simple and intuitive library if you are used to DI.

Kermit The Log. This is a great logging library for KMM that is easy to use and created by Touchlab.

Korlibs This is an open source set of libraries for all sorts of useful things such as data time manipulation, or cryptography... etc. Definitely worth checking out. Also very nice kotlin APIs.

Kotlin Result a very good monad library.

Ktor is a JetBrains created library for making Kotlin web servers and clients. It has a nice API and is easy to write api requests.

Some Projects to Look at For Reference or as a Starting Point

KaMPKit This one is really good, and is kinda a best practice starting point. Touchlab is a very active contributor to the KMM community and it's definitely worth keeping an eye on their blog linked above.

ReduxKotlin There are a few ports of Redux for KMM. This one might be the best because it is thread safe, which is very nice. The only drawback that I don't love about it is that it doesn't have types for sevral aspacts that feel like they should have types. On the other-hand ReKotlin (which is a port of ReSwift) has a lot of the typing that ReduxKotlin is missing, but is missing the thread safety. It just depends on your use-case.

I have used other architectures than Redux, but I'm finding that redux is really nice on Mobile. I think it could be a good fit, but threading can be a challenge.

JetBrains just built and released this new online template wizard for easier project setup. Definitely also worth playing with.

The New Memory Model
In KMM there is a big transition happening currently. Until very recently Kotlin native (which is what we use on iOS) there was a very strict memory model that did not allow you to share mutable state with different threads. This is both a plus and minus. On the plus side this makes multithreaded programming guaranteed to not have race conditions and other bugs that come along with multithreaded code, but on the negative side it makes writing your multithreaded application difficult and requires a good amount of practice. This is not the case on the JVM side, so there is a big difference between the platforms. This is finally changing. There is an alpha memory model currently out. I would recommend playing with this new model, since going forward it will be the standard. You can do so by adding this line to your gradle.properties file: kotlin.native.binary.memoryModel=experimental

here is a blog post discussing this change from JetBrains

The official Kotlin Blog is also a good place to be aware of and check on periodically. They cover the latest features added to both Kotlin and KMM as well as insights into where the project is going in the future.

Last resource I'll share with you in this post is the Kotlin Slack. If you are not already on there join now. The community is great and very responsive. It's a great place to share feedback and ask questions of fellow developers in the same boat.

In conclusion KMM is really exciting new technology. I think it's here to stay for the long haul. It's also a lot of fun to write. I hope you give it a shot and make your application logic shared and more efficient. KMM still has a lot of maturing to do, but the Kotlin team is extremely in-tuned with the community and I see them making massive changes on a monthly basis and they always make changes that are needed and not just fluff. And if you join the Kotlin Slack you can be a part of this change and this exciting new technology.

The Challenges of iOS Development for Android Developers

Alex Black — Fri, 18 Feb 2022 02:54:36 +0000

A little background on me. I've been an Android developer for the last 10 years, and in the last 2 years started diving into iOS development (mostly using SwiftUI) as well. Something that has stood out to me in the difference between developing on these two platforms is the community.

On android the platform is somewhat more chaotic in terms of API's changing very frequently and not always working as expected, but you know that you'll most likely be able to find a solution to any problem you run into or at-least find help. iOS on the other-hand seems to have much more stable API's but finding examples of how to solve seemingly simple problems is a nightmare more often than not.

Another great thing about how Android's API's are maintained: If I run into a bug or want a feature I can simply file a bug/feature request directly with google, and I know one of their developers will see it and at least read it. That's way more than I can say for Apple. If I have an issue or feature request I have literally no idea where to take it (let me know if there is a place).

Another massive difference between the two platforms is that on Android if I run into an issue that is very difficult and maybe no open source solution exists, I can simply look at the source code for every API and figure out exactly how it works, and maybe even extend it. On iOS this is not the case, all you get are header files. This is a very rough change especially since many times the iOS API documentation from apple can be cryptic and/or confusing.

I don't mean this post to be purely iOS bashing, since in a lot of ways iOS development is great, but I do think that there needs to be a better community around iOS. Why is it that it's so hard to find documentation on solving seemingly simple things. Really by far the best resource I've found is hackingwithswift.com if it wasn't for this site I'd certainly be lost.

I'm curious if this is a common perception from other developers or if I just haven't found the right place to find information yet. In the future I intend to write some posts on solutions I've come up with for seemingly common use cases in iOS since there seems to not be too many examples online outside of hackingwithswift

How to Build a Remark.js Syntax Highlighter

Alex Black — Sun, 13 Feb 2022 00:04:03 +0000

This was a bit of an adventure and not in a good way. I spent the better part of two days trying to do something that was seemingly very simple, but I could not for the life of me seem to figure out. In this post I hope to help some of you that maybe on the same path, just trying to build a really simple Markdown blog with code highlighting, but unlike me you should not have to spend two days doing so.

What is Remark.js

Remark JS is a very neet little library that parses Markdown into an AST (Abstract Styntax Tree) which allows you to do all sorts of interesting operations on it, including converting markdown into HTML and allowing you to add a css class to the output html so you can easily connect it to highlight.js which will do the actual syntax highlighting. Remark is part of a bigger family of tools. The umbrella tool is called Unified which is not tied to Markdown and there's another sub-parser for HTML. All of these three tools have a bunch of different plugins that can be used with them to modify the AST and the output.

So I will show you how to do this in isolation and then give you a few tips if you are also trying to build your website in Next.js like I did.

Step 1

You'll need to include either unified or remark in your project using NPM or Yarn.

npm install remark --save

you will also need remark-html. This is the plugin for generating our output html from our markdown.

npm install remark-html --save

lastly You'll need remark-highlight.js. This is responsible for adding the css class to your code block in order to properly format it with Highlight.js.

npm install remark-highlight.js --save

If you installed unified instead of remark, that's fine, but you'll need remark-parse if and only if you are using unified.

Step 2

Now that youy have all of your dependencies installed it's time to build our process chain. I will do this with just a markdown string right now to keep things simple, but you can load your markdown in from your file system or from an API dosen't really matter

import { remark } from 'remark'
import remarkHtml from 'remark-html'
import remarkHighlightjs from 'remark-highlight.js'

function convertMarkdownToHtml() {
    const output = remark()
        .use(remarkHighlightjs) // we can add , {include: ['css']} or exclude: [a list of langages]
        .use(remarkHtml, { sanitize: false })
        .processSync('# Hello!\n\n```

css\nh1{}\n

```')
    return output
}

This line is the most important out of all of them and what cost me so much time. I could not find anything documenting the fact that if you turn sanitize: true or just omit it... it'll be true by default... you will loose everything remarkHighlightjs is doing

ts .use(remarkHtml, {sanitize: false})

I also want to note: you can include or exclude certin languages from your highlighter. I'm not totally sure what the usecase is for this, but it's possible.

ts .use(remarkHighlightjs, {exclude: ['css', 'html']} )

also you can run process() instead of processSync() which will be an async call.

I know that probably seemed super basic, but sadly it was not well documented. I hope this clears up some confusion for others working on similar issues. One word of advice when looking at these tools if they don't work right... try stepping through the code with a debugger and see if things are working as you expect. Things can sighlently fail.

Last thing to note about this generall process. If you are tying to get syntax highlighting to work with this system you'll also need to include the highlight.js css file with the theme you'd like. Without it your class name that this process will add will not do anything.

A Note About Nextjs

I built my blog using Next.js and static markdown files using this process. Currently Next.js has some sort of issue with ESM modules, so if you want to work with remark without a headach you can use the versions below otherwise you'll likely fight weird errors.

json "remark-highlight.js": "^6.0.0", "remark-html": "^13.0.1", "remark-parse": "^9.0.0", "remark":"^9.0.0" "unified": "^9.2.0"

A Few Resources I Found Very Helpful

This is a fantastic project and website that I used as a refrence

Also Nextjs has a fantastic blog post on this as well