Octobot is now a Sparq company. For more info read the press release.

Octobot_Logo_A Sparq Company

Mobile Development with SwiftUI and Jetpack Compose

Moving away from traditional native development with simplicity and innovation

Mobile devs working

I want to share my experience at  Octobot developing native apps with SwiftUI (iOS) and Jetpack Compose (Android). These are insights that I, specializing in iOS, and a colleague, an expert in Android development, reached together.

Until recently, I was part of an Octobot team that worked on the development of an app that builds and shares reports based on dairy barns metrics. These highly technological farms have sensors that measure many variables and the app we created allows the barns’ workers to view these metrics, compare and share them, and much more. Through highly customizable widgets, they can visualize the data, have an overview of the business performance, and make better decisions. If you are interested in learning more about this project, you can read the complete case study here. 

Initially, we started developing the solution in iOS, and then we added an Android version. To create these mobile products, we decided to use SwiftUI and Jetpack Compose as the main tools for the development of native apps.

Why SwiftUI and Jetpack Compose

To decide which technologies to use, we first went through a research stage to deeply understand the client’s needs and evaluate the pros and cons of the mobile frameworks available. We finally decided it was worth using newer technologies, such as SwiftUI and Jetpack Compose, for the native development of both apps, instead of resorting to more traditional frameworks. 

Benefits of SwiftUI

  • SwiftUI is a development framework that provides a fresher way to write interfaces. With UIKit, the most known framework for iOS development, we would need to use other  components and it would be more difficult to ensure the product translates well in different dimensions of Apple products. With SwiftUI this becomes much easier; we can use the same interface for an Apple TV or an Apple Watch since the product adapts almost automatically. 
  • Since we wanted to work with widgets, SwiftUI was a great option, as Apple itself broadcasts in its channels.
  • SwiftUI is compatible with UIKit in the instances when we needed to use both technologies because there are things the newer framework doesn’t perform as well.
  • Apple is heavily emphasizing app development with SwiftUI. Each year they release new and improved versions that continue facilitating and expanding the possibilities of the tool.
  • SwiftUI easily integrates with reactive programming frameworks, such as Combine.

Jetpack Compose benefits

  • Jetpack Compose is an Android toolkit that allows you to build UI from components in a simple way using very few lines of code.
  • With Jetpack Compose we found it easy to create line and bar charts with multiple data sources.
  • It is also compatible with XML, the most popular Android development framework. The tool provides an API that allows you to integrate both technologies, so you can use Jetpack Compose in an XML layout as well as use XML within a layout created 100% in Jetpack Compose.

A fast learning curve, even faster development

We use these frameworks using declarative programming, which is much more similar to web development. During my time as a web developer, it was easy for me to learn how to use SwiftUI in a short amount of time.

For those who don’t know, declarative programming brings a more intuitive approach than imperative programming. It consists of telling a program what to do instead of telling it how it should do it. Instead of showing what to do, you declare the expected result. 

For example, here are two code snippets that seek to do exactly the same thing: list a defined set of people’s names. The first picture shows the code with imperative programming and UIKit, and the second one shows the code with declarative programming and SwiftUI:

UIKit code example of imperative programming

UIKit code example of imperative programming.

 

SwiftUI code example of declarative programming

SwiftUI code example of declarative programming.

As we can see, it’s much easier and cleaner to code with declarative programming, resulting in a much more intuitive and efficient hierarchy. 

Some advantages of declarative programming:

  • It becomes easier to reuse components since you create code that can be used for different purposes – something that is not so easy with imperative programming.
  • The readability and usability is better because the way the code is generated is closer to a natural language (like English or Spanish). Therefore, it is easier to read and learn by non-programmers.
  • Concision: you use fewer lines to do the same job.
  • Both Jetpack and SwiftUI offer a preview option that allows you to see what you are coding in real time. It is more agile to develop this way. You gain speed and can see what you are developing and adjust on the go.

The tools and design patterns

Design patterns provide a way to structure code to make it look better and work more efficiently. In this project, we used Jetpack and SwiftUI with the MVVM architecture, something both technologies recommend because they work well together. As you develop, you receive code suggestions, you can manage statuses and the view updates automatically, it recommends improvements, among other advantages.

What needs to be improved?

SwiftUI

  • The community behind SwiftUI is more timid than the one behind UIKit. It is essential to have an experienced group that can support you if you have doubts or problems.
  • SwiftUI has many default components that facilitate the development of different UIs; with a few lines of code you can generate a complete screen. But that can prevent you from doing very specific things. When we work side-by-side with the Design team, they may create things we must implement later. However,we haven’t always found a way to do it with SwiftUI and needed to mess around with UIKit.
  • App debugging is a weak point of SwiftUI. Sometimes we found a crash or bug, and SwiftUI did not provide much information about it, so we had to investigate to find a solution ourselves.
  • The development of UI tests becomes more complex because when using declarative programming it can be difficult to control all the events that affect a specific screen. Because of constant modifications, it is common for UI tests to break.
  • The NavigationView is a bit limited if you want to achieve complex navigation, for instance, when switching from a specific view in one tab to a child view in another tab. In those cases,  a workaround with UIKit must be implemented.

Jetpack Compose 

  • The Jetpack Compose community exists, but is not as large as the XML’s. However, we made a query through Google support and they got back to us pretty quickly. 
  • On occasion we needed to develop very particular things, components that were previously supported by the traditional format. However, in Jetpack they were still kind of green, such as drag and drop with a grid in Recyclerview. In this case, it was necessary to use XML to solve the problem.
  • Although it is possible to develop an application completely with Jetpack Compose, it is highly recommended to have a knowledge base on XML as well.

Keep learning about SwiftUI and Jetpack Compose

If you are interested in learning more about these frameworks, I recommend building an app with Jetpack Compose and/or SwiftUI to see how it works. There is nothing like learning by doing! For that, you can count 100% on the official documentation of each technology. 

Personally, if you don’t come from a mobile background, Jetpack and SwiftUI offer you a very friendly and easy way to get into mobile development. Here are some links to introduce you to the world of these frameworks. If you have any questions, please contact us:

See related posts