Storyboard Vs XIB Vs View Code

There are three ways to make your app's UI:

  • Storyboard
  • XIB
  • Code

It is a controversial topic, in which it has advantages and disadvantages, and depending on the case it is good to choose one or the other. I read several reviews on different sites and also express my opinion. The conclusion I show is that it is not about the developer’s programming level but productivity.

Storyboard

When we talk about Storyboard, you remember the speed, agility because when we create a project in Xcode, the project comes with a Storyboard. According to Apple documentation, "Using storyboards is the recommended way to design the user interface of your application because they enable you to visualize the appearance and flow of your user interface on one canvas.". You build the entire prototype in one place, placing its components (button, label), and that is it! It's done.

But we must be careful:

Outlet e Action:

One of the difficulties of using a Storyboard is exactly these references that you should make in the project you need to be considerate so that the links are right, in a case unlike the app can crash.

Screen Shot 2021-02-20 at 15 07 18

Attributes:

The Storyboard, on the other hand, makes it easy to see the application. It has instant feedback such as color change, letter size, etc. However, during a project during which we've not moved for three months, will you remember the changes that happened within the Storyboard or the code? Or when you join a team that already has the app in progress, understanding the code not fast.

Screen Shot 2021-02-20 at 15 21 41

Storyboard Merge Conflicts:

When using version control, we must be careful with Storyboard because there are two views. When working alone and wanting to send our code to git, git merge will not be a problem. The challenge is when there are a lot of people on the same project, and they decide to use the same Storyboard and change the UI components of the screen, there will be a storyboard conflict.

Screen Shot 2021-02-20 at 15 37 45

Auto Layout:

When we create the Auto Layout of the screen, usually one component depends on the other, but in the future, if you have a change of UI of the screen, you will probably spend time to get around this situation.

Some tips:

  1. Instead of using multiple ViewController in Storyboard, divide one viewController for every Storyboard. To make the following link, use the Storyboard reference, so the project will become more readable and arranged.
  2. For building a prototype or a small app, this may be the best option.
  3. Communicate with the team. So you don't have two people using the same Storyboard.

Conclusion:

Many developers and companies do not use Storyboard because it interferes with productivity. We often work in groups, and there will be a Storyboard crash or conflict that can hinder agility when delivering the product.

But looking at it differently, for those starting in iOS development, the Storyboard is the best thing that ever existed, reactive feedback, without the need to memorize names, is perhaps the best way for the beginner app developer.

XIB

XIB stands for XML Interface Builder. It converts to NIB at runtime. XIB is very similar to the Storyboard. You have the option of using only XIB instead of Storyboard, but for that, you need to make some modifications. It has advantages such as:

  • They work as a UIView, which makes componentization easier.
  • Merge conflict may occur to a lesser extent.

To start using XIB instead of Storyboard. It's necessary to configure:

1- Remove name: Main

Screen Shot 2021-02-19 at 19 07 57

2- Remove the Storyboard name at info.plist

Screen Shot 2021-02-19 at 19 09 33

3- Remove the ViewController and Main.storyboard

Screen Shot 2021-02-19 at 19 10 37

4- Create a Cocoa Touch Class

Screen Shot 2021-02-19 at 19 11 51

5- Click on the option to create with XIB

Screen Shot 2021-02-19 at 19 12 26

6- In SceneDelegate add the code

Screen Shot 2021-02-19 at 19 19 38

7- Pay attention that you will have to add the name of the XIB in the NIB

Screen Shot 2021-02-19 at 19 20 10

Observation: Often to use XIB, it will be necessary to use some constructor or function with the nibName parameter.

View Code:

This can be the most difficult or laborious way to make the UI. There are several advantages, more than disadvantages, such as productivity, code organization, clarity, componentization, UI tests, etc.

Problems that had in Storyboard and XIB, such as merge conflict, will not exist because the files are .swift.

Writing programmatically helps to increase speed because we are only dealing with code. There is no conversion behind the scenes, as when using Storyboard and XIB, which use the loadView () function for this conversion. According to Apple, this method loads or creates a view and assigns it to the view's property.

Curiosity is part of the developer. When using XIB or Storyboard, we are limiting the learning of iOS frameworks, because for sure, when developing the UI by code, you will have more contact with the documentation.

Productivity gains when you can do UI programmatically because in the beginning, for those who do not have so much practice. It can be a little complicated. You may be wondering where to put the UI code, how to make the connections. When you can solve these problems, the code will be organized so that anyone who can get into the middle of a project can understand without much effort.

How to start using:

1- Remove name: Main

Screen Shot 2021-02-19 at 19 07 57

2- Remove the Storyboard name at info.plist

Screen Shot 2021-02-19 at 19 09 33

3- Remove the ViewController and Main.storyboard

Screen Shot 2021-02-19 at 19 10 37

4- In SceneDelegate add the code

Screen Shot 2021-02-20 at 18 57 53