Natko Bišćan

eyes

For starters, what exactly does it mean to 

? It’s a term that represents the action of navigating to a specific screen or a resource inside an app, using a URI. The mentioned screen is usually located deeper in the stack. Deep links connect users to relevant content, using a single navigation step, in a way that’s intuitive for them. The practice can take various forms. For example, pressing an image which navigates you to a post on the Facebook app, ads that navigate you to the App Store or a promo email leading the way to an app.

We can differentiate internal and external deep links (not the official classification, but you’ll get the point). Internal links navigate users to a specific screen of the same app, while external ones navigate users from your app into another.

Let’s say you have some sort of geolocation support but only in the form of a small map, appearing in your app. So, you want users to have the ability to deep-link into Google Maps. Or you just don’t want to go to web view in your app but open a certain URI in the device’s default browser app instead. This would be 

An example of external deep linking.

An example for an internal deep link would be pressing a notification bubble which navigates to a specific screen (someone liked your photo → navigate user to photo details screen). So, if the whole deep linking thing is happening inside a single app, it would be considered an 

An example of internal deep linking.

In this post, I’ll explain these principles on a simple notification example. When the users press a notification, you want to navigate them into a corresponding screen, in most cases stacking a bunch of screens under it in a logical order. One of the problems you may encounter while using internal linking is passing the data to an inner screen. Since the user is not navigating and stacking one screen at a time (and passing the required data accordingly), you’ll have to find a way to get specific data that needs to be presented directly on that screen. Let me give you an example here.

You have Instagram running in the background and receive a notification saying someone liked your photo. After pressing on that notification, Instagram will stack the picture details screen (let’s call it that) on top of the screen that the app was on in the background. Similarly, with Instagram cold starting, this will result in the picture details screen being stacked on the homepage of the app. How this will be handled in your app is solely up to you, and perhaps the designer.

When defining routes, each screen should have an assigned path property, which looks like this 

 as a parameter. So, to solve the data passing problem, you’d want to use a deep link URI. This not only decides which screens to navigate to but also passes various data required on that screen. You can access data passed as a part of the link in your components via the navigation prop, but more about that later. The idea here is to get the id for that screen from a deep link and to fetch the necessary data from the backend.

You can also use deep links to tell the app which tab on your tab navigator to select as active. Imagine an app with a bottom tab navigation and each tab having a stack navigator. Each tab has its own route as well. With deep links, you can define which tab to set as active and stack more screens from that tab on top, all in one route. That link could look something like this 

So, you can combine stacking, switching tabs, passing params — go crazy here!

construction

Let’s get more technical! For deep links to be recognized by a device, you’ll need to register them separately for each platform. Just as a side note: I’m using the following versions: 

iOS requires adding a URL types identifier and a scheme in your Xcode project:

After that, you’ll need to modify the AppDelegate file by adding the following code:

#import <React/RCTLinkingManager.h>

// ...
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

{
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

For Android, open AndroidManifest.xml. Besides the scheme, you need to register each host and remember to add new hosts upon further implementation in the React Native app 

warning

. Here’s an example snippet, lines to add are 22–30:

The next thing you have to do is to open your uppermost React component (or the one that’s a parent to those that need deep linking abilities). In my case, that was the 

render() {
   return (
      <AppNavigator
         // ...
         uriPrefix={‘demo://’}
       />
   );
}

Adding routes to the navigator is the next step. As mentioned before, this can work on each type of the 

Just as a quick overview: my demo app contains an outer SwitchNavigator, which is made of the 

 screen and the inner StackNavigator named 

, whose structure is visible in a code snippet, seen a few lines down. There is also a link to a GitHub repo at the end of this paragraph.

, used to define the interactions with screens getting stacked on one another) you’d get something like this:

import {createStackNavigator} from 'react-navigation-stack';
import First from './First';
import Second from './Second';
import Third from './Third';

export default createStackNavigator(
  {
    First: {
      screen: First,
      path: 'first/:firstId',
    },
    Second: {screen: Second, path: 'second/:secondId'},
    Third: {screen: Third, path: 'third'},
  },
  {
    initialRouteName: 'First',
  },
);

 how to stack screens upon deep linking. In our 

 app, we have 2 navigators: the outer switch and the inner stack. So, if we went to 

Keep in mind that the app cold started, which produced some lag during stacking.

 is a stack navigator, it opened on its initial route, which is the First screen. Finally, Second stacked the Second screen on top. Because the first step is done in the switch navigator, and the rest in a stack navigator, we were only able to swipe back one step. You can access the parameter passed through the link (in our case it’s number 42) in the following way:

this.props.navigation.state.params.secondId

For the last step, let’s connect deep linking to push notifications. You can use React Native’s 

 method. This should be executed when the user presses the notification bubble on their device. To get that function, you’ll need some sort of a listener/handler, depending on which push notification service you’re using (or perhaps you’ve implemented your own). I was using 

, so the code in the component that is wrapping the whole app was the following 

arrow_down

. This is only necessary for iOS, hence the platform check:

OneSignal.addEventListener(“opened”, this.onOpened);

// ...rest of the OneSignal configuration...

onOpened(openResult) {
   if (Platform.OS === "ios") {
      Linking.openURL(openResult.notification.payload.launchURL)
             .catch(err  =>
               console.error(“An error occurred”, err)
             );
   }
}


rocket

https://github.com/nbiscan/deepLinkingExample

Something I’ve neglected to mention in this post is a nice UX spice up – scrolling to specific coordinates of ScrollView when deep linking, e.g. the comment thread opens and the UI automatically scrolls to a new reply on your comment.

, made by Apple, for devices running iOS. They differ from classic deep links because they don’t use URI links but match a set of web pages to locations in-app. So, when a user opens a matched web page, he will automatically be redirected to the app. Universal links are exclusive to iOS devices and work even when the app is not installed. However, I would not really recommend implementing support for this in your React Native app. It can bring potential complications and not-so-many benefits for a React Native app. If you decide to go for it, read all the documentation carefully, it’s always a good idea.

blush

Dive into the sea of deep linking. We have some code and a few examples to keep you afloat.

Deep Linking in React Native

Roza Zanini Mozara

Hello from the same, but different Ars Futura! 

 As you can see, we have some exciting news to share – our brand has had a huge redesign!

After a decade of making our mark, it was time for a refresh. Our old logo served us well, but we wanted to fill in the gaps and tidy up a few things. For instance, we never had a logomark or really defined design principles (until now!), and let’s be honest – our old merch has been looking outdated for quite some time now. 

At the end of 2020, we said “Hey, it’s about time we got ourselves a new look” and since then, it’s been quite a journey! 

To kick it off,  we sought out some help and landed on Studio Size as the perfect choice. So, to set the stage for the redesign, we answered a lot of questions, shared some dos and don'ts, and came up with a few ideas, until the vision started taking shape. After a few rounds of suggestions and feedback, we found the 

 that felt just right, and that you can see today! 

One of the key inspirations that helped shape our new design was the concept of retrofuturism. Think blending the fun from the 70s and 80s with the idea of flying cars, and you’re on the right track! The theme resonates with our visual identity and our new tagline: 

(we hope you’re ready to see it everywhere from now on because you just might 

It’s important to add that through all these changes, one thing remains the same – our core values. Yes, we’ve given them a bit of a re-vamp of their own, but we’re still committed to 

Once we’ve nailed down all the important things: our new logo, logomark, tagline, colors 

(fun fact: we chose purple because it was the first Ars Futura color, going back to the roots and stuff, you get it)

... the real fun began! We were set to design and develop our new website, think of new merch ideas and bring them to life, give our office a bit of a makeover, etc. Now, after months and months of hard work and creative brainstorming, we’re proud and happy to reveal our new brand design to the world. 

We hope you’ll love it as much as we do.

Our Future Starts Today

The New Look of Ars Futura

Ars Futura – The Redesign

Roko Jurić

In this blog, we’ll explore how to create tournament brackets in SwiftUI, just like the name says. Recently, our client wanted a new and mobile-friendly way to display brackets natively, instead of relying on a WebView and endlessly scrolling on all axes. So I started looking at libraries, and soon stumbled upon a 

 that served as an inspiration for what I’m about to show you. We’ll dive into the code pretty quickly, building a custom view that can handle user interaction, and animate transitions between rounds. Whether you're building a sports app, or just looking to enhance your SwiftUI skills, this tutorial will give you the tools to create dynamic and engaging tournament brackets that will captivate your users.

All of the code in this blog is written in Xcode 14.2 and iOS 16.

The finished product will look like this:

struct ContentView: View {
    // 1
    private let columnWidth: CGFloat = UIScreen.main.bounds.width * 0.9
    private let colors: [Color] = [Color.red, Color.green, Color.blue]
    
    var body: some View {
        // 2
        ScrollView(.horizontal, showsIndicators: false) {
            columns
        }
    }
    
    // 3
    private var columns: some View {
        HStack(spacing: 0) {
            ForEach(colors, id: \.hashValue) { color in
                color
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(colors.count) * columnWidth)
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

If you’ve followed the steps correctly so far, your app should look like this:

After we’ve created the basic column layout and scrolling, we should add the snapping feature. Unfortunately, there isn’t a built-in way to accomplish this, so we’ll have to play around with gestures and offsets.

The way to achieve snapping is to manually control the dragging and content offset inside the 

. In order to do it, we’re going to introduce the 

 as a parameter. Also, let’s disable the 

 so that it doesn’t cancel our gestures. SwiftUI gestures come with some useful functions, and we’ll be using 

 callback, we’re going to be modifying the finger drag offset, and inside 

, we’re going to be resetting it to 0, and updating the total offset. To keep track of these inside 

, we’re going to add properties and functions, just to tidy things up a bit.

If you followed all of the steps, you should have code that closely resembles the one below:

struct ContentView: View {

    ...

    // 2
    @State private var dragOffsetX: CGFloat = 0
    @State private var focusedColumnIndex: Int = 0

    private var offsetX: CGFloat {
        // TODO: Offset Calculation for current focused column
    }

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            columns
            // 5
                .offset(x: dragOffsetX)
        }
        .frame(width: UIScreen.main.bounds.size.width)
        // 1
        .scrollDisabled(true)
        .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
            .onChanged(updateCurrentOffsetX)
            .onEnded(handleDragEnded)
        )
    }

    private var columns: some View {
        HStack(spacing: 0) {
            ForEach(colors, id: \.hashValue) { color in
                color
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }

    private var numberOfColumns: Int {
        colors.count
    }

    // 3
    private func updateCurrentOffsetX(_ dragGestureValue: DragGesture.Value) {
        dragOffsetX = dragGestureValue.translation.width
    }

    // 4
    private func handleDragEnded(_ gestureValue: DragGesture.Value) {
        // TODO: Decide to stay at the same column, or snap to some other column.
    }

    private func moveToLeft() {
        withAnimation {
            focusedColumnIndex -= 1
            dragOffsetX = 0
        }
    }

    private func moveToRight() {
        withAnimation {
            focusedColumnIndex += 1
            dragOffsetX = 0
        }
    }

    private func stayAtSameIndex() {
        withAnimation {
            dragOffsetX = 0
        }
    }
}

    ...



In this state, the app still doesn’t scroll, nor does it snap, but we’ll get to that soon. If you think this might not work, you can return 

 and you’ll see that the gesture works, but since we haven’t implemented snapping yet, it just stays where you left it, and then snaps back to start once you start dragging again. Fix for that is coming up.

struct ContentView: View {

    ...
    
    private var offsetX: CGFloat {
        // 3
        dragOffsetX
    }
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            columns
                .offset(x: offsetX)
        }
        .frame(width: UIScreen.main.bounds.size.width)
        .scrollDisabled(true)
        .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
            .onChanged(updateCurrentOffsetX)
            .onEnded(handleDragEnded)
        )
    }
    
    ...
    
    private func handleDragEnded(_ gestureValue: DragGesture.Value) {
        // 1
        let isScrollingRight = dragOffsetX < 0
        
        //2
        let didScrollEnough = abs(gestureValue.translation.width) > columnWidth * 0.5
        
        let isFirstColumn = focusedColumnIndex == 0
        let isLastColumn = focusedColumnIndex == numberOfColumns - 1
        
        // 3
        guard didScrollEnough else {
            return stayAtSameIndex()
        }
        
        // 4
        if isScrollingRight, !isLastColumn {
            moveToRight()
            
        //5
        } else if !isScrollingRight, !isFirstColumn {
            moveToLeft()
            
        // 6
        } else {
            stayAtSameIndex()
        }
    }
    
    ...
    
}

Now, if you’ve been following closely, you should see that we always snap back to the first column after the dragging stops. This is because we have not yet implemented the 

, make a calculation to bring the currently focused column - into focus. To scroll the 

 to the right, we need to add a negative offset, so for each column index, we need to add a negative 

 so that we can still drag the view around. You should end up with something like this:

struct ContentView: View {
    
    ...
    
    private var offsetX: CGFloat {
        -CGFloat(focusedColumnIndex) * columnWidth + dragOffsetX
    }
    
    ...
    
}

 Just like that, we have snapping! In the next section, we’ll see how to implement the actual brackets.

Colors are lovely, but after some time, they get boring. So let’s spice things up and add the actual brackets. To start things off, we’ll add some models which will help us with visualization later on. These can be customized to your needs and liking, but they’re simple enough for this example.

struct MatchData: Identifiable {
    let team1: String
    let team2: String
    let team1Score: Int
    let team2Score: Int
    
    var id: String {
        team1 + team2
    }
}

struct Bracket {
    let name: String
    let matches: [MatchData]
}

In order to keep things nice and tidy, we’ll separate the column view into its own struct, in our case, 

struct BracketColumnView: View {
    // 1
    let bracket: Bracket
    
    var body: some View {
        LazyVStack(spacing: 0) {
        
            // 2
            ForEach(bracket.matches) { matchData in
                BracketCell(matchData: matchData)
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    private static let previewBracket: Bracket = Bracket(name: "Semi Finals",
                                                         matches: [
                                                            .init(team1: "Team 1", team2: "Team 2", team1Score: 2, team2Score: 1),
                                                            .init(team1: "Team 3", team2: "Team 4", team1Score: 1, team2Score: 2),
                                                            .init(team1: "Team 5", team2: "Team 6", team1Score: 1, team2Score: 2),
                                                            .init(team1: "Team 7", team2: "Team 8", team1Score: 3, team2Score: 0),
                                                        ])
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket)
            .padding(.horizontal)
    }
}

Now that we can see this is working, let’s replace the colors with 

. Also, we’ll wrap everything inside a vertical 

 so that we can see the matches that are offscreen. Inside 

 looks on our end, yours should look similar.

struct ContentView: View {

    ...
    
    // 1
    let brackets: [Bracket]
    
    ...
    
    var body: some View {
        // 2
        ScrollView(.vertical, showsIndicators: false) {
            ScrollView(.horizontal, showsIndicators: false) {
                columns
                    .offset(x: offsetX)
            }
            .frame(width: UIScreen.main.bounds.size.width)
            .scrollDisabled(true)
            .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                .onChanged(updateCurrentOffsetX)
                .onEnded(handleDragEnded)
            )
        }
    }
    
    private var columns: some View {
        // 3
        HStack(alignment: .top, spacing: 0) {
            // 4
            ForEach(brackets, id: \.name) { bracket in
                BracketColumnView(bracket: bracket)
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }
    
    // 5
    private var numberOfColumns: Int {
        brackets.count
    }
    
    ...
    
}

struct ContentView_Previews: PreviewProvider {
    
    // 6
    @State static private var brackets: [Bracket] = [
        Bracket(name: "Eights", matches: [
            MatchData(team1: "Team 1", team2: "Team 2", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 3", team2: "Team 4", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 5", team2: "Team 6", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 7", team2: "Team 8", team1Score: 0, team2Score: 3),
            MatchData(team1: "Team 9", team2: "Team 10", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 11", team2: "Team 12", team1Score: 3, team2Score: 1),
            MatchData(team1: "Team 13", team2: "Team 14", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 15", team2: "Team 16", team1Score: 1, team2Score: 2)
        ]),
        Bracket(name: "Quarter Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 4", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 5", team2: "Team 8", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 10", team2: "Team 11", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 13", team2: "Team 16", team1Score: 0, team2Score: 3),
        ]),
        Bracket(name: "Semi Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 8", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 10", team2: "Team 16", team1Score: 1, team2Score: 2),
        ]),
        Bracket(name: "Grand Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 16", team1Score: 1, team2Score: 2)
        ])
    ]
    
    static var previews: some View {
        ContentView(brackets: brackets)
    }
}

Step 4: Cells, lines, and an algebra remider 

You might be wondering: “This is nice, but so far it’s an appetizer, let’s get to the main course already”. We agree, but let us try to explain the concepts first, and then once we understand that, we can dive into the code.

In order to know how to draw the lines (which connect the cells), we need to set some ground rules (again).

The first column cells shouldn’t have a left line (as they’re the first matches).

But how do we achieve the “compacting” and “decompacting” of cells when you scroll left and right?

Decide the height of the cell you can use for the cells in focus (in our case 100pt).

In theory, with all of this knowledge, we should get cells and lines that look nice.

struct BracketCell: View {
    
    ...
    
    // 1
    let heightScalingExponent: Int
    let isTopMatch: Bool
    let isCollapsed: Bool
    let isFirstColumn: Bool
    let isLastColumn: Bool
    
    private var lineColor: Color {
        .black
    }
    
    // 2
    var body: some View {
        HStack(spacing: 0) {
            leftLineArea
            
            VStack(spacing: 0) {
                if !isCollapsed {
                    topLabelArea
                }
                
                team1ScoreArea
                team2ScoreArea
                
                if !isCollapsed {
                    touchForMoreInfoArea
                }
            }
            
            rightLineArea
        }
        .listRowSeparator(.hidden)
        .listRowInsets(EdgeInsets())
        
        // 3
        .frame(height: height)
        .transition(.opacity.combined(with: .scale(scale: 1, anchor: .top)))
    }
    
    private var height: CGFloat {
        100 * pow(2, CGFloat(heightScalingExponent))
    }
    
    // 4
    private var leftLineArea: some View {
        Group {
            if !isFirstColumn {
                Rectangle()
                    .foregroundColor(lineColor)
            } else {
                Spacer()
            }
        }
        .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
    }
    
    // 5
    private var rightLineArea: some View {
        Group {
            if !isLastColumn {
                rightLine
            } else {
                Spacer()
                    .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
            }
        }
    }
    
    private var rightLine: some View {
        HStack(spacing: 0) {
            rightHorizontalLine
            
            // 6
            if isTopMatch {
                topMatchRightVerticalLine
                
            // 7
            } else {
                bottomMatchRightVerticalLine
            }
        }
    }
    
    private var rightHorizontalLine: some View {
        Rectangle()
            .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
            .foregroundColor(lineColor)
    }
    
    private var topMatchRightVerticalLine: some View { //place vertical line in lower half of view
        VStack(spacing: 0) {
            Spacer()
                .frame(height: height / 2)
            Rectangle()
                .frame(width: 2, height: height / 2 + 2)
                .foregroundColor(lineColor)
        }
    }
    
    private var bottomMatchRightVerticalLine: some View { //place vertical line in upper half of view
        VStack(spacing: 0) {
            Rectangle()
                .frame(width: 2, height: height / 2 + 2)
                .foregroundColor(lineColor)
            Spacer()
                .frame(height: height / 2)
        }
    }
    
    ...
    
}

struct BracketCell_Previews: PreviewProvider {
    private static let previewMatchData = MatchData(team1: "Team 1", team2: "Team 2", team1Score: 2, team2Score: 1)
    
    static var previews: some View {
        BracketCell(matchData: previewMatchData,
                              heightScalingExponent: 0,
                              isTopMatch: true,
                              isCollapsed: false,
                              isFirstColumn: true,
                              isLastColumn: false)
    }
}

, but where do they get all of this data from? We have to pass this data from 

. In order to calculate all the necessary things, it’ll need some data.

struct BracketColumnView: View {

    ...

    // 1
    let columnIndex: Int
    let focusedColumnIndex: Int
    let lastColumnIndex: Int
    
    var body: some View {
        LazyVStack(spacing: 0) {
            // 2
            ForEach(0 ..< bracket.matches.count, id: \.self) { matchIndex in
                BracketCell(matchData: bracket.matches[matchIndex],
                                      // 3
                                      heightScalingExponent: columnIndex - focusedColumnIndex,
                                      isTopMatch: matchIndex % 2 == 0,
                                      // 4
                                      isCollapsed: columnIndex < focusedColumnIndex,
                                      isFirstColumn: columnIndex == 0,
                                      isLastColumn: columnIndex == lastColumnIndex)
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    
    ...
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket,
                                    columnIndex: 0,
                                    focusedColumnIndex: 0,
                                    lastColumnIndex: 2)
            .padding(.horizontal)
    }
}

 to the vertical ScrollView. Since we’ve decided to condense the cells once we scroll onto the column, we’re going to scroll the vertical 

 up so that the user doesn’t have to do it manually. Also, we’ll add some alignments to our snap scrolling so that we can see all of this in action better.

struct ContentView: View {
    
    ...
    
    // 1
    private var offsetX: CGFloat {
        -CGFloat(focusedColumnIndex) * columnWidth + dragOffsetX + leadingOffsetXForCurrentColumn
    }
    
    private var leadingOffsetXForCurrentColumn: CGFloat {
        if focusedColumnIndex == 0 {
            return 0
        } else if focusedColumnIndex == numberOfColumns - 1 {
            return UIScreen.main.bounds.width * 0.10
        } else {
            return UIScreen.main.bounds.width * 0.05
        }

    }
    
    var body: some View {
        // 2
        ScrollViewReader { scrollViewProxy in
            ScrollView(.vertical, showsIndicators: false) {
                // 3
                EmptyView()
                    .id("scroll-to-top-anchor")
                ScrollView(.horizontal, showsIndicators: false) {
                    columns
                        .offset(x: offsetX)
                }
                .frame(width: UIScreen.main.bounds.size.width)
                .scrollDisabled(true)
                .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                    .onChanged(updateCurrentOffsetX)
                    .onEnded(handleDragEnded)
                )
            }
            // 4
            .onChange(of: focusedColumnIndex) { _ in
                withAnimation {
                    scrollViewProxy.scrollTo("scroll-to-top-anchor")
                }
            }
        }
        
    }
    
    private var columns: some View {
        HStack(alignment: .top, spacing: 0) {
            
            // 5
            ForEach(0..<brackets.count, id: \.self) { columnIndex in
                
                //6
                BracketColumnView(bracket: brackets[columnIndex],
                                            columnIndex: columnIndex,
                                            focusedColumnIndex: focusedColumnIndex,
                                            lastColumnIndex: numberOfColumns - 1)
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }
    
    ...
    
}

This is how the app should look and behave after implementing all of the changes above:

Thank you for taking the time to read this blog. I hope you found the information useful and that it helped you solve your problem, or at least develop your skills in SwiftUI. Stay tuned for an upcoming bonus chapter, where we'll be making a scrollable column indicator, and a match display screen. Happy coding!

Bonus: Column indicator and match display

If you remember the final product, there was a view that displayed the column names. It was scrollable, and would highlight the current column name. It was also tappable and would animate transitioning to that column.

struct SelectedColumnIndicator: View {
    let columnNames: [String]
    
    // 1
    @Binding var focusedColumnIndex: Int
    
    var body: some View {
        // 2
        ScrollViewReader { scrollProxy in
            ScrollView(.horizontal, showsIndicators: false) {
                scrollViewContent
            }
            
            // 3
            .onChange(of: focusedColumnIndex) { newIndex in scroll(to: newIndex, using: scrollProxy)}
        }
    }

    var scrollViewContent: some View {
        HStack(spacing: 24) {
            
            // 4
            ForEach(0..<columnNames.count, id: \.self) { columnIndex in
                indicator(for: columnIndex)
            }
        }
        .padding(24)
    }
    
    // 5
    private func indicator(for columnIndex: Int) -> some View {
        Button(action: { didTapColumnIndicator(at: columnIndex) }) {
            Text(columnNames[columnIndex].uppercased())
                .font(.system(size: 24))
                .bold()
                .foregroundColor(columnIndex == focusedColumnIndex ? .black : .gray)
                .id(columnIndex)
        }
    }
    
    private func scroll(to index: Int, using scrollProxy: ScrollViewProxy) {
        withAnimation {
            scrollProxy.scrollTo(index, anchor: .center)
        }
    }
    
    // 6
    private func didTapColumnIndicator(at index: Int) {
        withAnimation {
            focusedColumnIndex = index
        }
    }
}

struct SelectedColumnIndicator_Previews: PreviewProvider {
    @State private static var focusedColumnIndex = 0
    
    static var previews: some View {
        SelectedColumnIndicator(columnNames: ["Eights", "Quarterfinals", "Semifinals", "Finals"], focusedColumnIndex: $focusedColumnIndex)
    }
}

struct ContentView: View {
   
    ...
   
    var body: some View {
        ScrollViewReader { scrollViewProxy in
            ScrollView(.vertical, showsIndicators: false) {
                
                // 1
                SelectedColumnIndicator(columnNames: brackets.map({ bracket in bracket.name }),
                                        focusedColumnIndex: $focusedColumnIndex)
                .id("scroll-to-top-anchor")
                
                ScrollView(.horizontal, showsIndicators: false) {
                    columns
                        .offset(x: offsetX)
                }
                .frame(width: UIScreen.main.bounds.size.width)
                .scrollDisabled(true)
                .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                    .onChanged(updateCurrentOffsetX)
                    .onEnded(handleDragEnded)
                )
            }
            .onChange(of: focusedColumnIndex) { _ in
                withAnimation {
                    scrollViewProxy.scrollTo("scroll-to-top-anchor")
                }
            }
        }
        
    }
    
    ...
    
}

Now that’s done, we'll also add the option of tapping on a match to see details. Create 

 object as data. This view can be styled to your liking, mine can be seen below.

struct MatchDetailsView: View {
    let matchData: MatchData
    
    var body: some View {
        VStack(spacing: 16) {
            teamNamesArea
            teamScoresArea
        }
    }
    
    private var teamNamesArea: some View {
        HStack(spacing: 40) {
            Text(matchData.team1.uppercased())
                .bold()
                .opacity(matchData.team1Score > matchData.team2Score ? 1 : 0.3)
            
            Text("vs")
                .font(.system(size: 16))
            
            Text(matchData.team2.uppercased())
                .bold()
                .opacity(matchData.team2Score > matchData.team1Score ? 1 : 0.3)
        }
        .font(.system(size: 32))
    }
    
    private var teamScoresArea: some View {
        HStack(spacing: 20) {
            Text("\(matchData.team1Score)".uppercased())
                .bold()
                .opacity(matchData.team1Score > matchData.team2Score ? 1 : 0.3)
            
            Text(":")
                .font(.system(size: 16))
            
            Text("\(matchData.team2Score)".uppercased())
                .bold()
                .opacity(matchData.team2Score > matchData.team1Score ? 1 : 0.3)
        }
        .font(.system(size: 48))
    }
}

struct MatchDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        MatchDetailsView(matchData: .init(team1: "Team 1", team2: "Team 2", team1Score: 3, team2Score: 0))
    }
}

struct BracketColumnView: View {

    ...
    
    // 1
    let didTapCell: (MatchData) -> Void
    
    var body: some View {
        LazyVStack(spacing: 0) {
            ForEach(0 ..< bracket.matches.count, id: \.self) { matchIndex in
                BracketCell(matchData: bracket.matches[matchIndex],
                                      heightScalingExponent: columnIndex - focusedColumnIndex,
                                      isTopMatch: matchIndex % 2 == 0,
                                      isCollapsed: columnIndex < focusedColumnIndex,
                                      isFirstColumn: columnIndex == 0,
                                      isLastColumn: columnIndex == lastColumnIndex)
                
                // 2
                .onTapGesture {
                    didTapCell(bracket.matches[matchIndex])
                }
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    
    ...
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket,
                                    columnIndex: 0,
                                    focusedColumnIndex: 0,
                                    lastColumnIndex: 2,
                                    didTapCell: { _ in })
            .padding(.horizontal)
    }
}

struct ContentView: View {
    
    ...
    
    // 1
    @State private var presentingMatchDetails: MatchData?
    
   ...
    
    var body: some View {
        ScrollViewReader { scrollViewProxy in
            ScrollView(.vertical, showsIndicators: false) {
                SelectedColumnIndicator(columnNames: brackets.map({ bracket in bracket.name }),
                                        focusedColumnIndex: $focusedColumnIndex)
                .id("scroll-to-top-anchor")
                
                ScrollView(.horizontal, showsIndicators: false) {
                    columns
                        .offset(x: offsetX)
                }
                .frame(width: UIScreen.main.bounds.size.width)
                .scrollDisabled(true)
                .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                    .onChanged(updateCurrentOffsetX)
                    .onEnded(handleDragEnded)
                )
            }
            
            // 2
            .sheet(item: $presentingMatchDetails, onDismiss: { presentingMatchDetails = nil }) { details in
                MatchDetailsView(matchData: details)
                    .padding(.horizontal)
                    .presentationDetents([.medium])
                    .presentationDragIndicator(.visible)
            }
            .onChange(of: focusedColumnIndex) { _ in
                withAnimation {
                    scrollViewProxy.scrollTo("scroll-to-top-anchor")
                }
            }
        }
        
    }
    
    private var columns: some View {
        HStack(alignment: .top, spacing: 0) {
            ForEach(0..<brackets.count, id: \.self) { columnIndex in
                BracketColumnView(bracket: brackets[columnIndex],
                                            columnIndex: columnIndex,
                                            focusedColumnIndex: focusedColumnIndex,
                                            lastColumnIndex: numberOfColumns - 1,
                                            
                                            // 3
                                            didTapCell: { matchData in presentingMatchDetails = matchData }
                )
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }
    
    ...
    
}

A step-by-step guide to building tournament brackets with SwiftUI

Tournament Brackets in SwiftUI

Everybody likes being good at something. And, in order to become good, you need to spend some time being, well, not so good. But what happens when you spend the necessary time, and then decide that maybe it’s time for a change? That’s exactly what happened to us, so we decided to make the switch. We took a turn from full-stack to iOS development.

When I first started working in Ars Futura (2 years ago) I was working on an MVP as a full-stack developer. After that, I started working on a company product called Along, the only HR tool your company will ever need, really. (And yes, this is a shameless plug.) It was a great project to be a part of – the product is great, the team is great, and I was learning a lot whilst working on it. As a web developer, I was mainly using React and NextJS, technologies that were, as I would come to realize, very different from what I signed myself up for when I decided to do a career switch.

For my first project, I was developing a full-stack application using Ruby on Rails and React. Although I only worked on it briefly, I soon had the chance to switch to a brand new project and an even “fuller” stack of technologies. This time, I used SailsJS for the backend and React for the front-end, but the project’s main focus was on its mobile app, which was built with React Native. Despite having no prior experience with React Native, I was eager to take on the mobile development challenge and dove right in.

There isn’t one concrete reason why I decided to make the switch. It’s not like I was having a bad time in web development, or that I didn’t like the projects I was working on (I enjoyed both). I just wanted a change.

I vaguely remember something being said about switching teams, so I decided to give it a shot. First, I talked to my HR colleague about it, and then to our executives, who gave their permission and blessing.

As I mentioned, I found myself drawn to mobile app development more than web development. However, as I gained experience with React Native, I began to realize that it may not be the best technology for building more complex mobile apps compared to native languages.

While React Native certainly has its benefits - such as the ability to create cross-platform apps using a single language - it may not be the optimal choice for apps that require a high level of performance or specialized features. Plus, between the two mobile platforms, I was leaning towards iOS anyways, so I decided to try and make the switch.

To be honest, I wasn’t really sure what to expect. I knew (and everybody else also knew) that I didn’t know the first thing about mobile development. So I started looking at some tutorials and courses online to gain a better understanding of iOS. After talking to the iOS team about the switch and laying out the onboarding plan, I was sure it was the right thing to do. Thereafter, my decision was cemented.

I knew this was going to be something quite different, as I went from working on a large team with familiar technologies to a much smaller team with entirely new teammates, programming languages, and tools. While I was excited about the opportunity to learn and grow in this new environment, I also felt a sense of pressure to adapt quickly and contribute. Also, since I had some experience with mobile development, I felt like there was a bit more pressure on my shoulders to learn faster. It sounds negative, but don’t worry, it will get merrier as we progress further down this blog. 

Once the onboarding process started, I was reevaluating my decision. Remember those tutorials and courses I mentioned? Well, as it turns out, the cool new declarative and reactive UI framework from Apple called SwiftUI, which I studied in my free time and reminded me a lot of React and Next, well, that was not what I was about to use for my onboarding project. Instead, I was to learn and use UIKit, a 14-year-old imperative UI framework. The reasoning was that a lot of apps still use UIKit and that SwiftUI is still not production ready. How is it not production ready if Apple says it is? Still though, I knew I would have expert guidance on this 

 so it wasn’t that big of an issue really.

As our onboarding project, we were to do a TODO app (

). By doing this, we learned the basics of iOS development.

Whilst tutorials and courses are a great way to learn, having a real person as a mentor is so much better. Building the TODO app was great, challenging, and, at times, frustrating. We really learned a lot about app architecture (MVVM was used here), building out UIs using autolayout, dependency management, networking, and testing iOS apps. The app was simple enough not to be overwhelming but also complicated enough to portray the full experience of development.

All in all, I found the switch very nice, and I got exactly what I hoped for – a challenge. Even though learning Swift and UIKit looked daunting at first, it was actually a pretty nice experience full of a-ha, so that’s how this thing actually works. The framework provides you with an easy way to do almost anything you can think of, and chances are, if you see something in every app you use, it’s very easy to accomplish it in UIKit. Xcode, on the other hand, was a bit underwhelming. When it works, it works really well, but when it doesn’t, it really doesn’t. This came as a surprise, as I thought surely it would work great since Apple is such a big company. Sike! 

While the pressure could’ve been daunting, I was eager to take on the challenge and demonstrate my skills and abilities. As I continued to learn, I found that the new environment’s challenges actually had a positive influence on me. I was able to learn new skills quickly and effectively, in large part thanks to my supportive new teammates.

Just like Roko mentioned, we developed a TODO app as part of our onboarding process, so it almost felt like working on a real, small project with my new teammates. It was a nice introduction to all the technologies I’ll be using in the future and a good application of theoretical knowledge I got from tutorials and books.

Rather than moving directly to a client project following the onboarding process, the team and I decided to take the partially completed TODO app and turn it into a polished, App Store-ready application. The idea had multiple benefits – from researching new frameworks, like SwiftUI, which, at that time, was not used on a client product yet, to playing around with the designs and animations and exploring the capabilities of new tools that were at our disposal. The app is called Sparkle, and I wrote a bit about creating widgets for it in 

As always with software development, there are online resources you can use for learning, and iOS is no different. We both found YouTube great for video courses, especially for beginners, when you’re just starting out and pretty much don’t know anything. There’s also 

 (previously Raywenderlich) which offers great deep dives into specific topics, with tutorials, guides, books, and videos. We also found articles on 

 to be extremely well-made and very helpful. As always, 

 is a big one. We still find ourselves using all 4 of these, almost on a daily basis.

I’m happy to report things are going great! One of the things I didn’t expect was app versioning and updating. When working in web development, you can basically ship updates as soon as you want, and the user always gets the newest version of the build. There’s also the process of App Store review, where Apple has the option of shutting down your release because you’re not complying with their rules or guidelines. This process always takes time, and can completely mess up your release schedule if you’re non-compliant.

After completing the Sparkle project, I felt as though I had landed on my feet 

. Almost immediately after, I started working on a client project, so the learning pace accelerated. The app was much larger in scope, there were new developers to cooperate and communicate with, and within only a couple of months, it felt just like before the switch. We have weekly meetings where we share knowledge and insights, using presentations and code reviews, which come in really handy. Additionally, we’re currently in the process of developing a handbook that will serve as a reference for our team, providing guidelines and best practices for our work.

After the TODO app was completed, I started working on the 

 (OWL) app for new feature development and maintenance. This was a pretty big codebase (the biggest I’ve worked on so far), and the app was already a few years old (hello UIKit!).

Working on OWL was challenging at first, but once I got into the groove, things were good. It was quiet at first with mainly bug fixes and minor features, and then we shipped a really big feature called Event Perks, which is an in-person feature for fans attending live matches. Fans that are watching the game live from the arena can scan QR codes and claim in-game items, wallpapers, and activation codes. This was the first big feature with a strict deadline I ever worked on and shipped, so it was a bit scary, but rewarding in the end.

Since January 2023, I've been working on a bookmarking tool 

, another great company product that makes saving bookmarks easy, both for private users and teams. I’m building the iOS app using SwiftUI, but more on that in the next chapter sometime soon.

During the brief period between my work on Sparkle and the client project, I had the opportunity to work on an exciting research and development project utilizing 

, Apple’s framework for creating immersive 3D environments, games, and physics simulations, among other capabilities. It was focused on creating a proof-of-concept app for a potential client and learning more about this technology.

At the moment, I’m working on an app called 

. It’s designed to help users report sightings of Unidentified Anomalous Phenomena (UAP), and it relies heavily on navigation and map technologies. This is a new area for me, but I’m really enjoying the challenge of working with these tools. Specifically, we’re using MapBox, which is a powerful mapping platform that offers a lot of flexibility and customization options.

As we’ve already mentioned, we’re currently using both UIKit and SwiftUI for development on different projects. But besides those, some other tools & technologies we’re using (other than the usual ones like Git and Jira) are:

Most of our resources remained the same as in the beginning. YouTube has been completely phased out, as the videos are usually too generic, and as we become more proficient in Swift and various UI frameworks, they don't fit our needs anymore. One of the big ones we’ve started using more and more is the official Apple Developer documentation. One of the newer ones everybody’s talking about and we’ve been trying out is, you guessed it, 

. We’ve found it to be really good for writing boilerplate code, but you still need to guide it and know Swift to make the most out of it.

Another big learning opportunity we got to experience was the DO iOS conference in Amsterdam. The conference lasted 2 days, and in that time we learned a lot, from the history of Swift, iOS development, and even some WatchOS development. We also learned of many new blogs and resources we frequent from then on.

I’m really happy with how the switch went. I got the desired change and challenge I was longing for. Should you switch careers? I’m not sure, that’s an answer only you know. All I can say is: if you want a change, your workplace allows it, and you’re not afraid of becoming a beginner again - go for it! As a final note, I’d like to thank everyone involved from Ars Futura for making it possible for the career switch to happen, and for supporting me the entire way.

The switch from web development to iOS development has added some excitement and variety to my career. With each passing day, I feel more confident and fluent in Swift, just as I was in web technologies before. What I find most satisfying is the ability to have an understanding of the entire app stack, from remote databases to the UI on users’ screens. If you’re considering a switch to iOS development, or vice-versa, I encourage you to take that bold step and embrace the new challenges and experiences that await you. Who knows, it might just be the best decision you’ve ever made!

How we did a 180° and went from web to iOS

Career Switch – From Web to iOS Development

Lea Metličić

Well, we’re now one of just 10 companies from Croatia to join Amazon’s network of worldwide partners.

 Together with AWS, we help clients create innovative cloud solutions. So you see, it’s no small feat! Because Amazon is a world-renowned company, the process was quite exhausting and very rigorous. And before we dive into the deets, we just wanted to let you know that you can take a look at 

The Amazon Web Services Partner Network is a collection of companies, all over the world, that have been verified by Amazon as their official associates and valued users of Amazon Web Services (or AWS for short). Amazon only includes companies that they believe do really high-quality work and would want to work with more frequently, so this is a great nod to us!

What does this partnership tell you about us?

Being one of Amazon’s partners shows that our team is proficient, capable, and qualified enough to get certified. At least one of our teammates had to go through rigorous testing to acquire a certification. The exam they had to pass is three hours long, and the preparations can take months because of how technically challenging it can be. To pass, they had to answer with a 75% accuracy rate, and Amazon even suggests not to take the test if you don’t have at least 2 years of work experience.

Amazon provides little-to-none materials to prep for the test, so all the preparation for the exam has to be independent.

Along with certified team members, Amazon requires that we have at least three projects on which we use AWS and a plan to onboard more clients in the following year.

The certificate gives us full support from Amazon and ensures current and potential clients of our quality of work.

With one professional certificate and nine all together, we’re working on the next one as we speak (or should we say type). Our team has five Foundational certificates, three Associate, and one Professional, and covers all the areas of the Partner Network.

We can’t wait to see what this partnership brings us and all the ways it will help us improve our work!

Howdy partner, Ars Futura is a member of the Amazon Web Services network 👏

We’ve Joined the Amazon Partner Network

Kristian Razum

At the time of writing this, it’s 2023 and most companies are conducting their business online. And, as we know, the Internet is a wonderful place, but full of potential threats. Danger is lurking at every corner and, if you own a business, you should always try to be one step ahead of the “bad actors”.

There are thousands of bots constantly trying to exploit your systems, they never rest (and that’s just one spot where ISO 27001 might come in handy).

For example, if I provision a virtual server with a public IPv4 address, and leave the SSH service running for a week on a default port (without a firewall filtering those requests) there are going to be over a million failed login attempts (dependent on the IP range). Crazy! 

If you want to read more, take a peek at 

So, what can you do to protect yourself and your company? Well, one option is to try and comply with all of the ISO 27001 standards. ISO 27001 is an international information security standard. It shows that your company follows the best security practices. Before we go into it, 

I’ve started implementing ISO 27001 for Ars Futura because we wanted to take security to the next level, and of course, get audited and certified by a team of technical professionals. Our goal was not to just obtain the certification so we could flash it in front of our client’s eyes, but to benefit from the implemented controls in the long run.

This is not my first time implementing ISO 27001 - so I’ve wanted to share some advice and a rundown of what can be expected when taking this path.

Before you even start the certification process, you should nominate somebody internally, a person who will be in charge of the technical implementation of ISO 27001. Try choosing someone who understands security and has extensive knowledge in the IT field, otherwise, you’re risking having security gaps.

The second step is to conduct a “Gap Analysis”. This is crucial because it’s going to show you the weaknesses of your organization. Its intent is to benchmark your current organization state versus the requirements of ISO 27001. There are many 

 that you can use while doing Gap Analysis.

The third step is to identify key missing aspects such as:

How will ISO 27001 compliance help us in the long run?

Implementing an ISO 27001-compliant information security management system (ISMS) has had a number of benefits for our organization. Some of them are:

Overall, implementing an ISO 27001-compliant ISMS has a number of benefits. It has helped us improve the security of our information assets, build trust with our clients, streamline our processes, and improve compliance. Give it a try, you won’t regret it!

We say a
lot about...
everything

Popular Articles

We say alot about...everything

Popular Articles

We say a
lot about...
everything