iOS - Testing! :-D

This ticket is something like the master ticket to coordinate development on an iOS port of StreetComplete. It replaces #1892 which also included a lot of discussion and research / observation work.

TLDR: Have a look at the Project Board for a list of tasks. Contributions are welcome!

Also have a look at the Slides from SotM Europe 2024 talk (I added speaker notes to make this understandable when flipping through).

Approach

The code base of this app is written in 100% Kotlin, a modern programming language that is quite similar to Swift. Kotlin code can be transpiled to JavaScript and also to machine code, just like Swift. Furthermore, many dependencies of this app by now are pure Kotlin libraries.

An iOS version of this app hence can be done with Kotlin Multiplatform.

The UI code can be shared using Compose Multiplatform, which is currently in ~~alpha~~ beta for iOS. It is a fork/extension of Jetpack Compose with largely the same API. Jetpack Compose is a reactive UI framework in which developers define the UI completely in code (similar idea as SwiftUI, Flutter, ...). We'll have to re-create the entire UI (incrementally) in Compose, though.

This will keep the amount of code that needs to be platform dependent (Android / iOS) to a minimum.

This approach has the big advantage over others in that further maintenance of this project will not increase significantly, as there will continue to be just one code base. In comparison to using the framework Flutter for multiplatform (as used by Every Door), it allows us to largely not touch the Kotlin codebase. When using Flutter, we'd need to rewrite it all in Dart.

Steps in a nutshell

Separate all platform specific code from application logic. Replace Android/Java dependencies for application logic with Kotlin multiplatform dependencies
Incrementally migrate the UI code to Compose Multiplatform:
1. Separate data access and UI state code from pure UI code (use view models: Use ViewModels #5070 )
2. Migrate the UI code that currently uses Android XML layouts to Android Jetpack Compose. This can be done incrementally when done bottom-up (see migration strategy guide)
3. Then, migrate from Jetpack Compose to Compose Multiplatform. This is a small step compared with the first one.

Current State

This section will be updated continuously.

The steps necessary are described in detail in a Kanban-style Project Board. (Some tasks have not been created yet because they 100% depend on other tasks completed first and some research). Unless stated otherwise, they are explicitly up for the taking by people who read this and (I hope 😊) want to contribute to the development towards an iOS port. If you would like to implement one of the tasks described, comment in that ticket.

We very roughly estimated some time ago that developing a full port to iOS would take one man-year of work. So, the scope of this remains very large. We will only realistically achieve it together with lots of contributions from the community. Luckily, this is exactly what has been happening in the last years.
In the first half of 2024, I have been able to work on this full-time. The migration is now about 50% complete.

So, let's shift gears!

How you can help

You could take over a task from the project board! Or, you could familiarize yourself with the mentioned technologies / frameworks to make meaningful contributions later. In particular: Jetpack Compose / Compose Multiplatform. This is very new to me too, so I have to find my feet here, too
You can sponsor development! See the title "Sponsor this project" in the sidebar on the main page. More money allows me to devote more time to development on this app in general. If you know any eligible sources for larger scale funding, talk to me!
You can help with maintenance and issue triage in general. Time saved on that is time I can put into furthering development on this!

On what needs to be done on the UI side of things:

TL;DR:

Step 1 is Use ViewModels (master) #5530
Step 2 is to convert bottom up the view to Composables (Jetpack Compose)
we'll see about the rest later

(Disclaimer: I (too) need to find my feet with those Jetpack Frameworks I haven't worked with yet, namely mostly Composables and Navigation. The below is a result of some research, looking at example code etc., so if I did misunderstand something I describe below, please call it out!)

Current UI architecture

Android Activitys are mostly just containers and Fragments make up the brunt of components that define the view behavior, state, manage lifecycle, handle data (updates) and communication and navigation with/to their parent and child components.

Views are generally defined with Android XML layouts, a few "*ViewController" classes exist that define the behavior of certain view constructs in a reusable manner. Some compound/custom views may also (still) exist.

Projected UI architecture

On Android, it would look something like this:

View layout, their behavior and their (ui) state is done via Composables from Jetpack Compose / Compose Multiplatform.

The data used for display in the UI is accessed through ViewModels. It is probably better to use Kotlin's StateFlow for the fields in the ViewModels instead of LiveData from the very start, because the former are already multiplatform.

Finally, the navigation in-between the different composables is managed using NavHost of Jetpack Navigation somehow (didn't read much into that yet). This means that the Activity is just the entry-point of the app and there are actually no Fragments left, everything is Composables and ViewModels, which means everything can be shared. (Hooray)

UI architecture steps

Now, we must avoid at all costs to open up too many construction sites at the same time. It is not feasible to go from our current architecture to the other one in one big step. Instead, we must split up the migration in as many self-contained steps that make sure the codebase stays consistent in itself:

Step 1. ViewModel

Slim Fragments: The data access and view state management shall go into ViewModels, owned by the Fragments. We have a ticket for that already: #5530. Even independently of iOS, this makes sense, as it properly encapsulates view logic from accessing data / managing state.

Step 2. Jetpack Compose

Convert the UI layout definition and behavior code bottom-up (see migration guide, migration tutorial) to Jetpack Compose. This involves not only converting the Android XML layouts to Compose code, but also the code of "*ViewController"s, RecyclerView view holders and finally of course also Fragments, as that's where most of the view behavior is currently defined.

(After step 1 and 2)

Step 3. Compose Multiplatform

Go the (hopefully small) step from Jetpack Compose to Compose Multiplatform. The biggest issue here will be how to access resources in a multiplatform way. There are some libraries already which facilitate this, like MOKO resources, but hopefully a popular and stable solution will have emerged by then. I really hope there will be something official from JetBrains. (They did announce this.)

Step 4. Multiplatform ViewModel / Navigation

Edit 2024-09: The ecosystem changed! It will be possible to use the Android ViewModels and Android Navigation for multiplatform, too, so this makes the below research obsolete, we can just keep using what we are using now.

Already by the end of step 2, Fragments will be very slim. We have the option to stop here view-architecture-wise and just duplicate the rest of the code that still lives in these Fragments on iOS in UIViewControllers defined in Swift. I think we should revisit this when we finished these steps, as these steps are really big on its own already anyway.

However, we still need to make at least ViewModels multiplatform. Interestingly, most libraries that provide some concept of ViewModels but as multiplatform also come with a solution to completely do away with Fragments (i.e. a replacement for Navigation and related things).

Those that provide a multiplatform replacement for only ViewModels are KMM-ViewModel, MOKO MVVM, Summer, kmp-viewmodel and others but most of these are either kind of alpha or older and quite inactive.

Here's a list of frameworks I had a little longer look at, all of these do something something ViewModel and also provide some glue for navigation:

PreCompose

PreCompose provides both ViewModels and Navigation whose API is pretty similar to the Android equivalent in Android. The project's readme itself mentions...

If you familiar with Jetpack Lifecycle, ViewModel and Navigation, there will be nothing to learn.

Additionally, it has some integration with Koin, which is the dependency injection framework we use.

The project exists since 2021 and is continuously active since mid-2022, 0.6k people starred it on GitHub.

Voyager

Voyager also provides both for view models and navigation.

In particular, it introduces the concept of Screens. A Screen conceptually is a replacement for a Activity or full-screen Fragment.

Instead of ViewModels, we have ScreenModels, which have the same purpose as ViewModels. Good thing: ScreenModel is just an interface. Also there is integration with Koin, the dependency injection framework we use.

Additionally, it has some setup for navigation with bottom sheets (which we use extensively) as well as tab navigation (used in profile screen).

The project exists since end of 2021 and continues to be very active, 1.8k people starred it on GitHub. Version 1.0.0 was released in December 2023 and shall bring API stability, the documentation is quite good. Of the three projects I've looked at, it is the youngest.

Decompose

Decompose can also serve as a replacement for the functionality described, although of the three libraries, it brings the greatest departure from the terminology, concepts and APIs from Android Jetpack:

Components are what I understand to be the replacement for the logic/navigation part of Fragments/Activities, as they optionally can have an associated ComponentContext (~ViewModel) if they need to be lifecycle-aware, keep their state during config changes and handle back button events
Values are observable fields within a component, pretty much what *LiveData or StateFlow would be
Child Stack would be the replacement for the FragmentManager, i.e. something something navigation
....

One feature of Decompose is that it works well not only with Compose but also with SwiftUI and other UI frameworks, but I think we do not need that. But it means that Decompose is designed to be more of a general framework rather than being made for or tied to any specific UI framework.
Instead, it is written that Decompose goes well with MVIKotlin, another framework by the same author.

The project exists since 2020 (thus the oldest) and has been continuously very active (most active of those compared) ever since, 1.7k+ people starred it on GitHub. They are working on a new major version since at least December 2023. Striking is the extremely low number of open issues.

Conclusion

To be honest, I didn't really grasp the concepts of Decompose and the independency from Compose Multiplatform is nothing we would require. The migration to ViewModels + Composables + Navigation seems to me is already enough to chew, it does not help to then learn even new (even if related) concepts.

This is why I currently slightly favour Voyager, because just as PreCompose, it sticks quite closely to the concepts from Android Jetpack while at the same time is more popular and has more documentation + useful components than PreCompose has to offer, apparently.

The final decision on this lies somewhat in the future, though. The goal of this preliminary research has been to first ascertain whether the concepts of ViewModel + Navigation can be transferred to multiplatform too, so that the iterative steps 1 & 2 (before 3 & 4) are possible. The outcome: Yes, it's possible, frameworks exist whose concepts and APIs are quite similar to what we have with Android Jetpack.

Step 4. Multiplatform ViewModel / Navigation

Also,

Android ViewModels are documented to be multiplatform starting with v2.8.0.
JetBrains is porting AndroidX Navigation library to multiplatform. Currently experimental.

To just keep using the AndroidX thingies would of course be the least effort.

Thanks for the great discussions at State of the Map EU. With regards to MapLibre Native for Compose Multiplatform, it seems someone already got it to work, someone else is building a library. 👍

maplibre/maplibre-native#2638

Not exactly sure where to place, but this might be useful:

Lifecycle path to Multiplatform

@riQQ

The funding through Prototype Fund ended, time for some progress update, retrospective and outlook!

Progress Update

The work that has to be done can chiefly be grouped into two areas:

Replacing dependencies to Java, Java-Libraries and Android with Kotlin Multiplatform (KMP) Libraries or own implementations on iOS
Re-Implementing the whole UI in Compose, also using ViewModels and Navigation.

1. Replacing dependencies to Java

The biggest tasks completed within the funding period in this regard were replacing the Java Http Client with the KMP library Ktor-Client, porting the osmfeatures library to Kotlin Multiplatform and creating the osm-opening-hours Kotlin Multiplatform library. In detail:

https://github.com/westnordost/osm-opening-hours
Switch from java.net.URL to Ktor client #5483
Multiplatform OSM API client #5686
Multiplatform file access #5656
Port to Kotlin Multiplatform westnordost/osmfeatures#25
Use multiplatform settings or implement Preferences interface on iOS #5419
using QRose and BigNum for QR Codes and parsing/generating them; writing an HTML parser to correctly display localized text styled with HTML, such as the changelog (both part of Re-do UI of About screens and Settings screens in Compose #5719)

(blue = already done before the funding period started)

What remains? Mostly fitzelkram and glue. But, well, that kind of stuff is often what takes longer than expected. One of the larger things in terms of lines of code that still needs to be done are

WIP: test(KMP): use mockative instead of mockito #5706 (in progress/on hold by @riQQ) and
Set up KMM Project Structure #5412 (I am holding off on this while other tasks in this area are still to do)

1. Re-Implementing the UI in Compose

...and introducing ViewModels + Navigation. Approximately, the absolute effort for this is about double that of the above, so this makes up the bulk of the to-be-done work.

MapLibre

An essential and large part of this undertaking was to migrate from the abandoned map renderer tangram-es to MapLibre-native, done by @Helium314 and me. It was merged to master recently because we finally found a workaround for a critical error in MapLibre.

Replace Tangram with Maplibre #5693

Compose

I first focused on implementing all screens except the main screen. Recently, I broke forth into the main screen though, but mostly just the controls, dialogs etc.
In detail:

So, what's still to do are all the quest and overlay forms (and you know, they are often custom, that's why it is a lot of UI code) and abstracting the Android-specific implementation of MapLibre, i.e. use MapLibre in Compose.

Now, I would love to not have to do the latter myself, but a library for this does not exist yet. There is, however, some developer interest in this. It looks like a group is forming to implement a library, but as it stands, there are currently 3-4 competing projects, so I hope there will be some consolidation soon: maplibre/maplibre-native#2638

Retrospective

The time estimations made for a full iOS-version of the app (one year full-time for one developer) are still quite on point.

The MapLibre integration took about 6 weeks more than expected even though @Helium314 did preliminary work on it before and then substantially helped me complete it.
Re-Implementing the UI in Compose on the other hand turned out to be more straightforward and faster than expected, so that somewhat made up for the extra time spent on MapLibre.

Other than what has been mentioned, there were unfortunately no contributions made to this effort from other developers since I began to work full-time on it. So, now that I have worked on it for half a year, it would be roughly half a year more to complete this effort. (Plus, realistically, some generous buffer for unforeseen extra effort.)

Outlook

My to dos

Despite the funding having ended, there are a few things I still want to complete in order to get to a round conclusion of the work done so far. The time frame is 1-2 months (with less speed, need also some time out, really)

stabilize v59
upgrade to Jetpack Compose 1.7 and (try to) solve some things not yet implemented due to missing functionality in Jetpack Compose 1.6, such as reordering quest types in the settings and some animations in the statistics screen
finish Migrate main screen to Compose #5799 for v60. This one is a lot of effort, because it touches on so many components at once and includes all the stuff from the MainActivity, the erstwhile place where all the code for which I didn't find an abstraction, aka the garbage dump. It will also be a nightmare for @Helium314 to merge into SCEE, so that's why it is for v60 and not for v59.
get involved a bit - at least to make a few suggestions - with the group that wants to implement a MapLibre for Compose Multiplatform
maybe Set up KMM Project Structure #5412. I shy away from this right now because I fear it might open a new can of worms just when I wanted to come to a close

Continuing

Extrapolating from the last half a year, I am now less hopeful about that it would be possible to complete this project by community contributions alone. The remaining work is also still substantial.
I will look into possible follow-up funding, but the outlook does not look too good: Another Prototype Fund will not be possible, last time I checked, OpenStreetMap has no money and the funding programme by the NLNet foundation is being dissolved in favor of some AI bullshit, too. Sponsors through Liberapay, Github sponsors and Patreon also didn't increase since this effort was announced, so crowd funding won't work either. Let's see. Suggestions welcome.

Contributing

Of course, dear interested developer, any contribution done to this effort will just make completing it more feasible and no work towards that goal is lost, because we continuously integrate it into new versions of the app.

If you are inclined to help, the next steps in this process are to, bit by bit, reimplement the current UI in (Jetpack) Compose and use ViewModels. The migration to Compose happens in a bottom-up sort of fashion (widgets first, then parts of the screen, at the end, the whole screen). So, a most sustainable contribution would be to start with reimplementing widgets, such as the opening hours form (big effort), the hydrant diameter form (medium effort) or the building levels input form (small effort) (or many more).

Now, there could theoretically be a version of the app for iOS with limited functionality before we reached the 100%, by excluding those quests whose UI haven't been migrated yet. Tasks that have to definitely be done before that, however, are,

MapLibre for Compose Multiplatform as a library (see MapLibre Native Compose Multiplatform Library maplibre/maplibre-native#2638) and migration to that library
Set up KMM Project Structure #5412 and tasks that are currently blocked by this

As required by the Prototype Fund, I also created a report that will vanish in some archive that noone will read. Maybe you'd like to read it instead, however, it is in German and contains mostly the same stuff I wrote here:
Schlussbericht StreetComplete für iOS

#7088 is ready for review, and together with #6352, resolves #6072.

~~I can take #7081 and/or #7031 next?~~ now #7123 and #7124 are also ready for review.

Time to parteyh 🚀

First build of StreetComplete is now on TestFlight: https://testflight.apple.com/join/K1u3eUU5

Known caveats (we are working on it):

forms can only be canceled with the back gesture rather than clicking anywhere on the map
map doesn't work at all on iOS 15.x
well, any bug already reported. So, before reporting bugs, check what's there already

I'll keep this ticket open until a first public release is done.

Now that we have the TestFlight build out, should we also add the link to it on the home screen of https://streetcomplete.app?

Nah, only when it's available for all. Won't be long. Just weeding out the bugs.

@westnordost

@westnordost

The latest Alpha 3 build isn’t available on TestFlight – is that normal? :)

iOS app store doesn't allow non-numbers in version names, which is why I had to use a different version theme for iOS alphas and betas.

v64.0-alpha2 is 64.0.0
v64.0-alpha3 is 64.0.1

v64.0-beta1 will be 64.0.2

I’ve tended to use build numbers for that purpose, but if you don’t expect to use patch versions for anything, then that’s a perfectly fine choice.

Yeah, generally I use the major version for every feature release, like Firefox. At the time I decided to use that versioning schema, I didn't see the point of waiting for a sufficiently large change to up the major release version. It'd be a very fuzzy choice anyway. I guess the port to iOS would have been major version 2, otherwise (or ~3 to ~4).

The minor release version is for any maintenance updates that include bugfixes, minor improvements, localization updates etc., i.e. are very unlikely to cause breakage.

So, there is never a reason to use the third version number, only the alpha and beta and rc suffixes someone once suggested that I use because it conforms to the "semantic versioning" guidelines that are well in use.

I haven't seen a dedicated feedback thread, so I just wanted to pop in and say job well done! I took the iOS version out for a spin the other day and had absolutely no issues with it.

I probably won't use it again (I've gotten used to my other clunky-but-powerful editing apps) but this looks like a really good way for newbies and casual mappers to contribute to OSM. Thanks a lot for all the work!

Coming here to say the same. The only problem I've had is the android-style swipe to go back feels very wrong on an iPhone!

27. Coming here to say the same. The only problem I've had is the android-style swipe to go back feels very wrong on an iPhone!

There (fortunately) is a lot of swipe to go back even in system and Apple apps on iOS? (The only issue I've had with the app so far was that the "Can you contribute anything to this note" quests can't be closed at all, I'm assuming that is one of the bugs being worked on. Excellent work overall, thank you so much!)

It's actually fixed. I just released a new version, it should pop up in TestFlight soon:

https://github.com/streetcomplete/StreetComplete/releases/tag/v64.0-beta1

Navigation Menu

Repository navigation

iOS - Testing! :-D #5421

TLDR: Have a look at the Project Board for a list of tasks. Contributions are welcome!

Approach

Steps in a nutshell

Current State