Simplifying the Complex

Artikkel p? Norsk: Klikk her

Mobile app development has always been a balancing act. Do you choose cross-platform development to save time and reduce costs, knowing it might deliver a "good enough" experience?

Or do you invest in dual-native development to achieve the highest performance and fully leverage platform capabilities, even if it means embracing added complexity?

For years, this trade-off has defined the industry. But with advancements in technology—particularly in AI-driven automation—the rules are starting to change. Let’s dive into how this challenge has been addressed historically and explore how AI is transforming the landscape of mobile app development today.

The Basics: Cross-Platform vs. Dual-Native

Cross-Platform Development

Frameworks like Flutter, React Native, Xamarin, and PWAs (Progressive Web Apps) enable developers to write a single codebase that works across multiple platforms, including iOS, Android, and web.

Benefits

• Faster Development Cycles: A unified codebase reduces redundancy and accelerates delivery.
• Lower Maintenance Costs: Managing one codebase is simpler and more cost-effective.
• Broader Reach: Web apps and PWAs can run on any browser-enabled device, expanding your audience.

Drawbacks

• Limited Platform Integration: Cross-platform frameworks often lag in supporting the latest native features, like Face ID or ARKit.
• Performance Overheads: Abstraction layers (e.g., JavaScript bridges or Dart VMs) can introduce latency, making apps less responsive.
• Dependency on Third-Party Plugins: Key functionality may rely on plugins, which can delay updates when platforms evolve.

Dual-Native Development

Dual-native development involves building apps separately for iOS and Android, utilizing each platform’s native tools and frameworks.

With Modern Declarative Frameworks (SwiftUI & Jetpack Compose)

Benefits

• Simplified UI Development: Declarative syntax allows developers to write clean, expressive code while maintaining platform fidelity.
• Seamless Integration: Full access to cutting-edge platform features and APIs (e.g., ARKit, Secure Enclave, Material You).
• Top Performance: Native performance ensures apps are fast, responsive, and optimized for their platform.
• Intuitive User Experience: Apps align perfectly with platform-specific design principles, creating a polished look and feel.

Drawbacks

• Learning Curve: Developers must adapt to newer paradigms and tools, which can be challenging for those used to traditional frameworks.
• Effort Intensive: Managing two distinct codebases still requires more time and resources than cross-platform solutions.

Without Declarative Frameworks (UIKit & Kotlin with Views)

Benefits

• Full Control: Developers have granular control over every aspect of the UI and app behavior.
• Proven Tools: Long-standing frameworks like UIKit and Kotlin Views are well-documented and widely supported.
• Legacy Compatibility: These tools ensure integration with older projects and systems, preserving investment in existing codebases.

Drawbacks

• Complexity: UI development involves more boilerplate code, making it less efficient than declarative approaches.
• State Management: Handling state and UI updates requires more manual effort, increasing the potential for errors.

The Traditional Wisdom: Cross-Platform is “Good Enough”

For years, the advice has been simple: if you’re working with a tight budget or need to move quickly, cross-platform development is the way to go. Here’s why:

• Single Codebase: Write once, and deploy it (almost) everywhere—iOS, Android, and even web.
• Fast Iterations: Tools like Flutter’s hot reload enable real-time changes, perfect for quick adjustments during development.
• UI Consistency: Frameworks like Flutter and React Native ensure your app looks uniform across platforms, though the design might lack the refinement of native experiences.

However, cross-platform comes with trade-offs:

• Performance Limitations: While cross-platform apps can be fast, they rarely match the speed and responsiveness of native apps. Abstraction layers like JavaScript bridges or Dart VMs introduce overhead and latency.
• Delayed Access to Native Features: Cutting-edge platform features like Face ID or Material You are often unavailable until the framework catches up with Apple or Google’s updates.

In short, cross-platform development works well for apps that don’t need deep platform integration or the highest performance. But for high-stakes scenarios—such as AR, complex animations, or highly secure transactions—these limitations can quickly become roadblocks.

Dual-Native: The Dream You Can’t Afford?

Then there’s dual-native development—often seen as the holy grail of mobile apps.

This approach uses tools built by the same teams behind the operating systems themselves:

• SwiftUI for iOS.
• Jetpack Compose for Android.

The results are extraordinary:

• Maximum Performance: No middle layers, no overhead—just pure, native power.
• First-Class Features: Access to cutting-edge tools like ARKit, Secure Enclave, and Material You as soon as they’re released.
• Platform Perfection: Apps feel uniquely tailored, fully aligned with each platform’s design principles and interaction guidelines.

But here’s the paradox: If dual-native development is so ideal, why isn’t everyone using it?

• Specialized Expertise: It requires developers skilled in both iOS and Android, often meaning two separate teams.
• More Time: Managing two distinct codebases is inherently slower and more resource-intensive.
• Higher Costs: Excellence comes at a price, and dual-native development is no exception.

From a broader perspective, dual-native represents the pursuit of perfection—creating apps that make the most of each platform’s potential. But that pursuit comes with trade-offs: time, money, and complexity. It’s the luxury car of app development: stunning, powerful, and refined, but not always practical in a world that values speed and efficiency.

So, is it worth chasing perfection? Or is there a way to balance quality with practicality? The answer may lie in how we approach innovation—and how tools like AI are beginning to shift the equation.

Democratising Dual-Native

AI tools like ChatGPT are revolutionizing software development by automating repetitive tasks and simplifying workflows. These tools enable developers to maintain consistency across platforms, significantly reducing development time and effort. By focusing on tasks like UI conversion and code alignment, AI ensures greater alignment between platforms without compromising quality.

When combined with best practices—such as reusable data models and design tokens—development becomes more efficient and scalable. These shared assets minimize duplication and allow teams to create cohesive, platform-aligned experiences.

For more complex workflows, abstract specification languages (e.g., DSLs) or structured formats like JSON/YAMLcan act as a single source of truth. Platform-specific interpreters can execute the defined logic, enabling flexibility and scalability across iOS, Android, and web platforms. This approach simplifies updates, reduces duplication, and allows dynamic feature configurations, making it a powerful strategy for advanced use cases like self-service apps or modular workflows.

Code Alignment and Conversion

With the help of AI, it’s now possible to write a SwiftUI view for iOS and generate a Jetpack Compose equivalent for Android. The AI-generated code, especially when using tools like ChatGPT, serves as an excellent starting point—producing structured, logical code that works well in most cases.

This advancement is made possible not only by improvements in AI technology but also by the inherent similarities between modern declarative frameworks like SwiftUI and Jetpack Compose. Unlike frameworks such as Flutter or React Native, their architectural alignment allows for smoother and more accurate conversions.

As a proof of concept, I tested this approach with an existing SwiftUI-based mobile app. Using AI, I converted each view to Kotlin Jetpack Compose, working through them systematically. While the initial results weren’t perfect, the AI improved with each iteration, and the corrections required were manageable. The process highlighted just how efficiently AI can bridge the gap between platforms, bringing us closer to a future where dual-native development is both practical and scalable.

Shared Data Models

Define your data once in a schema, such as GraphQL or JSON, and let AI generate the corresponding models for both Swift and Kotlin. Say goodbye to duplicating effort and writing the same code twice.

For instance, consider this GraphQL schema:

type User {
  id: ID!
  name: String!
  email: String
  posts: [Post!]
}        

Conversion commands:

apollo client:codegen \
  --target=swift \
  --schema=schema.graphql \
  --output=./Generated

apollo client:codegen \
  --target=kotlin \
  --schema=schema.graphql \
  --output=./Generated        

Then, you will receive for Swift:

struct User: Codable {
    let id: String
    let name: String
    let email: String? 
    let posts: [Post]?
}        

And this output for Kotlin:

data class User(
    val id: String,
    val name: String,
    val email: String?,
   val posts: List<Post>?
)        

UI Consistency Across Platforms

AI can map view hierarchies, naming conventions, and structures between SwiftUI and Jetpack Compose, ensuring both platforms look and feel the same without manual tweaking.

In addition to conversion, you should definitely explore the use of design tokens, e.g. by utilising Figma. Design tokens means specifying the design outside of the code, and providing it so that the code can convert this to a themed UI.

{
  "primaryColor": "#6200EE",
  "secondaryColor": "#03DAC6",
  "backgroundColor": "#FFFFFF",
  "fontSize": 16
}         

Abstracted functions

Abstracted functions and formats like domain-specific languages (DSLs) or JSON/YAML provide a powerful way to define complex workflows or features independently of platform-specific implementations. These abstractions serve as a blueprint for functionality, enabling developers to separate the "what" (desired behavior) from the "how" (platform-specific execution).

For instance, in a self-service application, a DSL or JSON/YAML configuration can define actions such as:

• Toggling a feature.
• Submitting a form.
• Processing user inputs.

Each platform—whether iOS, Android, or web—uses an interpreter to execute these specifications, seamlessly translating them into native UI elements and behaviors.

Benefits of This Approach:

• Centralized Logic: Define workflows in one place and apply them across platforms.
• Reduced Code Duplication: Shared specifications eliminate the need for redundant platform-specific implementations.
• Simplified Updates: Modify the specification to implement changes without redeploying the entire app.
• Improved Collaboration: Language-agnostic specifications are easy to share, version, and extend across teams.

{
  "configuration": {
    "id": "carConfig",
    "title": "Car Configuration",
    "options": [
      {
        "type": "dropdown",
        "id": "model",
        "label": "Select Model",
        "choices": ["Sedan", "SUV", "Coupe"]
      },
      {
        "type": "colorPicker",
        "id": "color",
        "label": "Choose Color",
        "choices": ["Red", "Blue", "Black", "White"]
      },
      {
        "type": "toggle",
        "id": "sunroof",
        "label": "Add Sunroof",
        "default": false
      },
      {
        "type": "dropdown",
        "id": "engine",
        "label": "Engine Type",
        "choices": ["Gasoline", "Diesel", "Electric"]
      }
    ],
    "submitAction": {
      "type": "apiCall",
      "endpoint": "/api/configure-car",
      "method": "POST"
    }
  }
}        

Examples: How AI Makes It Work

Let’s look at some real scenarios:

Converting a Grid Layout

SwiftUI’s LazyVGrid arranges elements in a vertically scrolling grid, this is great, and there's also a good equivalent in Kotlin Jetpack Compose.

import SwiftUI

struct ContentView: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach(0..<20) { index in
                    Text("Item \(index)")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}        

Jetpack Compose uses LazyVerticalGrid for similar functionality. The only annoying thing here, is the cumbersome import strategy, i.e. all those imports need to be manually corrected most of the time. In Swift, or Flutter, this works out of the box.

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ContentView() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(20) { index ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
                    .background(Color.Blue)
            ) {
                Text(text = "Item $index", modifier = Modifier.padding(16.dp))
            }
        }
    }
}        

Dynamic Navigation

SwiftUI’s NavigationStack enables a declarative way to handle hierarchical navigation.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("Go to Details", destination: DetailView())
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}        

Jetpack Compose uses NavHost and NavController to manage navigation.

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.navigation.compose.*

@Composable
fun ContentView(navController: NavHostController = rememberNavController()) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            Button(onClick = { navController.navigate("details") }) {
                Text("Go to Details")
            }
        }
        composable("details") {
            Text("Detail View")
        }
    }
}        

State Injection

SwiftUI manages state with @StateObject for ownership and @EnvironmentObject for dependency injection.

import SwiftUI

class AppState: ObservableObject {
    @Published var count = 0
}

struct ContentView: View {
    @StateObject var appState = AppState()
    
    var body: some View {
        VStack {
            Text("Count: \(appState.count)")
            Button("Increment") {
                appState.count += 1
            }
        }
    }
}        

Jetpack Compose uses CompositionLocalProvider for dependency injection.

import androidx.compose.runtime.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.ui.Modifier

val LocalAppState = compositionLocalOf { AppState() }

class AppState {
    var count by mutableStateOf(0)
}

@Composable
fun ContentView() {
    CompositionLocalProvider(LocalAppState provides AppState()) {
        Column {
            val appState = LocalAppState.current
            Text("Count: ${appState.count}")
            Button(onClick = { appState.count++ }) {
                Text("Increment")
            }
        }
    }
}        

The Takeaway: Rethinking the Trade-Offs

For years, mobile app development has been defined by a fundamental trade-off: go cross-platform for speed and cost-efficiency or embrace dual-native for top-tier performance and platform fidelity. Each approach came with compromises—cross-platform often sacrificed deep integration and cutting-edge native capabilities, while dual-native demanded more time, higher costs, and greater complexity.

Now, AI is reshaping this equation in practical and focused ways. One of AI’s most impactful contributions is automating repetitive tasks, such as converting SwiftUI views into Jetpack Compose equivalents. By streamlining UI development across platforms, AI reduces the effort required to manage two distinct codebases while generating structured, consistent code for native apps.

With its ability to assist in view conversion, AI is making dual-native development more accessible and practical. Teams can now focus more on innovation and less on repetitive tasks, enabling them to deliver the performance and polish of native apps without being overwhelmed by complexity.

This shift means the debate is no longer simply about "cross-platform vs. dual-native." Instead, it’s about how AI can enhance dual-native workflows to provide the best of both worlds: efficiency and performance, practicality and platform excellence.

While AI isn’t a silver bullet that solves all challenges, it addresses key pain points like view conversion, allowing developers to work smarter and deliver high-performing, future-ready apps.

The question now is: Are you ready to harness AI as a tool in building the next generation of mobile apps? With AI, we’re just beginning to unlock the possibilities for innovation. Let’s shape the future together.