Using Xibs
Published: 2021-05-03 21:20:22

*Note: This article is part of the course* **Introduction to iOS using UIKit** *I've given many times in the past. The course was originally in Spanish, and I decided to release it in English so more people can read it and hopefully it will help them.*

# What is a Storyboard?

A Storyboard is one way of using Interface Builder for designing and developing views in iOS. Each Storyboard described one or many screens. Each screen in a Storyboard is linked to a `UIViewController`.
We can navigate between the screens that are designed using Storyboards using **Segues**.
In theory, it isn't required for us to instantiate view controllers manually if we decide to use Storyboards, because the navigation between them and the data that we need to pass between a screen to the next one, is all handled using segues.
In practice, this pattern can result not as intuitive as we want.

# What is a XIB?

A Xib is another way of using Interface Builder for designing and developing view in iOS. **Each Xib describes a single screen.** As in Storyboards, each screen in a Xib is linked to a `UIViewController`.
Navigation between screens are defined outside of the Xib file, by manually instantiating controllers using their `init` method, as we've seen during [the second lesson](https://dev.to/fmo91/introduction-to-swift-part-2-7m0) about Swift.

# Which one are we going to use?

During this course, we'll use Xibs, because of a couple of reasons:

1. It's the most widely used way to develop views in the industry right now.
2. A Xib file loads quicker than a Storyboard in Xcode, because Xib files are much smaller. In a bigger project, with bigger Storyboards, this is even more important.
3. A Xib is commonly placed alongside its Swift counterpart. In a Storyboard, if we're looking for a specific view, this is slightly more inconvenient.
4. Instantiating a controller in code is more intuitive and it's more consistent with other patterns in iOS.

# Base App

When we create a project in Xcode, it's created using Storyboards. Adapting it to use Xibs instead of Storyboards is a boring task that doesn't teach us much.
In order to avoid doing that, you can download [this template from my Github](https://github.com/fmo91/TutorialApp).

**Important:** When you've downloaded it, open `TutorialApp.xcworkspace`.

In order to create a screen:

- Create a folder (group), by right-clicking the group Application and selecting the option **New Group**.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tls3a8cmfglvs5qwlecx.png)

- Inside the new group, right-click and choose **New File...** 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y75rgyw9mzifph111l5z.png)

- Choose **iOS > Cocoa Touch Class**.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06dc7y2pf35re1vq0lne.png)

- Enter a name for the new screen, taking care that it's finished with *ViewController*, and that's a **Subclass of: UIViewController**, and also that the option *Also create XIB file* is checked (and that the language is Swift).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7btgz0d5qg6spqgocg8.png)

- Save it in the default location. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4sanye5l2b5a7dh2e7u.png)

And that's it. We've created our first screen using Xibs instead of Storyboards. In the next tutorials, we'll continue doing this process to create other screens and navigating between them.