DEV Community: RayedDev

Clone Struct Models for SwiftUI with No Anxiety

RayedDev — Mon, 19 Feb 2024 20:05:25 +0000

I've been working with SwiftUI for some time, and the task of copying struct models has always been a source of anxiety for me. To illustrate, let's consider this example:

struct Person {
    let name: String
    var active: Bool
    var score: Int
}

var persons = [
    Person(name: "Alice", active: false, score: 0),
    Person(name: "Bob", active: false, score: 0),
    Person(name: "Charlie", active: false, score: 0)
]

// Using map to change the active status to true and increase the score value by one for all persons
persons = persons.map { person in
    var modifiedPerson = person
    modifiedPerson.active = true
    modifiedPerson.score += 1
    return modifiedPerson
}

Now, what if I have conditional logic for scoring and activating? Then, I would make this change:

persons = persons.map { person in
    if allowedNames.contains(person.name) {
        var modifiedPerson = person    
        modifiedPerson.active = true
        modifiedPerson.score += 1
        return modifiedPerson
    }
    return person   
}

However, I believe there's a better way that aligns more closely with the immutability pattern that SwiftUI aims to achieve. This can be done using the swift-immutable
Swift macro package, which allows cloning a model and partially modifying its members.

Let's see how it works.

First, we add the package.
Then, we add the Clone macro to our struct.

import SwiftImmutable

@Clone
struct Person {
    let name: String
    var active: Bool
    var score: Int
}

The macro will add a clone function to the struct, allowing us to use it like this:

// Using map to change the active status to true and increase the score value by one for all persons
persons = persons.map { 
        $0.clone(active: true, score: $0.score + 1) 
}

Or using sugar syntax:

// Using map to change the active status to true and increase the score value by one for all persons
persons = persons.map { 
       $0.clone(toggle: .active, inc: .score(1)) 
}

What if there is a condition?

// Using map to change the active status to true and increase the score value by one for all persons
persons = persons.map { 
       !allowedNames.contains($0.name) 
       ? $0 
      : $0.clone(toggle: .active, inc: .score(1)) 
}

Numeric, String, and Bool Modifiers

// Increment score
person = person.clone(inc: .score(1))

// Toggle active status
person = person.clone(toggle: .active)

// Add prefix to name
person = person.clone(prefix: .name("Mr. "))

// Append suffix to name
person = person.clone(suffix: .name(" Legend"))

I hope you find this helpful for your work. Thank you.

Clean React MVVM inspired by Apple SwiftUI

RayedDev — Fri, 13 Jan 2023 08:23:02 +0000

I used to develop web apps using React for a long time and as recently I had to work with IOS Mobile development team inside my company helping to port web application to IOS and I noticed the Apple SwiftUI framework, indeed it is heavily inspired by React.js as data and state driven rendering technique, and it does apply MVVM architecture that i find a very clean approach, therefor I decided to cheat 🙂

So let's first look at simple plain SwiftU implementation of MVVM and see how clean it look

// Model
struct Task {
    var id: UUID = UUID()
    var title: String
    var complete: Bool
}

// ViewModel
class TodoManagerViewModel: ObservableObject
{
    // value publishers (publish change to view state and force view render)
    @Published var tasks: [Task] = []

    func addTask(title: String)
    {
        tasks.append(Task(title: title, complete: false))
    }

    func complete(id: UUID)
    {
        for i in tasks.indices
        {
            if tasks[i].id == id
            {
                tasks[i].complete = true
            }
        }
    }

    func clear()
    {
        tasks.removeAll()
    }
}


struct ContentView: View {
    // Observe ModelView and request render
    // if any @Published variables changed
    @StateObject var todoManger = TodoManagerViewModel()



    var body: some View {
        // Render logic same as
        // React Components composition style
        return AnyView()
    }
}

and by compiling this code we get this app

So the key design points is:

ViewModel with @Published properties
attach the ViewModel to the View to receive published changes.

Now let us construct the same design using Reactjs

I built this typescript module to help us construct a ViewModel and publish it state .

react-mvvm-like

now let us see how we can build MVVM react TodoManager application with this module the same way as Apple SwiftUI do.

1) install react-mvvm-like

2) creating Task Model with autoDoneAfter property so task gonna flip to done after a few seconds if not done by user.

3) construct the ViewModel class extending ObservableObject
and define published properties

4) receive the changes inside React Component.

thats it, we are done, please check full example below:

If you have any feedback on this article, please let me know!

Creating of shy.js to build Stateful DOM.

RayedDev — Fri, 14 Jun 2019 14:31:12 +0000

Over the years, I've been writing different size, scale web apps.
I started with jquery at the beginning and wrote many apps at a production level. I enjoyed the JQuery concept of holding DOM elements by selectors and do whatever you want with it.
It was amazing and making sense to me how it works until I used (React.js), and it did blow my mind I mean just the concept of the component design paradigm and passing the state all over the components tree just was state of the art and power saving and efficient rendering.

But it comes with a price which is the learning curve, many of my friends are web designers and finding it hard to adopt (React.js), and they always be crazy when they see the verity of (React.js) Examples that written in weird stuff (ES6, Typescript, JSX).
And they almost only involved with simple apps that live inside landing pages that they design (Forms, Simple Scroll interactivity, price table, product preferences checks, carts, etc.).
However, Jquery looks very easy for them and easy to include and start.

So I thought that might bringing (Reactjs) concept to them mixing it with jquery style would help :)

that's why I created (shy.js) tiny javascript library for apps that lives inside landing pages.

https://github.com/rayeddev/shy.js

still, in early development, I hope it makes sense to you and please bless with feedback