macOS on iOS
It all started with a Tweet. It took on a life of its own. At the time, I was starting to think about more SwiftUI examples worth sharing. I thought to myself: “what if I recreated the macOS window experience on iPad” so I jumped into a Swift Playground.
As complex as it may appear, it’s entirely SwiftUI. The window (shadows and dragging support) and stoplights are just SwiftUI views. I started with Finder to get a recognizable Mac experience working.
The macOS stoplights component in SwiftUI
I decided to take it a step further and use recent SwiftUI examples I had put together by porting Control Center and System Preferences with little to no changes inside of the SwiftUI window component. I thought the cherry on top would be a web browser, so I ported the lil browser code over (almost line for line) to bring the concept to life.
Jordan Singer @jsngrmacOS Big Sur on iPad built in SwiftUI 🤯 https://t.co/OWhDGvGQEN
I put this together as an experiment to show just how powerful SwiftUI can be. It’s fun to experiment by imagining “what could be.” I encourage those who check out the code to add and extend to it!
I started sharing a lot more of the code I’ve been experimenting with. I figured the code would otherwise be sitting on my computer, and these are just experiments & me having fun. What do I have to lose? I know when I was watching the WWDC videos about iOS 14 and macOS Big Sur I was hoping that someone had posted examples online so I could give the new API’s a try without having to learn everything there is to know myself first.
It started with Mail for macOS, where my curiosity lied in finding out how to create the new sidebar in macOS Big Sur.
That lead to me giving the new multi-platform SwiftUI stuff a try. A shared SwiftUI codebase to support macOS, iOS, and iPadOS? Sign me up.
Here’s a list of all of the recent repositories and Swift Playground snippets of code I’ve shared:
System Preferences (macOS)
Control Center (macOS)
Wallet app (iOS, Swift Playground)
Apple Pay (iOS, Swift Playground)
lil widgets (iOS, Swift Playground)
SwiftUI for designers
I started a Twitter thread about translating Figma designs over to SwiftUI.
I hope that it can help designers visualize how something you might design in Figma can translate directly to SwiftUI so that you can give it a try yourself using Swift Playgrounds. I encourage everyone to check out the thread for some practical real-world examples.
Check out the latest Recreate post: Recreate the Messages App (iOS 14) - Part I