DEV Community: János Kukoda

The Declarative Revolution: React, SwiftUI, and Jetpack Compose

János Kukoda — Sat, 09 Nov 2024 14:59:53 +0000

Traditionally, imperative programming required developers to specify every step in building and updating a UI. Declarative frameworks, on the other hand, allow developers to define what the UI should look like for a given state, while the framework takes care of rendering and updates. Mobile development has taken a significant leap forward with the rise of declarative UI frameworks. SwiftUI for iOS, Jetpack Compose for Android, and React for web development allow developers to efficiently build responsive user interfaces. Unlike cross-platform tools like React Native, these frameworks retain the full power of their respective platforms while adopting a declarative approach. This article explores how to harness the strengths of SwiftUI, Jetpack Compose, and React for parallel development across iOS, Android, and the web.

1. Preparing Data Bundles for Mobile Development

When developing mobile applications, it’s common to include assets such as JSON data, images, or other resources locally. Here’s how to prepare and access bundled data in iOS (SwiftUI) and Android (Jetpack Compose).

Comparison:

SwiftUI: Accessing Bundled Data

if let url = Bundle.main.url(forResource: "Books", withExtension: "json"),
   let data = try? Data(contentsOf: url) {
    let jsonString = String(data: data, encoding: .utf8)
    print(jsonString ?? "No data")
}

Jetpack Compose: Accessing Bundled Data

val context: Context = LocalContext.current
val json = context.assets.open("Books.json").bufferedReader().use { it.readText() }
println(json)

2. Persistent Storage Solutions

Persistent storage is crucial for maintaining user preferences and lightweight data across sessions.

Comparison:

SwiftUI - UserDefaults

UserDefaults.standard.set("Sample Book", forKey: "LastOpenedBook")
let lastOpenedBook = UserDefaults.standard.string(forKey: "LastOpenedBook")

Jetpack Compose - SharedPreferences

sharedPreferences.edit().putString("LastOpenedBook", "Sample Book").apply()
val lastOpenedBook = sharedPreferences.getString("LastOpenedBook", null)

React - localStorage

localStorage.setItem("LastOpenedBook", "Sample Book");
const lastOpenedBook = localStorage.getItem("LastOpenedBook");

3. Layout Structures

Declarative frameworks simplify UI composition with flexible layout components:

SwiftUI: VStack and HStack for vertical and horizontal layout.
Jetpack Compose: Column and Row, functioning similarly to Flexbox.
React: div elements styled with display: flex or grid.

4. Data Passing Between Components

React Approach

Data is passed using props. The parent can pass state and setter functions for the child to modify state.

Example:

// Parent Component
function ParentComponent() {
  const [message, setMessage] = useState("Hello from Parent");
  return <ChildComponent message={message} setMessage={setMessage} />;
}

// Child Component
function ChildComponent({ message, setMessage }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage("Updated by Child")}>Update Message</button>
    </div>
  );
}

SwiftUI Approach

If the child component does not need to modify the parent’s state, a standard parameter can be passed:

// Parent View
struct ParentView: View {
    @State private var message = "Hello from Parent"
    var body: some View {
        ChildView(message: message)
    }
}

// Child View
struct ChildView: View {
    var message: String
    var body: some View {
        VStack {
            Text(message)
        }
    }
}

If the child component needs to modify the parent’s state, use @Binding:

// Parent View
struct ParentView: View {
    @State private var message = "Hello from Parent"
    var body: some View {
        ChildView(message: $message)
    }
}

// Child View
struct ChildView: View {
    @Binding var message: String
    var body: some View {
        VStack {
            Text(message)
            Button("Update Message") {
                message = "Updated by Child"
            }
        }
    }
}

Jetpack Compose Approach

State is passed via function arguments, with lambda functions for state modification.

Example:

// Parent Composable
@Composable
fun ParentComponent() {
    var message by remember { mutableStateOf("Hello from Parent") }
    ChildComponent(message = message, onMessageChange = { newMessage -> message = newMessage })
}

// Child Composable
@Composable
fun ChildComponent(message: String, onMessageChange: (String) -> Unit) {
    Column {
        Text(text = message)
        Button(onClick = { onMessageChange("Updated by Child") }) {
            Text("Update Message")
        }
    }
}

5. Sharing State Across Components

React: `useContext`

Provides a way to pass state throughout the component tree without prop drilling.

Example:

const MessageContext = React.createContext();

function ParentComponent() {
  const [message, setMessage] = useState("Hello from Context");
  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      <DeepChildComponent />
    </MessageContext.Provider>
  );
}

function DeepChildComponent() {
  const { message, setMessage } = useContext(MessageContext);
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage("Updated by Deep Child")}>Update Message</button>
    </div>
  );
}

SwiftUI: `@EnvironmentObject`

Used for sharing data across views.

Example:

class SharedDataModel: ObservableObject {
    @Published var message = "Hello from Environment"
}

struct ParentView: View {
    @StateObject var sharedData = SharedDataModel()
    var body: some View {
        DeepChildView().environmentObject(sharedData)
    }
}

struct DeepChildView: View {
    @EnvironmentObject var sharedData: SharedDataModel
    var body: some View {
        VStack {
            Text(sharedData.message)
            Button("Update Message") {
                sharedData.message = "Updated by Deep Child"
            }
        }
    }
}

Jetpack Compose: `CompositionLocalProvider`

Works like React’s Context API for providing global state.

Example:

val LocalMessage = compositionLocalOf { "Default Message" }

@Composable
fun ParentComponent() {
    var message by remember { mutableStateOf("Hello from CompositionLocal") }
    CompositionLocalProvider(LocalMessage provides message) {
        DeepChildComponent()
    }
}

@Composable
fun DeepChildComponent() {
    val message = LocalMessage.current
    Column {
        Text(text = message)
    }
}

Conclusion

The shift to declarative programming in SwiftUI, Jetpack Compose, and React has redefined UI development. Each framework simplifies building modern, responsive UIs. While choosing between cross-platform and native solutions or experimenting with transpilers like Skip, it’s clear that technologies such as ChatGPT can bridge coding across languages, making multi-platform development more feasible.

Future-Proofing Code: Type-Safe KeyPath and Value Validation for Evolving Client-Backend Systems

János Kukoda — Fri, 18 Oct 2024 15:52:22 +0000

Future-proof code means that it is designed and written in such a way that it remains maintainable in the long term and can be adapted to new requirements with minimal changes.

Let's assume we have three business entities in TypeScript: a user, the teams associated with the user, and, for each team, a set of transformations. Each transformation has a name and texts.

export interface UserDTO {
    teams: { [teamId: string]: TeamDTO };
}

export interface TeamDTO {
    transformations: { [transformationId: string]: Transformation };
}

export interface Transformation {
    name: string;
    texts: { [id: string]: string };
}

To modify these entities, we follow the command pattern. The modification parameters are wrapped in an object: the value, and the keyPath which indicates where the modification should occur, the type of modification operation is represented by the setValue keyword.

await auth.updateClientAndServerArray([
    {
        keyPath: ['teams', 'response', 'transformations', id, 'name'],
        value: 'some-name',
        operation: 'setValue',
    },
]);

The advantage of this approach is that a single abstract manipulation method with conditional types can handle all future modifications of the business entities on both the client-side and server-side. On the backend, if you're using a document-based database with a similar enclosing structure for business entities, the modification can also be implemented using a single endpoint.

This approach ensures strong type safety, but it requires some conditional types.

We perform two operations: the first duplicates a transformation and sets a new name for the newly created transformation. The second example modifies only the transformation's name.

Type safety is ensured in two ways:

If the keyPath points to an invalid location, a type error is raised.
If the value doesn’t match the type expected at the keyPath, a type error occurs.

For example, in TypeScript, value assignments can be triggered like this:

<button
    onClick={async () => {
        const id = randomString(4);
        const _transformation = {
            ...transformation,
            name: transformation?.name + ' copy',
            texts: {}
        };
        await auth.updateClientAndServerArray([
            {
                keyPath: ['teams', 'response', 'transformations', id],
                value: _transformation,
                operation: 'setValue',
            },
        ]);
    }}
>
    Duplicate transformation
</button>

Here, the implementation of the updateClientAndServerArray method itself is not shown, but it uses a recursive approach. The same method handles both duplication and name setting.

To update the name field, updateClientAndServerArray can be used like this:

await auth.updateClientAndServerArray([
    {
        keyPath: ['teams', 'response', 'transformations', id, 'name'],
        value: 'some-name',
        operation: 'setValue',
    },
]);

The key advantage here is that if a new field or container is added to any business entity in the future, no new manipulation methods are needed. The modification can be carried out without requiring changes to the backend or the client, and type safety is preserved, ensuring that no invalid values can be assigned. This approach can handle any JSON type, including strings, numbers, objects, or arrays.

Type Definitions

These two types are used to ensure type safety. The first type recursively traverses the business entities to verify whether the provided key path is valid:

export type KeyPath<T> = T extends object
    ? {
        [K in keyof T]: T[K] extends (infer U)[]
        ? [K] | [K, number, ...KeyPath<U>] // Arrays
        : T[K] extends Record<string, infer V>
        ? [K] | [K, string] | [K, string, ...KeyPath<V>] // Objects
        : T[K] extends object
        ? [K] | [K, ...KeyPath<T[K]>]
        : [K]; // Simple fields
    }[keyof T]
    : never;

Next, we determine the value type associated with a specific key path:

export type ValueForKeyPath<T, P extends KeyPath<T>> =
    P extends [infer K, ...infer Rest]
    ? K extends keyof T
        ? Rest extends []
            ? T[K] // Return current value
            : T[K] extends (infer U)[]
            ? Rest extends [number, ...infer R]
                ? ValueForKeyPath<U, R extends KeyPath<U> ? R : never>
                : never
            : T[K] extends Record<string, infer U>
            ? Rest extends [string, ...infer R]
                ? ValueForKeyPath<U, R extends KeyPath<U> ? R : never> | U
                : U
            : T[K] extends object
            ? ValueForKeyPath<T[K], Rest extends KeyPath<T[K]> ? Rest : never>
            : never
        : never
    : never;

If the value being assigned doesn’t match the type derived from the key path, a static error is raised, ensuring that only valid data can be assigned to the given key path.

For example:

await auth.updateClientAndServerArray([
    {
        keyPath: ['teams', 'response', 'transformations', id, 'name'],
        value: 'some-name',
        operation: 'setValue',
    },
]);

This type-safe approach ensures that modifying nested structures is both flexible and reliable, providing a solid foundation for future-proofing your code.

DEV Community: János Kukoda

The Declarative Revolution: React, SwiftUI, and Jetpack Compose

1. Preparing Data Bundles for Mobile Development

SwiftUI: Accessing Bundled Data

Jetpack Compose: Accessing Bundled Data

2. Persistent Storage Solutions

SwiftUI - UserDefaults

Jetpack Compose - SharedPreferences

React - localStorage

3. Layout Structures

4. Data Passing Between Components

React Approach

SwiftUI Approach

Jetpack Compose Approach

5. Sharing State Across Components

React: useContext

SwiftUI: @EnvironmentObject

Jetpack Compose: CompositionLocalProvider

Conclusion

Future-Proofing Code: Type-Safe KeyPath and Value Validation for Evolving Client-Backend Systems

Type Definitions

React: `useContext`

SwiftUI: `@EnvironmentObject`

Jetpack Compose: `CompositionLocalProvider`