SwiftUI

Until the video vanished. :roll_eyes:

The simplicity with which you can define the UI. Very few frameworks make defining the UI simple. The closest is Microsoft with XAML.

I feel there are many deliveries emerging for this very purpose of easily defining UI to code. But it gets old when in todays marketing approach when every little thing is made to seem so advanced and ground breaking.

The other part is also how well everything is documented: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

The SwiftUI documentation is probably one of the best of any major language or framework. It’s not surprising at all given that @krilnon and team were behind it :stuck_out_tongue:

I’m in no way speaking against Swift its an awesome language, but rather speaking in general terms of the industry.

Cool I never knew that.

I totally hear you about the buzzwords around making it easy to build UI that everyone seems to be adopting. The reason why I am more optimistic about SwiftUI is that they control the language, platform, and the tools. That gives them greater flexibility in being more design/developer friendly than something that comes from someone that doesn’t control all three layers. What SwiftUI is doing is more like Flash/Flex than something more disjointed like you might see with Android Studio.

What role does @krilnon play in it all?

Thats true concerning full circle control, Apple has always been good with that even sometimes down to a fault. Maybe a little ironic with the comparison given Apple was prominent in the demise of Flash. :stuck_out_tongue_winking_eye:

I remember there was even a book out for Actionscript people transitioning to Swift.

I saw this thread when it was posted and thought: “Ok, I think I can see what they did there. It’s not too unlike react. And really, couldn’t react also be represented this way?” So I started hacking a little bit to see about having react use a similar syntax. Eventually I gave up. I thought it might be pretty straightforward but it turned out not to be.

[Cut to…] But then yesterday I found my initial attempt and decided to suck it up and follow through with it. Granted, I do not know the ins and outs of SwiftUI. Whats going on in my example here is entirely based on the example syntax shown in that first link.

The final react/javascript version code isn’t all that far off from the original. I took some creative liberties in some places but overall I’m happy with how close it got.

Original Swift:

struct Content : View {
    
    @State var model = Themes.listModel
    
    var body: some View {
        List(model.items, action: model.selectItem)  { item in
            Image(item.image)
            VStack(alignment: .leading) {
                Text(item.title)
                Text(item.subtitle)
                    .color(.gray)
            }
        }
    }
}

JavaScript/React:

const Content = SwiftUI(() => {

    const model = Themes.listModel

    List(model.items, { action: model.selectItem }, item => {
        Image(item.image)
        VStack({ alignment: "leading" }, () => {
            Text(item.title)
            Text(item.subtitle)
                .color("gray")
        })
    })
})

Edit: now on github! https://github.com/senocular/swiftui-react

2 Likes

These do look really similar! Nice :cake:

Nice job!

:disappointed_relieved: Imagine all the things laying around on our harddrives etc., that this approach could be applied to. The next great thing is laying somewhere dormant in slumber no doubt. :smile:

Ooof, I don’t know if the world is ready for that many new Flash projects to hit the streets :upside_down_face:

Ha, ha. Well I’m way past those 200 gigs, now its 200+ more of non Flash stuff. :crazy_face:

Wow! I’m only at around 100mb, but web content doesn’t take up too much space if all I have are emojis and text files :stuck_out_tongue:

For obvious reasons I’m not going to say much here; but removing the semicolons was a nice touch!

1 Like

I started without them but when I put them in the codesandbox editor, it added them automatically with its linter/prettier settings (which may be the defaults for create-react-app? not sure). :stuck_out_tongue:

¯\_(ツ)_/¯

1 Like

Plot twist: The emojis are text files!

2 Likes

:exploding_head:

I just finished watching the last episode of the last season of The Wire, and this is a plot twist I can totally get behind and run with. The truth is that the emojis are actually SVG files:

1 Like

FTFY

1 Like